diff --git a/src/app/page.tsx b/src/app/page.tsx
index 48c88dd..68c5c28 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ThemeProvider } from "next-themes";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 
 export default function Home() {
@@ -10,10 +10,6 @@ export default function Home() {
 
   return (
     <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
@@ -25,7 +21,9 @@ export default function Home() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered navItems={navItems} brandName="Webild" />
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered navItems={navItems} brandName="Webild" />
+      </div>
       <main>
         {/* Content sections will be added here based on user selections */}
       </main>