diff --git a/src/components/layout/ThemeToggle.tsx b/src/components/layout/ThemeToggle.tsx
index 615a5e5..39da47b 100644
--- a/src/components/layout/ThemeToggle.tsx
+++ b/src/components/layout/ThemeToggle.tsx
@@ -1,9 +1,15 @@
 'use client';
 
 import { useTheme } from '@/contexts/ThemeContext';
+import { useState, useEffect } from 'react';
 
 export function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   return (
     <button
@@ -11,7 +17,7 @@ export function ThemeToggle() {
       className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
       aria-label="Toggle theme"
     >
-      {theme === 'light' ? '🌙' : '☀️'}
+      {mounted ? (theme === 'light' ? '🌙' : '☀️') : <span className="h-5 w-5" />}
     </button>
   );
 }