diff --git a/src/app/page.tsx b/src/app/page.tsx
index f3c53b5..6554070 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,6 @@ import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import Link from 'next/link';
 
 export default function HomePage() {
   const navItems = [
@@ -16,7 +15,18 @@ export default function HomePage() {
   ];
 
   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">
         <NavbarStyleCentered navItems={navItems} />
       </div>
@@ -29,7 +39,7 @@ export default function HomePage() {
         />
       </div>
       <div id="manifesto" data-section="manifesto">
-        <MediaAbout title="Our Vision" description="Driving innovation forward." />
+        <MediaAbout title="Our Vision" description="Driving innovation forward." useInvertedBackground={false} />
       </div>
       <div id="atlas" data-section="atlas">
         <FeatureCardNine 
@@ -39,10 +49,11 @@ export default function HomePage() {
           textboxLayout="default" 
           showStepNumbers={false} 
           features={[]}
+          useInvertedBackground={false}
         />
       </div>
       <div id="metrics" data-section="metrics">
-        <MetricCardFourteen title="Our Impact" tag="Growth" metrics={[]} metricsAnimation="none" />
+        <MetricCardFourteen title="Our Impact" tag="Growth" metrics={[]} metricsAnimation="none" useInvertedBackground={false} />
       </div>
       <div id="orion" data-section="orion">
         <FeatureCardNine 
@@ -52,10 +63,11 @@ export default function HomePage() {
           textboxLayout="default" 
           showStepNumbers={false} 
           features={[]}
+          useInvertedBackground={false}
         />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCenter tag="Connect" title="Get in touch" description="Let's build something." background={{ variant: "plain" }} />
+        <ContactCenter tag="Connect" title="Get in touch" description="Let's build something." background={{ variant: "plain" }} useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
         <FooterMedia imageSrc="https://images.unsplash.com/photo-1557683316-973673baf926" logoText="Webild" columns={[]} />