diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1082321..4f8017b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
+import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard';
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
 import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
@@ -11,12 +11,14 @@ import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterCard from "@/components/sections/footer/FooterCard";
 import Link from "next/link";
-import { LineChart, ShieldCheck, Globe, Lightbulb, Twitter, Linkedin, Github } from "lucide-react";
+import { LineChart, ShieldCheck, Globe, Lightbulb, Twitter, Linkedin, Github, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send } from "lucide-react";
 
 export default function HomePage() {
   const navItems = [
     { name: "Home", id: "/" },
-    { name: "Features", id: "/features" }
+    { name: "Features", id: "/features" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" }
   ];
 
   return (
@@ -36,31 +38,44 @@ export default function HomePage() {
         <NavbarStyleCentered
           navItems={navItems}
           button={{
-            text: "Get Started",            href: "#contact"
+            text: "Get Started",            href: "/contact"
           }}
           brandName="SynapseAI"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCarouselLogo
-          logoText="SynapseAI"
-          description="Empowering your business with intelligent software solutions and cutting-edge AI technologies."
+        <HeroBillboardDashboard
+          background={{ variant: "radial-gradient" }}
+          tag="Live Analytics"
+          tagIcon={LineChart}
+          title="Empowering your business with intelligent software solutions and cutting-edge AI technologies."
+          description="Monitor protocol revenue, trading volume, and wallet activity with real-time on-chain intelligence."
           buttons={[
-            { text: "Explore Solutions", href: "#features" },
-            { text: "Get a Demo", href: "#contact" }
+            { text: "Explore Solutions", href: "/features" },
+            { text: "Get a Demo", href: "/contact" }
           ]}
-          slides={[
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/a-futuristic-software-interface-with-abs-1773912722634-b356341a.png", imageAlt: "Futuristic software interface with data visualization" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/a-network-of-connected-devices-with-info-1773912723439-395c3a0b.png", imageAlt: "Network of connected devices with data flow" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/a-user-friendly-software-dashboard-showi-1773912722593-649e1a34.png", imageAlt: "User-friendly software dashboard with analytics" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/an-abstract-representation-of-artificial-1773912723308-a7794147.png", imageAlt: "Abstract representation of artificial intelligence" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/a-team-of-diverse-software-developers-co-1773912723551-8c47e4d2.png", imageAlt: "Team of diverse software developers collaborating" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/a-secure-digital-vault-or-server-room-wi-1773912723246-2b8fe9ee.png", imageAlt: "Secure digital vault or server room" }
-          ]}
-          autoplayDelay={5000}
-          showDimOverlay={true}
-          ariaLabel="Hero section with software company branding and solutions"
+          dashboard={{
+            title: "SynapseAI Dashboard",            logoIcon: Hexagon,
+            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/a-user-friendly-software-dashboard-showi-1773912722593-649e1a34.png",            buttons: [{ text: "View Insights", href: "/features" }],
+            sidebarItems: [
+              { icon: House, active: true },
+              { icon: MessageSquareText },
+              { icon: Settings }
+            ],
+            stats: [
+              { title: "Efficiency Boost", values: [85, 90, 88], valueSuffix: "%", description: "Across all operations." },
+              { title: "Secure Deployments", values: [100, 99, 100], valueSuffix: "%", description: "Guaranteed uptime." },
+              { title: "Global Reach", values: [20, 25, 22], valueSuffix: "+ Countries", description: "Expanding worldwide." },
+            ],
+            chartTitle: "Project Progress",            chartData: [{ value: 60 }, { value: 45 }, { value: 75 }, { value: 50 }, { value: 80 }],
+            listTitle: "Recent Activities",            listItems: [
+              { icon: CircleDollarSign, title: "New contract signed", status: "Closed" },
+              { icon: ArrowLeftRight, title: "Feature deployment", status: "Completed" },
+              { icon: Send, title: "Client feedback received", status: "Pending" },
+            ],
+          }}
+          ariaLabel="Hero section with interactive dashboard for software analytics"
         />
       </div>
 
@@ -147,8 +162,8 @@ export default function HomePage() {
           text="Ready to transform your business with intelligent software? Let's build the future, together."
           animationType="entrance-slide"
           buttons={[
-            { text: "Get in Touch", href: "#contact" },
-            { text: "Schedule a Consultation", href: "#contact" }
+            { text: "Get in Touch", href: "/contact" },
+            { text: "Schedule a Consultation", href: "/contact" }
           ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}