diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 6ea67d4..72d65b8 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import { useState } from "react";
 
@@ -42,13 +42,15 @@ export default function ContactPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleApple
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Contact", id: "/contact" },
-        ]}
-        brandName="Vortex"
-      />
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="Vortex"
+        />
+      </div>
 
       <div id="contact" data-section="contact" className="min-h-screen bg-background py-20 px-4">
         <div className="max-w-7xl mx-auto">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a73b1b0..c7d115f 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,12 +1,8 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import "./styles/globals.css";
 
 export const metadata: Metadata = {
-  title: "Vortex Web - Design & Marketing Studio",  description: "Innovative design and marketing solutions for modern brands"
-};
+  title: "Vortex",  description: "Innovative design and marketing solutions for modern brands"};
 
 export default function RootLayout({
   children,
@@ -14,21 +10,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
-        {children}
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-              if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-                document.documentElement.classList.add('dark')
-              } else {
-                document.documentElement.classList.remove('dark')
-              }
-            `,
-          }}
-        />
-      
+    <html lang="en">
+      <body>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a4862a8..18c56e9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ThemeProvider } from "@/components/theme/ThemeProvider";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroLogo from "@/components/sections/hero/HeroLogo";
 
@@ -18,13 +18,15 @@ export default function Home() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleApple
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Contact", id: "/contact" },
-        ]}
-        brandName="Vortex"
-      />
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="Vortex"
+        />
+      </div>
       <div id="hero" data-section="hero">
         <HeroLogo
           logoText="Vortex"
