diff --git a/src/components/sections/hero/HeroBillboardDashboard.tsx b/src/components/sections/hero/HeroBillboardDashboard.tsx
index d7255db..f4d7ddc 100644
--- a/src/components/sections/hero/HeroBillboardDashboard.tsx
+++ b/src/components/sections/hero/HeroBillboardDashboard.tsx
@@ -8,6 +8,7 @@ import type { LucideIcon } from "lucide-react";
 import type { ButtonConfig } from "@/types/button";
 import type { DashboardSidebarItem, DashboardStat, DashboardListItem } from "@/components/shared/Dashboard";
 import type { ChartDataItem } from "@/components/bento/BentoLineChart/utils";
+import HeroSection from "@/components/hero/HeroSection";
 
 type HeroBillboardDashboardBackgroundProps = Extract<
   HeroBackgroundVariantProps,
@@ -93,8 +94,8 @@ const HeroBillboardDashboard = ({
   backgroundImage,
 }: HeroBillboardDashboardProps) => {
   return (
-    <section
-      aria-label={ariaLabel}
+    <HeroSection
+      ariaLabel={ariaLabel}
       className={cls("relative w-full py-hero-page-padding", className)}
       style={{ backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined }}
     >
@@ -120,7 +121,7 @@ const HeroBillboardDashboard = ({
           className={cls(dashboard.className, dashboardClassName)}
         />
       </div>
-    </section>
+    </HeroSection>
   );
 };