diff --git a/src/app/page.tsx b/src/app/page.tsx
index b791291..fc35425 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,10 +6,11 @@ import HeroCentered from "@/components/sections/hero/HeroCentered";
 import AboutMetric from "@/components/sections/about/AboutMetric";
 import FeatureBento from "@/components/sections/feature/FeatureBento";
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterMedia from "@/components/sections/footer/FooterMedia";
-import { CheckCircle, Zap, Shield, MessageSquare, Home, Building2, Cloud, Sparkles, Eye, FileText, Calendar, Hammer, CheckSquare, Award, DollarSign, Clock, Heart } from "lucide-react";
+import { CheckCircle, Zap, Shield, MessageSquare, Home, Building2, Cloud, Sparkles, Eye, FileText, Calendar, Hammer, CheckSquare, Award, DollarSign, Clock, Heart, TrendingUp, Users } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -147,6 +148,23 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="metrics-two" data-section="metrics-two">
+        <MetricCardOne
+          title="Proven Results That Speak for Themselves"
+          description="Real numbers from real customers who trust Teal Roofing for their most important projects."
+          metrics={[
+            { id: "1", value: "500+", title: "Projects", description: "Completed with excellence", icon: TrendingUp },
+            { id: "2", value: "98%", title: "Satisfaction", description: "Customer approval rating", icon: Award },
+            { id: "3", value: "15+", title: "Years", description: "Of trusted service", icon: Clock },
+            { id: "4", value: "1000+", title: "Happy Families", description: "Protected by our roofs", icon: Users },
+          ]}
+          gridVariant="four-items-2x2-equal-grid"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="insurance" data-section="insurance">
         <ContactText
           text="Storm Damage? We Help Make the Process Easier. When storms hit, homeowners need more than a contractor. They need someone who shows up quickly, explains what is actually damaged, and helps navigate the next steps without pressure or confusion."