diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index abe54f5..11f1b3c 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -51,6 +51,15 @@ function ProductPageContent({ params }: ProductPageProps) {
 
     const { buyNow, checkout, isLoading: isCheckoutLoading } = useCheckout();
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "Fence Types", id: "/#services" },
+        { name: "Gallery", id: "/#gallery" },
+        { name: "Reviews", id: "/#reviews" },
+        { name: "FAQs", id: "/#faq" },
+        { name: "Contact", id: "/#contact" },
+    ];
+
     const handleAddToCart = useCallback(() => {
         const item = createCartItem();
         if (item) {
@@ -88,11 +97,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="extrabold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleApple
-                            navItems={[{ "name": "Home", "id": "/" }, { "name": "Fence Types", "id": "services" }, { "name": "Gallery", "id": "gallery" }, { "name": "Reviews", "id": "reviews" }, { "name": "FAQs", "id": "faq" }, { "name": "Contact", "id": "contact" }, { "name": "Shop", "id": "/shop" }]}
+                            navItems={navItems}
                             brandName="Uptown Fence"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
                     <div id="loading-state" data-section="loading-state">
@@ -120,11 +128,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="extrabold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleApple
-                            navItems={[{ "name": "Home", "id": "/" }, { "name": "Fence Types", "id": "services" }, { "name": "Gallery", "id": "gallery" }, { "name": "Reviews", "id": "reviews" }, { "name": "FAQs", "id": "faq" }, { "name": "Contact", "id": "contact" }, { "name": "Shop", "id": "/shop" }]}
+                            navItems={navItems}
                             brandName="Uptown Fence"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
                     <div id="not-found-state" data-section="not-found-state">
@@ -159,11 +166,10 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="extrabold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleApple
-                        navItems={[{ "name": "Home", "id": "/" }, { "name": "Fence Types", "id": "services" }, { "name": "Gallery", "id": "gallery" }, { "name": "Reviews", "id": "reviews" }, { "name": "FAQs", "id": "faq" }, { "name": "Contact", "id": "contact" }, { "name": "Shop", "id": "/shop" }]}
+                        navItems={navItems}
                         brandName="Uptown Fence"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">