diff --git a/src/app/page.tsx b/src/app/page.tsx
index 06740fd..24cc24b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,7 +9,6 @@ import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import Link from 'next/link';
 
 export default function Home() {
   const navItems = [
@@ -19,7 +18,18 @@ 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">
         <NavbarStyleFullscreen navItems={navItems} />
       </div>
@@ -27,22 +37,22 @@ export default function Home() {
         <HeroBillboard title="Welcome" description="Description" background={{ variant: "plain" }} />
       </div>
       <div id="highlights" data-section="highlights">
-        <FeatureCardTwelve features={[]} animationType="none" title="Highlights" description="Features" textboxLayout="default" />
+        <FeatureCardTwelve features={[{id: "1", label: "Fast", title: "Speed", items: ["Item 1"]}]} animationType="none" title="Highlights" description="Features" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="menu" data-section="menu">
         <ProductCardFour gridVariant="bento-grid" animationType="none" title="Menu" description="Products" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="about" data-section="about">
-        <MetricSplitMediaAbout title="About" description="Details" metrics={[]} useInvertedBackground={false} mediaAnimation="none" metricsAnimation="none" />
+        <MetricSplitMediaAbout title="About" description="Details" metrics={[{value: "100", title: "Users"}]} useInvertedBackground={false} mediaAnimation="none" metricsAnimation="none" />
       </div>
       <div id="hours" data-section="hours">
-        <MetricCardSeven metrics={[]} animationType="none" title="Hours" description="Metrics" textboxLayout="default" />
+        <MetricCardSeven metrics={[{id: "1", value: "8AM", title: "Open", items: []}]} animationType="none" title="Hours" description="Metrics" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="reservation" data-section="reservation">
-        <ContactCTA tag="Reservation" title="Book Now" description="Reserve your spot" buttons={[{ text: "Book" }]} />
+        <ContactCTA tag="Reservation" title="Book Now" description="Reserve your spot" buttons={[{ text: "Book" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardOne testimonials={[]} gridVariant="bento-grid" animationType="none" title="Testimonials" description="Reviews" textboxLayout="default" />
+        <TestimonialCardOne testimonials={[{id: "1", name: "John", role: "CEO", company: "Corp", rating: 5}]} gridVariant="bento-grid" animationType="none" title="Testimonials" description="Reviews" textboxLayout="default" useInvertedBackground={false} />
       </div>
       <div id="footer" data-section="footer">
         <FooterBaseReveal logoText="Brand" columns={[]} />