diff --git a/app/layout.tsx b/app/layout.tsx
index 2c4dddc..ab81637 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -45,8 +45,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="scroll-smooth">
-      <body className={`${inter.variable} ${outfit.variable} antialiased`}>
+    <html lang="en" className="scroll-smooth relative">
+      <body className={`${inter.variable} ${outfit.variable} antialiased relative`}>
         {children}
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 6b9ef3d..2b7b415 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -92,7 +92,7 @@ const territories = [
 ];
 
 export default function Home() {
-  const heroRef = useRef(null);
+  const heroRef = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
     target: heroRef,
     offset: ["start start", "end start"],
@@ -106,10 +106,8 @@ export default function Home() {
       <Navigation />
 
       {/* Hero Section */}
-      <section
-        ref={heroRef}
-        className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-neutral-50 to-white dark:from-neutral-950 dark:to-neutral-900"
-      >
+      <div ref={heroRef} className="relative">
+        <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-neutral-50 to-white dark:from-neutral-950 dark:to-neutral-900">
         {/* Animated background elements */}
         <div className="absolute inset-0 overflow-hidden">
           <motion.div
@@ -259,7 +257,8 @@ export default function Home() {
             </motion.div>
           </motion.div>
         </motion.div>
-      </section>
+        </section>
+      </div>
 
       {/* Stats Section */}
       <section className="relative py-20 bg-neutral-900 dark:bg-neutral-950 overflow-hidden">
