diff --git a/src/components/sections/hero/HeroBillboardCarousel.tsx b/src/components/sections/hero/HeroBillboardCarousel.tsx
index 0b5cf80..300d882 100644
--- a/src/components/sections/hero/HeroBillboardCarousel.tsx
+++ b/src/components/sections/hero/HeroBillboardCarousel.tsx
@@ -43,19 +43,19 @@ const HeroBillboardCarousel = ({ slides }: HeroBillboardCarouselProps) => {
         </div>
       </div>
       
-      <div className="absolute bottom-40 left-1/2 -translate-x-1/2 flex items-center gap-4 bg-black/30 p-2 rounded-[var(--radius)] backdrop-blur-sm">
+      <div className="absolute bottom-24 left-1/2 -translate-x-1/2 flex items-center gap-4 bg-white/10 border border-white/20 p-2 rounded-[var(--radius)] backdrop-blur-sm">
         <button onClick={scrollPrev} className="p-2 transition-opacity hover:opacity-80">
           <ChevronLeft className="w-6 h-6" />
         </button>
         <div className="w-24 h-0.5 bg-white/30 rounded-full overflow-hidden">
-          <div className="h-full bg-background" style={{ width: `${scrollProgress}%` }} />
+          <div className="h-full bg-white" style={{ width: `${scrollProgress}%` }} />
         </div>
         <button onClick={scrollNext} className="p-2 transition-opacity hover:opacity-80">
           <ChevronRight className="w-6 h-6" />
         </button>
       </div>
 
-      <div className="absolute bottom-24 left-1/2 -translate-x-1/2 flex flex-col sm:flex-row items-center gap-4 text-primary-cta-text backdrop-blur-sm bg-black/30 py-2 px-4 rounded-[var(--radius)]">
+      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col sm:flex-row items-center gap-4 text-primary-cta-text backdrop-blur-sm bg-white/10 border border-white/20 py-2 px-4 rounded-[var(--radius)]">
         <div className="flex items-center gap-1">
           <Star className="w-5 h-5 fill-current" />
           <Star className="w-5 h-5 fill-current" />