diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index af5167c..41d7a9f 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -3,24 +3,21 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import MediaAbout from '@/components/sections/about/MediaAbout';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function AboutPage() {
   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>
-        <NavbarStyleApple 
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple 
             navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]} 
             brandName="VELORA" 
-        />
-        <MediaAbout
-          title="Our Story"
-          description="Founded on the principles of timeless design, Velora redefines modern luxury for the discerning individual."
-          imageSrc="http://img.b2bpic.net/free-photo/luxury-fashion-atelier_23-2150863970.jpg"
-          useInvertedBackground={false}
-        />
-        <FooterSimple columns={[]} />
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2024 VELORA" bottomRightText="All Rights Reserved" />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 7f5d788..08689d7 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -3,25 +3,21 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCart from '@/components/ecommerce/cart/ProductCart';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function CartPage() {
   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>
-        <NavbarStyleApple 
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple 
             navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]} 
             brandName="VELORA" 
-        />
-        <ProductCart
-          isOpen={true}
-          onClose={() => {}}
-          items={[]}
-          total="$0"
-          buttons={[{ text: "Proceed to Checkout", href: "/checkout" }]}
-        />
-        <FooterSimple columns={[]} />
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2024 VELORA" bottomRightText="All Rights Reserved" />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index aacc234..b1aac9f 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -7,17 +7,17 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function CheckoutPage() {
   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>
-        <NavbarStyleApple 
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple 
             navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]} 
             brandName="VELORA" 
-        />
-        <div className="min-h-[60vh] flex flex-col items-center justify-center p-8">
-            <h1 className="text-4xl font-bold mb-4">Secure Checkout</h1>
-            <p>Complete your purchase securely.</p>
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2024 VELORA" bottomRightText="All Rights Reserved" />
         </div>
-        <FooterSimple columns={[]} />
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 58e9949..d5755f6 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -9,21 +9,28 @@ import { Mail } from "lucide-react";
 
 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>
-        <NavbarStyleApple 
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple 
             navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]} 
             brandName="VELORA" 
-        />
-        <ContactFaq
-          ctaTitle="Get In Touch"
-          ctaDescription="Our dedicated team is here to assist you with your luxury needs."
-          ctaButton={{ text: "Email Us" }}
-          ctaIcon={Mail}
-          animationType="slide-up"
-          faqs={[]}
-        />
-        <FooterSimple columns={[]} />
+          />
+        </div>
+        <div id="faq" data-section="faq">
+          <ContactFaq
+            ctaTitle="Get In Touch"
+            ctaDescription="Our dedicated team is here to assist you with your luxury needs."
+            ctaButton={{ text: "Email Us" }}
+            ctaIcon={Mail}
+            animationType="slide-up"
+            faqs={[]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterSimple columns={[]} bottomLeftText="© 2024 VELORA" bottomRightText="All Rights Reserved" />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
diff --git a/src/app/product/[id]/page.tsx b/src/app/product/[id]/page.tsx
index 28cc3fa..83ca17c 100644
--- a/src/app/product/[id]/page.tsx
+++ b/src/app/product/[id]/page.tsx
@@ -1,32 +1,11 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { useParams } from "next/navigation";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 
-export default function ProductDetailPage() {
-    return (
-        <ThemeProvider>
-            <NavbarStyleApple
-                navItems={[
-                    { name: "Home", id: "/" },
-                    { name: "Shop", id: "/shop" },
-                ]}
-                brandName="VELORA"
-            />
-            <div className="container mx-auto pt-32 px-6 flex flex-col md:flex-row gap-12">
-                <div className="w-full md:w-1/2 aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
-                    <span className="text-gray-400">Product Image</span>
-                </div>
-                <div className="w-full md:w-1/2 flex flex-col gap-6">
-                    <h1 className="text-4xl font-bold">Premium Essential Piece</h1>
-                    <p className="text-2xl">$295</p>
-                    <p className="text-gray-600">Crafted with precision, designed for elegance. This piece is a wardrobe staple.</p>
-                    <button className="w-full md:w-auto bg-black text-white px-8 py-3 rounded-full hover:opacity-80">
-                        Add to Cart
-                    </button>
-                </div>
-            </div>
-        </ThemeProvider>
-    );
+export default function ProductPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div />
+    </ThemeProvider>
+  );
 }
\ No newline at end of file
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 69457f1..19cc12b 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -1,32 +1,18 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 
 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>
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Shop", id: "/shop" },
-            { name: "Women", id: "/women" },
-            { name: "Men", id: "/men" },
-          ]}
-          brandName="VELORA"
-        />
-        <div className="pt-24">
-            <ProductCatalog
-                layout="page"
-                products={[
-                    { id: "p1", name: "Oversized Blazer", price: "$295", rating: 5, imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=2" },
-                    { id: "p2", name: "Linen Shirt", price: "$120", rating: 4, imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=3" }
-                ]}
-                filters={[{ label: "Category", options: ["All", "Men", "Women"], selected: "All", onChange: (v) => console.log(v) }]}
-            />
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple 
+            navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }, { name: "Shop", id: "/shop" }]} 
+            brandName="VELORA" 
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>