diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index e9de019..a63a6eb 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -6,7 +6,7 @@
   aria-label="Toggle theme"
 >
   <svg 
-    class="w-5 h-5 absolute transition-transform duration-500" 
+    class="w-5 h-5 absolute transition-transform duration-500 opacity-0" 
     data-theme-icon="light"
     xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 24 24" 
@@ -27,7 +27,7 @@
     <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
   </svg>
   <svg 
-    class="w-5 h-5 absolute transition-transform duration-500" 
+    class="w-5 h-5 absolute transition-transform duration-500 opacity-0" 
     data-theme-icon="dark"
     xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 24 24" 
@@ -53,11 +53,11 @@
     const darkIcon = document.querySelector('[data-theme-icon="dark"]');
     
     if (theme === 'light') {
-      lightIcon?.classList.remove('translate-y-full');
-      darkIcon?.classList.add('translate-y-full');
+      lightIcon?.classList.remove('opacity-0');
+      darkIcon?.classList.add('opacity-0');
     } else {
-      lightIcon?.classList.add('translate-y-full');
-      darkIcon?.classList.remove('translate-y-full');
+      lightIcon?.classList.add('opacity-0');
+      darkIcon?.classList.remove('opacity-0');
     }
   };