diff --git a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
index 750b3247ba..24490329b4 100644
--- a/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
+++ b/web/src/lib/components/shared-components/scrollbar/scrollbar.svelte
@@ -96,6 +96,19 @@
       {@const date = fromLocalDateTime(segment.timeGroup)}
       {@const year = date.year}
       {@const label = `${date.toLocaleString({ month: 'short' })} ${year}`}
+      {@const lastGroupYear = fromLocalDateTime(segments[index - 1]?.timeGroup).year}
+
+      <!-- Check if the next three segments are different years then don't render
+      to avoid overlapse -->
+      {@const canRenderYear = segments.slice(index + 1, index + 3).reduce((_, curr) => {
+        const nextGroupYear = fromLocalDateTime(curr.timeGroup).year;
+
+        if (nextGroupYear !== year || curr.height < 1) {
+          return false;
+        }
+
+        return true;
+      }, true)}
 
       <!-- svelte-ignore a11y-no-static-element-interactions -->
       <div
@@ -105,10 +118,10 @@
         aria-label={segment.timeGroup + ' ' + segment.count}
         on:mousemove={() => (hoverLabel = label)}
       >
-        {#if new Date(segments[index - 1]?.timeGroup).getFullYear() !== year}
+        {#if lastGroupYear !== year && canRenderYear}
           <div
             aria-label={segment.timeGroup + ' ' + segment.count}
-            class="absolute right-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg"
+            class="absolute right-0 z-10 pr-5 text-xs font-medium dark:text-immich-dark-fg font-mono"
           >
             {year}
           </div>