diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index 040546b7bb126..144fe2520256d 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -12,6 +12,7 @@ export const playwriteSlowMo = Number.parseInt(process.env.PLAYWRIGHT_SLOW_MO ??
 export const playwrightDisableWebserver = process.env.PLAYWRIGHT_DISABLE_WEBSERVER;
 
 process.env.PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS = '1';
+process.env.TZ = 'UTC';
 
 const config: PlaywrightTestConfig = {
   testDir: './src/specs/server',
diff --git a/e2e/src/ui/specs/timeline/utils.ts b/e2e/src/ui/specs/timeline/utils.ts
index d3e4e5f7ec516..123667dab657b 100644
--- a/e2e/src/ui/specs/timeline/utils.ts
+++ b/e2e/src/ui/specs/timeline/utils.ts
@@ -216,7 +216,7 @@ export const pageUtils = {
   },
   async selectDay(page: Page, day: string) {
     await page.getByTitle(day).hover();
-    await page.locator('[data-group] .w-8').click();
+    await page.locator('[data-group] .opacity-100').click();
   },
   async pauseTestDebug() {
     console.log('NOTE: pausing test indefinately for debug');
diff --git a/web/src/lib/components/timeline/Month.svelte b/web/src/lib/components/timeline/Month.svelte
index f7ffb58c434a8..b27e3c783313c 100644
--- a/web/src/lib/components/timeline/Month.svelte
+++ b/web/src/lib/components/timeline/Month.svelte
@@ -64,19 +64,22 @@
     ]}
     data-group
     style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
+    style:left={`${absoluteWidth}px`}
+    style:top={`${dayGroup.top}px`}
     onmouseenter={() => (hoveredDayGroup = dayGroup.groupTitle)}
     onmouseleave={() => (hoveredDayGroup = null)}
   >
     <!-- Month title -->
     <div
-      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
+      class="sticky top-0 z-[100] flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm bg-immich-bg dark:bg-immich-dark-bg"
       style:width={dayGroup.width + 'px'}
+      style:will-change="transform"
+      style:transform="translateZ(0)"
     >
       {#if !singleSelect}
         <div
-          class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
-          class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
+          class="absolute hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-8 opacity-0"
+          class:opacity-100={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
             assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
           onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
           onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
@@ -89,7 +92,12 @@
         </div>
       {/if}
 
-      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
+      <span
+        class="w-full truncate first-letter:capitalize transition-transform duration-200 ease-out"
+        class:translate-x-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
+          assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
+        title={getDayGroupFullDate(dayGroup)}
+      >
         {dayGroup.groupTitle}
       </span>
     </div>
@@ -111,5 +119,6 @@
 <style>
   section {
     contain: layout paint style;
+    will-change: transform;
   }
 </style>
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index f72ea60dca1de..69549a46c1904 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -652,7 +652,7 @@
         <div
           style:height={monthGroup.height + 'px'}
           style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
+          style:top={`${absoluteHeight}px`}
           style:width="100%"
         >
           <Skeleton {invisible} height={monthGroup.height} title={monthGroup.monthGroupTitle} />
@@ -662,7 +662,7 @@
           class="month-group"
           style:height={monthGroup.height + 'px'}
           style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
+          style:top={`${absoluteHeight}px`}
           style:width="100%"
         >
           <Month