diff --git a/components/OfflineIndicator.tsx b/components/OfflineIndicator.tsx
index 9c05ac5..ce06fb8 100644
--- a/components/OfflineIndicator.tsx
+++ b/components/OfflineIndicator.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import { useOfflineSync } from '@/hooks'
 import { WifiOff, Wifi, RefreshCw, AlertCircle } from 'lucide-react'
 
@@ -9,8 +10,18 @@ import { WifiOff, Wifi, RefreshCw, AlertCircle } from 'lucide-react'
  * Validates: Requirements 4.5
  */
 export default function OfflineIndicator() {
+  const [mounted, setMounted] = useState(false)
   const { isOnline, isSyncing, syncError, queueLength, triggerSync } = useOfflineSync()
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Don't render on server to avoid hydration mismatch
+  if (!mounted) {
+    return null
+  }
+
   // Don't show anything if online and no pending syncs
   if (isOnline && queueLength === 0 && !syncError) {
     return null