diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 73212fc..d5243fc 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,29 +3,41 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import AboutMetric from "@/components/sections/about/AboutMetric";
+import MediaAbout from "@/components/sections/about/MediaAbout";
 import { User, Target } 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>
-        <NavbarLayoutFloatingOverlay
-          brandName="Atlas IT"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "About", id: "/about" },
-          ]}
-        />
-        <AboutMetric
-          title="About Our Founder"
-          metrics={[
-            { icon: User, label: "Owner", value: "Zakaria Serroukh" },
-            { icon: User, label: "Age & Origin", value: "23, Tanger, Morocco" },
-            { icon: Target, label: "Company Mission", value: "Delivering top-tier IT reliability to every business." }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Atlas IT"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "About", id: "/about" },
+            ]}
+          />
+        </div>
+        <div id="about-founder" data-section="about-founder">
+          <MediaAbout
+            title="About Our Founder"
+            description="Zakaria Serroukh, 23, from Tanger, Morocco. Delivering top-tier IT reliability to every business."
+            useInvertedBackground={false}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index 2a1593d..dcb4708 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -3,32 +3,48 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureCardTwentyThree from "@/components/sections/feature/FeatureCardTwentyThree";
+import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
 
 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>
-        <NavbarLayoutFloatingOverlay
-          brandName="Atlas IT"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "About", id: "/about" },
-          ]}
-        />
-        <FeatureCardTwentyThree
-          title="Professional IT Services"
-          description="Comprehensive solutions tailored for your business success."
-          textboxLayout="default"
-          animationType="slide-up"
-          features={[
-            { id: "pc", title: "PC Installation", tags: ["Expert hardware configuration and software setup"] },
-            { id: "wifi", title: "Wi-Fi Network Setup", tags: ["Robust and secure local area network deployment"] },
-            { id: "server", title: "Server Installation", tags: ["Enterprise grade server architecture and maintenance"] },
-            { id: "camera", title: "Camera Installation (Coming Soon)", tags: ["Advanced surveillance and monitoring solutions"] }
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Atlas IT"
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "About", id: "/about" },
+            ]}
+          />
+        </div>
+        <div id="services-list" data-section="services-list">
+          <FeatureCardNine
+            title="Professional IT Services"
+            description="Comprehensive solutions tailored for your business success."
+            textboxLayout="default"
+            animationType="slide-up"
+            showStepNumbers={true}
+            useInvertedBackground={false}
+            features={[
+              { title: "PC Installation", description: "Expert hardware configuration and software setup", phoneOne: { imageSrc: "https://images.unsplash.com/photo-1593640408182-31c70c8268f5" }, phoneTwo: { imageSrc: "https://images.unsplash.com/photo-1593640408182-31c70c8268f5" } },
+              { title: "Wi-Fi Network Setup", description: "Robust and secure local area network deployment", phoneOne: { imageSrc: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8" }, phoneTwo: { imageSrc: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8" } },
+              { title: "Server Installation", description: "Enterprise grade server architecture and maintenance", phoneOne: { imageSrc: "https://images.unsplash.com/photo-1558494949-ef010bbbb317" }, phoneTwo: { imageSrc: "https://images.unsplash.com/photo-1558494949-ef010bbbb317" } }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );