diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 9b74972a36..624fc3a82c 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -19,12 +19,21 @@ import ModeToggle from 'components/ModeToggle'
 import NavButton from 'components/NavButton'
 import NavDropdown from 'components/NavDropDown'
 import UserMenu from 'components/UserMenu'
+import { useTheme } from 'next-themes'
 
 export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthEnabled: boolean }) {
   const pathname = usePathname()
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen)
 
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+  const logoSrc = mounted && resolvedTheme === 'light' ? '/img/logo_light.png' : '/img/logo_dark.png'
+
   useEffect(() => {
     const handleResize = () => {
       if (globalThis.innerWidth >= desktopViewMinWidth) {
@@ -70,7 +79,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
                 width={64}
                 height={64}
                 priority={true}
-                src={'/img/logo_dark.png'}
+                src={logoSrc}
                 className="h-full w-auto object-contain"
                 alt="OWASP Logo"
               />
@@ -167,7 +176,7 @@ export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthE
                     width={64}
                     height={64}
                     priority={true}
-                    src={'/img/logo_dark.png'}
+                    src={logoSrc}
                     className="h-full w-auto object-contain"
                     alt="OWASP Logo"
                   />