diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 97d3cbb..d932ade 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -16,6 +16,19 @@ interface ProductPageProps {
     params: Promise<{ id: string }>;
 }
 
+const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/#features" },
+    { name: "About Us", id: "/#about" },
+    { name: "Testimonials", id: "/#testimonials" },
+    { name: "Contact", id: "/#contact" },
+];
+
+const footerColumns = [
+    { title: "Services", items: [{ label: "Roof Repair", href: "/#features" }, { label: "New Roofs", href: "/#features" }, { label: "Gutter Services", href: "/#features" }] },
+    { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Testimonials", href: "/#testimonials" }, { label: "Contact", href: "/#contact" }] }
+];
+
 export default function ProductPage({ params }: ProductPageProps) {
     return (
         <Suspense fallback={null}>
@@ -56,8 +69,9 @@ function ProductPageContent({ params }: ProductPageProps) {
         const item = createCartItem();
         if (item) {
             addItem(item);
+            setCartOpen(true);
         }
-    }, [createCartItem, addItem]);
+    }, [createCartItem, addItem, setCartOpen]);
 
     const handleBuyNow = useCallback(() => {
         if (product) {
@@ -89,16 +103,12 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="normal"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
-                        ]}
+                        navItems={navItems}
                         brandName="Carter Brothers"
                         bottomLeftText="Your Trusted Roofing Partner"
                         bottomRightText="(859) 350-6500"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -108,10 +118,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     </main>
                     <div id="footer" data-section="footer">
                         <FooterBaseReveal
-                            columns={[
-                                { title: "Services", items: [{ label: "Roof Repair", href: "#services" }, { label: "New Roofs", href: "#services" }, { label: "Gutter Services", href: "#services" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact", href: "#contact" }] }
-                            ]}
+                            columns={footerColumns}
                             copyrightText="© 2024 Carter Brothers Roof Repair. All rights reserved."
                             ariaLabel="Footer section"
                             className="py-8"
@@ -137,16 +144,12 @@ function ProductPageContent({ params }: ProductPageProps) {
                 headingFontWeight="normal"
             >
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                    <div id="nav" data-section="nav">
                         <NavbarStyleFullscreen
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
+                            navItems={navItems}
                             brandName="Carter Brothers"
                             bottomLeftText="Your Trusted Roofing Partner"
                             bottomRightText="(859) 350-6500"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -164,10 +167,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     </main>
                     <div id="footer" data-section="footer">
                         <FooterBaseReveal
-                            columns={[
-                                { title: "Services", items: [{ label: "Roof Repair", href: "#services" }, { label: "New Roofs", href: "#services" }, { label: "Gutter Services", href: "#services" }] },
-                                { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact", href: "#contact" }] }
-                            ]}
+                            columns={footerColumns}
                             copyrightText="© 2024 Carter Brothers Roof Repair. All rights reserved."
                             ariaLabel="Footer section"
                             className="py-8"
@@ -192,16 +192,12 @@ function ProductPageContent({ params }: ProductPageProps) {
             headingFontWeight="normal"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                 <NavbarStyleFullscreen
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Shop", id: "/shop" }
-                    ]}
+                    navItems={navItems}
                     brandName="Carter Brothers"
                     bottomLeftText="Your Trusted Roofing Partner"
                     bottomRightText="(859) 350-6500"
-                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                 />
                 </div>
                 <div id="product-detail-card" data-section="product-detail-card">
@@ -242,10 +238,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 </div>
                 <div id="footer" data-section="footer">
                     <FooterBaseReveal
-                        columns={[
-                            { title: "Services", items: [{ label: "Roof Repair", href: "#services" }, { label: "New Roofs", href: "#services" }, { label: "Gutter Services", href: "#services" }] },
-                            { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact", href: "#contact" }] }
-                        ]}
+                        columns={footerColumns}
                         copyrightText="© 2024 Carter Brothers Roof Repair. All rights reserved."
                         ariaLabel="Footer section"
                         className="py-8"