diff --git a/static/player.ts b/static/player.ts
index 6fedbb3..b29acfe 100644
--- a/static/player.ts
+++ b/static/player.ts
@@ -72,6 +72,7 @@ const initPlayer = (): void => {
   const iconMuted = container.querySelector('[data-icon-muted]') as SVGElement
   const volumeUnderline = container.querySelector('[data-volume-underline]') as HTMLElement
   const timeDisplay = container.querySelector('[data-time]') as HTMLElement
+  const durationDisplay = container.querySelector('[data-duration]') as HTMLElement
   const progressWrap = container.querySelector('[data-progress-wrap]') as HTMLElement
   const progress = container.querySelector('[data-progress]') as HTMLElement
   const scrubber = container.querySelector('[data-scrubber]') as HTMLElement
@@ -355,7 +356,8 @@ const initPlayer = (): void => {
     if (bounds.duration <= 0) {
       progress.style.width = '0%'
       if (scrubber) scrubber.style.left = '0%'
-      timeDisplay.textContent = `00:00 / 00:00`
+      timeDisplay.textContent = '00:00'
+      if (durationDisplay) durationDisplay.textContent = '00:00'
       return
     }
 
@@ -363,7 +365,8 @@ const initPlayer = (): void => {
     const pct = Math.max(0, Math.min(100, (currentDisplayTime / bounds.duration) * 100))
     progress.style.width = `${pct}%`
     if (scrubber) scrubber.style.left = `${pct}%`
-    timeDisplay.textContent = `${formatTime(currentDisplayTime)} / ${formatTime(bounds.duration)}`
+    timeDisplay.textContent = formatTime(currentDisplayTime)
+    if (durationDisplay) durationDisplay.textContent = formatTime(bounds.duration)
   }
 
   const seekBy = (delta: number): void => {
diff --git a/templates/components/video_player.gohtml b/templates/components/video_player.gohtml
index 6c2fb08..bc23dc7 100644
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -87,11 +87,11 @@
           <div data-preview-popover class="pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 bg-white px-2 py-1 text-xs font-bold text-black shadow-md opacity-0 transition-opacity duration-200">
             <span data-preview-time>0:00</span>
           </div>
-          <div data-segments class="absolute inset-0 z-10 pointer-events-none"></div>
-          <div class="h-1.5 w-full rounded-full bg-white/30 transition-all group-hover/progress:h-2">
-            <div data-progress class="bg-accent h-full rounded-full" style="width: 0%"></div>
+          <div class="relative flex h-1.5 w-full items-center rounded-full bg-white/30 transition-all group-hover/progress:h-2">
+            <div data-segments class="absolute inset-0 z-10 pointer-events-none overflow-hidden rounded-full"></div>
+            <div data-progress class="bg-accent relative z-20 h-full rounded-full" style="width: 0%"></div>
           </div>
-          <div data-scrubber class="bg-accent pointer-events-none absolute top-1/2 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 shadow-sm transition-[opacity,transform] group-hover/progress:scale-110 group-hover/progress:opacity-100" style="left: 0%"></div>
+          <div data-scrubber class="bg-accent pointer-events-none absolute top-1/2 z-30 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0 shadow-sm transition-[opacity,transform] group-hover/progress:scale-110 group-hover/progress:opacity-100" style="left: 0%"></div>
         </div>
         <span class="w-12 text-center" data-duration>0:00</span>
       </div>