diff --git a/mise.toml b/mise.toml
index 47acb66b21..0a9025e2da 100644
--- a/mise.toml
+++ b/mise.toml
@@ -300,7 +300,7 @@ run = "tsc --noEmit"
 depends = "web:svelte-kit-sync"
 env._.path = "web/node_modules/.bin"
 dir = "web"
-run = "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte"
+run = "svelte-check --no-tsconfig --fail-on-warnings"
 
 [tasks."web:checklist"]
 run = [
diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 8c91d29a34..9be19b18db 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -18,7 +18,7 @@
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
-  import AssetGrid from '../photos-page/asset-grid.svelte';
+  import Timeline from '../timeline/timeline.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
@@ -61,7 +61,7 @@
 />
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <AssetGrid enableRouting={true} {album} {timelineManager} {assetInteraction}>
+  <Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
     <section class="pt-8 md:pt-24 px-2 md:px-0">
       <!-- ALBUM TITLE -->
       <h1
@@ -83,7 +83,7 @@
         </p>
       {/if}
     </section>
-  </AssetGrid>
+  </Timeline>
 </main>
 
 <header>
diff --git a/web/src/lib/components/asset-viewer/actions/delete-action.svelte b/web/src/lib/components/asset-viewer/actions/delete-action.svelte
index 82b88127f6..34dd41f6b4 100644
--- a/web/src/lib/components/asset-viewer/actions/delete-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/delete-action.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
-  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
+  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import {
     NotificationType,
     notificationController,
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index e3b592b5cb..0b452993ef 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
+  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
+  import { IconButton } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
-  import DeleteAssetDialog from '../delete-asset-dialog.svelte';
-  import { IconButton } from '@immich/ui';
 
   interface Props {
     onAssetDelete: OnDelete;
diff --git a/web/src/lib/components/photos-page/asset-date-group.svelte b/web/src/lib/components/photos-page/asset-date-group.svelte
deleted file mode 100644
index c07cbb4635..0000000000
--- a/web/src/lib/components/photos-page/asset-date-group.svelte
+++ /dev/null
@@ -1,254 +0,0 @@
-<script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-  import { navigate } from '$lib/utils/navigation';
-
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-
-  import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
-  import type { Snippet } from 'svelte';
-  import { flip } from 'svelte/animate';
-  import { scale } from 'svelte/transition';
-
-  let { isUploading } = uploadAssetsStore;
-
-  interface Props {
-    isSelectionMode: boolean;
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    customLayout?: Snippet<[TimelineAsset]>;
-
-    onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
-    onSelectAssets: (asset: TimelineAsset) => void;
-    onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
-    onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
-  }
-
-  let {
-    isSelectionMode,
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
-    assetInteraction,
-    timelineManager,
-    customLayout,
-    onSelect,
-    onSelectAssets,
-    onSelectAssetCandidates,
-    onScrollCompensation,
-    onThumbnailClick,
-  }: Props = $props();
-
-  let isMouseOverGroup = $state(false);
-  let hoveredDayGroup = $state();
-
-  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
-  );
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-  const _onClick = (
-    timelineManager: TimelineManager,
-    assets: TimelineAsset[],
-    groupTitle: string,
-    asset: TimelineAsset,
-  ) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      assetSelectHandler(timelineManager, asset, assets, groupTitle);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });
-
-  const assetSelectHandler = (
-    timelineManager: TimelineManager,
-    asset: TimelineAsset,
-    assetsInDayGroup: TimelineAsset[],
-    groupTitle: string,
-  ) => {
-    onSelectAssets(asset);
-
-    // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
-      assetInteraction.hasSelectedAsset(asset.id),
-    ).length;
-
-    // if all assets are selected in a group, add the group to selected group
-    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
-      assetInteraction.addGroupToMultiselectGroup(groupTitle);
-    } else {
-      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
-    // Show multi select icon on hover on date group
-    hoveredDayGroup = groupTitle;
-
-    if (assetInteraction.selectionActive) {
-      onSelectAssetCandidates(asset);
-    }
-  };
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectable: R[]) {
-    return intersectable.filter((int) => int.intersecting);
-  }
-
-  const getDayGroupFullDate = (dayGroup: DayGroup): string => {
-    const { month, year } = dayGroup.monthGroup.yearMonth;
-    const date = fromTimelinePlainDate({
-      year,
-      month,
-      day: dayGroup.day,
-    });
-    return getDateLocaleString(date);
-  };
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensation(timelineManager.scrollCompensation);
-      timelineManager.clearScrollCompensation();
-    }
-  });
-</script>
-
-{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
-
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <section
-    class={[
-      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
-      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
-    ]}
-    data-group
-    style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
-    onmouseenter={() => {
-      isMouseOverGroup = true;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
-    }}
-    onmouseleave={() => {
-      isMouseOverGroup = false;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
-    }}
-  >
-    <!-- Date group 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"
-      style:width={dayGroup.width + 'px'}
-    >
-      {#if !singleSelect}
-        <div
-          class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
-          class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
-            assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-          onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
-        >
-          {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
-          {:else}
-            <Icon path={mdiCircleOutline} size="24" color="#757575" />
-          {/if}
-        </div>
-      {/if}
-
-      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
-        {dayGroup.groupTitle}
-      </span>
-    </div>
-
-    <!-- Image grid -->
-    <div
-      data-image-grid
-      class="relative overflow-clip"
-      style:height={dayGroup.height + 'px'}
-      style:width={dayGroup.width + 'px'}
-    >
-      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
-        {@const position = viewerAsset.position!}
-        {@const asset = viewerAsset.asset!}
-
-        <!-- {#if viewerAsset.intersecting} -->
-        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
-        <div
-          data-asset-id={asset.id}
-          class="absolute"
-          style:top={position.top + 'px'}
-          style:left={position.left + 'px'}
-          style:width={position.width + 'px'}
-          style:height={position.height + 'px'}
-          out:scale|global={{ start: 0.1, duration: scaleDuration }}
-          animate:flip={{ duration: transitionDuration }}
-        >
-          <Thumbnail
-            showStackedIcon={withStacked}
-            {showArchiveIcon}
-            {asset}
-            {groupIndex}
-            onClick={(asset) => {
-              if (typeof onThumbnailClick === 'function') {
-                onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
-              } else {
-                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
-              }
-            }}
-            onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
-            onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
-            selected={assetInteraction.hasSelectedAsset(asset.id) ||
-              dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
-            disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customLayout}
-            {@render customLayout(asset)}
-          {/if}
-        </div>
-        <!-- {/if} -->
-      {/each}
-    </div>
-  </section>
-{/each}
-
-<style>
-  section {
-    contain: layout paint style;
-  }
-  [data-image-grid] {
-    user-select: none;
-  }
-</style>
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
deleted file mode 100644
index e8025a6542..0000000000
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-  import Timeline from '$lib/components/timeline/timeline.svelte';
-  import type { AssetAction } from '$lib/constants';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import type { AlbumResponseDto, PersonResponseDto } from '@immich/sdk';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE
-      | null;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-    isShowDeleteConfirmation?: boolean;
-    onSelect?: (asset: TimelineAsset) => void;
-    onEscape?: () => void;
-    children?: Snippet;
-    empty?: Snippet;
-    customLayout?: Snippet<[TimelineAsset]>;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
-  }
-
-  let {
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-    removeAction,
-    withStacked = false,
-    showArchiveIcon = false,
-    isShared = false,
-    album = null,
-    person = null,
-    isShowDeleteConfirmation = $bindable(false),
-    onSelect = () => {},
-    onEscape = () => {},
-    children,
-    empty,
-    customLayout,
-    onThumbnailClick,
-  }: Props = $props();
-
-  const onAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => {
-    if (onThumbnailClick) {
-      onThumbnailClick(asset, timelineManager, dayGroup, () => defaultAssetOpen());
-      return;
-    }
-    defaultAssetOpen();
-  };
-</script>
-
-<!-- AssetGrid Adapter: This is a compatibility layer that wraps the new Timeline component -->
-<!-- It maintains the old AssetGrid API while using the new Timeline implementation underneath -->
-<Timeline
-  {isSelectionMode}
-  {singleSelect}
-  {enableRouting}
-  bind:timelineManager
-  {assetInteraction}
-  {removeAction}
-  {withStacked}
-  {showArchiveIcon}
-  {isShared}
-  {album}
-  {person}
-  bind:isShowDeleteConfirmation
-  {onAssetOpen}
-  {onSelect}
-  {onEscape}
-  {children}
-  {empty}
-  customThumbnailLayout={customLayout}
-/>
diff --git a/web/src/lib/components/photos-page/delete-asset-dialog.svelte b/web/src/lib/components/photos-page/delete-asset-dialog.svelte
deleted file mode 100644
index c04b5f39d0..0000000000
--- a/web/src/lib/components/photos-page/delete-asset-dialog.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script lang="ts">
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { Checkbox, ConfirmModal, Label } from '@immich/ui';
-  import { mdiDeleteForeverOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    size: number;
-    onConfirm: () => void;
-    onCancel: () => void;
-  }
-
-  let { size, onConfirm, onCancel }: Props = $props();
-
-  let checked = $state(false);
-
-  const handleConfirm = () => {
-    if (checked) {
-      $showDeleteModal = false;
-    }
-    onConfirm();
-  };
-</script>
-
-<ConfirmModal
-  title={$t('permanently_delete_assets_count', { values: { count: size } })}
-  confirmText={$t('delete')}
-  icon={mdiDeleteForeverOutline}
-  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
->
-  {#snippet promptSnippet()}
-    <p>
-      <FormatMessage key="permanently_delete_assets_prompt" values={{ count: size }}>
-        {#snippet children({ message })}
-          <b>{message}</b>
-        {/snippet}
-      </FormatMessage>
-    </p>
-    <p><b>{$t('cannot_undo_this_action')}</b></p>
-
-    <div class="pt-4 flex justify-center items-center gap-2">
-      <Checkbox id="confirm-deletion-input" bind:checked color="secondary" />
-      <Label label={$t('do_not_show_again')} for="confirm-deletion-input" />
-    </div>
-  {/snippet}
-</ConfirmModal>
diff --git a/web/src/lib/components/photos-page/skeleton.svelte b/web/src/lib/components/photos-page/skeleton.svelte
deleted file mode 100644
index 7ce2c3cee3..0000000000
--- a/web/src/lib/components/photos-page/skeleton.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-  interface Props {
-    height: number;
-    title: string;
-  }
-
-  let { height = 0, title }: Props = $props();
-</script>
-
-<div class="overflow-clip" style:height={height + 'px'}>
-  <div
-    class="flex pt-7 pb-5 h-6 place-items-center text-xs font-medium text-immich-fg bg-light dark:text-immich-dark-fg md:text-sm"
-  >
-    {title}
-  </div>
-  <div
-    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
-    style:width="calc(100% - 20px)"
-    data-skeleton="true"
-  ></div>
-</div>
-
-<style>
-  [data-skeleton] {
-    background-image: url('/light_skeleton.png');
-    background-repeat: repeat;
-    background-size: 235px, 235px;
-  }
-  @media (max-width: 767px) {
-    [data-skeleton] {
-      background-size: 100px, 100px;
-    }
-  }
-  :global(.dark) [data-skeleton] {
-    background-image: url('/dark_skeleton.png');
-  }
-  @keyframes delayedVisibility {
-    to {
-      visibility: visible;
-    }
-  }
-  [data-skeleton] {
-    visibility: hidden;
-    animation:
-      0s linear 0.1s forwards delayedVisibility,
-      pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-</style>
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index e9282ae5d8..9498261204 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -3,6 +3,7 @@
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
@@ -23,7 +24,6 @@
   import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
   import Portal from '../portal/portal.svelte';
 
   interface Props {
diff --git a/web/src/lib/components/shared-components/scrubber/scrubber.svelte b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
deleted file mode 100644
index b1f8f5eb03..0000000000
--- a/web/src/lib/components/shared-components/scrubber/scrubber.svelte
+++ /dev/null
@@ -1,593 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { ScrubberMonth } from '$lib/managers/timeline-manager/types';
-  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
-  import { getTabbable } from '$lib/utils/focus-util';
-  import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
-  import { mdiPlay } from '@mdi/js';
-  import { clamp } from 'lodash-es';
-  import { onMount } from 'svelte';
-  import { fade, fly } from 'svelte/transition';
-
-  interface Props {
-    /** Offset from the top of the timeline (e.g., for headers) */
-    timelineTopOffset?: number;
-    /** Offset from the bottom of the timeline (e.g., for footers) */
-    timelineBottomOffset?: number;
-    /** Total height of the scrubber component */
-    height?: number;
-    /** Timeline manager instance that controls the timeline state */
-    timelineManager: TimelineManager;
-    /** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
-    timelineScrollPercent?: number;
-    /** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
-    viewportTopMonthScrollPercent?: number;
-    /** The year/month of the timeline month at the top of the viewport */
-    viewportTopMonth?: TimelineYearMonth;
-    /** Indicates whether the viewport is currently in the lead-out section (after all months) */
-    isInLeadOutSection?: boolean;
-    /** Width of the scrubber component in pixels (bindable for parent component margin adjustments) */
-    scrubberWidth?: number;
-    /** Callback fired when user interacts with the scrubber to navigate */
-    onScrub?: ScrubberListener;
-    /** Callback fired when keyboard events occur on the scrubber */
-    onScrubKeyDown?: (event: KeyboardEvent, element: HTMLElement) => void;
-    /** Callback fired when scrubbing starts */
-    startScrub?: ScrubberListener;
-    /** Callback fired when scrubbing stops */
-    stopScrub?: ScrubberListener;
-  }
-
-  let {
-    timelineTopOffset = 0,
-    timelineBottomOffset = 0,
-    height = 0,
-    timelineManager,
-    timelineScrollPercent = 0,
-    viewportTopMonthScrollPercent = 0,
-    viewportTopMonth = undefined,
-    isInLeadOutSection = false,
-    onScrub = undefined,
-    onScrubKeyDown = undefined,
-    startScrub = undefined,
-    stopScrub = undefined,
-    scrubberWidth = $bindable(),
-  }: Props = $props();
-
-  let isHover = $state(false);
-  let isDragging = $state(false);
-  let isHoverOnPaddingTop = $state(false);
-  let isHoverOnPaddingBottom = $state(false);
-  let hoverY = $state(0);
-  let clientY = 0;
-  let windowHeight = $state(0);
-  let scrollBar: HTMLElement | undefined = $state();
-
-  const toScrollY = (percent: number) => percent * (height - (PADDING_TOP + PADDING_BOTTOM));
-  const toTimelineY = (scrollY: number) => scrollY / (height - (PADDING_TOP + PADDING_BOTTOM));
-
-  const usingMobileDevice = $derived(mobileDevice.pointerCoarse);
-
-  const MOBILE_WIDTH = 20;
-  const DESKTOP_WIDTH = 60;
-  const HOVER_DATE_HEIGHT = 31.75;
-  const PADDING_TOP = $derived(usingMobileDevice ? 25 : HOVER_DATE_HEIGHT);
-  const PADDING_BOTTOM = $derived(usingMobileDevice ? 25 : 10);
-  const MIN_YEAR_LABEL_DISTANCE = 16;
-  const MIN_DOT_DISTANCE = 8;
-
-  const width = $derived.by(() => {
-    if (isDragging) {
-      return '100vw';
-    }
-    if (usingMobileDevice) {
-      if (timelineManager.scrolling) {
-        return MOBILE_WIDTH + 'px';
-      }
-      return '0px';
-    }
-    return DESKTOP_WIDTH + 'px';
-  });
-  $effect(() => {
-    scrubberWidth = usingMobileDevice ? MOBILE_WIDTH : DESKTOP_WIDTH;
-  });
-
-  const toScrollFromMonthGroupPercentage = (
-    scrubberMonth: { year: number; month: number } | undefined,
-    scrubberMonthPercent: number,
-    scrubOverallPercent: number,
-  ) => {
-    if (scrubberMonth) {
-      let offset = relativeTopOffset;
-      let match = false;
-      for (const segment of segments) {
-        if (segment.month === scrubberMonth.month && segment.year === scrubberMonth.year) {
-          offset += scrubberMonthPercent * segment.height;
-          match = true;
-          break;
-        }
-        offset += segment.height;
-      }
-      if (!match) {
-        offset += scrubberMonthPercent * relativeBottomOffset;
-      }
-      return offset;
-    } else if (isInLeadOutSection) {
-      let offset = relativeTopOffset;
-      for (const segment of segments) {
-        offset += segment.height;
-      }
-      offset += scrubOverallPercent * relativeBottomOffset;
-      return offset;
-    } else {
-      return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
-    }
-  };
-  let scrollY = $derived(
-    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
-  );
-  let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
-  let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
-  let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
-
-  type Segment = {
-    count: number;
-    height: number;
-    dateFormatted: string;
-    year: number;
-    month: number;
-    hasLabel: boolean;
-    hasDot: boolean;
-  };
-
-  const calculateSegments = (months: ScrubberMonth[]) => {
-    let height = 0;
-    let dotHeight = 0;
-
-    let segments: Segment[] = [];
-    let previousLabeledSegment: Segment | undefined;
-
-    let top = 0;
-    for (const [i, scrubMonth] of months.entries()) {
-      const scrollBarPercentage = scrubMonth.height / timelineFullHeight;
-
-      const segment = {
-        top,
-        count: scrubMonth.assetCount,
-        height: toScrollY(scrollBarPercentage),
-        dateFormatted: scrubMonth.title,
-        year: scrubMonth.year,
-        month: scrubMonth.month,
-        hasLabel: false,
-        hasDot: false,
-      };
-      top += segment.height;
-      if (i === 0) {
-        segment.hasDot = true;
-        segment.hasLabel = true;
-        previousLabeledSegment = segment;
-      } else {
-        if (previousLabeledSegment?.year !== segment.year && height > MIN_YEAR_LABEL_DISTANCE) {
-          height = 0;
-          segment.hasLabel = true;
-          previousLabeledSegment = segment;
-        }
-        if (i !== 1 && segment.height > 5 && dotHeight > MIN_DOT_DISTANCE) {
-          segment.hasDot = true;
-          dotHeight = 0;
-        }
-
-        height += segment.height;
-        dotHeight += segment.height;
-      }
-      segments.push(segment);
-    }
-
-    return segments;
-  };
-  let activeSegment: HTMLElement | undefined = $state();
-  const segments = $derived(calculateSegments(timelineManager.scrubberMonths));
-  const hoverLabel = $derived.by(() => {
-    if (isHoverOnPaddingTop) {
-      return segments.at(0)?.dateFormatted;
-    }
-    if (isHoverOnPaddingBottom) {
-      return segments.at(-1)?.dateFormatted;
-    }
-    return activeSegment?.dataset.label;
-  });
-  const segmentDate = $derived.by(() => {
-    if (!activeSegment?.dataset.segmentYearMonth) {
-      return undefined;
-    }
-    const [year, month] = activeSegment.dataset.segmentYearMonth.split('-').map(Number);
-    return { year, month };
-  });
-  const scrollSegment = $derived.by(() => {
-    const y = scrollY;
-    let cur = relativeTopOffset;
-    for (const segment of segments) {
-      if (y < cur + segment.height) {
-        return segment;
-      }
-      cur += segment.height;
-    }
-    return null;
-  });
-  const scrollHoverLabel = $derived(scrollSegment?.dateFormatted || '');
-
-  const findElementBestY = (elements: Element[], y: number, ...ids: string[]) => {
-    if (ids.length === 0) {
-      return undefined;
-    }
-    const filtered = elements.filter((element) => {
-      if (element instanceof HTMLElement && element.dataset.id) {
-        return ids.includes(element.dataset.id);
-      }
-      return false;
-    }) as HTMLElement[];
-    const imperfect = [];
-    for (const element of filtered) {
-      const boundingClientRect = element.getBoundingClientRect();
-      if (boundingClientRect.y > y) {
-        imperfect.push({
-          element,
-          boundingClientRect,
-        });
-        continue;
-      }
-      if (y <= boundingClientRect.y + boundingClientRect.height) {
-        return {
-          element,
-          boundingClientRect,
-        };
-      }
-    }
-    return imperfect.at(0);
-  };
-
-  const getActive = (x: number, y: number) => {
-    const elements = document.elementsFromPoint(x, y);
-    const bestElement = findElementBestY(elements, y, 'time-segment', 'lead-in', 'lead-out');
-
-    if (bestElement) {
-      const segment = bestElement.element;
-      const boundingClientRect = bestElement.boundingClientRect;
-      const sy = boundingClientRect.y;
-      const relativeY = y - sy;
-      const monthGroupPercentY = relativeY / boundingClientRect.height;
-      return {
-        isOnPaddingTop: false,
-        isOnPaddingBottom: false,
-        segment,
-        monthGroupPercentY,
-      };
-    }
-
-    // check if padding
-    const bar = findElementBestY(elements, 0, 'scrubber');
-    let isOnPaddingTop = false;
-    let isOnPaddingBottom = false;
-
-    if (bar) {
-      const sr = bar.boundingClientRect;
-      if (y < sr.top + PADDING_TOP) {
-        isOnPaddingTop = true;
-      }
-      if (y > sr.bottom - PADDING_BOTTOM - 1) {
-        isOnPaddingBottom = true;
-      }
-    }
-
-    return {
-      isOnPaddingTop,
-      isOnPaddingBottom,
-      segment: undefined,
-      monthGroupPercentY: 0,
-    };
-  };
-
-  const handleMouseEvent = (event: { clientY: number; isDragging?: boolean }) => {
-    const wasDragging = isDragging;
-
-    isDragging = event.isDragging ?? isDragging;
-    clientY = event.clientY;
-
-    if (!scrollBar) {
-      return;
-    }
-
-    const rect = scrollBar.getBoundingClientRect()!;
-    const lower = 0;
-    const upper = rect?.height - (PADDING_TOP + PADDING_BOTTOM);
-    hoverY = clamp(clientY - rect?.top - PADDING_TOP, lower, upper);
-    const x = rect!.left + rect!.width / 2;
-    const { segment, monthGroupPercentY, isOnPaddingTop, isOnPaddingBottom } = getActive(x, clientY);
-    activeSegment = segment;
-    isHoverOnPaddingTop = isOnPaddingTop;
-    isHoverOnPaddingBottom = isOnPaddingBottom;
-
-    const scrollPercent = toTimelineY(hoverY);
-    if (wasDragging === false && isDragging) {
-      void startScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-      void onScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-    }
-
-    if (wasDragging && !isDragging) {
-      void stopScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-      return;
-    }
-
-    if (!isDragging) {
-      return;
-    }
-
-    void onScrub?.({
-      scrubberMonth: segmentDate!,
-      overallScrollPercent: scrollPercent,
-      scrubberMonthScrollPercent: monthGroupPercentY,
-    });
-  };
-  /* eslint-disable tscompat/tscompat */
-  const getTouch = (event: TouchEvent) => {
-    if (event.touches.length === 1) {
-      return event.touches[0];
-    }
-    return null;
-  };
-  const onTouchStart = (event: TouchEvent) => {
-    const touch = getTouch(event);
-    if (!touch) {
-      isHover = false;
-      return;
-    }
-    const elements = document.elementsFromPoint(touch.clientX, touch.clientY);
-    const isHoverScrollbar =
-      findElementBestY(elements, 0, 'scrubber', 'time-label', 'lead-in', 'lead-out') !== undefined;
-
-    isHover = isHoverScrollbar;
-
-    if (isHoverScrollbar) {
-      handleMouseEvent({
-        clientY: touch.clientY,
-        isDragging: true,
-      });
-    }
-  };
-  const onTouchEnd = () => {
-    if (isHover) {
-      isHover = false;
-    }
-    handleMouseEvent({
-      clientY,
-      isDragging: false,
-    });
-  };
-  const onTouchMove = (event: TouchEvent) => {
-    const touch = getTouch(event);
-    if (touch && isDragging) {
-      handleMouseEvent({
-        clientY: touch.clientY,
-      });
-    } else {
-      isHover = false;
-    }
-  };
-  /* eslint-enable tscompat/tscompat */
-  onMount(() => {
-    document.addEventListener('touchmove', onTouchMove, { capture: true, passive: true });
-    return () => {
-      document.removeEventListener('touchmove', onTouchMove, true);
-    };
-  });
-
-  onMount(() => {
-    document.addEventListener('touchstart', onTouchStart, { capture: true, passive: true });
-    document.addEventListener('touchend', onTouchEnd, { capture: true, passive: true });
-    return () => {
-      document.removeEventListener('touchstart', onTouchStart, true);
-      document.removeEventListener('touchend', onTouchEnd, true);
-    };
-  });
-
-  const isTabEvent = (event: KeyboardEvent) => event?.key === 'Tab';
-  const isTabForward = (event: KeyboardEvent) => isTabEvent(event) && !event.shiftKey;
-  const isTabBackward = (event: KeyboardEvent) => isTabEvent(event) && event.shiftKey;
-  const isArrowUp = (event: KeyboardEvent) => event?.key === 'ArrowUp';
-  const isArrowDown = (event: KeyboardEvent) => event?.key === 'ArrowDown';
-
-  const handleFocus = (event: KeyboardEvent) => {
-    const forward = isTabForward(event);
-    const backward = isTabBackward(event);
-    if (forward || backward) {
-      event.preventDefault();
-
-      const focusable = getTabbable(document.body);
-      if (scrollBar) {
-        const index = focusable.indexOf(scrollBar);
-        if (index !== -1) {
-          let next: HTMLElement;
-          next = forward
-            ? (focusable[(index + 1) % focusable.length] as HTMLElement)
-            : (focusable[(index - 1) % focusable.length] as HTMLElement);
-          next.focus();
-        }
-      }
-    }
-  };
-  const handleAccessibility = (event: KeyboardEvent) => {
-    if (isTabEvent(event)) {
-      handleFocus(event);
-      return true;
-    }
-    if (isArrowUp(event)) {
-      let next;
-      if (scrollSegment) {
-        const idx = segments.indexOf(scrollSegment);
-        next = idx === -1 ? segments.at(-2) : segments[idx - 1];
-      } else {
-        next = segments.at(-2);
-      }
-      if (next) {
-        event.preventDefault();
-        void onScrub?.({
-          scrubberMonth: { year: next.year, month: next.month },
-          overallScrollPercent: -1,
-          scrubberMonthScrollPercent: 0,
-        });
-        return true;
-      }
-    }
-    if (isArrowDown(event) && scrollSegment) {
-      const idx = segments.indexOf(scrollSegment);
-      if (idx !== -1) {
-        const next = segments[idx + 1];
-        if (next) {
-          event.preventDefault();
-          void onScrub?.({
-            scrubberMonth: { year: next.year, month: next.month },
-            overallScrollPercent: -1,
-            scrubberMonthScrollPercent: 0,
-          });
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-  const keydown = (event: KeyboardEvent) => {
-    let handled = handleAccessibility(event);
-    if (!handled) {
-      onScrubKeyDown?.(event, event.currentTarget as HTMLElement);
-    }
-  };
-</script>
-
-<svelte:window
-  bind:innerHeight={windowHeight}
-  onmousemove={({ clientY }) => (isDragging || isHover) && handleMouseEvent({ clientY })}
-  onmousedown={({ clientY }) => isHover && handleMouseEvent({ clientY, isDragging: true })}
-  onmouseup={({ clientY }) => handleMouseEvent({ clientY, isDragging: false })}
-/>
-
-<div
-  transition:fly={{ x: 50, duration: 250 }}
-  tabindex="0"
-  role="scrollbar"
-  aria-controls="time-label"
-  aria-valuetext={hoverLabel}
-  aria-valuenow={scrollY + PADDING_TOP}
-  aria-valuemax={toScrollY(1)}
-  aria-valuemin={toScrollY(0)}
-  data-id="scrubber"
-  class="absolute end-0 z-1 select-none hover:cursor-row-resize"
-  style:padding-top={PADDING_TOP + 'px'}
-  style:padding-bottom={PADDING_BOTTOM + 'px'}
-  style:width
-  style:height={height + 'px'}
-  style:background-color={isDragging ? 'transparent' : 'transparent'}
-  bind:this={scrollBar}
-  onmouseenter={() => (isHover = true)}
-  onmouseleave={() => (isHover = false)}
-  onkeydown={keydown}
-  draggable="false"
->
-  {#if !usingMobileDevice && hoverLabel && (isHover || isDragging)}
-    <div
-      id="time-label"
-      class={[
-        { 'border-b-2': isDragging },
-        { 'rounded-bl-md': !isDragging },
-        'bg-light truncate opacity-85 pointer-events-none absolute end-0 min-w-20 max-w-64 w-fit rounded-ss-md  border-immich-primary py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg z-1',
-      ]}
-      style:top="{hoverY + 2}px"
-    >
-      {hoverLabel}
-    </div>
-  {/if}
-  {#if usingMobileDevice && ((timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging)}
-    <div
-      id="time-label"
-      class="rounded-s-full w-[32px] ps-2 text-white bg-immich-primary dark:bg-gray-600 hover:cursor-pointer select-none"
-      style:top="{PADDING_TOP + (scrollY - 50 / 2)}px"
-      style:height="50px"
-      style:right="0"
-      style:position="absolute"
-      in:fade={{ duration: 200 }}
-      out:fade={{ duration: 200 }}
-    >
-      <Icon path={mdiPlay} size="20" class="-rotate-90 relative top-[9px] -end-[2px]" />
-      <Icon path={mdiPlay} size="20" class="rotate-90 relative top-px -end-[2px]" />
-      {#if (timelineManager.scrolling && scrollHoverLabel) || isHover || isDragging}
-        <p
-          transition:fade={{ duration: 200 }}
-          style:bottom={50 / 2 - 30 / 2 + 'px'}
-          style:right="36px"
-          style:width="fit-content"
-          class="truncate pointer-events-none absolute text-sm rounded-full w-[32px] py-2 px-4 text-white bg-immich-primary/90 dark:bg-gray-500 hover:cursor-pointer select-none font-semibold"
-        >
-          {scrollHoverLabel}
-        </p>
-      {/if}
-    </div>
-  {/if}
-  <!-- Scroll Position Indicator Line -->
-  {#if !usingMobileDevice && !isDragging}
-    <div class="absolute end-0 h-[2px] w-10 bg-primary" style:top="{scrollY + PADDING_TOP - 2}px">
-      {#if timelineManager.scrolling && scrollHoverLabel && !isHover}
-        <p
-          transition:fade={{ duration: 200 }}
-          class="truncate pointer-events-none absolute end-0 bottom-0 min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-subtle/90 z-1 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg"
-        >
-          {scrollHoverLabel}
-        </p>
-      {/if}
-    </div>
-  {/if}
-  <div
-    class="relative"
-    style:height={relativeTopOffset + 'px'}
-    data-id="lead-in"
-    data-segment-year-month={segments.at(0)?.year + '-' + segments.at(0)?.month}
-    data-label={segments.at(0)?.dateFormatted}
-  >
-    {#if relativeTopOffset > 6}
-      <div class="absolute end-3 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
-    {/if}
-  </div>
-  <!-- Time Segment -->
-  {#each segments as segment (segment.year + '-' + segment.month)}
-    <div
-      class="relative"
-      data-id="time-segment"
-      data-segment-year-month={segment.year + '-' + segment.month}
-      data-label={segment.dateFormatted}
-      style:height={segment.height + 'px'}
-    >
-      {#if !usingMobileDevice}
-        {#if segment.hasLabel}
-          <div class="absolute end-5 top-[-16px] text-[12px] dark:text-immich-dark-fg font-immich-mono">
-            {segment.year}
-          </div>
-        {/if}
-        {#if segment.hasDot}
-          <div class="absolute end-3 bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"></div>
-        {/if}
-      {/if}
-    </div>
-  {/each}
-  <div data-id="lead-out" class="relative" style:height={relativeBottomOffset + 'px'}></div>
-</div>
diff --git a/web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte b/web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte
index b04e1cc8a9..7fc49c2324 100644
--- a/web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte
+++ b/web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte
@@ -9,6 +9,7 @@
     type AbsoluteResult,
     type RelativeResult,
   } from '$lib/components/shared-components/change-date.svelte';
+  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import { AppRoute } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -26,7 +27,6 @@
   import { mdiCalendarBlankOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
-  import DeleteAssetDialog from './delete-asset-dialog.svelte';
   let { isViewing: showAssetViewer } = assetViewingStore;
 
   interface Props {
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 3565a33f21..536426602b 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -22,7 +22,7 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -443,7 +443,7 @@
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
   <div class="relative w-full shrink">
     <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-      <AssetGrid
+      <Timeline
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
         {album}
         {timelineManager}
@@ -544,7 +544,7 @@
             </section>
           {/if}
         {/if}
-      </AssetGrid>
+      </Timeline>
 
       {#if showActivityStatus && !activityManager.isLoading}
         <div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">
diff --git a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 5481224057..f3f113ca38 100644
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -7,7 +7,7 @@
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -47,7 +47,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -57,7 +57,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_archived_assets_message')} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 {#if assetInteraction.selectionActive}
diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
index ae24a82da7..7cc911696c 100644
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -12,7 +12,7 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -51,7 +51,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     withStacked={true}
     {timelineManager}
@@ -62,7 +62,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_favorites_message')} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 <!-- Multiselection mode app bar -->
diff --git a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 733e93db71..cc02cd1df3 100644
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -7,7 +7,7 @@
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -58,7 +58,7 @@
     </Button>
   {/snippet}
 
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -68,7 +68,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 <!-- Multi-selection mode app bar -->
diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 83962c5a90..3b3b2dc212 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -3,7 +3,7 @@
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -43,7 +43,7 @@
 </script>
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
+  <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
 </main>
 
 {#if assetInteraction.selectionActive}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 807819b585..df57e2b173 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -20,7 +20,7 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -386,7 +386,7 @@
   }}
 >
   {#key person.id}
-    <AssetGrid
+    <Timeline
       enableRouting={true}
       {person}
       {timelineManager}
@@ -498,7 +498,7 @@
           {/if}
         </div>
       {/if}
-    </AssetGrid>
+    </Timeline>
   {/key}
 </main>
 
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index 0098667873..2bdbb1098b 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -16,7 +16,7 @@
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import MemoryLane from '$lib/components/photos-page/memory-lane.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
@@ -89,7 +89,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
-  <AssetGrid
+  <Timeline
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -103,7 +103,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>
 
 {#if assetInteraction.selectionActive}
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
index a25dc5643c..a7ce04b444 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
@@ -117,11 +117,11 @@
 
   <section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
     {#if tag.hasAssets}
-      <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
+      <Timeline enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
         {#snippet empty()}
           <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
         {/snippet}
-      </AssetGrid>
+      </Timeline>
     {:else}
       <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
     {/if}
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 2989a78a13..6f93737f52 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -5,7 +5,7 @@
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
@@ -116,14 +116,14 @@
       </HStack>
     {/snippet}
 
-    <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
+    <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         {$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
       </p>
       {#snippet empty()}
         <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} />
       {/snippet}
-    </AssetGrid>
+    </Timeline>
   </UserPageLayout>
 {/if}
 
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index ab0a59f3ef..6fbb35e17b 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
+  import Timeline from '$lib/components/timeline/timeline.svelte';
   import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { AssetAction } from '$lib/constants';
@@ -110,17 +110,7 @@
     return !!asset.latitude && !!asset.longitude;
   };
 
-  const handleThumbnailClick = (
-    asset: TimelineAsset,
-    timelineManager: TimelineManager,
-    dayGroup: DayGroup,
-    onClick: (
-      timelineManager: TimelineManager,
-      assets: TimelineAsset[],
-      groupTitle: string,
-      asset: TimelineAsset,
-    ) => void,
-  ) => {
+  const handleThumbnailClick = (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => {
     if (hasGps(asset)) {
       locationUpdated = true;
       setTimeout(() => {
@@ -129,7 +119,7 @@
       location = { latitude: asset.latitude!, longitude: asset.longitude! };
       void setQueryValue('at', asset.id);
     } else {
-      onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+      defaultAssetOpen();
     }
   };
 </script>
@@ -185,7 +175,7 @@
     </div>
   {/if}
 
-  <AssetGrid
+  <Timeline
     isSelectionMode={true}
     enableRouting={true}
     {timelineManager}
@@ -193,9 +183,9 @@
     removeAction={AssetAction.ARCHIVE}
     onEscape={handleEscape}
     withStacked
-    onThumbnailClick={handleThumbnailClick}
+    onAssetOpen={handleThumbnailClick}
   >
-    {#snippet customLayout(asset: TimelineAsset)}
+    {#snippet customThumbnailLayout(asset: TimelineAsset)}
       {#if hasGps(asset)}
         <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
           {asset.city || $t('gps')}
@@ -209,5 +199,5 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} />
     {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>