diff --git a/src/app/ai-chat/page.tsx b/src/app/ai-chat/page.tsx
index aef9aed..05de877 100644
--- a/src/app/ai-chat/page.tsx
+++ b/src/app/ai-chat/page.tsx
@@ -2,14 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import React from "react";
 
 export default function AIChatPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay 
-        navItems={[{ name: "Home", id: "/" }, { name: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
-        brandName="Student Life Helper"
-      />
+    <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: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
+          brandName="Student Life Helper"
+        />
+      </div>
       <main className="pt-32 pb-20 container mx-auto px-6 text-center">
         <h1 className="text-4xl font-bold mb-6">AI Chatbot</h1>
         <p className="text-lg text-muted-foreground">Get instant academic assistance from our AI.</p>
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index a155829..a20c16c 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -4,25 +4,26 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
 import React from "react";
-import { BookOpen, Calendar, Settings } from "lucide-react";
 
 export default function DashboardPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Dashboard", id: "/dashboard" },
-          { name: "Logout", id: "/" }
-        ]}
-        brandName="Student Life Helper"
-      />
+    <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="Student Life Helper"
+        />
+      </div>
       <div className="pt-32 pb-20">
         <MetricCardTen
             title="Student Dashboard"
             description="Manage your academic progress and tools."
             animationType="slide-up"
-            textboxLayout="centered"
+            textboxLayout="default"
             metrics={[
                 { id: "tasks", title: "Active Tasks", subtitle: "5 remaining", category: "Organization", value: "85%", buttons: [{ text: "View Tasks" }] },
                 { id: "calendar", title: "Upcoming Exams", subtitle: "Next: Math Final", category: "Schedule", value: "3", buttons: [{ text: "View Schedule" }] },
diff --git a/src/app/files/page.tsx b/src/app/files/page.tsx
index fbc8dbc..dad012e 100644
--- a/src/app/files/page.tsx
+++ b/src/app/files/page.tsx
@@ -2,14 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import React from "react";
 
 export default function FileManagementPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay 
-        navItems={[{ name: "Home", id: "/" }, { name: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
-        brandName="Student Life Helper"
-      />
+    <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: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
+          brandName="Student Life Helper"
+        />
+      </div>
       <main className="pt-32 pb-20 container mx-auto px-6 text-center">
         <h1 className="text-4xl font-bold mb-6">File Management</h1>
         <p className="text-lg text-muted-foreground">Organize your study materials and documents.</p>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 0768641..308c12e 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -2,26 +2,30 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import React from "react";
 
 export default function LoginPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Dashboard", id: "/dashboard" },
-          { name: "Register", id: "/register" }
-        ]}
-        brandName="Student Life Helper"
-      />
+    <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: "Register", id: "/register" }
+          ]}
+          brandName="Student Life Helper"
+        />
+      </div>
       <div className="pt-32 pb-20">
-        <ContactCenter
+        <ContactCTA
             tag="Login"
             title="Welcome Back"
             description="Sign in to your academic hub."
-            buttonText="Login"
+            buttons={[{ text: "Login" }]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/planner/page.tsx b/src/app/planner/page.tsx
index 1c62852..2345a51 100644
--- a/src/app/planner/page.tsx
+++ b/src/app/planner/page.tsx
@@ -2,14 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import React from "react";
 
 export default function DailyPlannerPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay 
-        navItems={[{ name: "Home", id: "/" }, { name: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
-        brandName="Student Life Helper"
-      />
+    <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: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
+          brandName="Student Life Helper"
+        />
+      </div>
       <main className="pt-32 pb-20 container mx-auto px-6 text-center">
         <h1 className="text-4xl font-bold mb-6">Daily Planner</h1>
         <p className="text-lg text-muted-foreground">Manage your daily schedule and study hours here.</p>
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 4b3f7db..cf6af83 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -2,26 +2,30 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import React from "react";
 
 export default function RegisterPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Dashboard", id: "/dashboard" },
-          { name: "Login", id: "/login" }
-        ]}
-        brandName="Student Life Helper"
-      />
+    <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: "Login", id: "/login" }
+          ]}
+          brandName="Student Life Helper"
+        />
+      </div>
       <div className="pt-32 pb-20">
-        <ContactCenter
+        <ContactCTA
             tag="Register"
             title="Create your account"
             description="Start your journey to organized studying."
-            buttonText="Create Account"
+            buttons={[{ text: "Create Account" }]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/tasks/page.tsx b/src/app/tasks/page.tsx
index 2aa5aa7..a3965ae 100644
--- a/src/app/tasks/page.tsx
+++ b/src/app/tasks/page.tsx
@@ -2,14 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import React from "react";
 
 export default function TaskListPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay 
-        navItems={[{ name: "Home", id: "/" }, { name: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
-        brandName="Student Life Helper"
-      />
+    <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: "Planner", id: "/planner" }, { name: "Tasks", id: "/tasks" }, { name: "Files", id: "/files" }, { name: "AI Chat", id: "/ai-chat" }]}
+          brandName="Student Life Helper"
+        />
+      </div>
       <main className="pt-32 pb-20 container mx-auto px-6 text-center">
         <h1 className="text-4xl font-bold mb-6">Task List</h1>
         <p className="text-lg text-muted-foreground">Stay on top of your assignments and deadlines.</p>