diff --git a/src/app/donor-profile/page.tsx b/src/app/donor-profile/page.tsx
index 12ee15a..a3ca979 100644
--- a/src/app/donor-profile/page.tsx
+++ b/src/app/donor-profile/page.tsx
@@ -1,20 +1,29 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import { Shield, Users, Activity } from 'lucide-react';
 
 export default function DonorProfile() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Register", id: "/donor-registration" }, { name: "Profile", id: "/donor-profile" }, { name: "Request", id: "/patient-request" }]} 
-        brandName="LifeBlood" 
-      />
-      <MetricCardFourteen
-        title="Your Donor Profile"
-        tag="Welcome"
-        metrics={[{id: "1", value: "3", description: "Lives Saved"}, {id: "2", value: "1", description: "Recent Donation"}]}
-      />
+    <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">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "Register", id: "/donor-registration" }, { name: "Profile", id: "/donor-profile" }, { name: "Request", id: "/patient-request" }]} 
+          brandName="LifeBlood"
+          button={{ text: "Logout", href: "/" }}
+        />
+      </div>
+      <div id="metrics" data-section="metrics">
+        <MetricCardThree
+          title="Your Donor Profile"
+          description="Welcome back to your dashboard."
+          metrics={[{ id: "1", icon: Activity, title: "Lives Saved", value: "3" }, { id: "2", icon: Users, title: "Recent Donation", value: "1" }]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/donor-registration/page.tsx b/src/app/donor-registration/page.tsx
index 1a70e4b..3b70701 100644
--- a/src/app/donor-registration/page.tsx
+++ b/src/app/donor-registration/page.tsx
@@ -5,17 +5,22 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function DonorRegistration() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Register", id: "/donor-registration" }, { name: "Profile", id: "/donor-profile" }, { name: "Request", id: "/patient-request" }]} 
-        brandName="LifeBlood" 
-      />
-      <ContactSplitForm 
-        title="Donor Registration" 
-        description="Join our life-saving community by registering as a donor."
-        inputs={[{name: "fullname", type: "text", placeholder: "Full Name"}, {name: "bloodtype", type: "text", placeholder: "Blood Type"}]}
-        useInvertedBackground={false}
-      />
+    <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">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "Register", id: "/donor-registration" }, { name: "Profile", id: "/donor-profile" }, { name: "Request", id: "/patient-request" }]} 
+          brandName="LifeBlood"
+          button={{ text: "Get Started", href: "/donor-registration" }}
+        />
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactSplitForm 
+          title="Donor Registration" 
+          description="Join our life-saving community by registering as a donor."
+          inputs={[{name: "fullname", type: "text", placeholder: "Full Name"}, {name: "bloodtype", type: "text", placeholder: "Blood Type"}]}
+          useInvertedBackground={false}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/facilities/page.tsx b/src/app/facilities/page.tsx
index b3ffd14..307fd4b 100644
--- a/src/app/facilities/page.tsx
+++ b/src/app/facilities/page.tsx
@@ -1,33 +1,31 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function FacilitiesPage() {
   return (
-    <ThemeProvider>
-      <ReactLenis root>
+    <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">
         <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Facilities", id: "/facilities" },
-            { name: "Inventory", id: "/inventory" },
-            { name: "Schedule", id: "/schedule" },
-          ]}
+          navItems={[{ name: "Home", id: "/" }, { name: "Facilities", id: "/facilities" }, { name: "Inventory", id: "/inventory" }, { name: "Schedule", id: "/schedule" }]}
           brandName="LifeBlood"
+          button={{ text: "Account", href: "/" }}
         />
+      </div>
+      <div id="content" data-section="content">
         <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
           <h1 className="text-4xl font-bold mb-8">Hospital & Facility Management</h1>
           <p className="text-lg text-muted-foreground">Manage partner hospitals, track facility capacity, and oversee regional distribution networks.</p>
         </main>
+      </div>
+      <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="LifeBlood"
           leftLink={{ text: "Privacy Policy", href: "#" }}
           rightLink={{ text: "Contact Support", href: "mailto:support@lifeblood.com" }}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/inventory/page.tsx b/src/app/inventory/page.tsx
index f577a83..6e20f0d 100644
--- a/src/app/inventory/page.tsx
+++ b/src/app/inventory/page.tsx
@@ -1,33 +1,31 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function InventoryPage() {
   return (
-    <ThemeProvider>
-      <ReactLenis root>
+    <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">
         <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Facilities", id: "/facilities" },
-            { name: "Inventory", id: "/inventory" },
-            { name: "Schedule", id: "/schedule" },
-          ]}
+          navItems={[{ name: "Home", id: "/" }, { name: "Facilities", id: "/facilities" }, { name: "Inventory", id: "/inventory" }, { name: "Schedule", id: "/schedule" }]}
           brandName="LifeBlood"
+          button={{ text: "Account", href: "/" }}
         />
+      </div>
+      <div id="content" data-section="content">
         <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
           <h1 className="text-4xl font-bold mb-8">Blood Inventory Dashboard</h1>
           <p className="text-lg text-muted-foreground">Monitor real-time blood supply levels, blood types availability, and stock alerts.</p>
         </main>
+      </div>
+      <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="LifeBlood"
           leftLink={{ text: "Privacy Policy", href: "#" }}
           rightLink={{ text: "Contact Support", href: "mailto:support@lifeblood.com" }}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/patient-request/page.tsx b/src/app/patient-request/page.tsx
index 8bbec6b..0300a6c 100644
--- a/src/app/patient-request/page.tsx
+++ b/src/app/patient-request/page.tsx
@@ -5,17 +5,22 @@ import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function PatientRequest() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingInline
-        navItems={[{ name: "Home", id: "/" }, { name: "Register", id: "/donor-registration" }, { name: "Profile", id: "/donor-profile" }, { name: "Request", id: "/patient-request" }]} 
-        brandName="LifeBlood" 
-      />
-      <ContactSplitForm 
-        title="Patient Blood Request" 
-        description="Hospitals can request urgent blood supplies here."
-        inputs={[{name: "hospital", type: "text", placeholder: "Hospital Name"}, {name: "type", type: "text", placeholder: "Required Blood Type"}]}
-        useInvertedBackground={false}
-      />
+    <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">
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }, { name: "Register", id: "/donor-registration" }, { name: "Profile", id: "/donor-profile" }, { name: "Request", id: "/patient-request" }]} 
+          brandName="LifeBlood"
+          button={{ text: "Submit Request", href: "/patient-request" }}
+        />
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactSplitForm 
+          title="Patient Blood Request" 
+          description="Hospitals can request urgent blood supplies here."
+          inputs={[{name: "hospital", type: "text", placeholder: "Hospital Name"}, {name: "type", type: "text", placeholder: "Required Blood Type"}]}
+          useInvertedBackground={false}
+        />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/schedule/page.tsx b/src/app/schedule/page.tsx
index a5c5b34..8fe944c 100644
--- a/src/app/schedule/page.tsx
+++ b/src/app/schedule/page.tsx
@@ -1,33 +1,31 @@
 "use client";
-
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function SchedulePage() {
   return (
-    <ThemeProvider>
-      <ReactLenis root>
+    <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">
         <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Facilities", id: "/facilities" },
-            { name: "Inventory", id: "/inventory" },
-            { name: "Schedule", id: "/schedule" },
-          ]}
+          navItems={[{ name: "Home", id: "/" }, { name: "Facilities", id: "/facilities" }, { name: "Inventory", id: "/inventory" }, { name: "Schedule", id: "/schedule" }]}
           brandName="LifeBlood"
+          button={{ text: "Account", href: "/" }}
         />
+      </div>
+      <div id="content" data-section="content">
         <main className="pt-32 pb-20 px-6 max-w-7xl mx-auto min-h-screen">
           <h1 className="text-4xl font-bold mb-8">Donation Scheduling</h1>
           <p className="text-lg text-muted-foreground">Easily book, reschedule, or cancel donation appointments at your preferred local clinics.</p>
         </main>
+      </div>
+      <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="LifeBlood"
           leftLink={{ text: "Privacy Policy", href: "#" }}
           rightLink={{ text: "Contact Support", href: "mailto:support@lifeblood.com" }}
         />
-      </ReactLenis>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file