diff --git a/src/app/appointment/page.tsx b/src/app/appointment/page.tsx
index 4316f61..754c461 100644
--- a/src/app/appointment/page.tsx
+++ b/src/app/appointment/page.tsx
@@ -2,26 +2,27 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function AppointmentPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Doctors", id: "/doctors" },
-            { name: "Book Appointment", id: "/appointment" },
-          ]}
-          brandName="Regensyn"
-        />
-        <ContactSplit 
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Doctors", id: "/doctors" }, { name: "Book Appointment", id: "/appointment" }]} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm 
             title="Book Your Appointment"
             description="Schedule your secure video consultation with one of our specialists."
-            tag="Booking"
-        />
+            useInvertedBackground={false}
+            inputs={[
+              { name: "name", type: "text", placeholder: "Full Name", required: true },
+              { name: "email", type: "email", placeholder: "Email Address", required: true }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/doctors/page.tsx b/src/app/doctors/page.tsx
index 849f504..23f8c2f 100644
--- a/src/app/doctors/page.tsx
+++ b/src/app/doctors/page.tsx
@@ -2,32 +2,28 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TeamCardSix from '@/components/sections/team/TeamCardSix';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TeamCardTen from '@/components/sections/team/TeamCardTen';
 
 export default function DoctorsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Doctors", id: "/doctors" },
-            { name: "Book Appointment", id: "/appointment" },
-          ]}
-          brandName="Regensyn"
-        />
-        <TeamCardSix 
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Doctors", id: "/doctors" }, { name: "Book Appointment", id: "/appointment" }]} />
+        </div>
+        <div id="team" data-section="team">
+          <TeamCardTen 
             title="Meet Our Medical Experts"
-            description="Top-rated specialists ready to assist you via telemedicine."
-            gridVariant="asymmetric-60-wide-40-narrow"
-            animationType="slide-up"
-            textboxLayout="default"
+            tag="Specialists"
+            memberVariant="card"
+            useInvertedBackground={false}
             members={[
-                { id: "1", name: "Dr. Alice Smith", role: "General Practitioner" },
-                { id: "2", name: "Dr. Robert Chen", role: "Cardiologist" }
+              { id: "1", name: "Dr. Alice Smith" },
+              { id: "2", name: "Dr. Robert Chen" }
             ]}
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
index 94214a6..2bd728f 100644
--- a/src/app/pricing/page.tsx
+++ b/src/app/pricing/page.tsx
@@ -1,23 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 
 export default function PricingPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/pricing" }]} brandName="Regensyn" />
-      <div className="pt-24">
-        <PricingCardTwo
+    <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">
+        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/pricing" }]} />
+      </div>
+      <div id="pricing" data-section="pricing">
+        <PricingCardNine
           title="Flexible Subscription Plans"
           description="Choose the plan that fits your health needs"
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="slide-up"
           plans={[
-            { id: "p1", badge: "Essential", price: "$49/mo", subtitle: "Basic care", features: ["24/7 Urgent Care", "Prescription refills"], buttons: [{ text: "Get Started" }] },
-            { id: "p2", badge: "Premium", price: "$99/mo", subtitle: "Comprehensive", features: ["Everything in Essential", "Specialist access", "Mental health included"], buttons: [{ text: "Upgrade Now" }] }
+            { id: "p1", title: "Essential", price: "$49", period: "/mo", features: ["24/7 Urgent Care", "Prescription refills"], button: { text: "Get Started" } },
+            { id: "p2", title: "Premium", price: "$99", period: "/mo", features: ["Everything in Essential", "Specialist access", "Mental health included"], button: { text: "Upgrade Now" } }
           ]}
         />
       </div>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 903a932..577c553 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -1,25 +1,26 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
-      <NavbarLayoutFloatingOverlay navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/pricing" }]} brandName="Regensyn" />
-      <div className="pt-24">
-        <FeatureCardThree
+    <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">
+        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/pricing" }]} />
+      </div>
+      <div id="features" data-section="features">
+        <FeatureCardTwentyFour
           title="Telemedicine Services"
           description="Comprehensive virtual care solutions"
           textboxLayout="default"
           useInvertedBackground={false}
-          gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           features={[
-            { id: "s1", title: "General Consultation", description: "Talk to a licensed physician 24/7", imageSrc: "" },
-            { id: "s2", title: "Specialist Access", description: "Connect with top specialists remotely", imageSrc: "" },
-            { id: "s3", title: "Mental Health", description: "Confidential therapy sessions", imageSrc: "" }
+            { id: "s1", title: "General Consultation", author: "Dr. Smith", description: "Talk to a licensed physician 24/7", tags: ["Virtual"] },
+            { id: "s2", title: "Specialist Access", author: "Dr. Chen", description: "Connect with top specialists remotely", tags: ["Specialist"] },
+            { id: "s3", title: "Mental Health", author: "Dr. Doe", description: "Confidential therapy sessions", tags: ["Therapy"] }
           ]}
         />
       </div>