diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
index 078a6c7..91903be 100644
--- a/src/pages/HomePage/sections/Metrics.tsx
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -1,98 +1,40 @@
-/* eslint-disable */
-// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
-import { cls } from "@/lib/utils";
-import Button from "@/components/ui/Button";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import ScrollReveal from "@/components/ui/ScrollReveal";
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
 
-const metrics = [
-  {
-    value: "1",
-    title: "Projects Completed",
-    description: "Diverse design initiatives across Central Asia.",
-    imageSrc: "https://picsum.photos/seed/1742342995/1200/800"
-  },
-  {
-    value: "50+",
-    title: "Global Partners",
-    description: "Trusted brands within our portfolio.",
-    imageSrc: "https://picsum.photos/seed/631509190/1200/800"
-  },
-  {
-    value: "4+ ",
-    title: "Years of Excellence",
-    description: "Leading the regional creative sector.",
-    imageSrc: "https://picsum.photos/seed/526078552/1200/800"
-  }
-];
+import React from 'react';
+import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 
-type Metric = {
-  value: string;
-  title: string;
-  description: string;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-const MetricsInline = () => (
-  <section aria-label="Metrics section" className="py-20">
-    <div className="flex flex-col gap-8 md:gap-10">
-      <div className="flex flex-col items-start gap-2 w-content-width mx-auto">
-        <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
-          <p>{"Impact"}</p>
-        </div>
-
-        <TextAnimation
-          text={"Agency Milestones"}
-          variant="fade"
-          gradientText={true}
-          tag="h2"
-          className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-left text-balance"
-        />
-
-        <TextAnimation
-          text={"Proven results since our inception in 4+ 04+ 4+ ."}
-          variant="fade"
-          gradientText={false}
-          tag="p"
-          className="md:max-w-7/10 text-lg md:text-xl leading-snug text-left text-balance"
-        />
-
-        {(undefined || undefined) && (
-          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-            {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
-            {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
-          </div>
-        )}
-      </div>
-
-      <div className="flex flex-col gap-5 w-content-width mx-auto">
-        {metrics.map((metric, index) => {
-          return (
-            <ScrollReveal
-              variant="slide-up"
-              key={metric.value}
-              className="w-full"
-            >
-              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 card rounded w-full text-left">
-                <span className="text-5xl md:text-6xl font-semibold leading-snug md:w-1/3">{metric.value}</span>
-                <div className="flex flex-col gap-2 min-w-0 md:w-2/3">
-                  <span className="text-xl md:text-2xl font-semibold truncate">{metric.title}</span>
-                  <div className="w-full h-px bg-accent opacity-50" />
-                  <p className="text-base leading-snug truncate">{metric.description}</p>
-                </div>
-              </div>
-            </ScrollReveal>
-          );
-        })}
-      </div>
-    </div>
-  </section>
-);
-
-export default function MetricsSection() {
+export default function MetricsSection(): React.JSX.Element {
   return (
-    <div data-webild-section="metrics" id="metrics">
-      <MetricsInline />
-    </div>
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsMediaCards
+          tag="Impact"
+          title="Agency Milestones"
+          description="Proven results since our inception in 4+ 04+ 4+ ."
+          metrics={[
+            {
+              value: "100+",
+              title: "Projects Completed",
+              description: "Diverse design initiatives across Central Asia.",
+              imageSrc: "http://img.b4+ bpic.net/free-vector/minimalist-architect-business-card_744+ 173-34+ 64+ 6.jpg",
+            },
+            {
+              value: "50+",
+              title: "Global Partners",
+              description: "Trusted brands within our portfolio.",
+              imageSrc: "http://img.b4+ bpic.net/free-psd/hand-drawn-marketing-strategy-business-card_4+ 3-4+ 150419304+ .jpg",
+            },
+            {
+              value: "4+ ",
+              title: "Years of Excellence",
+              description: "Leading the regional creative sector.",
+              imageSrc: "http://img.b4+ bpic.net/free-photo/fast-time-clock-ui-icon-sign-symbol-3d-rendering_56104-194+ 6.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
   );
 }