diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 6516e9c..7d4cc45 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,22 +3,20 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import AboutMetric from '@/components/sections/about/AboutMetric';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Award, Rocket, Smile } from "lucide-react";
 
 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>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/#pricing" }, { name: "Contact", id: "/#contact" }]} brandName="Proof Digital" />
-        <MetricSplitMediaAbout 
+        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/#pricing" }, { name: "Contact", id: "/#contact" }]} />
+        <AboutMetric 
           title="Our Mission at Proof Digital" 
-          description="We exist to bridge the gap for small and medium-sized businesses (SMBs) that lack a strong online presence. We believe that every business deserves a professional web presence to compete in today's digital landscape, and we make that happen."
-          metrics={[{ value: "150+", title: "Projects Completed" }, { value: "98%", title: "Happy Clients" }, { value: "10+", title: "Years Experience" }]}
-          useInvertedBackground={false}
-          mediaAnimation="slide-up"
+          metrics={[{ id: "m1", icon: Rocket, label: "Projects Completed", value: "150+" }, { id: "m2", icon: Smile, label: "Happy Clients", value: "98%" }, { id: "m3", icon: Award, label: "Years Experience", value: "10+" }]}
           metricsAnimation="slide-up"
+          useInvertedBackground={false}
         />
         <FooterSimple columns={[{ title: "Proof Digital", items: [{ label: "About Us", href: "/about" }, { label: "Services", href: "/services" }] }, { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }]} bottomLeftText="© 2024 Proof Digital. All rights reserved." bottomRightText="Built by Proof Digital" />
       </ReactLenis>
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 5618f79..d39e95a 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,25 +3,24 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function ServicesPage() {
   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>
-        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/#pricing" }, { name: "Contact", id: "/#contact" }]} brandName="Proof Digital" />
-        <FeatureCardThree 
+        <NavbarStyleFullscreen navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Services", id: "/services" }, { name: "Pricing", id: "/#pricing" }, { name: "Contact", id: "/#contact" }]} />
+        <FeatureCardTwentyOne 
           title="Our Specialized Services"
           description="We deliver comprehensive digital solutions to help your business reach new customers. From stunning design to full responsiveness, we cover it all."
-          gridVariant="bento-grid"
-          animationType="slide-up"
-          textboxLayout="split"
-          features={[
-            { title: "Professional Web Design", description: "High-quality, branded designs tailored to your company's identity.", imageSrc: "" },
-            { title: "Mobile-Friendly Features", description: "Optimized layouts that look perfect on all devices, from phones to tablets.", imageSrc: "" },
-            { title: "Digital Presence Setup", description: "Get your business discovered online with robust site architecture.", imageSrc: "" },
-            { title: "SEO & Performance", description: "Fast loading speeds and optimized content to rank better on search engines.", imageSrc: "" }
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+          accordionItems={[
+            { id: "1", title: "Professional Web Design", content: "High-quality, branded designs tailored to your company's identity." },
+            { id: "2", title: "Mobile-Friendly Features", content: "Optimized layouts that look perfect on all devices, from phones to tablets." },
+            { id: "3", title: "Digital Presence Setup", content: "Get your business discovered online with robust site architecture." },
+            { id: "4", title: "SEO & Performance", content: "Fast loading speeds and optimized content to rank better on search engines." }
           ]}
         />
         <FooterSimple columns={[{ title: "Proof Digital", items: [{ label: "About Us", href: "/about" }, { label: "Services", href: "/services" }] }, { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }]} bottomLeftText="© 2024 Proof Digital. All rights reserved." bottomRightText="Built by Proof Digital" />