diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index ab4bfa8..ee1191c 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -28,7 +28,7 @@ export default function BlogPage() {
                     <NavbarStyleCentered
                         brandName="Refined Barber"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Home", id: "hero" },
                             { name: "Services", id: "services" },
                             { name: "About", id: "about" },
                             { name: "Team", id: "team" },
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 36d37ae..a98346c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
@@ -43,7 +43,7 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCentered
+        <HeroBillboard
           title="Premium Barbershop Experience"
           description="Expertly crafted grooming services in a refined atmosphere. From classic haircuts to precision beard work, we deliver timeless style with modern expertise."
           background={{
@@ -69,6 +69,9 @@ export default function LandingPage() {
               text: "View Services",              href: "services"
             }
           ]}
+          imageSrc="https://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg"
+          imageAlt="Premium barbershop experience"
+          mediaAnimation="slide-up"
         />
       </div>
 
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 05b4be3..3daf300 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -85,7 +85,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarStyleCentered
                             brandName="Refined Barber"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                { name: "Home", id: "hero" },
                                 { name: "Shop", id: "/shop" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -125,7 +125,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <NavbarStyleCentered
                             brandName="Refined Barber"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                { name: "Home", id: "hero" },
                                 { name: "Shop", id: "/shop" }
                             ]}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -172,7 +172,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <NavbarStyleCentered
                         brandName="Refined Barber"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Home", id: "hero" },
                             { name: "Shop", id: "/shop" }
                         ]}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 98a4440..f8c98b4 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -35,7 +35,7 @@ export default function ShopPage() {
                         <NavbarStyleCentered
                             brandName="Refined Barber"
                             navItems={[
-                                { name: "Home", id: "/" },
+                                { name: "Home", id: "hero" },
                                 { name: "Shop", id: "/shop" }
                             ]}
                             button={{ text: "Cart", onClick: () => console.log("cart") }}
@@ -74,7 +74,7 @@ export default function ShopPage() {
                     <NavbarStyleCentered
                         brandName="Refined Barber"
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Home", id: "hero" },
                             { name: "Shop", id: "/shop" }
                         ]}
                         button={{ text: "Cart", onClick: () => console.log("cart") }}