diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 84139e6..5f1b149 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -6,44 +6,66 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
 import AboutMetric from "@/components/sections/about/AboutMetric";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Zap, Users, Award, TrendingUp } from "lucide-react";
+import { Zap, Users, Award } from "lucide-react";
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Work", id: "work" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <AboutMetric
-          title="About Our Agency"
-          metrics={[
-            { icon: Award, label: "Industry Experience", value: "8+ Years" },
-            { icon: Users, label: "Happy Clients", value: "100+" },
-            { icon: Zap, label: "Projects Completed", value: "250+" },
-          ]}
-          metricsAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-        <ContactCTA
-          tag="Work With Us"
-          title="Let's Create Something Great"
-          description="We are always looking for new challenges. Contact us to start your next project."
-          buttons={[{ text: "Get in Touch", href: "/contact" }]}
-        />
-        <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: "Shop", id: "/shop" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="about" data-section="about">
+          <AboutMetric
+            title="About Our Agency"
+            metrics={[
+              { id: "1", icon: Award, label: "Industry Experience", value: "8+ Years" },
+              { id: "2", icon: Users, label: "Happy Clients", value: "100+" },
+              { id: "3", icon: Zap, label: "Projects Completed", value: "250+" },
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="cta" data-section="cta">
+          <ContactCTA
+            tag="Work With Us"
+            title="Let's Create Something Great"
+            description="We are always looking for new challenges. Contact us to start your next project."
+            buttons={[{ text: "Get in Touch", href: "/contact" }]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            columns={[
+              { title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] }
+            ]}
+            copyrightText="© 2026 | Webild"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );