diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2e9daf4..246de40 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,5 @@
-'use client';
-
-import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
@@ -10,31 +9,47 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Star } from 'lucide-react';
 
-const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "/about" },
+  { name: "Services", id: "/services" },
+  { name: "Contact", id: "/contact" }
+];
 
-export default function Page() {
+export default function Home() {
   return (
-    <ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+    <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>
       <div id="hero" data-section="hero">
-        <HeroBillboard title="Welcome to Our Platform" description="Build your future with our advanced tools and community-driven solutions." background={{ variant: 'animated-grid' }} />
+        <HeroBillboard title="Webild Platform" description="Innovative solutions for your future." background={{ variant: "animated-grid" }} />
       </div>
       <div id="about" data-section="about">
-        <InlineImageSplitTextAbout heading={[{ type: 'text', content: 'About Us' }]} useInvertedBackground={false} />
+        <InlineImageSplitTextAbout heading={[{ type: "text", content: "About Webild" }]} />
       </div>
       <div id="services" data-section="services">
-        <FeatureCardTwentyNine title="Our Services" description="Explore what we offer" gridVariant="bento-grid" animationType="blur-reveal" textboxLayout="default" useInvertedBackground={false} features={[{ title: 'Innovation', description: 'Cutting edge tech', imageSrc: 'https://images.unsplash.com/photo-1518770660439-4636190af475', titleIconSrc: 'https://images.unsplash.com/photo-1518770660439-4636190af475', buttonText: 'Learn More' }, { title: 'Security', description: 'Safe and secure', imageSrc: 'https://images.unsplash.com/photo-1563986768609-322da13575f3', titleIconSrc: 'https://images.unsplash.com/photo-1563986768609-322da13575f3', buttonText: 'Read More' }]} />
+        <FeatureCardTwentyNine title="Our Services" description="We provide top-tier solutions." gridVariant="bento-grid" animationType="slide-up" textboxLayout="split" features={[]} />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardThirteen testimonials={[{ id: '1', name: 'John Doe', handle: '@johndoe', testimonial: 'Great service!', rating: 5, icon: Star }]} showRating={true} animationType="blur-reveal" title="Testimonials" description="What clients say" textboxLayout="default" useInvertedBackground={false} />
+        <TestimonialCardThirteen title="Testimonials" description="What our clients say" showRating={true} animationType="slide-up" textboxLayout="split" testimonials={[]} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactSplit tag="Contact" title="Get in Touch" description="We would love to hear from you." background={{ variant: 'plain' }} useInvertedBackground={false} />
+        <ContactSplit tag="Contact" title="Get in Touch" description="Ready to start your journey?" background={{ variant: "plain" }} mediaAnimation="slide-up" />
       </div>
       <div id="footer" data-section="footer">
-        <FooterCard logoText="Company" />
+        <FooterCard logoText="Webild" />
       </div>
     </ThemeProvider>
   );