diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7595054..55b7529 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import TextAbout from "@/components/sections/about/TextAbout";
 import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
 import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
@@ -37,15 +37,17 @@ export default function SkincareTemplatePage() {
             </div>
 
             <div id="hero" data-section="hero">
-                <HeroLogoBillboard
-                    logoText="Luminé Coastal"
+                <HeroBillboardCarousel
+                    title="Luminé Coastal"
                     description="Sophisticated skincare inspired by the tranquility of the coast. Pure, botanical, and deeply restorative."
                     background={{ variant: "sparkles-gradient" }}
-                    imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp"
+                    mediaItems={[
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/hero.webp", imageAlt: "Coastal Skincare" },
+                        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image2.webp", imageAlt: "Coastal Collection" }
+                    ]}
                     buttons={[
                         { text: "View Collection", href: "#products" }
                     ]}
-                    mediaAnimation="slide-up"
                 />
             </div>