diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index f6e02b8..0440eac 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -27,7 +27,7 @@ export default function BlogPage() {
                 <div id="nav" data-section="nav">
                     <NavbarStyleCentered
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Home", id: "hero" },
                             { name: "About", id: "about" },
                             { name: "Menu", id: "menu" },
                             { name: "Reviews", id: "testimonials" },
@@ -92,4 +92,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2d75a2f..2965e23 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1325,4 +1325,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 38e3ae4..c38c8b3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
@@ -41,6 +42,28 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Explore Our Collection"
+          description="Discover amazing products and experiences"
+          tag="Featured"
+          background={{ variant: "radial-gradient" }}
+          mediaItems={[
+            { imageSrc: "https://img.b2bpic.net/free-photo/top-view-cooked-dish-inside-plate-tray-green-table-food-meal-restaurant_140725-27860.jpg", imageAlt: "Gallery 1" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/fried-pork-topped-with-sesame-placed-black-dish_1150-23120.jpg", imageAlt: "Gallery 2" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/side-view-roasted-beef-with-lettuce-red-chili-pepper-plate-wood_141793-11154.jpg", imageAlt: "Gallery 3" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-japanese-meal-composition_23-2148809882.jpg", imageAlt: "Gallery 4" },
+            { imageSrc: "https://img.b2bpic.net/free-photo/top-view-fried-meat-dish-with-glass-wine-table-meat-meal-food_140725-28163.jpg", imageAlt: "Gallery 5" }
+          ]}
+          buttons={[
+            { text: "View Gallery", href: "menu" },
+            { text: "Learn More", href: "about" }
+          ]}
+          mediaAnimation="slide-up"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
       <div id="about" data-section="about">
         <MediaAbout
           title="Heritage Meets Innovation"
@@ -220,4 +243,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 0d589dc..d07c973 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -84,15 +84,14 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                     <NavbarStyleCentered
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Home", id: "hero" },
                             { name: "About", id: "about" },
                             { name: "Menu", id: "menu" },
                             { name: "Reviews", id: "testimonials" },
-                            { name: "Contact", id: "contact" },
-                            { name: "Shop", id: "/shop" }
+                            { name: "Contact", id: "contact" }
                         ]}
                         brandName="Hanok Seoul"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        button={{ text: "Reserve Now", href: "contact" }}
                     />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -105,7 +104,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                         columns={[
                             {
                                 title: "Navigation",                                items: [
-                                    { label: "Home", href: "/" },
+                                    { label: "Home", href: "#hero" },
                                     { label: "About Us", href: "#about" },
                                     { label: "Menu", href: "#menu" },
                                     { label: "Reviews", href: "#testimonials" }
@@ -153,15 +152,14 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarStyleCentered
                             navItems={[
-                                { name: "Home", id: "/" },
+                                { name: "Home", id: "hero" },
                                 { name: "About", id: "about" },
                                 { name: "Menu", id: "menu" },
                                 { name: "Reviews", id: "testimonials" },
-                                { name: "Contact", id: "contact" },
-                                { name: "Shop", id: "/shop" }
+                                { name: "Contact", id: "contact" }
                             ]}
                             brandName="Hanok Seoul"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            button={{ text: "Reserve Now", href: "contact" }}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -182,7 +180,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                         columns={[
                             {
                                 title: "Navigation",                                items: [
-                                    { label: "Home", href: "/" },
+                                    { label: "Home", href: "#hero" },
                                     { label: "About Us", href: "#about" },
                                     { label: "Menu", href: "#menu" },
                                     { label: "Reviews", href: "#testimonials" }
@@ -229,15 +227,14 @@ export default function ProductPage({ params }: ProductPageProps) {
                 <div id="navbar" data-section="navbar">
                 <NavbarStyleCentered
                     navItems={[
-                        { name: "Home", id: "/" },
+                        { name: "Home", id: "hero" },
                         { name: "About", id: "about" },
                         { name: "Menu", id: "menu" },
                         { name: "Reviews", id: "testimonials" },
-                        { name: "Contact", id: "contact" },
-                        { name: "Shop", id: "/shop" }
+                        { name: "Contact", id: "contact" }
                     ]}
                     brandName="Hanok Seoul"
-                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                    button={{ text: "Reserve Now", href: "contact" }}
                 />
                 </div>
                 <div id="productDetailCard" data-section="productDetailCard">
@@ -283,7 +280,7 @@ export default function ProductPage({ params }: ProductPageProps) {
                     columns={[
                         {
                             title: "Navigation",                            items: [
-                                { label: "Home", href: "/" },
+                                { label: "Home", href: "#hero" },
                                 { label: "About Us", href: "#about" },
                                 { label: "Menu", href: "#menu" },
                                 { label: "Reviews", href: "#testimonials" }
@@ -311,4 +308,4 @@ export default function ProductPage({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 82828aa..e881df2 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -37,15 +37,14 @@ export default function ShopPage() {
                     <div id="navbar" data-section="navbar">
                     <NavbarStyleCentered
                         navItems={[
-                            { name: "Home", id: "/" },
+                            { name: "Home", id: "hero" },
                             { name: "About", id: "about" },
                             { name: "Menu", id: "menu" },
                             { name: "Reviews", id: "testimonials" },
-                            { name: "Contact", id: "contact" },
-                            { name: "Shop", id: "/shop" }
+                            { name: "Contact", id: "contact" }
                         ]}
                         brandName="Hanok Seoul"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        button={{ text: "Reserve Now", href: "contact" }}
                     />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -58,7 +57,7 @@ export default function ShopPage() {
                         columns={[
                             {
                                 title: "Navigation",                                items: [
-                                    { label: "Home", href: "/" },
+                                    { label: "Home", href: "#hero" },
                                     { label: "About Us", href: "#about" },
                                     { label: "Menu", href: "#menu" },
                                     { label: "Reviews", href: "#testimonials" }
@@ -105,15 +104,14 @@ export default function ShopPage() {
                 <div id="navbar" data-section="navbar">
                 <NavbarStyleCentered
                     navItems={[
-                        { name: "Home", id: "/" },
+                        { name: "Home", id: "hero" },
                         { name: "About", id: "about" },
                         { name: "Menu", id: "menu" },
                         { name: "Reviews", id: "testimonials" },
-                        { name: "Contact", id: "contact" },
-                        { name: "Shop", id: "/shop" }
+                        { name: "Contact", id: "contact" }
                     ]}
                     brandName="Hanok Seoul"
-                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                    button={{ text: "Reserve Now", href: "contact" }}
                 />
                 </div>
                 <div id="productCatalog" data-section="productCatalog">
@@ -134,7 +132,7 @@ export default function ShopPage() {
                     columns={[
                         {
                             title: "Navigation",                            items: [
-                                { label: "Home", href: "/" },
+                                { label: "Home", href: "#hero" },
                                 { label: "About Us", href: "#about" },
                                 { label: "Menu", href: "#menu" },
                                 { label: "Reviews", href: "#testimonials" }
@@ -162,4 +160,4 @@ export default function ShopPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
\ No newline at end of file
+}