diff --git a/src/app/page.tsx b/src/app/page.tsx
index c608aa2..ebbd86a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,18 +15,44 @@ 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>
       <div id="home" data-section="home">
-        <HeroLogo logoText="Webild" description="Welcome to our site" />
+        <HeroLogo 
+          logoText="Webild" 
+          description="Welcome to our site" 
+          buttons={[{ text: "Get Started", href: "#" }]} 
+        />
       </div>
       <div id="social" data-section="social">
-        <SocialProofOne names={['Partner 1', 'Partner 2']} title="Trusted By" />
+        <SocialProofOne 
+          names={['Partner 1', 'Partner 2']} 
+          title="Trusted By" 
+          description="Our partners" 
+          textboxLayout="default" 
+          useInvertedBackground={false} 
+        />
       </div>
       <div id="about" data-section="about">
-        <MetricSplitMediaAbout title="About Us" description="Our mission is simple." metrics={[{ value: '100%', title: 'Happiness' }]} />
+        <MetricSplitMediaAbout 
+          title="About Us" 
+          description="Our mission is simple." 
+          metrics={[{ value: '100%', title: 'Happiness' }]} 
+          useInvertedBackground={false}
+        />
       </div>
       <div id="menu" data-section="menu">
         <ProductCardThree
@@ -35,19 +61,45 @@ export default function Page() {
           animationType="slide-up"
           textboxLayout="default"
           title="Our Menu"
+          description="Explore our selection."
+          useInvertedBackground={false}
         />
       </div>
       <div id="why-us" data-section="why-us">
-        <FeatureCardOne features={[{ title: 'Feature 1', description: 'Desc 1', imageSrc: '/placeholder.png' }, { title: 'Feature 2', description: 'Desc 2', imageSrc: '/placeholder.png' }]} animationType="slide-up" textboxLayout="default" title="Why Choose Us" />
+        <FeatureCardOne 
+          features={[{ title: 'Feature 1', description: 'Desc 1', imageSrc: '/placeholder.png' }, { title: 'Feature 2', description: 'Desc 2', imageSrc: '/placeholder.png' }]} 
+          animationType="slide-up" 
+          textboxLayout="default" 
+          title="Why Choose Us" 
+          description="We are the best."
+          gridVariant="uniform-all-items-equal"
+          useInvertedBackground={false}
+        />
       </div>
       <div id="reviews" data-section="reviews">
-        <TestimonialCardTwo testimonials={[{ id: '1', name: 'User 1', role: 'Role 1', testimonial: 'Great!' }, { id: '2', name: 'User 2', role: 'Role 2', testimonial: 'Amazing!' }]} animationType="slide-up" textboxLayout="default" title="Reviews" />
+        <TestimonialCardTwo 
+          testimonials={[{ id: '1', name: 'User 1', role: 'Role 1', testimonial: 'Great!' }, { id: '2', name: 'User 2', role: 'Role 2', testimonial: 'Amazing!' }]} 
+          animationType="slide-up" 
+          textboxLayout="default" 
+          title="Reviews" 
+          description="What people say."
+          useInvertedBackground={false}
+        />
       </div>
       <div id="contact" data-section="contact">
-        <ContactSplitForm title="Contact Us" description="We'd love to hear from you." inputs={[{ name: 'email', type: 'email', placeholder: 'Email' }, { name: 'message', type: 'text', placeholder: 'Message' }]} />
+        <ContactSplitForm 
+          title="Contact Us" 
+          description="We'd love to hear from you." 
+          inputs={[{ name: 'email', type: 'email', placeholder: 'Email' }, { name: 'message', type: 'text', placeholder: 'Message' }]} 
+          useInvertedBackground={false}
+        />
       </div>
       <div id="footer" data-section="footer">
-        <FooterSimple columns={[{ title: 'Links', items: [{ label: 'Home', href: '/' }] }]} bottomRightText="© 2025" />
+        <FooterSimple 
+          columns={[{ title: 'Links', items: [{ label: 'Home', href: '/' }] }]} 
+          bottomLeftText="© 2025"
+          bottomRightText="All rights reserved"
+        />
       </div>
     </ThemeProvider>
   );