diff --git a/src/app/page.tsx b/src/app/page.tsx
index e527a08..2c0f583 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,12 +7,22 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Shield, ArrowRight, Star } from 'lucide-react';
 
 export default function Page() {
   const navItems = [{ name: "Home", id: "/" }];
   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"
+    >
       <div id="nav" data-section="nav">
         <NavbarStyleApple navItems={navItems} />
       </div>
@@ -30,12 +40,14 @@ export default function Page() {
           description="Expert plumbing and heating solutions." 
           animationType="blur-reveal" 
           textboxLayout="default" 
+          useInvertedBackground={false}
           features={[{ id: "1", label: "Plumbing", title: "Plumbing Repair", items: ["Leak detection", "Pipe repair", "Drain cleaning"] }, { id: "2", label: "Heating", title: "Heating Services", items: ["Boiler service", "Furnace repair", "Radiant heat"] }]} 
         />
       </div>
       <div id="about" data-section="about">
         <InlineImageSplitTextAbout 
           heading={[{ type: "text", content: "About Our Team" }]} 
+          useInvertedBackground={false}
         />
       </div>
       <div id="reviews" data-section="reviews">
@@ -44,12 +56,14 @@ export default function Page() {
           cardTitle="What Our Clients Say" 
           cardTag="Reviews" 
           cardAnimation="blur-reveal" 
+          useInvertedBackground={false}
         />
       </div>
       <div id="contact" data-section="contact">
         <ContactText 
           text="Get in touch with us for your plumbing and heating needs." 
           background={{ variant: "plain" }} 
+          useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">