diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 73848ce..cd4c7e5 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -24,40 +24,45 @@ export default function BlogPage() {
             headingFontWeight="semibold"
         >
             <ReactLenis root>
-                <NavbarLayoutFloatingInline
-                    navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "menu" }, { name: "About", id: "about" }, { name: "Testimonials", id: "testimonials" }, { name: "Contact", id: "contact" }]}
-                    brandName="Bella Italia"
-                    button={{ text: "Reservations", href: "#contact" }}
-                    className="py-4 px-6 md:px-10"
-                    navItemClassName="text-lg font-medium hover:text-primary-cta"
-                    buttonClassName="px-6 py-3 text-lg"
-                    buttonTextClassName="font-semibold"
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarLayoutFloatingInline
+                        navItems={[{ name: "Home", id: "/" }, { name: "Menu", id: "/#menu" }, { name: "About", id: "/#about" }, { name: "Testimonials", id: "/#testimonials" }, { name: "Contact", id: "/#contact" }]}
+                        brandName="Bella Italia"
+                        button={{ text: "Reservations", href: "/#contact" }}
+                        className="py-4 px-6 md:px-10"
+                        navItemClassName="text-lg font-medium hover:text-primary-cta"
+                        buttonClassName="px-6 py-3 text-lg"
+                        buttonTextClassName="font-semibold"
+                    />
+                </div>
 
                 {isLoading ? (
-                    <div className="w-content-width mx-auto py-20 text-center">
+                    <main id="loading-section" data-section="loading-section" className="min-h-screen flex items-center justify-center pt-20">
                         <p className="text-foreground">Loading posts...</p>
-                    </div>
+                    </main>
                 ) : (
-                    <BlogCardOne
-                        blogs={posts}
-                        title="Latest Articles"
-                        description="Insights and updates from our team"
-                        animationType="slide-up"
-                        textboxLayout="default"
-                        useInvertedBackground={false}
-                        carouselMode="buttons"
-                        tag="Blog"
-                    />
+                    <div id="blog" data-section="blog">
+                        <BlogCardOne
+                            blogs={posts}
+                            title="Latest Articles"
+                            description="Insights and updates from our team"
+                            animationType="slide-up"
+                            textboxLayout="default"
+                            useInvertedBackground={false}
+                            carouselMode="buttons"
+                            tag="Blog"
+                        />
+                    </div>
                 )}
 
-                <FooterLogoReveal
-                    logoText="Bella Italia"
-                    leftLink={{ text: "Privacy Policy", href: "#" }}
-                    rightLink={{ text: "Terms of Service", href: "#" }}
-                    useInvertedBackground={false}
-                    className="py-8 px-6"
-                />
+                <div id="footer" data-section="footer">
+                    <FooterLogoReveal
+                        logoText="Bella Italia"
+                        leftLink={{ text: "Privacy Policy", href: "#" }}
+                        rightLink={{ text: "Terms of Service", href: "#" }}
+                        className="py-8 px-6"
+                    />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index e07420e..c8b71a4 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -1,4 +1,4 @@
-use client";
+"use client";
 
 import { Suspense, use, useCallback } from "react";
 import { useRouter } from "next/navigation";
@@ -108,7 +108,6 @@ function ProductPageContent({ params }: ProductPageProps) {
                             logoText="Bella Italia"
                             leftLink={{ text: "Privacy Policy", href: "#" }}
                             rightLink={{ text: "Terms of Service", href: "#" }}
-                            useInvertedBackground={false}
                             className="py-8 px-6"
                         />
                     </div>
@@ -159,7 +158,6 @@ function ProductPageContent({ params }: ProductPageProps) {
                             logoText="Bella Italia"
                             leftLink={{ text: "Privacy Policy", href: "#" }}
                             rightLink={{ text: "Terms of Service", href: "#" }}
-                            useInvertedBackground={false}
                             className="py-8 px-6"
                         />
                     </div>
@@ -234,7 +232,6 @@ function ProductPageContent({ params }: ProductPageProps) {
                         logoText="Bella Italia"
                         leftLink={{ text: "Privacy Policy", href: "#" }}
                         rightLink={{ text: "Terms of Service", href: "#" }}
-                        useInvertedBackground={false}
                         className="py-8 px-6"
                     />
                 </div>
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 8d02bfa..aa6375f 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";
@@ -50,7 +50,6 @@ export default function ShopPage() {
                             logoText="Bella Italia"
                             leftLink={{ text: "Privacy Policy", href: "#" }}
                             rightLink={{ text: "Terms of Service", href: "#" }}
-                            useInvertedBackground={false}
                             className="py-8 px-6"
                         />
                     </div>
@@ -100,7 +99,6 @@ export default function ShopPage() {
                         logoText="Bella Italia"
                         leftLink={{ text: "Privacy Policy", href: "#" }}
                         rightLink={{ text: "Terms of Service", href: "#" }}
-                        useInvertedBackground={false}
                         className="py-8 px-6"
                     />
                 </div>