diff --git a/webui/src/components/display/blobs/VideoViewer.svelte b/webui/src/components/display/blobs/VideoViewer.svelte
index 5a5e355..2aa5dc3 100644
--- a/webui/src/components/display/blobs/VideoViewer.svelte
+++ b/webui/src/components/display/blobs/VideoViewer.svelte
@@ -21,6 +21,7 @@
 
   let timeCodeWidth: number;
   let timeCodeLeft: string;
+  let timeCodeSize: string;
 
   const seek = throttle((progress: number) => {
     if (state === State.PREVIEWING && videoEl.duration) {
@@ -32,6 +33,7 @@
           videoEl.clientWidth - timeCodeWidth / 2
         );
         timeCodeLeft = `${timeCodeLeftPx}px`;
+        timeCodeSize = `${videoEl.clientHeight / 9}px`;
       }
     }
   }, 100);
@@ -97,7 +99,8 @@
     <div
       class="timecode"
       bind:clientWidth={timeCodeWidth}
-      style="--left: {timeCodeLeft}"
+      style:left={timeCodeLeft}
+      style:font-size={timeCodeSize}
     >
       {#if videoEl?.duration && currentTime}
         {#if videoEl.duration > 3600}{String(
@@ -181,9 +184,8 @@
 
       font-feature-settings: "tnum";
       font-weight: bold;
-      font-size: 24px;
       color: white;
-      opacity: 0.85;
+      opacity: 0.66;
     }
 
     &.loading {