diff --git a/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx b/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx
index f4ead0137..b2bd0f920 100644
--- a/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx
+++ b/src/app/(frontend)/(cloud)/cloud/_components/CloudFooter/index.tsx
@@ -8,7 +8,6 @@ import { ThemeDarkIcon } from '@root/graphics/ThemeDarkIcon/index'
 import { ThemeLightIcon } from '@root/graphics/ThemeLightIcon/index'
 import { ChevronUpDownIcon } from '@root/icons/ChevronUpDownIcon/index'
 import { useAuth } from '@root/providers/Auth/index'
-import { useHeaderObserver } from '@root/providers/HeaderIntersectionObserver/index'
 import { useThemePreference } from '@root/providers/Theme/index'
 import { getImplicitPreference, themeLocalStorageKey } from '@root/providers/Theme/shared'
 import Link from 'next/link'
@@ -22,19 +21,16 @@ export const CloudFooter = () => {
   const selectRef = React.useRef<HTMLSelectElement>(null)
   const themeId = useId()
   const { setTheme } = useThemePreference()
-  const { setHeaderTheme } = useHeaderObserver()
 
   const onThemeChange = (themeToSet: 'auto' & Theme) => {
     if (themeToSet === 'auto') {
       const implicitPreference = getImplicitPreference() ?? 'light'
-      setHeaderTheme(implicitPreference)
       setTheme(implicitPreference)
       if (selectRef.current) {
         selectRef.current.value = 'auto'
       }
     } else {
       setTheme(themeToSet)
-      setHeaderTheme(themeToSet)
     }
   }
 
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index b1b2636eb..a21e5ff24 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -21,7 +21,6 @@ import { ThemeLightIcon } from '@root/graphics/ThemeLightIcon/index'
 import { TwitterIconAlt } from '@root/graphics/TwitterIconAlt/index'
 import { YoutubeIcon } from '@root/graphics/YoutubeIcon/index'
 import { ChevronUpDownIcon } from '@root/icons/ChevronUpDownIcon/index'
-import { useHeaderObserver } from '@root/providers/HeaderIntersectionObserver/index'
 import { useThemePreference } from '@root/providers/Theme/index'
 import { getImplicitPreference, themeLocalStorageKey } from '@root/providers/Theme/shared'
 import { usePathname, useRouter } from 'next/navigation'
@@ -33,21 +32,18 @@ export const Footer: React.FC<FooterType> = (props) => {
   const { columns } = props
   const [products, developers, company] = columns ?? []
   const { setTheme } = useThemePreference()
-  const { setHeaderTheme } = useHeaderObserver()
   const wrapperRef = React.useRef<HTMLElement>(null)
   const selectRef = React.useRef<HTMLSelectElement>(null)
 
   const onThemeChange = (themeToSet: 'auto' & Theme) => {
     if (themeToSet === 'auto') {
       const implicitPreference = getImplicitPreference() ?? 'light'
-      setHeaderTheme(implicitPreference)
       setTheme(implicitPreference)
       if (selectRef.current) {
         selectRef.current.value = 'auto'
       }
     } else {
       setTheme(themeToSet)
-      setHeaderTheme(themeToSet)
     }
   }
 
diff --git a/src/providers/HeaderIntersectionObserver/index.tsx b/src/providers/HeaderIntersectionObserver/index.tsx
index 8eee9f25f..c0a746bc7 100644
--- a/src/providers/HeaderIntersectionObserver/index.tsx
+++ b/src/providers/HeaderIntersectionObserver/index.tsx
@@ -101,7 +101,7 @@ export const HeaderIntersectionObserver: React.FC<HeaderIntersectionObserverProp
 
   React.useEffect(() => {
     setHeaderTheme(theme)
-  }, [pathname])
+  }, [pathname, theme])
 
   return (
     <Context