diff --git a/src/app/page.tsx b/src/app/page.tsx
index 362da59..2bbadda 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,69 +9,78 @@ import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { Star } from 'lucide-react';
 
-const navItems = [{ name: "Home", id: "/" }];
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" }
+];
 
-export default function HomePage() {
+export default function Page() {
   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"
+        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} brandName="Webild" />
       </div>
       <div id="hero" data-section="hero">
         <HeroBillboardTestimonial 
-          title="Elevate Your Brand" 
-          description="We build high-performance digital experiences that convert." 
-          background={{ variant: "animated-grid" }} 
+          title="Welcome to Webild" 
+          description="Innovation at your fingertips." 
+          background={{ variant: "gradient-bars" }}
           testimonials={[{ name: "Jane Doe", handle: "@janedoe", testimonial: "Fantastic service!", rating: 5 }]}
         />
       </div>
       <div id="about" data-section="about">
         <SplitAbout 
-          title="Our Story" 
-          description="Dedicated to excellence in design and development." 
+          title="About Us" 
+          description="We build digital experiences." 
           textboxLayout="default" 
           useInvertedBackground={false} 
-          mediaAnimation="opacity" 
-          bulletPoints={[{ title: "Quality", description: "High standards" }, { title: "Speed", description: "Fast delivery" }]}
+          mediaAnimation="none" 
+          bulletPoints={[{ title: "Quality", description: "High standards" }]}
         />
       </div>
       <div id="menu" data-section="menu">
         <ProductCardFour 
           title="Our Services" 
           description="Explore our offerings" 
-          gridVariant="bento-grid" 
+          gridVariant="uniform-all-items-equal" 
           animationType="slide-up" 
           textboxLayout="default" 
           useInvertedBackground={false}
-          products={[{ id: "1", name: "Web Design", price: "$99", variant: "Pro", imageSrc: "/img1.jpg" }, { id: "2", name: "SEO", price: "$49", variant: "Basic", imageSrc: "/img2.jpg" }, { id: "3", name: "Marketing", price: "$199", variant: "Elite", imageSrc: "/img3.jpg" }]}
+          products={[
+            { id: "1", name: "Web Design", price: "$99", variant: "Basic", imageSrc: "/placeholder.png" },
+            { id: "2", name: "SEO", price: "$149", variant: "Pro", imageSrc: "/placeholder.png" },
+            { id: "3", name: "Marketing", price: "$199", variant: "Elite", imageSrc: "/placeholder.png" }
+          ]}
         />
       </div>
       <div id="faq" data-section="faq">
         <FaqSplitText 
-          faqs={[{ id: "1", title: "How do I start?", content: "Contact us today!" }, { id: "2", title: "Pricing?", content: "Custom quotes." }]}
-          sideTitle="FAQ"
-          faqsAnimation="slide-up"
+          faqs={[{ id: "1", title: "Question?", content: "Answer." }]} 
+          sideTitle="FAQ" 
+          faqsAnimation="slide-up" 
           useInvertedBackground={false}
         />
       </div>
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardFifteen 
-          testimonial="Best team ever!" 
+          testimonial="Great work!" 
           rating={5} 
           author="John Smith" 
-          avatars={[{ src: "/avatar.jpg", alt: "Author" }]} 
+          avatars={[{ src: "/avatar.png", alt: "John" }]} 
           ratingAnimation="slide-up" 
           avatarsAnimation="slide-up" 
           useInvertedBackground={false}
@@ -80,16 +89,16 @@ export default function HomePage() {
       <div id="contact" data-section="contact">
         <ContactCenter 
           tag="Contact" 
-          title="Get in touch" 
-          description="Let's build something great." 
-          background={{ variant: "plain" }}
+          title="Get in Touch" 
+          description="Contact us today!" 
+          background={{ variant: "plain" }} 
           useInvertedBackground={false}
         />
       </div>
       <div id="footer" data-section="footer">
         <FooterBaseReveal 
           logoText="Webild" 
-          columns={[{ title: "Navigate", items: [{ label: "Home", href: "/" }] }]}
+          columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
         />
       </div>
     </ThemeProvider>