diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 119d69f..3a9e7d5 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { useTheme } from "next-themes"
 import { cn } from "@/lib/utils"
@@ -36,7 +36,10 @@ export function Topbar({ onMenuClick }: TopbarProps) {
   const router = useRouter()
   const { theme, setTheme } = useTheme()
   const { user } = useUser()
+  const [mounted, setMounted] = useState(false)
   const [searchOpen, setSearchOpen] = useState(false)
+
+  useEffect(() => { setMounted(true) }, [])
   const initials = user.name.split(" ").map((n) => n[0]).join("")
 
   return (
@@ -73,7 +76,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
           className="text-muted-foreground"
         >
-          {theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          {mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
         </Button>
 
         {/* Notifications */}