diff --git a/static/js/main.js b/static/js/main.js
index 9057b2d..b92a3e2 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -22,10 +22,14 @@ function switchTheme() {
   console.log("called")
   let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light';
   if (current_theme === 'dark') {
-    localStorage.theme = 'light'
-    document.documentElement.classList.remove('dark')
+    localStorage.theme = 'light';
+    document.documentElement.classList.remove('dark');
+    document.getElementById('dark').add('hidden');
+    document.getElementById('light').remove('hidden');
   } else {
-    localStorage.theme = 'dark'
-    document.documentElement.classList.add('dark')
+    localStorage.theme = 'dark';
+    document.documentElement.classList.add('dark');
+    document.getElementById('light').remove('hidden');
+    document.getElementById('dark').add('hidden');
   }
 }
diff --git a/templates/layout.html b/templates/layout.html
index 7a0e141..e8b3ca6 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -62,11 +62,11 @@
         <button id="switch-theme" type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
           <span class="sr-only">Switch Theme</span>
           <!-- Heroicon name: outline/light -->
-          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <svg id="light" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
           </svg>
           <!-- Heroicon name: outline/dark -->
-          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <svg id="dark" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
           </svg>
         </button>