diff --git a/public/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg b/public/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
new file mode 100644
index 0000000..cb9ef5e
--- /dev/null
+++ b/public/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M484-80q-84 0-157.5-32t-128-86.5Q144-253 112-326.5T80-484q0-146 93-257.5T410-880q-18 99 11 193.5T521-521q71 71 165.5 100T880-410q-26 144-138 237T484-80Zm0-80q88 0 163-44t118-121q-86-8-163-43.5T464-465q-61-61-97-138t-43-163q-77 43-120.5 118.5T160-484q0 135 94.5 229.5T484-160Zm-20-305Z"/></svg>
\ No newline at end of file
diff --git a/public/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg b/public/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
new file mode 100644
index 0000000..a229aa4
--- /dev/null
+++ b/public/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M440-800v-120h80v120h-80Zm0 760v-120h80v120h-80Zm360-400v-80h120v80H800Zm-760 0v-80h120v80H40Zm708-252-56-56 70-72 58 58-72 70ZM198-140l-58-58 72-70 56 56-70 72Zm564 0-70-72 56-56 72 70-58 58ZM212-692l-72-70 58-58 70 72-56 56Zm98 382q-70-70-70-170t70-170q70-70 170-70t170 70q70 70 70 170t-70 170q-70 70-170 70t-170-70Zm283.5-56.5Q640-413 640-480t-46.5-113.5Q547-640 480-640t-113.5 46.5Q320-547 320-480t46.5 113.5Q413-320 480-320t113.5-46.5ZM480-480Z"/></svg>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 5732ece..18c74f3 100644
--- a/public/style.css
+++ b/public/style.css
@@ -280,12 +280,18 @@
   .table {
     display: table;
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-\[60px\] {
     height: 60px;
   }
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-full {
     width: 100%;
   }
@@ -368,9 +374,6 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
-  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
@@ -583,13 +586,6 @@
       }
     }
   }
-  .hover\:bg-gray-300 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-gray-300);
-      }
-    }
-  }
   .hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -775,15 +771,6 @@
       }
     }
   }
-  .dark\:hover\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-gray-600);
-        }
-      }
-    }
-  }
   .dark\:hover\:text-\[\#dadadb\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
diff --git a/src/theme.rs b/src/theme.rs
index 0b5e291..5d871b2 100644
--- a/src/theme.rs
+++ b/src/theme.rs
@@ -73,12 +73,20 @@ pub fn ThemeToggle() -> Element {
 
     rsx! {
         button {
-            class: "theme-toggle p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors",
+            class: "theme-toggle p-2 rounded-full hover:opacity-80 transition-opacity",
             onclick: move |_| theme.set(theme().toggle()),
             if theme() == Theme::Dark {
-                "🌙"
+                img {
+                    src: "/icons/bedtime_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg",
+                    alt: "Dark mode",
+                    class: "w-6 h-6",
+                }
             } else {
-                "☀️"
+                img {
+                    src: "/icons/wb_sunny_24dp_E3E3E3_FILL0_wght400_GRAD0_opsz24.svg",
+                    alt: "Light mode",
+                    class: "w-6 h-6",
+                }
             }
         }
     }