diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1e7b3e8..51a05f6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,7 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Dental Care Davao",  description: "Modern dental care you can trust"};
+  title: "Dental Care Davao",  description: "Modern dental care you can trust"
+};
 
 export default function RootLayout({
   children,
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7b033b9..55ad2d2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,25 +11,25 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { Award, Shield } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 export default function LandingPage() {
   const [isScrolled, setIsScrolled] = useState(false);
-  const [heroHeight, setHeroHeight] = useState(0);
+  const heroHeightRef = useRef(0);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > heroHeight);
-    };
-
     const heroElement = document.getElementById('hero');
     if (heroElement) {
-      setHeroHeight(heroElement.offsetHeight);
+      heroHeightRef.current = heroElement.offsetHeight;
     }
 
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > heroHeightRef.current);
+    };
+
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, [heroHeight]);
+  }, []);
 
   return (
     <ThemeProvider