diff --git a/src/app/page.tsx b/src/app/page.tsx
index f45da29..53c8a9b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
@@ -11,41 +12,46 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 
 export default function HomePage() {
-  const navItems = [{ name: "Home", id: "/" }];
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" },
+  ];
+
   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>
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay navItems={navItems} />
       </div>
       <div id="hero" data-section="hero">
-        <HeroBillboardGallery title="Welcome" description="Explore our offerings" background={{ variant: "plain" }} mediaItems={[{ imageSrc: "/img1.jpg" }, { imageSrc: "/img2.jpg" }, { imageSrc: "/img3.jpg" }]} />
+        <HeroBillboardGallery title="Welcome" description="Explore our latest offerings." background={{ variant: 'radial-gradient' }} mediaItems={[]} />
       </div>
       <div id="specials" data-section="specials">
-        <ProductCardTwo title="Specials" description="Our top picks" gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} products={[{ id: "1", brand: "Brand", name: "Item", price: "$10", rating: 5, reviewCount: "10", imageSrc: "/prod1.jpg" }, { id: "2", brand: "Brand", name: "Item", price: "$15", rating: 5, reviewCount: "10", imageSrc: "/prod2.jpg" }, { id: "3", brand: "Brand", name: "Item", price: "$20", rating: 5, reviewCount: "10", imageSrc: "/prod3.jpg" }]} />
+        <ProductCardTwo title="Specials" description="Check out our top products." gridVariant="uniform-all-items-equal" animationType="slide-up" textboxLayout="default" products={[]} />
       </div>
       <div id="about" data-section="about">
-        <MediaAbout title="About Us" description="Our story" useInvertedBackground={false} />
+        <MediaAbout title="About Us" description="Dedicated to quality and innovation." />
       </div>
       <div id="features" data-section="features">
-        <FeatureCardTwentyNine title="Features" description="Why us?" gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} features={[{ title: "Feat 1", description: "Desc 1", imageSrc: "/f1.jpg", titleImageSrc: "/t1.jpg", buttonText: "Learn" }, { title: "Feat 2", description: "Desc 2", imageSrc: "/f2.jpg", titleImageSrc: "/t2.jpg", buttonText: "Learn" }]} />
+        <FeatureCardTwentyNine title="Our Features" description="What makes us stand out." gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" features={[]} />
       </div>
       <div id="menu" data-section="menu">
-        <PricingCardNine title="Menu" description="Our offerings" textboxLayout="default" useInvertedBackground={false} animationType="slide-up" plans={[{ id: "p1", title: "Basic", price: "$5", period: "mo", features: ["a", "b"], button: { text: "Buy" } }, { id: "p2", title: "Pro", price: "$10", period: "mo", features: ["c", "d"], button: { text: "Buy" } }]} />
+        <PricingCardNine title="Plans" description="Choose what fits you." textboxLayout="default" animationType="slide-up" plans={[]} />
       </div>
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSix title="Testimonials" description="What they say" textboxLayout="default" useInvertedBackground={false} animationType="slide-up" testimonials={[{ id: "t1", name: "John", handle: "@john", testimonial: "Great!" }, { id: "t2", name: "Jane", handle: "@jane", testimonial: "Loved it!" }]} />
+        <TestimonialCardSix title="Testimonials" description="What our clients say." textboxLayout="default" animationType="slide-up" testimonials={[]} />
       </div>
       <div id="order" data-section="order">
-        <ContactSplit tag="Order" title="Get In Touch" description="Ready to start?" background={{ variant: "plain" }} useInvertedBackground={false} />
+        <ContactSplit tag="Contact" title="Get in Touch" description="We would love to hear from you." />
       </div>
       <div id="gallery" data-section="gallery">
-        <FeatureCardTwentyNine title="Gallery" description="Our visual showcase" gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} features={[{ title: "Gal 1", description: "Desc 1", imageSrc: "/g1.jpg", titleImageSrc: "/t1.jpg", buttonText: "View" }, { title: "Gal 2", description: "Desc 2", imageSrc: "/g2.jpg", titleImageSrc: "/t2.jpg", buttonText: "View" }]} />
+        <FeatureCardTwentyNine title="Gallery" description="See our work." gridVariant="bento-grid" animationType="slide-up" textboxLayout="default" features={[]} />
       </div>
       <div id="contact" data-section="contact">
-        <ContactSplit tag="Contact" title="Support" description="Need help?" background={{ variant: "plain" }} useInvertedBackground={false} />
+        <ContactSplit tag="Support" title="Need help?" description="Our team is here for you." />
       </div>
       <div id="footer" data-section="footer">
-        <FooterBaseCard logoText="Brand" columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} />
+        <FooterBaseCard logoText="Webild" columns={[]} />
       </div>
     </ThemeProvider>
   );