diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index cacb408..61ec119 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -66,6 +66,15 @@ export default function ProductPage({ params }: ProductPageProps) {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const navItems = [
+      { name: "Home", id: "/" },
+      { name: "About", id: "/about" },
+      { name: "Menu", id: "/menu" },
+      { name: "Testimonials", id: "/testimonials" },
+      { name: "Contact", id: "/contact" },
+      { name: "Shop", id: "/shop" }
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -81,13 +90,10 @@ export default function ProductPage({ params }: ProductPageProps) {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay
                             brandName="Bean & Brew"
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" },
-                            ]}
+                            navItems={navItems}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="bg-primary-cta text-secondary-cta"
                             className="w-full max-w-smallMedium mx-auto rounded-sharp"
@@ -102,11 +108,10 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <FooterLogoEmphasis
                             logoText="Bean & Brew"
                             columns={[
-                                { items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }, { label: "About Us", href: "#about" }] },
-                                { items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }, { label: "Careers", href: "/careers" }] },
+                                { items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About Us", href: "/about" }] },
+                                { items: [{ label: "Contact", href: "/contact" }, { label: "Careers", href: "/careers" }] },
                                 { items: [{ label: "Facebook", href: "https://facebook.com/beanandbrew" }, { label: "Instagram", href: "https://instagram.com/beanandbrew" }, { label: "Twitter", href: "https://twitter.com/beanandbrew" }] }
                             ]}
-                            useInvertedBackground={false}
                             logoClassName="text-foreground"
                             itemClassName="text-foreground"
                         />
@@ -131,13 +136,10 @@ export default function ProductPage({ params }: ProductPageProps) {
                 headingFontWeight="bold"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarLayoutFloatingOverlay
                             brandName="Bean & Brew"
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" },
-                            ]}
+                            navItems={navItems}
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                             buttonClassName="bg-primary-cta text-secondary-cta"
                             className="w-full max-w-smallMedium mx-auto rounded-sharp"
@@ -160,11 +162,10 @@ export default function ProductPage({ params }: ProductPageProps) {
                         <FooterLogoEmphasis
                             logoText="Bean & Brew"
                             columns={[
-                                { items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }, { label: "About Us", href: "#about" }] },
-                                { items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }, { label: "Careers", href: "/careers" }] },
+                                { items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About Us", href: "/about" }] },
+                                { items: [{ label: "Contact", href: "/contact" }, { label: "Careers", href: "/careers" }] },
                                 { items: [{ label: "Facebook", href: "https://facebook.com/beanandbrew" }, { label: "Instagram", href: "https://instagram.com/beanandbrew" }, { label: "Twitter", href: "https://twitter.com/beanandbrew" }] }
                             ]}
-                            useInvertedBackground={false}
                             logoClassName="text-foreground"
                             itemClassName="text-foreground"
                         />
@@ -188,13 +189,10 @@ export default function ProductPage({ params }: ProductPageProps) {
             headingFontWeight="bold"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
                         brandName="Bean & Brew"
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" },
-                        ]}
+                        navItems={navItems}
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         buttonClassName="bg-primary-cta text-secondary-cta"
                         className="w-full max-w-smallMedium mx-auto rounded-sharp"
@@ -240,11 +238,10 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <FooterLogoEmphasis
                         logoText="Bean & Brew"
                         columns={[
-                            { items: [{ label: "Home", href: "#hero" }, { label: "Menu", href: "#menu" }, { label: "About Us", href: "#about" }] },
-                            { items: [{ label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }, { label: "Careers", href: "/careers" }] },
+                            { items: [{ label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "About Us", href: "/about" }] },
+                            { items: [{ label: "Contact", href: "/contact" }, { label: "Careers", href: "/careers" }] },
                             { items: [{ label: "Facebook", href: "https://facebook.com/beanandbrew" }, { label: "Instagram", href: "https://instagram.com/beanandbrew" }, { label: "Twitter", href: "https://twitter.com/beanandbrew" }] }
                         ]}
-                        useInvertedBackground={false}
                         logoClassName="text-foreground"
                         itemClassName="text-foreground"
                     />