diff --git a/src/app/page.tsx b/src/app/page.tsx
index 36d2121..f753b92 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ThemeProvider } from "@/components/ThemeProvider";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 
 export default function Home() {
@@ -17,16 +17,18 @@ export default function Home() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "#about" },
-          { name: "Services", id: "#services" },
-          { name: "Contact", id: "#contact" },
-        ]}
-        button={{ text: "Get Started", href: "#contact" }}
-        brandName="BUBUNIBBLE"
-      />
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "#about" },
+            { name: "Services", id: "#services" },
+            { name: "Contact", id: "#contact" },
+          ]}
+          button={{ text: "Get Started", href: "#contact" }}
+          brandName="BUBUNIBBLE"
+        />
+      </div>
       <main>
         <div id="home" data-section="home" className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
           <div className="text-center px-4">