diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx
index ea01f7a..20c1412 100644
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -8,22 +8,21 @@ import FooterCard from '@/components/sections/footer/FooterCard';
 
 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>
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Products", id: "/#products" },
-            { name: "About", id: "/#about" },
-            { name: "Contact", id: "/#contact" },
+            { name: "Products", id: "/products" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
             { name: "Checkout", id: "/checkout" },
             { name: "Profile", id: "/profile" },
             { name: "Confirmation", id: "/order-confirmation" }
           ]}
-          brandName="ELEGANT SKIN"
         />
         <div className="min-h-screen pt-32">
-           <ContactSplit title="Checkout" description="Please enter your shipping and payment details to complete your order." tag="Order" background={{ variant: "plain" }} />
+           <ContactSplit title="Checkout" description="Please enter your shipping and payment details to complete your order." tag="Order" background={{ variant: "plain" }} useInvertedBackground={false} />
         </div>
         <FooterCard logoText="ELEGANT SKIN" copyrightText="© 2025 Elegant Skin. All rights reserved." />
       </ReactLenis>
diff --git a/src/app/order-confirmation/page.tsx b/src/app/order-confirmation/page.tsx
index eaf5823..563d7bb 100644
--- a/src/app/order-confirmation/page.tsx
+++ b/src/app/order-confirmation/page.tsx
@@ -8,22 +8,21 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
 
 export default function OrderConfirmationPage() {
   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>
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Products", id: "/#products" },
-            { name: "About", id: "/#about" },
-            { name: "Contact", id: "/#contact" },
+            { name: "Products", id: "/products" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
             { name: "Checkout", id: "/checkout" },
             { name: "Profile", id: "/profile" },
             { name: "Confirmation", id: "/order-confirmation" }
           ]}
-          brandName="ELEGANT SKIN"
         />
         <div className="min-h-screen pt-32">
-           <MediaAbout title="Order Confirmed" description="Thank you for your purchase! Your order summary is below." />
+           <MediaAbout title="Order Confirmed" description="Thank you for your purchase! Your order summary is below." useInvertedBackground={false} />
         </div>
         <FooterCard logoText="ELEGANT SKIN" copyrightText="© 2025 Elegant Skin. All rights reserved." />
       </ReactLenis>
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index 56732e9..36deb4d 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -23,11 +23,10 @@ export default function ProductsPage() {
         navItems={[
           { name: "Home", id: "/" },
           { name: "Products", id: "/products" },
-          { name: "About", id: "/#about" },
-          { name: "Contact", id: "/#contact" },
+          { name: "About", id: "/about" },
+          { name: "Contact", id: "/contact" },
           { name: "Cart", id: "/cart" }
         ]}
-        brandName="ELEGANT SKIN"
       />
       <div className="pt-32 pb-20">
         <ProductCardThree
@@ -36,6 +35,7 @@ export default function ProductsPage() {
             gridVariant="four-items-2x2-equal-grid"
             animationType="slide-up"
             textboxLayout="default"
+            useInvertedBackground={false}
             products={[
                 { id: "p1", name: "Botanical Night Cream", price: "$45.00", imageSrc: "https://images.unsplash.com/photo-1598440947619-2c35fd959146?q=80&w=800" },
                 { id: "p2", name: "Day Radiance Cream", price: "$38.00", imageSrc: "https://images.unsplash.com/photo-1619451334792-150fd3d24c94?q=80&w=800" },
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 03a2197..6d456d2 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -8,22 +8,21 @@ import MediaAbout from '@/components/sections/about/MediaAbout';
 
 export default function ProfilePage() {
   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>
         <NavbarStyleFullscreen
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Products", id: "/#products" },
-            { name: "About", id: "/#about" },
-            { name: "Contact", id: "/#contact" },
+            { name: "Products", id: "/products" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
             { name: "Checkout", id: "/checkout" },
             { name: "Profile", id: "/profile" },
             { name: "Confirmation", id: "/order-confirmation" }
           ]}
-          brandName="ELEGANT SKIN"
         />
         <div className="min-h-screen pt-32">
-           <MediaAbout title="User Profile" description="Manage your account settings, order history, and preferences." />
+           <MediaAbout title="User Profile" description="Manage your account settings, order history, and preferences." useInvertedBackground={false} />
         </div>
         <FooterCard logoText="ELEGANT SKIN" copyrightText="© 2025 Elegant Skin. All rights reserved." />
       </ReactLenis>