diff --git a/src/app/page.tsx b/src/app/page.tsx
index c47b6bd..f7ccb44 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Dribbble, Instagram, Linkedin, Mail, Palette } from "lucide-react";
+import { Dribbble, Instagram, Linkedin, Mail, Palette, TrendingUp } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,15 +41,20 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay
+        <HeroSplitKpi
           title="Visual Design That Moves People"
           description="Crafting bold, meaningful designs that elevate brands and create lasting impressions"
           tag="Creative Studio"
+          background={{ variant: "plain" }}
+          kpis={[
+            { value: "8+", label: "Years Experience" },
+            { value: "150+", label: "Projects Completed" },
+            { value: "100%", label: "Client Satisfaction" }
+          ]}
+          enableKpiAnimation={true}
           imageSrc="http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg"
           imageAlt="Creative workspace with design tools"
-          textPosition="bottom-left"
-          showBlur={true}
-          showDimOverlay={true}
+          mediaAnimation="slide-up"
           buttons={[
             { text: "View Portfolio", href: "#portfolio" },
             { text: "Get in Touch", href: "#contact" }