diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 05dcdcc..0df0b90 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -5,15 +5,17 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 
 export default function PatientDashboard() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Dashboard", id: "/dashboard" },
-          { name: "Logout", id: "/" },
-        ]}
-        brandName="MediConnect"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Logout", id: "/" },
+          ]}
+          brandName="MediConnect"
+        />
+      </div>
       <div className="min-h-screen pt-24 p-8">
         <h1 className="text-4xl font-bold mb-6">Patient Dashboard</h1>
         <p>Welcome to your health portal. Here you can view your prescriptions and upcoming appointments.</p>
diff --git a/src/app/doctor-dashboard/page.tsx b/src/app/doctor-dashboard/page.tsx
index dc26a8d..7265d8b 100644
--- a/src/app/doctor-dashboard/page.tsx
+++ b/src/app/doctor-dashboard/page.tsx
@@ -7,14 +7,16 @@ import { Calendar, Users, FileText } from "lucide-react";
 
 export default function DoctorDashboardPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Logout", id: "/" },
-        ]}
-        brandName="MediConnect"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Logout", id: "/" },
+          ]}
+          brandName="MediConnect"
+        />
+      </div>
       <div className="pt-32 pb-20">
         <FeatureBorderGlow
           title="Doctor Dashboard"
diff --git a/src/app/doctor-login/page.tsx b/src/app/doctor-login/page.tsx
index c6feedf..1a67482 100644
--- a/src/app/doctor-login/page.tsx
+++ b/src/app/doctor-login/page.tsx
@@ -6,14 +6,16 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function DoctorLoginPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Register", id: "/doctor-register" },
-        ]}
-        brandName="MediConnect"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Register", id: "/doctor-register" },
+          ]}
+          brandName="MediConnect"
+        />
+      </div>
       <ContactSplitForm
         title="Doctor Login"
         description="Access your secure doctor dashboard."
diff --git a/src/app/doctor-register/page.tsx b/src/app/doctor-register/page.tsx
index e517196..9259abc 100644
--- a/src/app/doctor-register/page.tsx
+++ b/src/app/doctor-register/page.tsx
@@ -6,14 +6,16 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function DoctorRegisterPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Login", id: "/doctor-login" },
-        ]}
-        brandName="MediConnect"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Login", id: "/doctor-login" },
+          ]}
+          brandName="MediConnect"
+        />
+      </div>
       <ContactSplitForm
         title="Doctor Registration"
         description="Join our network of healthcare professionals."
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 13159e6..f683f1f 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -6,23 +6,24 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 
 export default function LoginPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/#about" },
-          { name: "Services", id: "/#features" },
-          { name: "Register", id: "/register" },
-          { name: "Login", id: "/login" },
-        ]}
-        brandName="MediConnect"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Register", id: "/register" },
+            { name: "Login", id: "/login" },
+          ]}
+          brandName="MediConnect"
+        />
+      </div>
       <div className="min-h-screen pt-24 flex items-center justify-center">
         <ContactForm
           title="Patient Login"
           description="Sign in to your secure portal."
           tag="Login"
           buttonText="Login"
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 1024574..4b42076 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -6,23 +6,24 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 
 export default function RegisterPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "About", id: "/#about" },
-          { name: "Services", id: "/#features" },
-          { name: "Register", id: "/register" },
-          { name: "Login", id: "/login" },
-        ]}
-        brandName="MediConnect"
-      />
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Register", id: "/register" },
+            { name: "Login", id: "/login" },
+          ]}
+          brandName="MediConnect"
+        />
+      </div>
       <div className="min-h-screen pt-24 flex items-center justify-center">
         <ContactForm
           title="Create Patient Account"
           description="Join MediConnect to manage your health and prescriptions."
           tag="Registration"
           buttonText="Create Account"
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>