diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 59f8d9b..da9b28e 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -15,6 +15,7 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
+    const navItems = [{ name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, { name: "About", id: "/about" }];
 
     return (
         <ThemeProvider
@@ -30,45 +31,40 @@ export default function BlogPage() {
             headingFontWeight="medium"
         >
             <ReactLenis root>
-                {/* NAVBAR: Using NavbarStyleApple as required */}
-                <NavbarStyleApple
-                    navItems={[
-                        { name: "Home", id: "/" },
-                        { name: "Menu", id: "/menu" },
-                        { name: "Peking Duck", id: "/peking-duck" },
-                        { name: "About", id: "/about" },
-                        { name: "Visit", id: "/visit" },
-                        { name: "Order", id: "/order" },
-                    ]}
-                    brandName="Moys Chinese Restaurant"
-                />
+                <div id="nav" data-section="nav">
+                    <NavbarStyleApple
+                        navItems={navItems}
+                        brandName="Moys Chinese Restaurant"
+                    />
+                </div>
 
-                {/* POSTS LOGIC: Preserved exactly as is */}
                 {isLoading ? (
                     <div className="w-content-width mx-auto py-20 text-center">
                         <p className="text-foreground">Loading posts...</p>
                     </div>
                 ) : (
-                    /* BLOG SECTION: Using BlogCardOne with generated props, except for 'posts' */
-                    <BlogCardOne
-                        blogs={posts}
-                        title="Latest Articles"
-                        description="Insights and updates from our team"
-                        animationType="slide-up"
-                        textboxLayout="default"
-                        useInvertedBackground={false}
-                        carouselMode="buttons"
-                    />
+                    <div id="blog-posts" data-section="blog-posts">
+                        <BlogCardOne
+                            blogs={posts}
+                            title="Latest Articles"
+                            description="Insights and updates from our team"
+                            animationType="slide-up"
+                            textboxLayout="default"
+                            useInvertedBackground={false}
+                            carouselMode="buttons"
+                        />
+                    </div>
                 )}
 
-                {/* FOOTER: Using FooterLogoReveal as required */}
-                <FooterLogoReveal
-                    logoText="Moys Chinese Restaurant"
-                    leftLink={{ text: "Privacy Policy", href: "/privacy" }}
-                    rightLink={{ text: "Terms of Service", href: "/terms" }}
-                    className="bg-ink-black"
-                    linkClassName="text-porcelain-cream/80 hover:text-warm-gold"
-                />
+                <div id="footer" data-section="footer">
+                    <FooterLogoReveal
+                        logoText="Moys Chinese Restaurant"
+                        leftLink={{ text: "Privacy Policy", href: "/privacy" }}
+                        rightLink={{ text: "Terms of Service", href: "/terms" }}
+                        className="bg-ink-black"
+                        linkClassName="text-porcelain-cream/80 hover:text-warm-gold"
+                    />
+                </div>
             </ReactLenis>
         </ThemeProvider>
     );