diff --git a/web/components/watch/video_player.templ b/web/components/watch/video_player.templ
index 1ae55d4..014f7d2 100644
--- a/web/components/watch/video_player.templ
+++ b/web/components/watch/video_player.templ
@@ -128,8 +128,8 @@ templ VideoPlayer(data shared.WatchPageData) {
 										max="100"
 										step="1"
 										value="100"
-										class="h-1 w-20 -rotate-90 cursor-pointer appearance-none rounded-full outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white"
-										style="background: linear-gradient(to right, #007aff var(--volume-percent, 100%), #555555 var(--volume-percent, 100%));"
+										class="h-1.5 w-20 -rotate-90 cursor-pointer appearance-none rounded-full outline-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_rgba(0,0,0,0.18),0_1px_3px_rgba(0,0,0,0.22)] [&::-moz-range-thumb]:h-3.5 [&::-moz-range-thumb]:w-3.5 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_rgba(0,0,0,0.18),0_1px_3px_rgba(0,0,0,0.22)]"
+										style="background: linear-gradient(to right, #ffffff var(--volume-percent, 100%), rgba(255,255,255,0.72) var(--volume-percent, 100%)); box-shadow: 0 0 0 1px rgba(0,0,0,0.16), 0 1px 4px rgba(0,0,0,0.18);"
 										aria-label="Volume"
 									/>
 								</div>