diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 976d74e..3b90711 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,41 +1,53 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
-      <ReactLenis root>
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      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">
         <NavbarStyleApple
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
-            { name: "Responsible Gaming", id: "/responsible-gaming" },
-            { name: "Contact", id: "#contact" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Contact", id: "/contact" }
           ]}
           brandName="Swift Haul"
         />
-        <div style={{ paddingTop: "100px", paddingBottom: "100px" }}>
-          <SplitAbout
-            title="About Swift Haul"
-            description="Learn more about our mission to provide the most reliable trucking services in the industry."
-            bulletPoints={[]}
-            textboxLayout="default"
-            useInvertedBackground={false}
-          />
-        </div>
+      </div>
+      <div id="about" data-section="about">
+        <SplitAbout
+          title="About Swift Haul"
+          description="Learn more about our mission to provide the most reliable trucking services in the industry."
+          bulletPoints={[]}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+      <div id="footer" data-section="footer">
         <FooterBaseReveal
           logoText="Swift Haul"
           columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Responsible Gaming", href: "/responsible-gaming" }] },
-            { title: "Support", items: [{ label: "Contact", href: "/" }, { label: "Privacy Policy", href: "#" }] },
+            { title: "Company", items: [{ label: "About", href: "/about" }] },
+            { title: "Support", items: [{ label: "Contact", href: "/contact" }] },
           ]}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 0974178..835ac11 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,17 +1,35 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 
 export default function DashboardPage() {
   return (
-    <ThemeProvider borderRadius="soft" contentWidth="medium">
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Account", id: "/dashboard"}]} brandName="Swift Haul" />
-      <div className="pt-32">
-        <MetricCardSeven 
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      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">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="metrics" data-section="metrics">
+        <MetricCardTwo 
           title="Your Dashboard"
-          metrics={[{id: "1", value: "$12,450", title: "Pending Payouts", items: ["Direct Deposit"]}]}
+          metrics={[{id: "1", value: "$12,450", description: "Pending Payouts"}]}
+          gridVariant="uniform-all-items-equal"
           animationType="blur-reveal"
+          textboxLayout="default"
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index bde11be..9b04ea4 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -10,15 +10,27 @@ export default function LoginPage() {
       defaultTextAnimation="reveal-blur"
       borderRadius="soft"
       contentWidth="medium"
+      sizing="medium"
       background="noiseDiagonalGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}, {name: "Login", id: "/login"}]} brandName="Swift Haul" />
-      <div className="pt-32">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="contact" data-section="contact">
         <ContactSplit 
           tag="Access"
           title="Login to Your Account"
           description="Manage your fleet and track your shipments."
           background={{ variant: "gradient-bars" }}
+          useInvertedBackground={false}
+          mediaAnimation="blur-reveal"
           inputPlaceholder="Enter your email"
           buttonText="Login"
         />
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index f69b53e..1c05ac8 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -5,10 +5,30 @@ import LegalSection from '@/components/legal/LegalSection';
 
 export default function PrivacyPage() {
   return (
-    <ThemeProvider borderRadius="soft">
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}]} brandName="Swift Haul" />
-      <div className="pt-32">
-        <LegalSection layout="page" title="Privacy Policy" sections={[{heading: "Data", content: {type: "paragraph", text: "We protect your data."}}]} />
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      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">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="legal" data-section="legal">
+        <LegalSection 
+            layout="page" 
+            title="Privacy Policy" 
+            sections={[{heading: "Data", content: {type: "paragraph", text: "We protect your data."}}]} 
+        />
       </div>
     </ThemeProvider>
   );
diff --git a/src/app/responsible-gaming/page.tsx b/src/app/responsible-gaming/page.tsx
index 80e91ab..14983d7 100644
--- a/src/app/responsible-gaming/page.tsx
+++ b/src/app/responsible-gaming/page.tsx
@@ -1,41 +1,53 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import LegalSection from '@/components/legal/LegalSection';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 export default function ResponsibleGamingPage() {
   return (
-    <ThemeProvider>
-      <ReactLenis root>
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      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">
         <NavbarStyleApple
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
-            { name: "Responsible Gaming", id: "/responsible-gaming" },
-            { name: "Contact", id: "#contact" },
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Contact", id: "/contact" },
           ]}
           brandName="Swift Haul"
         />
-        <div style={{ paddingTop: "100px", paddingBottom: "100px" }}>
-            <LegalSection
-                layout="page"
-                title="Responsible Gaming"
-                sections={[
-                    { heading: "Our Commitment", content: { type: "paragraph", text: "At Swift Haul, we prioritize safety and integrity in everything we do." } }
-                ]}
-            />
-        </div>
+      </div>
+      <div id="legal" data-section="legal">
+        <LegalSection
+            layout="page"
+            title="Responsible Gaming"
+            sections={[
+                { heading: "Our Commitment", content: { type: "paragraph", text: "At Swift Haul, we prioritize safety and integrity in everything we do." } }
+            ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
         <FooterBaseReveal
           logoText="Swift Haul"
           columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Responsible Gaming", href: "/responsible-gaming" }] },
-            { title: "Support", items: [{ label: "Contact", href: "/" }, { label: "Privacy Policy", href: "#" }] },
+            { title: "Company", items: [{ label: "About", href: "/about" }] },
+            { title: "Support", items: [{ label: "Contact", href: "/contact" }] },
           ]}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
index f6b785a..33b1ff6 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -5,10 +5,30 @@ import LegalSection from '@/components/legal/LegalSection';
 
 export default function TermsPage() {
   return (
-    <ThemeProvider borderRadius="soft">
-      <NavbarStyleApple navItems={[{name: "Home", id: "/"}]} brandName="Swift Haul" />
-      <div className="pt-32">
-        <LegalSection layout="page" title="Terms of Service" sections={[{heading: "Usage", content: {type: "paragraph", text: "By using our services, you agree to these terms."}}]} />
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      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">
+        <NavbarStyleApple 
+          navItems={[{name: "Home", id: "/"}, {name: "About", id: "/about"}, {name: "Dashboard", id: "/dashboard"}, {name: "Contact", id: "/contact"}]} 
+          brandName="Swift Haul" 
+        />
+      </div>
+      <div id="legal" data-section="legal">
+        <LegalSection 
+            layout="page" 
+            title="Terms of Service" 
+            sections={[{heading: "Usage", content: {type: "paragraph", text: "By using our services, you agree to these terms."}}]} 
+        />
       </div>
     </ThemeProvider>
   );