diff --git a/web/src/lib/components/shared-components/scrubber/scrubber.svelte b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
index 673a0c5a23..dbd4b05152 100644
--- a/web/src/lib/components/shared-components/scrubber/scrubber.svelte
+++ b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
@@ -6,7 +6,7 @@
   import { onMount } from 'svelte';
   import { isTimelineScrolling } from '$lib/stores/timeline.store';
   import { parseUtcDate } from '$lib/utils/date-time';
-  import { fly } from 'svelte/transition';
+  import { fade, fly } from 'svelte/transition';
 
   export let timelineTopOffset = 0;
   export let timelineBottomOffset = 0;
@@ -240,15 +240,13 @@
   <!-- Scroll Position Indicator Line -->
   {#if !isDragging}
     <div
-      class="absolute right-0 {$isTimelineScrolling && formatedDate
-        ? 'h-[0px]'
-        : 'h-[2px]'}  w-10 bg-immich-primary dark:bg-immich-dark-primary"
+      class="absolute right-0 h-[2px] w-10 bg-immich-primary dark:bg-immich-dark-primary"
       style:top="{scrollY + HOVER_DATE_HEIGHT}px"
     >
       {#if $isTimelineScrolling && formatedDate}
         <p
-          transition:fly={{ y: -15, duration: 350 }}
-          class="truncate opacity-85 pointer-events-none absolute right-0 bottom-0 z-[100] min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-immich-bg py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+          transition:fade={{ duration: 200 }}
+          class="truncate pointer-events-none absolute right-0 bottom-0 z-[100] min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-immich-bg/80 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:bg-immich-dark-gray/80 dark:text-immich-dark-fg"
         >
           {formatedDate}
         </p>