diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index ace2518..1008e23 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -11,6 +11,17 @@ import { useProductDetail } from "@/hooks/useProductDetail";
 import { useCart } from "@/hooks/useCart";
 import { useCheckout } from "@/hooks/useCheckout";
 
+// Define common navigation items for sub-pages to maintain consistency
+const ALL_NAV_ITEMS_SUB_PAGES = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "/products" },
+    { name: "Shop", id: "/shop" },
+    { name: "Blog", id: "/blog" },
+    { name: "About", id: "/#about" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "FAQs", id: "/#faqs" }
+];
+
 interface ProductPageProps {
     params: Promise<{ id: string }>;
 }
@@ -88,10 +99,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="light"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingInline
                             brandName="Nano Mango"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="shadow-lg"
                             navItemClassName="text-foreground/80 hover:text-foreground"
@@ -123,10 +134,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="light"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingInline
                             brandName="Nano Mango"
-                            navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                            navItems={ALL_NAV_ITEMS_SUB_PAGES}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="shadow-lg"
                             navItemClassName="text-foreground/80 hover:text-foreground"
@@ -162,13 +173,13 @@ function ProductPageContent({ params }: ProductPageProps) {
             cardStyle="solid"
             primaryButtonStyle="diagonal-gradient"
             secondaryButtonStyle="solid"
-            headingFontWeight="light"
+                headingFontWeight="light"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingInline
                         brandName="Nano Mango"
-                        navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
+                        navItems={ALL_NAV_ITEMS_SUB_PAGES}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="shadow-lg"
                         navItemClassName="text-foreground/80 hover:text-foreground"