diff --git a/src/components/sections/hero/HeroBillboardScroll.tsx b/src/components/sections/hero/HeroBillboardScroll.tsx
index 8856bab..95ac1f8 100644
--- a/src/components/sections/hero/HeroBillboardScroll.tsx
+++ b/src/components/sections/hero/HeroBillboardScroll.tsx
@@ -91,7 +91,7 @@ const HeroBillboardScroll = ({
     <section
       aria-label={ariaLabel}
       ref={containerRef}
-      className={cls("relative h-fit flex items-center justify-center bg-[#ffffff]", className)}
+      className={cls("relative h-fit flex items-center justify-center bg-[#e5b365]", className)}
     >
       <HeroBackgrounds {...background} />
       <div
@@ -108,9 +108,9 @@ const HeroBillboardScroll = ({
             tagIcon={tagIcon}
             buttons={buttons}
             className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
-            titleClassName={cls("text-6xl font-medium text-[#333]", titleClassName)}
+            titleClassName={cls("text-6xl font-medium text-[#8b4513]", titleClassName)}
             descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
-            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-[#333] inline-flex items-center gap-2 mb-3", tagClassName)}
+            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-[#8b4513] inline-flex items-center gap-2 mb-3", tagClassName)}
             buttonContainerClassName={cls("flex flex-wrap gap-4 mt-3", buttonContainerClassName)}
             buttonClassName={buttonClassName}
             buttonTextClassName={buttonTextClassName}