diff --git a/src/Header/Component.client.tsx b/src/Header/Component.client.tsx
index e9a4f93..e9d29d5 100644
--- a/src/Header/Component.client.tsx
+++ b/src/Header/Component.client.tsx
@@ -5,20 +5,43 @@ import { usePathname } from 'next/navigation'
 import React, { useEffect, useState } from 'react'
 
 import type { Header } from '@/payload-types'
-
 import { Logo } from '@/components/Logo/Logo'
 import { HeaderNav } from './Nav'
 import { useThemeMode } from '@/hooks/useThemeMode'
-import { Container } from '@/components/ui/Container' // Import your custom container
+import { Container } from '@/components/ui/Container'
 
-// ... ToggleButton component remains the same ...
+// 1. DEFINE THIS COMPONENT INSIDE THE FILE
+function ToggleButton() {
+  const { isDark, toggle } = useThemeMode()
+  return (
+    <button
+      onClick={toggle}
+      className="flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs transition-all"
+      style={{
+        border: isDark ? '1px solid rgba(255,255,255,0.2)' : '1px solid rgba(0,0,0,0.15)',
+        color: isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.6)',
+        background: 'transparent',
+        cursor: 'pointer',
+      }}
+    >
+      {isDark ? '☀ Light' : '☾ Dark'}
+    </button>
+  )
+}
 
-export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
+// 2. NOW HeaderClient CAN SEE ToggleButton
+export const HeaderClient: React.FC<{ data: Header }> = ({ data }) => {
   const [theme, setTheme] = useState<string | null>(null)
   const { headerTheme, setHeaderTheme } = useHeaderTheme()
   const pathname = usePathname()
 
-  // ... useEffect hooks remain the same ...
+  useEffect(() => {
+    setHeaderTheme(null)
+  }, [pathname, setHeaderTheme])
+
+  useEffect(() => {
+    if (headerTheme && headerTheme !== theme) setTheme(headerTheme)
+  }, [headerTheme, theme])
 
   return (
     <header