diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index f6f130c..ad56047 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -5,18 +5,17 @@ import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { Shield } from "lucide-react";
 
 export default function AboutPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <div id="nav" data-section="nav">
             <NavbarStyleApple
             navItems={[
               { name: "About", id: "/about" },
               { name: "Athletes", id: "/athletes" },
-              { name: "Shop", id: "/#products" },
+              { name: "Shop", id: "/" },
             ]}
             brandName="OKIRO"
           />
diff --git a/src/app/athletes/page.tsx b/src/app/athletes/page.tsx
index ff04fb6..857a1b1 100644
--- a/src/app/athletes/page.tsx
+++ b/src/app/athletes/page.tsx
@@ -8,14 +8,14 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function AthletesPage() {
   return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <div id="nav" data-section="nav">
             <NavbarStyleApple
             navItems={[
               { name: "About", id: "/about" },
               { name: "Athletes", id: "/athletes" },
-              { name: "Shop", id: "/#products" },
+              { name: "Shop", id: "/" },
             ]}
             brandName="OKIRO"
           />
@@ -26,6 +26,7 @@ export default function AthletesPage() {
               textboxLayout="split"
               title="Our Athlete Team"
               description="Meet the professionals who test our gear under the most extreme conditions."
+              useInvertedBackground={false}
               groups={[
                 {
                   id: "g1",                  groupTitle: "Professional Grapplers",                  members: [
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index df9af75..ef514f6 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -2,15 +2,21 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { ShoppingCart, ArrowRight } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 
 export default function CartPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{ name: "Back to Store", id: "/" }]} 
-        brandName="OKIRO"
-      />
+    <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: "About", id: "/about" },
+              { name: "Athletes", id: "/athletes" }
+          ]} 
+          brandName="OKIRO"
+        />
+      </div>
       <div className="container mx-auto px-4 py-20 min-h-[80vh] flex flex-col items-center justify-center">
         <h1 className="text-4xl font-bold mb-8">Your Tactical Kit</h1>
         <div className="w-full max-w-2xl bg-zinc-900/50 p-8 rounded-xl border border-zinc-800">
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index 387323d..bd386fe 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -5,17 +5,22 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 
 export default function CheckoutPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{ name: "Cart", id: "/cart" }]} 
-        brandName="OKIRO"
-      />
+    <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: "About", id: "/about" },
+              { name: "Athletes", id: "/athletes" }
+          ]} 
+          brandName="OKIRO"
+        />
+      </div>
       <div className="container mx-auto px-4 py-20">
         <h1 className="text-4xl font-bold mb-12">Secure Checkout</h1>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
           <div className="bg-zinc-900/50 p-8 rounded-xl border border-zinc-800">
             <h2 className="text-2xl font-semibold mb-6">Shipping Details</h2>
-            {/* Checkout Form placeholder */}
             <div className="space-y-4">
               <input type="text" placeholder="Full Name" className="w-full bg-black p-3 rounded border border-zinc-700" />
               <input type="email" placeholder="Email" className="w-full bg-black p-3 rounded border border-zinc-700" />
diff --git a/src/app/confirmation/page.tsx b/src/app/confirmation/page.tsx
index 4a67e0e..7b17efa 100644
--- a/src/app/confirmation/page.tsx
+++ b/src/app/confirmation/page.tsx
@@ -6,11 +6,17 @@ import { CheckCircle } from "lucide-react";
 
 export default function ConfirmationPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{ name: "Home", id: "/" }]} 
-        brandName="OKIRO"
-      />
+    <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: "About", id: "/about" },
+              { name: "Athletes", id: "/athletes" }
+          ]} 
+          brandName="OKIRO"
+        />
+      </div>
       <div className="container mx-auto px-4 py-20 flex flex-col items-center justify-center min-h-[60vh]">
         <CheckCircle className="w-20 h-20 text-white mb-6" />
         <h1 className="text-4xl font-bold mb-4">Order Confirmed</h1>
diff --git a/src/app/fight-shorts/page.tsx b/src/app/fight-shorts/page.tsx
index e55dfa7..540f7e9 100644
--- a/src/app/fight-shorts/page.tsx
+++ b/src/app/fight-shorts/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function FightShortsPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Fight Shorts"
-        description="Lightweight, moisture-wicking shorts built for intense grappling sessions."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "s1", name: "Pro Training Short", price: "$55", variant: "Midnight", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-hoodie-having-her-eyes-closed_23-2148322452.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <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: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Fight Shorts"
+          description="Lightweight, moisture-wicking shorts built for intense grappling sessions."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "s1", name: "Pro Training Short", price: "$55", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-hoodie-having-her-eyes-closed_23-2148322452.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/gis/page.tsx b/src/app/gis/page.tsx
index d7dc12b..02a5da8 100644
--- a/src/app/gis/page.tsx
+++ b/src/app/gis/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function GisPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Gis"
-        description="Tournament-grade gis engineered for ultimate comfort and resilience."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "g1", name: "Elite GI", price: "$195", variant: "White/Gold", imageSrc: "http://img.b2bpic.net/free-photo/pair-gloves-boxing-sport_23-2150367640.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <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: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Gis"
+          description="Tournament-grade gis engineered for ultimate comfort and resilience."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "g1", name: "Elite GI", price: "$195", imageSrc: "http://img.b2bpic.net/free-photo/pair-gloves-boxing-sport_23-2150367640.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/rashguards/page.tsx b/src/app/rashguards/page.tsx
index ed41de4..c7c1a81 100644
--- a/src/app/rashguards/page.tsx
+++ b/src/app/rashguards/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function RashguardsPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Rashguards"
-        description="High-performance compression wear designed for durability and mobility."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "r1", name: "Long Sleeve Tactical", price: "$85", variant: "Black/Grey", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <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: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Rashguards"
+          description="High-performance compression wear designed for durability and mobility."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "r1", name: "Long Sleeve Tactical", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/womens-apparel/page.tsx b/src/app/womens-apparel/page.tsx
index 01dbada..289f038 100644
--- a/src/app/womens-apparel/page.tsx
+++ b/src/app/womens-apparel/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 
 export default function WomensApparelPage() {
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Women's Apparel"
-        description="Performance gear tailored for women, blending style and functionality."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "w1", name: "Compression Leggings", price: "$70", variant: "Shadow", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <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: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Women's Apparel"
+          description="Performance gear tailored for women, blending style and functionality."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "w1", name: "Compression Leggings", price: "$70", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file