diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index ae3120a..c45f372 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,37 +2,38 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import ReactLenis from "lenis/react";
 
 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
-          brandName="Webild"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Work", id: "/work" },
-            { name: "Testimonials", id: "/testimonials" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <ContactCenter
-          tag="Contact Us"
-          title="Let's Connect"
-          description="We'd love to hear about your next project. Drop us a line below."
-          background={{ variant: "canvas-reveal" }}
-        />
-        <FooterBase
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Products", id: "/products" },
+              { name: "Services", id: "/services-about" },
+              { name: "Testimonials", id: "/testimonials" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Webild"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactText
+            text="We'd love to hear about your next project. Drop us a line below."
+            background={{ variant: "canvas-reveal" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <FooterLogoEmphasis
           logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "Home", href: "/" }, { label: "Testimonials", href: "/testimonials" }, { label: "Contact", href: "/contact" }] },
-          ]}
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Contact", href: "/contact" }] }]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index 9040c6f..f75f025 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -2,40 +2,44 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ProductCardThree from "@/components/sections/product/ProductCardThree";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import ReactLenis from "lenis/react";
 
 export default function ProductsPage() {
   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
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
             navItems={[
-                { name: "Work", id: "work" },
-                { name: "Services", id: "services" },
-                { name: "About", id: "about" },
-                { name: "Contact", id: "contact" },
-                { name: "Products", id: "/products" },
-                { name: "Services Info", id: "/services-about" },
+              { name: "Home", id: "/" },
+              { name: "Products", id: "/products" },
+              { name: "Services", id: "/services-about" },
+              { name: "Testimonials", id: "/testimonials" },
+              { name: "Contact", id: "/contact" },
             ]}
-        />
-        <ProductCardThree
+            brandName="Webild"
+          />
+        </div>
+        <div id="products" data-section="products">
+          <ProductCardTwo
             title="Our Products"
             description="Explore our curated collection of digital tools and templates."
             gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             products={[
-                { id: "p1", name: "UI Kit Pro", price: "$99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
-                { id: "p2", name: "Design System", price: "$149", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
-                { id: "p3", name: "Mobile Template", price: "$79", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp" },
-                { id: "p4", name: "Dashboard UI", price: "$199", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-4.webp" },
+              { id: "p1", brand: "Webild", name: "UI Kit Pro", price: "$99", rating: 5, reviewCount: "10", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" },
+              { id: "p2", brand: "Webild", name: "Design System", price: "$149", rating: 5, reviewCount: "20", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp" },
+              { id: "p3", brand: "Webild", name: "Mobile Template", price: "$79", rating: 4, reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp" },
             ]}
-        />
-        <FooterBase
-            logoText="Webild"
-            columns={[]}
+          />
+        </div>
+        <FooterLogoEmphasis
+          logoText="Webild"
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Products", href: "/products" }] }]}
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/services-about/page.tsx b/src/app/services-about/page.tsx
index f7895af..d9ffd5f 100644
--- a/src/app/services-about/page.tsx
+++ b/src/app/services-about/page.tsx
@@ -3,39 +3,35 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import ReactLenis from "lenis/react";
 
 export default function ServicesAboutPage() {
   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
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
             navItems={[
-                { name: "Work", id: "work" },
-                { name: "Services", id: "services" },
-                { name: "About", id: "about" },
-                { name: "Contact", id: "contact" },
-                { name: "Products", id: "/products" },
-                { name: "Services Info", id: "/services-about" },
+              { name: "Home", id: "/" },
+              { name: "Products", id: "/products" },
+              { name: "Services", id: "/services-about" },
+              { name: "Testimonials", id: "/testimonials" },
+              { name: "Contact", id: "/contact" },
             ]}
-        />
-        <TextSplitAbout
+            brandName="Webild"
+          />
+        </div>
+        <div id="about" data-section="about">
+          <TextSplitAbout
             title="Our Story"
-            description={["Founded in 2018, Webild began with a simple mission: to empower businesses with high-impact digital solutions.", "Our diverse team of experts is dedicated to pushing creative boundaries and delivering exceptional results that drive growth."]}
-        />
-        <FeatureBento
-            title="Services Overview"
-            description="Expertise across the digital spectrum."
-            textboxLayout="default"
+            description={["Founded in 2018, Webild began with a simple mission.", "Our diverse team is dedicated to pushing creative boundaries."]}
             useInvertedBackground={false}
-            animationType="slide-up"
-            features={[]}
-        />
-        <FooterBase
-            logoText="Webild"
-            columns={[]}
+          />
+        </div>
+        <FooterLogoEmphasis
+          logoText="Webild"
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services-about" }] }]}
         />
       </ReactLenis>
     </ThemeProvider>
diff --git a/src/app/testimonials/page.tsx b/src/app/testimonials/page.tsx
index 628759e..aa1847c 100644
--- a/src/app/testimonials/page.tsx
+++ b/src/app/testimonials/page.tsx
@@ -2,41 +2,45 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import FooterBase from "@/components/sections/footer/FooterBase";
+import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import ReactLenis from "lenis/react";
 
 export default function TestimonialsPage() {
   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
-          brandName="Webild"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Work", id: "/work" },
-            { name: "Testimonials", id: "/testimonials" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <TestimonialCardTwo
-          title="Client Reviews"
-          description="See what our clients have to say about working with us."
-          textboxLayout="default"
-          animationType="slide-up"
-          testimonials={[
-            { id: "1", name: "Maria Santos", role: "CEO", testimonial: "Transformed our business." },
-            { id: "2", name: "John Doe", role: "Manager", testimonial: "Fantastic service and results." },
-          ]}
-        />
-        <FooterBase
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Products", id: "/products" },
+              { name: "Services", id: "/services-about" },
+              { name: "Testimonials", id: "/testimonials" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="Webild"
+          />
+        </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardThirteen
+            title="Client Reviews"
+            description="See what our clients have to say about working with us."
+            textboxLayout="default"
+            animationType="slide-up"
+            showRating={true}
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", name: "Maria Santos", handle: "@maria", testimonial: "Transformed our business.", rating: 5 },
+              { id: "2", name: "John Doe", handle: "@john", testimonial: "Fantastic service and results.", rating: 5 },
+            ]}
+          />
+        </div>
+        <FooterLogoEmphasis
           logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "Home", href: "/" }, { label: "Testimonials", href: "/testimonials" }, { label: "Contact", href: "/contact" }] },
-          ]}
+          columns={[{ items: [{ label: "Home", href: "/" }, { label: "Testimonials", href: "/testimonials" }] }]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file