diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index aa4ee8b..f0acf12 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -6,7 +6,7 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 
 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">
       <NavbarStyleCentered
         navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
         brandName="Elite Fence Pro"
@@ -15,6 +15,7 @@ export default function AboutPage() {
         <TextSplitAbout
           title="About Our Company"
           description={["Elite Fence Pro provides top-tier fencing services to residential and commercial clients across the nation. We believe in quality, reliability, and security."]}
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index a781809..12eba91 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -6,10 +6,10 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 import ReactLenis from "lenis/react";
 
 export default function CartPage() {
-  const [cart, setCart] = useState([{ id: "p1", name: "Cedar Planks", price: "$45", quantity: 1, imageSrc: "" }]);
+  const [cart] = useState([{ id: "p1", name: "Cedar Planks", price: "$45", quantity: 1, imageSrc: "" }]);
 
   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>
         <NavbarStyleCentered 
           navItems={[
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index c1221bb..58e662d 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -6,7 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function ContactPage() {
   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: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
         brandName="Elite Fence Pro"
@@ -17,6 +17,8 @@ export default function ContactPage() {
           title="Get in Touch"
           description="We're ready to help you secure your property. Contact us today for a free assessment."
           buttons={[{ text: "Call (555) 012-3456", href: "tel:5550123456" }]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
         />
       </div>
     </ThemeProvider>
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index d69cf71..1150142 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -5,7 +5,7 @@ import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarS
 
 export default function LoginPage() {
   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: "About", id: "/about" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }, { name: "Login", id: "/login" }]}
         brandName="Elite Fence Pro"
diff --git a/src/app/menu/page.tsx b/src/app/menu/page.tsx
index d0957b3..2dcee72 100644
--- a/src/app/menu/page.tsx
+++ b/src/app/menu/page.tsx
@@ -15,7 +15,7 @@ export default function MenuPage() {
   ];
 
   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>
         <NavbarStyleCentered 
           navItems={[