diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 375a6a0..f05b31a 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -4,51 +4,70 @@ import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
-import TeamCardFive from "@/components/sections/team/TeamCardFive";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import { Award, Users, TrendingUp } from "lucide-react";
+import TeamCardSix from "@/components/sections/team/TeamCardSix";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 
 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
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "/" },
-            { name: "Services", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <MetricSplitMediaAbout
-          title="Our Agency Story"
-          description="We began with a passion for digital craftsmanship, growing into an agency that helps ambitious brands define their future."
-          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: "Projects Completed" },
-            { value: "99%", title: "Client Satisfaction" },
-          ]}
-          useInvertedBackground={false}
-        />
-        <TeamCardFive
-          title="The Team"
-          description="The creative minds behind every pixel."
-          memberVariant="default"
-          team={[
-            { id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp" },
-            { id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp" },
-            { id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp" },
-          ]}
-        />
-        <FooterBase
-          logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+              { name: "Services", id: "/services" },
+            ]}
+          />
+        </div>
+        <div id="about-hero" data-section="about-hero">
+          <MetricSplitMediaAbout
+            title="Our Agency Story"
+            description="We began with a passion for digital craftsmanship, growing into an agency that helps ambitious brands define their future."
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp"
+            metrics={[
+              { id: "m1", value: "8+", title: "Years Experience", items: ["Strategic design", "Digital growth"] },
+              { id: "m2", value: "100+", title: "Projects", items: ["Global brands", "Innovative tech"] },
+            ]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="team" data-section="team">
+          <TeamCardSix
+            title="The Team"
+            description="The creative minds behind every pixel."
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            members={[
+              { id: "1", name: "Sarah Miller", role: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-1.webp" },
+              { id: "2", name: "Valentina Reyes", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-2.webp" },
+              { id: "3", name: "Carlos Mendoza", role: "UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/team-3.webp" },
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Company", items: [{ 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 311a4c6..8c3de80 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,39 +1,53 @@
 "use client";
 
-import { useState } from "react";
 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 FooterBase from "@/components/sections/footer/FooterBase";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 
 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: "Work", id: "/" },
-            { name: "Services", id: "/" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <ContactSplit
-          tag="Contact"
-          title="Let's Build Something Great"
-          description="Tell us about your project goals and we will reach out shortly."
-          background={{ variant: "rotated-rays-animated" }}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp"
-        />
-        <FooterBase
-          logoText="Webild"
-          columns={[
-            { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+              { name: "Services", id: "/services" },
+            ]}
+          />
+        </div>
+        <div id="contact-form" data-section="contact-form">
+          <ContactCenter
+            tag="Contact"
+            title="Let's Build Something Great"
+            description="Tell us about your project goals and we will reach out shortly."
+            background={{ variant: "rotated-rays-animated" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );