diff --git a/src/app/page.tsx b/src/app/page.tsx
index ef091b5..cef122f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
@@ -27,27 +28,28 @@ export default function LandingPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="OddsVault"
-          navItems={[
-            { name: "Home", id: "hero" },
-            { name: "Team Odds", id: "product" },
-            { name: "How It Works", id: "feature" },
-            { name: "Testimonials", id: "testimonial" },
-            { name: "Get Started", id: "contact" }
+          links={[
+            { label: "Home", href: "hero" },
+            { label: "Team Odds", href: "product" },
+            { label: "How It Works", href: "feature" },
+            { label: "Testimonials", href: "testimonial" },
+            { label: "Get Started", href: "contact" }
           ]}
-          button={{ text: "Explore Odds", href: "product" }}
+          logoSrc="/placeholders/placeholder1.webp"
+          ctaButton={{ text: "Explore Odds", href: "product" }}
         />
       </div>
 
-      <div id="hero" data-section="hero" style={{ backgroundColor: "#ffff00" }} className="py-16">
-        <div className="flex flex-col items-center justify-center text-center gap-8">
-          <h1 className="text-4xl md:text-5xl font-bold text-black">Real-time NBA Team & Player Odds</h1>
-          <p className="text-lg md:text-xl text-black max-w-2xl">Bet smarter with live updates and exclusive betting lines. Your edge in the game starts here.</p>
-          <img
-            src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399481083-1b76akuc.jpg"
-            alt="NBA basketball court"
-            className="w-64 h-64 object-cover rounded-lg"
-          />
-        </div>
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Real-time NBA Team & Player Odds"
+          description="Bet smarter with live updates and exclusive betting lines. Your edge in the game starts here."
+          primaryButtonText="Get Started"
+          primaryButtonHref="product"
+          secondaryButtonText="Learn More"
+          secondaryButtonHref="feature"
+          backgroundImage="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399481083-1b76akuc.jpg"
+        />
       </div>
 
       <div id="product" data-section="product">