diff --git a/web/src/components/player/VideoControls.tsx b/web/src/components/player/VideoControls.tsx
index a37da2ca9..b470ca9bd 100644
--- a/web/src/components/player/VideoControls.tsx
+++ b/web/src/components/player/VideoControls.tsx
@@ -106,7 +106,7 @@ export default function VideoControls({
 
   return (
     <div
-      className={`px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-black bg-opacity-60 rounded-lg ${className ?? ""}`}
+      className={`px-4 py-2 flex justify-between items-center gap-8 text-white z-50 bg-secondary-foreground/60 dark:bg-secondary/60 rounded-lg ${className ?? ""}`}
     >
       {video && features.volume && (
         <div className="flex justify-normal items-center gap-2">
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index ec4ce5359..15c795713 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -802,7 +802,7 @@ function MotionReview({
       </div>
 
       <VideoControls
-        className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
+        className="absolute bottom-16 left-1/2 -translate-x-1/2"
         features={{
           volume: false,
           seek: true,