diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 54557a8..93158e1 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -5,14 +5,29 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 
 export default function CartPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Shop", id: "/shop" },
-        ]}
-        brandName="LuxeShop"
-      />
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+            { name: "Cart", id: "/cart" },
+            { name: "Checkout", id: "/checkout" },
+          ]}
+          brandName="LuxeShop"
+        />
+      </div>
       <main className="container py-20">
         <h1 className="text-4xl font-bold mb-8">Your Shopping Cart</h1>
         <p>Your cart is currently empty.</p>
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index e0ca46d..b0396ef 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -5,14 +5,29 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 
 export default function CheckoutPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Shop", id: "/shop" },
-        ]}
-        brandName="LuxeShop"
-      />
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+            { name: "Cart", id: "/cart" },
+            { name: "Checkout", id: "/checkout" },
+          ]}
+          brandName="LuxeShop"
+        />
+      </div>
       <main className="container py-20">
         <h1 className="text-4xl font-bold mb-8">Checkout</h1>
         <p>Complete your purchase details here.</p>
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 1882a93..21cac44 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -2,31 +2,53 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function ShopPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Shop", id: "/shop" },
-          { name: "About", id: "/#about" },
-          { name: "Contact", id: "/#contact" },
-        ]}
-        brandName="LuxeShop"
-      />
-      <main className="py-20">
-        <ProductCatalog 
-          layout="page"
-          products={[
-            { id: "p1", name: "Classic Watch", price: "$450", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241141.jpg?_wi=1" },
-            { id: "p2", name: "Leather Tote", price: "$320", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/view-women-bag-stuff_93675-131548.jpg" }
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Shop", id: "/shop" },
+            { name: "Cart", id: "/cart" },
+            { name: "Checkout", id: "/checkout" },
           ]}
+          brandName="LuxeShop"
         />
+      </div>
+      <main className="py-20">
+        <div id="products" data-section="products">
+          <ProductCardOne 
+            gridVariant="four-items-2x2-equal-grid"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Our Collection"
+            products={[
+              { id: "p1", name: "Classic Watch", price: "$450", imageSrc: "http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241141.jpg" },
+              { id: "p2", name: "Leather Tote", price: "$320", imageSrc: "http://img.b2bpic.net/free-photo/view-women-bag-stuff_93675-131548.jpg" },
+              { id: "p3", name: "Silk Scarf", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/colorful-silk-scarves_23-2148796853.jpg" }
+            ]}
+          />
+        </div>
       </main>
-      <FooterSimple columns={[]} logoText="LuxeShop" />
+      <div id="footer" data-section="footer">
+        <FooterSimple columns={[{ title: "Shop", items: [{ label: "Home", href: "/" }, { label: "Shop", href: "/shop" }] }]} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file