diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index f6f53fe..0d103f8 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/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 MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
 import FooterBase from "@/components/sections/footer/FooterBase";
 
 export default function AboutPage() {
@@ -34,18 +34,19 @@ export default function AboutPage() {
           />
         </div>
         <div id="about" data-section="about">
-          <MetricSplitMediaAbout
+          <MetricCardSeven
             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"
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            className="pt-32"
             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