diff --git a/apps/web/src/components/AppNavBar.tsx b/apps/web/src/components/AppNavBar.tsx
index 2d6593da..0d7cade2 100644
--- a/apps/web/src/components/AppNavBar.tsx
+++ b/apps/web/src/components/AppNavBar.tsx
@@ -18,11 +18,12 @@ export function AppNavBar({ variant = 'full' }: AppNavBarProps) {
   const isGamePage = pathname?.startsWith('/games')
   const isArcadePage = pathname?.startsWith('/arcade')
   const { isFullscreen, toggleFullscreen, exitFullscreen } = useFullscreen()
-  const { theme: gameTheme } = useGameTheme()
+  const { theme: gameTheme, isHydrated } = useGameTheme()
 
   // Helper function to get themed background colors
   const getThemedBackground = (opacity: number = 0.85) => {
-    if (gameTheme?.backgroundColor) {
+    // Only apply theming after hydration to prevent SSR/client mismatch
+    if (isHydrated && gameTheme?.backgroundColor) {
       const color = gameTheme.backgroundColor
       if (color.startsWith('#')) {
         // Convert hex to rgba
@@ -103,7 +104,7 @@ export function AppNavBar({ variant = 'full' }: AppNavBarProps) {
                 backgroundClip: 'text',
                 color: 'transparent'
               })}>
-                🕹️ {gameTheme?.gameName || (isArcadePage ? 'Arcade' : 'Game')}
+                🕹️ {(isHydrated && gameTheme?.gameName) || (isArcadePage ? 'Arcade' : 'Game')}
               </h1>
               <div className={css({
                 px: '2',
diff --git a/apps/web/src/contexts/GameThemeContext.tsx b/apps/web/src/contexts/GameThemeContext.tsx
index bfaf1ca3..c992e0af 100644
--- a/apps/web/src/contexts/GameThemeContext.tsx
+++ b/apps/web/src/contexts/GameThemeContext.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, useContext, useState, ReactNode } from 'react'
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
 
 export interface GameTheme {
   gameName: string
@@ -10,15 +10,21 @@ export interface GameTheme {
 interface GameThemeContextType {
   theme: GameTheme | null
   setTheme: (theme: GameTheme | null) => void
+  isHydrated: boolean
 }
 
 const GameThemeContext = createContext<GameThemeContextType | undefined>(undefined)
 
 export function GameThemeProvider({ children }: { children: ReactNode }) {
   const [theme, setTheme] = useState<GameTheme | null>(null)
+  const [isHydrated, setIsHydrated] = useState(false)
+
+  useEffect(() => {
+    setIsHydrated(true)
+  }, [])
 
   return (
-    <GameThemeContext.Provider value={{ theme, setTheme }}>
+    <GameThemeContext.Provider value={{ theme, setTheme, isHydrated }}>
       {children}
     </GameThemeContext.Provider>
   )