diff --git a/components/SyncIndicator.tsx b/components/SyncIndicator.tsx
index f9cbb78..d5cf870 100644
--- a/components/SyncIndicator.tsx
+++ b/components/SyncIndicator.tsx
@@ -7,10 +7,17 @@ import { RefreshCw } from 'lucide-react'
  * Visual indicator that shows when the page is syncing
  */
 export default function SyncIndicator() {
+  const [mounted, setMounted] = useState(false)
   const [isSyncing, setIsSyncing] = useState(false)
   const [lastSync, setLastSync] = useState<Date>(new Date())
 
   useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+
     // Listen for router refresh events
     const handleSync = () => {
       setIsSyncing(true)
@@ -34,7 +41,12 @@ export default function SyncIndicator() {
       document.removeEventListener('visibilitychange', handleVisibilityChange)
       clearInterval(interval)
     }
-  }, [])
+  }, [mounted])
+
+  // Don't render on server to avoid hydration mismatch
+  if (!mounted) {
+    return null
+  }
 
   return (
     <div className="fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg shadow-sm text-xs text-gray-600">