diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index c798c6e..d8bd082 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,9 +3,8 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Cake, Users, Award } from "lucide-react";
 
 const navLinks = [
   { name: "Home", id: "/" },
@@ -16,23 +15,23 @@ const navLinks = [
 
 export default function AboutPage() {
   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={navLinks} brandName="Sheescakes'N More" />
-        <AboutMetric
-          title="Our Bakery Story"
-          metrics={[
-            { icon: Cake, label: "Treats Baked", value: "5000+" },
-            { icon: Users, label: "Happy Customers", value: "2000+" },
-            { icon: Award, label: "Years of Passion", value: "10+" }
-          ]}
-          metricsAnimation="blur-reveal"
-          useInvertedBackground={false}
-        />
-        <FooterBaseReveal
-          logoText="Sheescakes'N More"
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={navLinks} />
+        </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            heading={[{ type: 'text', content: "Our Bakery Story" }]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Sheescakes'N More"
+            columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 5bffefa..99e25f1 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 const navLinks = [
@@ -15,20 +15,25 @@ const navLinks = [
 
 export default function ContactPage() {
   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={navLinks} brandName="Sheescakes'N More" />
-        <ContactSplitForm
-          title="Get in Touch"
-          description="Have questions or want to place a custom order? Reach out to us!"
-          inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }]}
-          textarea={{ name: "message", placeholder: "How can we help you?", rows: 4 }}
-        />
-        <FooterBaseReveal
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={navLinks} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplit
+            title="Get in Touch"
+            description="Have questions or want to place a custom order? Reach out to us!"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
             logoText="Sheescakes'N More"
             columns={[{ title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Order", href: "/order" }, { label: "Contact", href: "/contact" }] }]}
             copyrightText="© 2024 Sheescakes'N More."
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index 8b84e45..2cbe7bf 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -15,25 +15,32 @@ const navLinks = [
 
 export default function MenuPage() {
   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={navLinks} brandName="Sheescakes'N More" />
-        <ProductCardThree
-          title="Our Sweet Creations"
-          description="Indulge in our selection of freshly baked desserts, from signature cheesecakes to artisan cupcakes."
-          gridVariant="bento-grid"
-          animationType="slide-up"
-          textboxLayout="split"
-          products={[
-            { id: "1", name: "Signature Strawberry Cheesecake", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" },
-            { id: "2", name: "Double Chocolate Cupcakes", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" },
-            { id: "3", name: "Vanilla Bean Tart", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" }
-          ]}
-        />
-        <FooterBaseReveal
-          logoText="Sheescakes'N More"
-          columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={navLinks} />
+        </div>
+        <div id="menu" data-section="menu">
+          <ProductCardThree
+            title="Our Sweet Creations"
+            description="Indulge in our selection of freshly baked desserts, from signature cheesecakes to artisan cupcakes."
+            gridVariant="bento-grid"
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            products={[
+              { id: "1", name: "Signature Strawberry Cheesecake", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" },
+              { id: "2", name: "Double Chocolate Cupcakes", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" },
+              { id: "3", name: "Vanilla Bean Tart", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Sheescakes'N More"
+            columns={[{ title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx
index db56c49..0a528e8 100644
--- a/src/app/order/page.tsx
+++ b/src/app/order/page.tsx
@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
 const navLinks = [
@@ -15,24 +15,33 @@ const navLinks = [
 
 export default function OrderPage() {
   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={navLinks} brandName="Sheescakes'N More" />
-        <ProductCardTwo
-          title="Our Menu"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          textboxLayout="default"
-          products={[
-            { id: "1", brand: "Classic", name: "New York Cheesecake", price: "$25.00", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" },
-            { id: "2", brand: "Specialty", name: "Cupcake Box", price: "$15.00", rating: 4, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/delicious-cupcakes-display_23-2148766164.jpg?_wi=1" }
-          ]}
-        />
-        <FooterBaseReveal
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay navItems={navLinks} />
+        </div>
+        <div id="order" data-section="order">
+          <ProductCardThree
+            title="Our Menu"
+            description="Select your favorite items from our bakery selection."
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+              { id: "1", name: "New York Cheesecake", price: "$25.00", imageSrc: "http://img.b2bpic.net/free-photo/waitress-holding-cake_23-2147821281.jpg?_wi=1" },
+              { id: "2", name: "Cupcake Box", price: "$15.00", imageSrc: "http://img.b2bpic.net/free-photo/delicious-cupcakes-display_23-2148766164.jpg?_wi=1" },
+              { id: "3", name: "Macaron Assortment", price: "$20.00", imageSrc: "http://img.b2bpic.net/free-photo/delicious-cupcakes-display_23-2148766164.jpg?_wi=1" }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
             logoText="Sheescakes'N More"
             columns={[{ title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Order", href: "/order" }, { label: "Contact", href: "/contact" }] }]}
             copyrightText="© 2024 Sheescakes'N More."
-        />
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );