diff --git a/src/app/page.tsx b/src/app/page.tsx
index 00f4925..39d8250 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import ContactText from '@/components/sections/contact/ContactText';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
@@ -41,7 +41,7 @@ export default function LandingPage() {
         </div>
 
         <div id="home" data-section="home">
-          <HeroOverlay
+          <HeroSplitKpi
             title="Crafting Visual Experiences That Drive Results"
             description="I’m Nijaran — a Graphic Designer specializing in branding, social media creatives, packaging design, and UI visuals."
             tag="Hello There!"
@@ -49,7 +49,14 @@ export default function LandingPage() {
               { text: "View Portfolio", href: "#portfolio" },
               { text: "Hire Me", href: "#contact" },
             ]}
+            kpis={[
+              { value: "50+", label: "Projects Completed" },
+              { value: "100%", label: "Client Satisfaction" },
+              { value: "4+", label: "Years Experience" }
+            ]}
+            enableKpiAnimation={true}
             imageSrc="http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg?_wi=1"
+            background={{ variant: "sparkles-gradient" }}
           />
         </div>