diff --git a/frontend/__tests__/unit/components/ScrollToTop.test.tsx b/frontend/__tests__/unit/components/ScrollToTop.test.tsx
index df05b06bef..7fb79c728d 100644
--- a/frontend/__tests__/unit/components/ScrollToTop.test.tsx
+++ b/frontend/__tests__/unit/components/ScrollToTop.test.tsx
@@ -27,6 +27,12 @@ describe('ScrollToTop component test', () => {
     Object.defineProperty(globalThis, 'scrollY', { value: 400, writable: true })
     globalThis.dispatchEvent(new Event('scroll'))
 
+    Object.defineProperty(globalThis, 'scrollY', {
+      value: 500,
+      writable: true,
+    })
+    globalThis.dispatchEvent(new Event('scroll'))
+
     await waitFor(() => {
       expect(button).toHaveClass('opacity-100')
       expect(button).toHaveClass('pointer-events-auto')
diff --git a/frontend/__tests__/unit/pages/Header.test.tsx b/frontend/__tests__/unit/pages/Header.test.tsx
index 4b51138a5b..485901f184 100644
--- a/frontend/__tests__/unit/pages/Header.test.tsx
+++ b/frontend/__tests__/unit/pages/Header.test.tsx
@@ -261,7 +261,7 @@ describe('Header Component', () => {
       expect(logoImages.length).toBe(2)
 
       for (const logo of logoImages) {
-        expect(logo).toHaveAttribute('src', '/img/logo_dark.png')
+        expect(logo).toHaveAttribute('src', '/img/logo_light.png')
         expect(logo).toBeInTheDocument()
       }
     })
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 3b800e73aa..d7f249c16a 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -3,6 +3,7 @@ import { Button } from '@heroui/button'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 import {
   FaRegHeart,
@@ -22,7 +23,16 @@ import UserMenu from 'components/UserMenu'
 
 export default function Header({ isGitHubAuthEnabled }: { readonly isGitHubAuthEnabled: boolean }) {
   const pathname = usePathname()
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const logoSrc = mounted && resolvedTheme === 'dark' ? '/img/logo_dark.png' : '/img/logo_light.png'
+
   const toggleMobileMenu = () => setMobileMenuOpen(!mobileMenuOpen)
 
   useEffect(() => {
@@ -70,7 +80,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 +177,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"
                   />