diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6704d6d..a940823 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
@@ -12,110 +12,92 @@ import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
 import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
-const navItems = [
-  { name: "Home", id: "/" }
-];
-
-export default function Page() {
+export default function Home() {
   return (
-    <ThemeProvider 
-        defaultButtonVariant="text-stagger" 
-        defaultTextAnimation="entrance-slide" 
-        borderRadius="rounded" 
-        contentWidth="medium" 
-        sizing="medium" 
-        background="circleGradient" 
-        cardStyle="glass-elevated" 
-        primaryButtonStyle="gradient" 
-        secondaryButtonStyle="glass" 
-        headingFontWeight="normal"
-    >
+    <ThemeProvider>
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline navItems={navItems} button={{text: "Contact"}} />
+        <NavbarLayoutFloatingInline
+          navItems={[{ name: "Home", id: "/" }]}
+          brandName="Webild"
+          button={{ text: "Get Started" }}
+        />
       </div>
       <div id="hero" data-section="hero">
-        <HeroSplitTestimonial 
-            title="Revolutionize Your Workflow"
-            description="Seamlessly manage your tasks with our intelligent, AI-powered platform designed for modern teams."
-            background={{ variant: "gradient-bars" }}
-            testimonials={[]}
-            mediaAnimation="slide-up"
+        <HeroSplitTestimonial
+          title="Build Smarter"
+          description="Create beautiful, high-performing websites with ease."
+          background={{ variant: "gradient-bars" }}
+          testimonials={[]}
+          mediaAnimation="slide-up"
         />
       </div>
       <div id="social-proof" data-section="social-proof">
-        <SocialProofOne 
-            names={["Acme", "Globex", "Soylent Corp", "Initech"]}
-            title="Trusted by Industry Leaders"
-            description="Join the ranks of thousands of teams that rely on our platform daily."
-            textboxLayout="default"
-            useInvertedBackground={false}
+        <SocialProofOne
+          names={["Google", "Meta", "Netflix"]}
+          title="Trusted by Industry Leaders"
+          description="Powering innovation for the world's most recognizable brands."
+          textboxLayout="default"
         />
       </div>
       <div id="how-it-works" data-section="how-it-works">
-        <MetricCardSeven 
-            metrics={[]}
-            animationType="slide-up"
-            title="Efficient Processes"
-            description="Achieve more in less time with our streamlined metrics dashboard."
-            textboxLayout="default"
-            useInvertedBackground={false}
+        <MetricCardSeven
+          metrics={[{ id: "1", value: "10x", title: "Growth", items: ["Faster speed", "Better UX"] }]}
+          title="The Process"
+          description="How we get you from zero to hero."
+          animationType="slide-up"
+          textboxLayout="default"
         />
       </div>
       <div id="features" data-section="features">
-        <FeatureCardTwentyNine 
-            features={[]}
-            gridVariant="bento-grid"
-            animationType="slide-up"
-            title="Powerful Features"
-            description="Everything you need to scale your operations effortlessly."
-            textboxLayout="default"
-            useInvertedBackground={false}
+        <FeatureCardTwentyNine
+          features={[{ title: "Modern Tech", description: "Built with latest tech", imageSrc: "", titleImageSrc: "", buttonText: "Learn" }]}
+          gridVariant="bento-grid"
+          animationType="slide-up"
+          title="Powerful Features"
+          description="Everything you need to scale."
+          textboxLayout="default"
         />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardThirteen 
-            testimonials={[]}
-            showRating={true}
-            animationType="slide-up"
-            title="What Our Users Say"
-            description="Discover how our platform changed the way people work."
-            textboxLayout="default"
-            useInvertedBackground={false}
+        <TestimonialCardThirteen
+          testimonials={[]}
+          showRating={true}
+          animationType="slide-up"
+          title="What they say"
+          description="Real feedback from real users."
+          textboxLayout="default"
         />
       </div>
       <div id="pricing" data-section="pricing">
-        <PricingCardTwo 
-            plans={[]}
-            animationType="slide-up"
-            title="Transparent Pricing"
-            description="Choose the plan that best fits your growing needs."
-            textboxLayout="default"
-            useInvertedBackground={false}
+        <PricingCardTwo
+          plans={[]}
+          animationType="slide-up"
+          title="Simple Pricing"
+          description="Choose the plan that fits your team."
+          textboxLayout="default"
         />
       </div>
       <div id="faq" data-section="faq">
-        <FaqSplitMedia 
-            faqs={[]}
-            faqsAnimation="slide-up"
-            title="Frequently Asked Questions"
-            description="Find answers to common questions about our platform."
-            textboxLayout="default"
-            useInvertedBackground={false}
+        <FaqSplitMedia
+          faqs={[{ id: "1", title: "Is it free?", content: "Yes, for basic usage." }]}
+          title="Frequently Asked Questions"
+          description="Find answers to common questions."
+          faqsAnimation="slide-up"
+          textboxLayout="default"
         />
       </div>
       <div id="final-cta" data-section="final-cta">
-        <ContactCenter 
-            tag="Get Started"
-            title="Ready to boost your productivity?"
-            description="Join us today and start your journey towards efficient workflows."
-            background={{ variant: "gradient-bars" }}
-            useInvertedBackground={false}
+        <ContactCenter
+          tag="Contact"
+          title="Ready to Start?"
+          description="Join our community today."
+          background={{ variant: "gradient-bars" }}
         />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBaseReveal 
-            logoText="Webild"
-            columns={[]}
+        <FooterBaseReveal
+          logoText="Webild"
+          columns={[{ title: "Product", items: [{ label: "Features", href: "#" }] }]}
         />
       </div>
     </ThemeProvider>