diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 3682d9f..f6f53fe 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -5,7 +5,6 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Users, Award, TrendingUp } from "lucide-react";
 
 export default function AboutPage() {
   return (
@@ -17,65 +16,46 @@ export default function AboutPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Work", id: "/#work" },
-            { name: "Services", id: "/#services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <MetricSplitMediaAbout
-          title="Crafting Digital Excellence"
-          description="We are a team of passionate designers and developers dedicated to creating impactful digital experiences that help businesses grow and thrive in the modern world."
-          tag="Our Story"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp"
-          metrics={[
-            { value: "8+", title: "Years Experience" },
-            { value: "100+", title: "Successful Projects" },
-            { value: "99%", title: "Client Satisfaction" },
-          ]}
-          className="pt-32"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+          />
+        </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            title="Crafting Digital Excellence"
+            description="We are a team of passionate designers and developers dedicated to creating impactful digital experiences that help businesses grow and thrive in the modern world."
+            tag="Our Story"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp"
+            metrics={[
+              { id: "1", value: "8+", title: "Years Experience", items: [] },
+              { id: "2", value: "100+", title: "Successful Projects", items: [] },
+              { id: "3", value: "99%", title: "Client Satisfaction", items: [] },
+            ]}
+            useInvertedBackground={false}
+            className="pt-32"
+          />
+        </div>
         <FooterBase
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[
-            {
-              title: "Company",              items: [
-                { label: "About", href: "/about" },
-                { label: "Services", href: "/#services" },
-                { label: "Work", href: "/#work" },
-                { label: "Contact", href: "/contact" },
-              ],
-            },
-            {
-              title: "Services",              items: [
-                { label: "Web Development", href: "#" },
-                { label: "SEO", href: "#" },
-                { label: "Branding", href: "#" },
-                { label: "UI/UX Design", href: "#" },
-              ],
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Twitter", href: "#" },
-                { label: "LinkedIn", href: "#" },
-                { label: "Instagram", href: "#" },
-                { label: "Dribbble", href: "#" },
-              ],
-            },
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] }
           ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 4867213..c07fe69 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,7 +3,7 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function ContactPage() {
@@ -16,61 +16,41 @@ export default function ContactPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Work", id: "/#work" },
-            { name: "Services", id: "/#services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <ContactSplit
-          tag="Let's Connect"
-          title="Reach out to us"
-          description="Whether you have a question or are ready to start a new project, we are here to help."
-          background={{ variant: "rotated-rays-animated" }}
-          className="py-32"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp"
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Reach out to us"
+            description="Whether you have a question or are ready to start a new project, we are here to help."
+            inputs={[{ name: "name", type: "text", placeholder: "Your Name" }, { name: "email", type: "email", placeholder: "Your Email" }]}
+            useInvertedBackground={false}
+            className="py-32"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp"
+          />
+        </div>
         <FooterBase
           logoText="Webild"
           copyrightText="© 2026 | Webild"
           columns={[
-            {
-              title: "Company",              items: [
-                { label: "About", href: "/about" },
-                { label: "Services", href: "/#services" },
-                { label: "Work", href: "/#work" },
-                { label: "Contact", href: "/contact" },
-              ],
-            },
-            {
-              title: "Services",              items: [
-                { label: "Web Development", href: "#" },
-                { label: "SEO", href: "#" },
-                { label: "Branding", href: "#" },
-                { label: "UI/UX Design", href: "#" },
-              ],
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Twitter", href: "#" },
-                { label: "LinkedIn", href: "#" },
-                { label: "Instagram", href: "#" },
-                { label: "Dribbble", href: "#" },
-              ],
-            },
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] }
           ]}
         />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/reviews/page.tsx b/src/app/reviews/page.tsx
index 671054e..0882743 100644
--- a/src/app/reviews/page.tsx
+++ b/src/app/reviews/page.tsx
@@ -3,45 +3,53 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
 import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function ReviewsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "/#work" },
-            { name: "Services", id: "/services" },
-            { name: "Reviews", id: "/reviews" },
-            { name: "About", id: "/#about" },
-            { name: "Contact", id: "/#contact" },
-          ]}
-          button={{ text: "Get Started", href: "/#contact" }}
-        />
-        <TestimonialCardSix
-          title="Client Reviews"
-          description="See what our clients say about our local digital services."
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          testimonials={[
-            { id: "1", name: "Maria Santos", handle: "@maria", testimonial: "Transformed our local business presence completely!" },
-            { id: "2", name: "John Doe", handle: "@john", testimonial: "Incredible SEO results within just two months." }
-          ]}
-        />
-        <ContactCTA
-          title="Join our list of happy clients"
-          text="Your business could be next. Reach out today."
-          background={{ variant: "rotated-rays-animated" }}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+          />
+        </div>
+        <div id="reviews" data-section="reviews">
+          <TestimonialCardTen
+            title="Client Reviews"
+            description="See what our clients say about our local digital services."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "1", title: "Great Results", quote: "Transformed our local business presence completely!", name: "Maria Santos", role: "Owner" },
+              { id: "2", title: "Top Tier SEO", quote: "Incredible SEO results within just two months.", name: "John Doe", role: "Manager" }
+            ]}
+          />
+        </div>
         <FooterBase
           logoText="Webild"
+          copyrightText="© 2026 | Webild"
           columns={[
-            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Reviews", href: "/reviews" }] }
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] }
           ]}
         />
       </ReactLenis>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 572c5fa..766cbe0 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,47 +3,56 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FeatureCardTwentyNine from "@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Search, Monitor, Palette } from "lucide-react";
 
 export default function ServicesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "/#work" },
-            { name: "Services", id: "/services" },
-            { name: "Reviews", id: "/reviews" },
-            { name: "About", id: "/#about" },
-            { name: "Contact", id: "/#contact" },
-          ]}
-          button={{ text: "Get Started", href: "/#contact" }}
-        />
-        <FeatureBento
-          title="Our Comprehensive Services"
-          description="We provide end-to-end digital solutions designed to grow your business and improve your local search rankings."
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          features={[
-            { id: "seo", title: "Local SEO Optimization", descriptions: ["Boost your local visibility", "Google Business Profile management", "Local keyword research"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp" },
-            { id: "web", title: "Custom Web Development", descriptions: ["Responsive design", "Fast performance optimization", "SEO-friendly architecture"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp" },
-            { id: "brand", title: "Branding & UI/UX", descriptions: ["Unique visual identities", "User-centric design flows", "Conversion-focused layouts"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp" }
-          ]}
-        />
-        <ContactCTA
-          title="Ready to scale your business?"
-          text="Let's discuss how our services can help you dominate your local market."
-          background={{ variant: "rotated-rays-animated" }}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Services", id: "/services" },
+              { name: "Reviews", id: "/reviews" },
+              { name: "Contact", id: "/contact" },
+            ]}
+          />
+        </div>
+        <div id="services" data-section="services">
+          <FeatureCardTwentyNine
+            title="Our Comprehensive Services"
+            description="We provide end-to-end digital solutions designed to grow your business and improve your local search rankings."
+            textboxLayout="default"
+            useInvertedBackground={false}
+            animationType="slide-up"
+            gridVariant="bento-grid"
+            features={[
+              { title: "Local SEO", description: "Boost your local visibility", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-1.webp", titleIconSrc: "", buttonText: "Learn More" },
+              { title: "Web Development", description: "Custom web solutions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/dev-2.webp", titleIconSrc: "", buttonText: "Learn More" },
+              { title: "Branding", description: "Creative identity design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp", titleIconSrc: "", buttonText: "Learn More" }
+            ]}
+          />
+        </div>
         <FooterBase
           logoText="Webild"
+          copyrightText="© 2026 | Webild"
           columns={[
-            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Reviews", href: "/reviews" }] }
+            { title: "Navigation", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }, { label: "Services", href: "/services" }, { label: "Reviews", href: "/reviews" }, { label: "Contact", href: "/contact" }] }
           ]}
         />
       </ReactLenis>