diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index f80f1d4..58205b4 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -10,6 +10,14 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/#about" },
+        { name: "Features", id: "/#features" },
+        { name: "Testimonials", id: "/#testimonials" },
+        { name: "Contact", id: "/#contact" },
+    ];
+
     return (
         <ThemeProvider
             defaultButtonVariant="shift-hover"
@@ -23,40 +31,36 @@ export default function BlogPage() {
             secondaryButtonStyle="layered"
             headingFontWeight="bold"
         >
-            <ReactLenis root>
+            <div id="nav" data-section="nav">
                 <NavbarStyleApple
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "About", id: "about" },
-                        { name: "Features", id: "features" },
-                        { name: "Testimonials", id: "testimonials" },
-                        { name: "Join", id: "join" },
-                        { name: "Blog", id: "blog" },
-                        { name: "Contact", id: "contact" },
-                    ]}
+                    navItems={navItems}
                     brandName="Garry Potter Club"
                 />
-
+            </div>
+            <ReactLenis root>
                 {isLoading ? (
                     <div className="w-content-width mx-auto py-20 text-center">
                         <p className="text-foreground">Loading posts...</p>
                     </div>
                 ) : (
-                    <BlogCardThree
-                        blogs={posts}
-                        title="Featured Articles"
-                        description="Explore our latest insights"
-                        animationType="slide-up"
-                        textboxLayout="default"
-                        useInvertedBackground={false}
-                    />
+                    <div id="blog" data-section="blog">
+                        <BlogCardThree
+                            blogs={posts}
+                            title="Featured Articles"
+                            description="Explore our latest insights"
+                            animationType="slide-up"
+                            textboxLayout="default"
+                            useInvertedBackground={false}
+                        />
+                    </div>
                 )}
-
-                <FooterLogoReveal
-                    logoText="Garry Potter Club"
-                    leftLink={{ text: "Privacy Policy", href: "#" }}
-                    rightLink={{ text: "Terms of Service", href: "#" }}
-                />
+                <div id="footer" data-section="footer">
+                    <FooterLogoReveal
+                        logoText="Garry Potter Club"
+                        leftLink={{ text: "Privacy Policy", href: "#" }}
+                        rightLink={{ text: "Terms of Service", href: "#" }}
+                    />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6436a07..961b924 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -34,7 +34,6 @@ export default function SitePage() {
             { name: "Features", id: "features" },
             { name: "Testimonials", id: "testimonials" },
             { name: "Join", id: "social-proof" },
-            { name: "Blog", id: "blog" },
             { name: "Contact", id: "contact" },
           ]}
           brandName="Garry Potter Club"
@@ -45,7 +44,6 @@ export default function SitePage() {
         <HeroSplitDualMedia
           title="Welcome to the Garry Potter Fun Club!"
           description="Dive into the magical world, connect with fellow fans, and explore exclusive content. Your journey into wizardry begins here!"
-          background={{ variant: 'noiseDiagonalGradient' }}
           tag="Official Fan Community"
           mediaItems={[
             { imageSrc: "https://img.b2bpic.net/free-photo/international-day-education-scene-with-fantasy-style_23-2151040335.jpg", imageAlt: "A mystical wizardry school castle" },
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 2edd5eb..48e212e 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -1,4 +1,4 @@
-use client";
+"use client";
 
 import { use, useCallback } from "react";
 import { useRouter } from "next/navigation";
@@ -66,6 +66,14 @@ 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: "Features", id: "/#features" },
+        { name: "Testimonials", id: "/#testimonials" },
+        { name: "Contact", id: "/#contact" },
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -80,17 +88,13 @@ export default function ProductPage({ params }: ProductPageProps) {
                 secondaryButtonStyle="layered"
                 headingFontWeight="bold"
             >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleApple
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
-                        ]}
+                        navItems={navItems}
                         brandName="Garry Potter Club"
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
-                    </div>
+                </div>
+                <ReactLenis root>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading product...</p>
                     </main>
@@ -113,17 +117,13 @@ export default function ProductPage({ params }: ProductPageProps) {
                 secondaryButtonStyle="layered"
                 headingFontWeight="bold"
             >
+                <div id="nav" data-section="nav">
+                    <NavbarStyleApple
+                        navItems={navItems}
+                        brandName="Garry Potter Club"
+                    />
+                </div>
                 <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleApple
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
-                            brandName="Garry Potter Club"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
-                    </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <div className="text-center">
                             <p className="text-foreground mb-4">Product not found</p>
@@ -153,52 +153,48 @@ export default function ProductPage({ params }: ProductPageProps) {
             secondaryButtonStyle="layered"
             headingFontWeight="bold"
         >
-            <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+            <div id="nav" data-section="nav">
                 <NavbarStyleApple
                     brandName="Garry Potter Club"
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Shop", id: "/shop" },
-                    ]}
-                    button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                    navItems={navItems}
                 />
-                </div>
+            </div>
+            <ReactLenis root>
                 <div id="product-detail-card" data-section="product-detail-card">
-                <ProductDetailCard
-                    layout="page"
-                    name={product.name}
-                    price={product.price}
-                    salePrice={meta.salePrice}
-                    rating={product.rating || 0}
-                    description={product.description}
-                    images={images}
-                    variants={variants.length > 0 ? variants : undefined}
-                    quantity={quantityVariant}
-                    ribbon={meta.ribbon}
-                    inventoryStatus={meta.inventoryStatus}
-                    inventoryQuantity={meta.inventoryQuantity}
-                    sku={meta.sku}
-                    buttons={[
-                        { text: "Add To Cart", onClick: handleAddToCart },
-                        { text: "Buy Now", onClick: handleBuyNow },
-                    ]}
-                />
+                    <ProductDetailCard
+                        layout="page"
+                        name={product.name}
+                        price={product.price}
+                        salePrice={meta.salePrice}
+                        rating={product.rating || 0}
+                        description={product.description}
+                        images={images}
+                        variants={variants.length > 0 ? variants : undefined}
+                        quantity={quantityVariant}
+                        ribbon={meta.ribbon}
+                        inventoryStatus={meta.inventoryStatus}
+                        inventoryQuantity={meta.inventoryQuantity}
+                        sku={meta.sku}
+                        buttons={[
+                            { text: "Add To Cart", onClick: handleAddToCart },
+                            { text: "Buy Now", onClick: handleBuyNow },
+                        ]}
+                    />
                 </div>
                 <div id="product-cart" data-section="product-cart">
-                <ProductCart
-                    isOpen={cartOpen}
-                    onClose={() => setCartOpen(false)}
-                    items={cartItems}
-                    onQuantityChange={updateQuantity}
-                    onRemove={removeItem}
-                    total={`$${cartTotal}`}
-                    buttons={[
-                        {
-                            text: isCheckoutLoading ? "Processing..." : "Check Out",                            onClick: handleCheckout,
-                        },
-                    ]}
-                />
+                    <ProductCart
+                        isOpen={cartOpen}
+                        onClose={() => setCartOpen(false)}
+                        items={cartItems}
+                        onQuantityChange={updateQuantity}
+                        onRemove={removeItem}
+                        total={`$${cartTotal}`}
+                        buttons={[
+                            {
+                                text: isCheckoutLoading ? "Processing..." : "Check Out",                                onClick: handleCheckout,
+                            },
+                        ]}
+                    />
                 </div>
                 <div id="footer" data-section="footer">
                     <FooterLogoReveal
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 2f1af8b..ff66723 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,4 +1,4 @@
-use client";
+"use client";
 
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
@@ -16,6 +16,14 @@ export default function ShopPage() {
         filters,
     } = useProductCatalog({ basePath: "/shop" });
 
+    const navItems = [
+        { name: "Home", id: "/" },
+        { name: "About", id: "/#about" },
+        { name: "Features", id: "/#features" },
+        { name: "Testimonials", id: "/#testimonials" },
+        { name: "Contact", id: "/#contact" },
+    ];
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -30,17 +38,13 @@ export default function ShopPage() {
                 secondaryButtonStyle="layered"
                 headingFontWeight="bold"
             >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleApple
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
-                        ]}
+                        navItems={navItems}
                         brandName="Garry Potter Club"
-                        button={{ text: "Cart", onClick: () => {} }}
                     />
-                    </div>
+                </div>
+                <ReactLenis root>
                     <main className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading products...</p>
                     </main>
@@ -62,17 +66,13 @@ export default function ShopPage() {
             secondaryButtonStyle="layered"
             headingFontWeight="bold"
         >
-            <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+             <div id="nav" data-section="nav">
                 <NavbarStyleApple
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Shop", id: "/shop" }
-                    ]}
+                    navItems={navItems}
                     brandName="Garry Potter Club"
-                    button={{ text: "Cart", onClick: () => {} }}
                 />
-                </div>
+            </div>
+            <ReactLenis root>
                 <div id="product-catalog" data-section="product-catalog">
                 <ProductCatalog
                     layout="page"