diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
index 8ce97d7..e2911a9 100644
--- a/src/pages/HomePage/sections/Metrics.tsx
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -1,62 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
 import React from 'react';
-import { Pizza, Star, Award } from "lucide-react";
+import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import { Award, Clock, DollarSign, Droplet, Flame, Pizza, Star, Wheat } from "lucide-react";
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-import Button from "@/components/ui/Button";
-import Tag from "@/components/ui/Tag";
-import Card from "@/components/ui/Card";
-import ScrollReveal from "@/components/ui/ScrollReveal";
 
 export default function MetricsSection(): React.JSX.Element {
-  const metrics = [
-    {
-      icon: Pizza,
-      title: "Pizzas Baked",
-      value: "50,000+",
-    },
-    {
-      icon: Star,
-      title: "Happy Customers",
-      value: "10,000+",
-    },
-    {
-      icon: Award,
-      title: "Years Serving SF",
-      value: "15+",
-    },
-  ];
-
   return (
-    <div id="metrics" data-webild-section="metrics">
-      <SectionErrorBoundary name="metrics">
-        <section className="bg-background">
-          <div className="max-w-content-width mx-auto px-6">
-            <div className="text-center">
-              <ScrollReveal variant="slide-up">
-                <Tag text="Our Impact" className="mb-4" />
-                <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">A Taste of Our Success</h2>
-                <p className="text-lg text-muted-foreground max-w-content-width mx-auto">
-                  More than just pizza, it's a legacy of flavor and satisfied customers.
-                </p>
-              </ScrollReveal>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-              {metrics.map((metric, index) => (
-                <ScrollReveal key={index} variant="slide-up" delay={index * 0.1} className="h-full">
-                  <Card className="p-8 flex flex-col items-center text-center h-full">
-                    <div className="w-16 h-16 rounded-full bg-primary-cta/10 flex items-center justify-center mb-6 text-primary-cta">
-                      <metric.icon size={32} />
-                    </div>
-                    <h3 className="text-4xl font-bold text-foreground mb-2">{metric.value}</h3>
-                    <p className="text-lg text-muted-foreground mb-8 flex-grow">{metric.title}</p>
-                    <Button text="Contact" variant="secondary" className="w-full mt-auto" />
-                  </Card>
-                </ScrollReveal>
-              ))}
-            </div>
-          </div>
-        </section>
-      </SectionErrorBoundary>
-    </div>
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsIconCards
+          tag="Our Impact"
+          title="A Taste of Our Success"
+          description="More than just pizza, it's a legacy of flavor and satisfied customers."
+          metrics={[
+            {
+              icon: Pizza,
+              title: "Pizzas Baked",
+              value: "50,000+",
+            },
+            {
+              icon: Star,
+              title: "Happy Customers",
+              value: "10,000+",
+            },
+            {
+              icon: Award,
+              title: "Years Serving SF",
+              value: "15+",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
   );
-}
\ No newline at end of file
+}