diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 02d6e91..8677128 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 
 export default function CartPage() {
   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">
       <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }]} brandName="E-Shop" />
       <div className="container mx-auto py-20 px-6">
         <h1 className="text-4xl font-bold mb-8">Your Shopping Cart</h1>
diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index f367862..5124001 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 
 export default function CheckoutPage() {
   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">
       <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }]} brandName="E-Shop" />
       <div className="container mx-auto py-20 px-6">
         <h1 className="text-4xl font-bold mb-8">Checkout</h1>
diff --git a/src/app/confirmation/page.tsx b/src/app/confirmation/page.tsx
index cb933dc..00a7a98 100644
--- a/src/app/confirmation/page.tsx
+++ b/src/app/confirmation/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 
 export default function ConfirmationPage() {
   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">
       <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Cart", id: "/cart" }]} brandName="E-Shop" />
       <div className="container mx-auto py-20 px-6">
         <h1 className="text-4xl font-bold mb-8">Thank You!</h1>
diff --git a/src/app/haircare/page.tsx b/src/app/haircare/page.tsx
index e6e3093..f5538de 100644
--- a/src/app/haircare/page.tsx
+++ b/src/app/haircare/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 
 export default function HaircarePage() {
   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">
       <NavbarStyleCentered
         navItems={[{ name: "Home", id: "/" }, { name: "Skincare", id: "/skincare" }, { name: "Makeup", id: "/makeup" }, { name: "Haircare", id: "/haircare" }, { name: "Contact", id: "/" }]} 
         brandName="E-Shop"
diff --git a/src/app/makeup/page.tsx b/src/app/makeup/page.tsx
index f09fc49..656d7e4 100644
--- a/src/app/makeup/page.tsx
+++ b/src/app/makeup/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 
 export default function MakeupPage() {
   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">
       <NavbarStyleCentered
         navItems={[{ name: "Home", id: "/" }, { name: "Skincare", id: "/skincare" }, { name: "Makeup", id: "/makeup" }, { name: "Haircare", id: "/haircare" }, { name: "Contact", id: "/" }]} 
         brandName="E-Shop"
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index eb0d875..f50fe15 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -67,6 +67,7 @@ export default function ShopPage() {
                 animationType="slide-up"
                 textboxLayout="default"
                 gridVariant="uniform-all-items-equal"
+                useInvertedBackground={false}
                 title="Shop Products"
                 description="Explore our full range of curated items."
                 products={products.filter(p => p.name.toLowerCase().includes(search.toLowerCase()))}
diff --git a/src/app/skincare/page.tsx b/src/app/skincare/page.tsx
index f016349..ccd3eb9 100644
--- a/src/app/skincare/page.tsx
+++ b/src/app/skincare/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 
 export default function SkincarePage() {
   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">
       <NavbarStyleCentered
         navItems={[{ name: "Home", id: "/" }, { name: "Skincare", id: "/skincare" }, { name: "Makeup", id: "/makeup" }, { name: "Haircare", id: "/haircare" }, { name: "Contact", id: "/" }]} 
         brandName="E-Shop"