diff --git a/index.html b/index.html
index 54b4c7c..35b2b33 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,8 @@
   <div class="container">
     <div class="sidebar">
       <div class="searchbar-container">
-        <img id="reverse-icon" src="path/to/first.svg">
+        <img id="reverse-icon-asc" src="./src/assets/sort-from-bottom-to-top.svg">
+        <img id="reverse-icon-desc" src="./src/assets/sort-from-top-to-bottom.svg">
         <input type="text" name="note-search" id="note-searchbar" placeholder="Search...">
       </div>
       <div class="note-sidebar-container" id="note-sidebar-container">
diff --git a/src/main.ts b/src/main.ts
index 9005723..a495b1b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -186,12 +186,17 @@ window.addEventListener("DOMContentLoaded", async () => {
 
   // sidebar reverse toggle
 
-  let reverseIconEl = document.querySelector('#reverse-icon') as HTMLImageElement | null;
-  if (reverseIconEl) {
-    reverseIconEl.src = reversed ? 'src/assets/sort-from-bottom-to-top.svg' : 'src/assets/sort-from-top-to-bottom.svg';
-    reverseIconEl.addEventListener("click", () => {
-      toggleReverse(reverseIconEl as HTMLImageElement);
-    })
+  let reverseIconAscEl = document.querySelector('#reverse-icon-asc') as HTMLImageElement | null;
+  let reverseIconDescEl = document.querySelector('#reverse-icon-desc') as HTMLImageElement | null;
+  if (reverseIconAscEl && reverseIconDescEl) {
+    reverseIconDescEl.style.display = "none";
+
+    const toggle = () => {
+      toggleReverse(reverseIconAscEl as HTMLImageElement, reverseIconDescEl as HTMLImageElement);
+    };
+
+    reverseIconAscEl.addEventListener("click", toggle);
+    reverseIconDescEl.addEventListener("click", toggle);
   }
 
   // auto-save timer
@@ -560,13 +565,17 @@ async function refreshSidebarAndOpenLatestNote() {
   openNote(latestNote);
 }
 
-function toggleReverse(reverseIconEl: HTMLImageElement | null) {
+function toggleReverse(reverseIconAscEl: HTMLImageElement | null, reverseIconDescEl: HTMLImageElement | null) {
   reversed = !reversed;
 
-  if (reverseIconEl) {
-    reversed ? reverseIconEl.src = 'src/assets/sort-from-bottom-to-top.svg' : reverseIconEl.src = 'src/assets/sort-from-top-to-bottom.svg';
-  } else {
-    console.error("failed to get reverseIconEl");
+  if (reverseIconAscEl && reverseIconDescEl) {
+    if (reverseIconAscEl.style.display !== 'none') {
+      reverseIconAscEl.style.display = 'none';
+      reverseIconDescEl.style.display = 'block';
+    } else {
+      reverseIconAscEl.style.display = 'block';
+      reverseIconDescEl.style.display = 'none';
+    }
   }
 
   showNotes();
diff --git a/src/styles.css b/src/styles.css
index 0f2cfaf..4273cc2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -211,7 +211,23 @@ button {
   text-overflow: ellipsis;
 }
 
-#reverse-icon {
+#reverse-icon-asc {
+  display: blocK;
+
+  width: 1.5em;
+  height: 1.5em;
+
+  color: white;
+
+  cursor: pointer;
+
+  margin-right: 1.5em;
+  margin-left: -0.8em;
+}
+
+#reverse-icon-desc {
+  display: none;
+
   width: 1.5em;
   height: 1.5em;