diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx
index 184efe0..f6bc30b 100644
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -1,33 +1,155 @@
-import React from "react";
+"use client";
+
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
 import AutoCarousel from "@/components/cardStack/layouts/carousels/AutoCarousel";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+
+export interface MediaItem {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+}
+
+type HeroBillboardCarouselBackgroundProps = Extract<
+  HeroBackgroundVariantProps,
+  | { variant: "plain" }
+  | { variant: "animated-grid" }
+  | { variant: "canvas-reveal" }
+  | { variant: "cell-wave" }
+  | { variant: "downward-rays-animated" }
+  | { variant: "downward-rays-animated-grid" }
+  | { variant: "downward-rays-static" }
+  | { variant: "downward-rays-static-grid" }
+  | { variant: "gradient-bars" }
+  | { variant: "radial-gradient" }
+  | { variant: "rotated-rays-animated" }
+  | { variant: "rotated-rays-animated-grid" }
+  | { variant: "rotated-rays-static" }
+  | { variant: "rotated-rays-static-grid" }
+  | { variant: "sparkles-gradient" }
+>;
 
 interface HeroBillboardCarouselProps {
-  title?: string;
-  description?: string;
-  textboxLayout?: string;
-  animationType?: string;
-  className?: string;
-  carouselClassName?: string;
-  containerClassName?: string;
-  itemClassName?: string;
-  ariaLabel?: string;
-  mediaItems?: Array<{ imageSrc?: string; videoSrc?: string; imageAlt?: string }>;
+    title: string;
+    description: string;
+    background: HeroBillboardCarouselBackgroundProps;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    mediaItems: MediaItem[];
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
 }
 
-export default function HeroBillboardCarousel({
-  title = "Hero",  description = "Welcome",  textboxLayout = "default",  animationType = "slide-up",  className = "",  carouselClassName = "",  containerClassName = "",  itemClassName = "",  ariaLabel = "Hero section",  mediaItems = [],
-}: HeroBillboardCarouselProps) {
-  const items = mediaItems.map((item) => ({
-    imageSrc: item.imageSrc,
-    videoSrc: item.videoSrc,
-    imageAlt: item.imageAlt,
-  }));
+const HeroBillboardCarousel = ({
+    title,
+    description,
+    background,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    mediaItems,
+    ariaLabel = "Hero section",
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+}: HeroBillboardCarouselProps) => {
+    const renderCarouselItem = (item: MediaItem, index: number) => (
+        <div
+            key={index}
+            className="w-full aspect-[4/5] overflow-hidden rounded-theme-capped card p-2 shadow-lg"
+        >
+            <MediaContent
+                imageSrc={item.imageSrc}
+                videoSrc={item.videoSrc}
+                imageAlt={item.imageAlt || ""}
+                videoAriaLabel={item.videoAriaLabel || "Carousel media"}
+                imageClassName="z-1 h-full object-cover"
+            />
+        </div>
+    );
 
-  return (
-    <div className={`hero-billboard-carousel ${className}`} aria-label={ariaLabel}>
-      <h1>{title}</h1>
-      <p>{description}</p>
-      <AutoCarousel items={items} />
-    </div>
-  );
-}
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative w-full py-hero-page-padding md:h-svh md:py-0",
+                className
+            )}
+        >
+            <HeroBackgrounds {...background} />
+            <div className={cls(
+                "mx-auto flex flex-col gap-14 md:gap-10 relative z-10",
+                "w-full md:w-content-width md:h-full md:items-center md:justify-center",
+                containerClassName
+            )}>
+                <TextBox
+                    title={title}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    tagAnimation={tagAnimation}
+                    buttons={buttons}
+                    buttonAnimation={buttonAnimation}
+                    className={cls(
+                        "flex flex-col gap-3 md:gap-3 w-content-width mx-auto",
+                        textBoxClassName
+                    )}
+                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                    descriptionClassName={cls("text-base md:text-lg leading-tight", descriptionClassName)}
+                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1", tagClassName)}
+                    buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", buttonContainerClassName)}
+                    buttonClassName={buttonClassName}
+                    buttonTextClassName={buttonTextClassName}
+                    center={true}
+                />
+
+                <div className={cls("w-full -mx-[var(--content-padding)]", mediaWrapperClassName)}>
+                    <AutoCarousel
+                        title=""
+                        description=""
+                        textboxLayout="default"
+                        animationType="none"
+                        className="py-0"
+                        carouselClassName="py-0"
+                        containerClassName="!w-full"
+                        itemClassName="!w-55 md:!w-carousel-item-4"
+                        ariaLabel="Hero carousel"
+                        showTextBox={false}
+                    >
+                        {mediaItems?.map(renderCarouselItem)}
+                    </AutoCarousel>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+HeroBillboardCarousel.displayName = "HeroBillboardCarousel";
+
+export default HeroBillboardCarousel;
\ No newline at end of file