diff --git a/src/app/page.tsx b/src/app/page.tsx
index fe933a9..c8570db 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,6 +10,8 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import { Sparkles } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -40,7 +42,7 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDualMedia
-      background={{ variant: "plain" }}
+      background={{ variant: "glowing-orb" }}
       title="Top-Rated Hair Salon in Rome, GA"
       description="Expert haircuts, color, and styling with a welcoming, professional touch. Serving Rome, GA and surrounding areas."
       tag="Rated 4.8/5 from 100+ clients"
@@ -58,6 +60,20 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="stats-3d" data-section="stats-3d">
+    <MetricCardThree 
+      title="Our Impact"
+      description="Real results, real transformations, real style."
+      textboxLayout="default"
+      animationType="depth-3d"
+      metrics={[
+        { id: "1", icon: Sparkles, title: "Styles Created", value: "5,000+" },
+        { id: "2", icon: Sparkles, title: "Happy Clients", value: "2,000+" },
+        { id: "3", icon: Sparkles, title: "Years Experience", value: "15+" }
+      ]}
+    />
+  </div>
+
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTen
       textboxLayout="split-description"