diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx
index 0cfc9a7..8154fc8 100644
--- a/src/app/about-us/page.tsx
+++ b/src/app/about-us/page.tsx
@@ -8,11 +8,17 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function AboutUsPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "About Us", id: "/about-us" }, { name: "Contact", id: "/contact" }]} brandName="WatchHub" />
-        <SplitAbout title="About Us" description="Learn about our journey and passion for watchmaking." textboxLayout="default" />
-        <FooterBaseCard logoText="WatchHub" columns={[]} />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "About Us", id: "/about-us" }, { name: "Contact", id: "/contact" }]} />
+        </div>
+        <div id="about" data-section="about">
+          <SplitAbout title="About Us" description="Learn about our journey and passion for watchmaking." textboxLayout="default" bulletPoints={[]} useInvertedBackground={false} />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard logoText="WatchHub" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 519f49b..d9d7e51 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -8,11 +8,17 @@ import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function ContactPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "About Us", id: "/about-us" }, { name: "Contact", id: "/contact" }]} brandName="WatchHub" />
-        <ContactText text="Get in touch with our team." background={{ variant: "plain" }} />
-        <FooterBaseCard logoText="WatchHub" columns={[]} />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "About Us", id: "/about-us" }, { name: "Contact", id: "/contact" }]} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactText text="Get in touch with our team." background={{ variant: "plain" }} useInvertedBackground={false} />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard logoText="WatchHub" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 34b1a65..2f0deed 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -3,22 +3,30 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function ShopPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
-        <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "About Us", id: "/about-us" }, { name: "Contact", id: "/contact" }]} brandName="WatchHub" />
-        <ProductCardOne 
-            gridVariant="four-items-2x2-equal-grid" 
-            animationType="slide-up" 
-            textboxLayout="default" 
-            title="Our Shop"
-            description="All collections available now."
-        />
-        <FooterBaseCard logoText="WatchHub" columns={[]} />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }, { name: "About Us", id: "/about-us" }, { name: "Contact", id: "/contact" }]} />
+        </div>
+        <div id="products" data-section="products">
+          <ProductCardTwo 
+              gridVariant="four-items-2x2-equal-grid" 
+              animationType="slide-up" 
+              textboxLayout="default" 
+              title="Our Shop"
+              description="All collections available now."
+              useInvertedBackground={false}
+              products={[]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard logoText="WatchHub" columns={[]} />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );