diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2d8bf31..fdcab30 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,7 +19,7 @@ export default function Home() {
   ];
 
   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>
@@ -27,25 +27,25 @@ export default function Home() {
         <HeroSignup title="Welcome" description="Build faster." tag="New" background={{ variant: "plain" }} />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardTwentyFour title="Services" description="Our core offerings." features={[]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <FeatureCardTwentyFour title="Services" description="Our core offerings." features={[{ id: "1", title: "Service 1", author: "Admin", description: "High quality service.", tags: ["pro"] }, { id: "2", title: "Service 2", author: "Admin", description: "High quality service.", tags: ["pro"] }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="why" data-section="why">
-        <MetricCardSeven title="Why Us" metrics={[]} animationType="slide-up" textboxLayout="default" />
+        <MetricCardSeven title="Why Us" metrics={[{ id: "1", value: "100%", title: "Uptime", items: [] }, { id: "2", value: "24/7", title: "Support", items: [] }]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="projects" data-section="projects">
-        <ProductCardThree title="Projects" products={[]} gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" />
+        <ProductCardThree title="Projects" products={[{ id: "1", name: "Proj 1", price: "$10", imageSrc: "/img.jpg" }, { id: "2", name: "Proj 2", price: "$20", imageSrc: "/img.jpg" }, { id: "3", name: "Proj 3", price: "$30", imageSrc: "/img.jpg" }]} gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="about" data-section="about">
-        <MetricSplitMediaAbout title="About" description="Our mission." metrics={[]} mediaAnimation="slide-up" metricsAnimation="slide-up" />
+        <MetricSplitMediaAbout title="About" description="Our mission." metrics={[{ value: "10+ years", title: "Experience" }, { value: "500+ projects", title: "Delivered" }]} mediaAnimation="slide-up" metricsAnimation="slide-up" useInvertedBackground={false} />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitMedia title="FAQ" description="Questions?" faqs={[]} faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} />
+        <FaqSplitMedia title="FAQ" description="Questions?" faqs={[{ id: "1", title: "How?", content: "Like this." }, { id: "2", title: "When?", content: "Now." }]} faqsAnimation="slide-up" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactCenter title="Contact" description="Get in touch." tag="Support" background={{ variant: "plain" }} />
+        <ContactCenter title="Contact" description="Get in touch." tag="Support" background={{ variant: "plain" }} useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBaseCard logoText="Brand" columns={[]} />
+        <FooterBaseCard logoText="Brand" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
       </div>
     </ThemeProvider>
   );