diff --git a/src/components/HeroBackground.tsx b/src/components/HeroBackground.tsx
index cbad082..c1442f3 100644
--- a/src/components/HeroBackground.tsx
+++ b/src/components/HeroBackground.tsx
@@ -1,6 +1,7 @@
 "use client";
-
-import { useEffect, useRef, useState } from "react";
+import { useThemeMode } from '@/hooks/useThemeMode'
+// REPLACE WITH:
+import { useEffect, useRef } from "react";
 
 const STAR_TONES = [255, 210, 160, 110, 65];
 const WAVE_TONES = [55, 90, 125, 165, 205];
@@ -125,16 +126,17 @@ export default function HeroBackground({
   showToggle = true,
 }: HeroBackgroundProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [internalDark, setInternalDark] = useState(true);
+// REPLACE WITH:
+const { isDark: hookDark, toggle } = useThemeMode();
 
-  // Use external control if provided, otherwise internal state
-  const isDark = externalIsDark !== undefined ? externalIsDark : internalDark;
+// Use external control if provided, otherwise hook
+const isDark = externalIsDark !== undefined ? externalIsDark : hookDark;
 
-  function handleToggle() {
-    const next = !isDark;
-    setInternalDark(next);
-    onToggle?.(next);
-  }
+// REPLACE WITH:
+function handleToggle() {
+  toggle();
+  onToggle?.(!isDark);
+}
 
   useEffect(() => {
     const canvas = canvasRef.current;