diff --git a/web/src/app.css b/web/src/app.css
index 3a4d29b466..5dcefe4173 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -74,6 +74,19 @@
     --immich-dark-bg: 10 10 10;
     --immich-dark-fg: 229 231 235;
     --immich-dark-gray: 33 33 33;
+
+    /* transitions */
+    --immich-split-viewer-nav: enabled;
+
+    /* view transition variables */
+    --vt-duration-default: 250ms;
+    --vt-duration-hero: 280ms;
+    --vt-duration-viewer-navigation: 270ms;
+    --vt-duration-slideshow: 1s;
+    --vt-viewer-slide-easing: cubic-bezier(0.2, 0, 0, 1);
+    --vt-viewer-slide-distance: 15%;
+    --vt-viewer-opacity-start: 0.1;
+    --vt-viewer-blur-max: 4px;
   }
 
   button:not(:disabled),
@@ -175,3 +188,318 @@
     @apply bg-subtle rounded-lg;
   }
 }
+
+@layer base {
+  ::view-transition {
+    background: var(--color-black);
+    animation-duration: var(--vt-duration-default);
+  }
+
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    mix-blend-mode: normal;
+    animation-duration: inherit;
+  }
+
+  ::view-transition-old(*) {
+    animation-name: fadeOut;
+    animation-fill-mode: forwards;
+  }
+  ::view-transition-new(*) {
+    animation-name: fadeIn;
+    animation-fill-mode: forwards;
+  }
+
+  ::view-transition-old(root) {
+    animation: var(--vt-duration-default) 0s fadeOut forwards;
+  }
+  ::view-transition-new(root) {
+    animation: var(--vt-duration-default) 0s fadeIn forwards;
+  }
+  html:active-view-transition-type(slideshow) {
+    &::view-transition-old(root) {
+      animation: var(--vt-duration-slideshow) 0s fadeOut forwards;
+    }
+    &::view-transition-new(root) {
+      animation: var(--vt-duration-slideshow) 0s fadeIn forwards;
+    }
+  }
+  html:active-view-transition-type(viewer-nav) {
+    &::view-transition-old(root) {
+      animation: var(--vt-duration-hero) 0s fadeOut forwards;
+    }
+    &::view-transition-new(root) {
+      animation: var(--vt-duration-hero) 0s fadeIn forwards;
+    }
+  }
+  ::view-transition-old(info) {
+    animation: var(--vt-duration-default) 0s flyOutRight forwards;
+  }
+  ::view-transition-new(info) {
+    animation: var(--vt-duration-default) 0s flyInRight forwards;
+  }
+
+  ::view-transition-group(detail-panel) {
+    z-index: 1;
+  }
+  ::view-transition-old(detail-panel),
+  ::view-transition-new(detail-panel) {
+    animation: none;
+  }
+  ::view-transition-group(letterbox-left),
+  ::view-transition-group(letterbox-right),
+  ::view-transition-group(letterbox-top),
+  ::view-transition-group(letterbox-bottom) {
+    animation-duration: var(--vt-duration-viewer-navigation);
+    z-index: 4;
+  }
+
+  ::view-transition-image-pair(letterbox-left),
+  ::view-transition-image-pair(letterbox-right),
+  ::view-transition-image-pair(letterbox-top),
+  ::view-transition-image-pair(letterbox-bottom) {
+    isolation: auto;
+  }
+
+  ::view-transition-old(letterbox-left),
+  ::view-transition-old(letterbox-right),
+  ::view-transition-old(letterbox-top),
+  ::view-transition-old(letterbox-bottom),
+  ::view-transition-new(letterbox-left),
+  ::view-transition-new(letterbox-right),
+  ::view-transition-new(letterbox-top),
+  ::view-transition-new(letterbox-bottom) {
+    animation: none;
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+    background-color: var(--color-black);
+  }
+
+  ::view-transition-group(exclude-leftbutton),
+  ::view-transition-group(exclude-rightbutton),
+  ::view-transition-group(exclude) {
+    animation: none;
+    z-index: 5;
+  }
+  ::view-transition-old(exclude-leftbutton),
+  ::view-transition-old(exclude-rightbutton),
+  ::view-transition-old(exclude) {
+    visibility: hidden;
+  }
+  ::view-transition-new(exclude-leftbutton),
+  ::view-transition-new(exclude-rightbutton),
+  ::view-transition-new(exclude) {
+    animation: none;
+    z-index: 5;
+  }
+
+  ::view-transition-group(hero) {
+    animation-duration: var(--vt-duration-hero);
+    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+  }
+  ::view-transition-old(hero) {
+    animation: none;
+    align-content: center;
+  }
+  ::view-transition-new(hero) {
+    animation: none;
+    align-content: center;
+  }
+  ::view-transition-old(next),
+  ::view-transition-old(next-old) {
+    animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyOutLeft forwards;
+    overflow: hidden;
+  }
+
+  ::view-transition-new(next),
+  ::view-transition-new(next-new) {
+    animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyInRight forwards;
+    overflow: hidden;
+  }
+
+  ::view-transition-old(previous) {
+    animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyOutRight forwards;
+  }
+  ::view-transition-old(previous-old) {
+    animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyOutRight forwards;
+    overflow: hidden;
+    z-index: -1;
+  }
+
+  ::view-transition-new(previous) {
+    animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyInLeft forwards;
+  }
+
+  ::view-transition-new(previous-new) {
+    animation: var(--vt-duration-viewer-navigation) var(--vt-viewer-slide-easing) flyInLeft forwards;
+    overflow: hidden;
+  }
+
+  @keyframes flyInLeft {
+    from {
+      transform: translateX(calc(-1 * var(--vt-viewer-slide-distance)));
+      opacity: var(--vt-viewer-opacity-start);
+      filter: blur(var(--vt-viewer-blur-max));
+    }
+    to {
+      opacity: 1;
+      filter: blur(0);
+    }
+  }
+
+  @keyframes flyOutLeft {
+    from {
+      opacity: 1;
+      filter: blur(0);
+    }
+    to {
+      transform: translateX(calc(-1 * var(--vt-viewer-slide-distance)));
+      opacity: var(--vt-viewer-opacity-start);
+      filter: blur(var(--vt-viewer-blur-max));
+    }
+  }
+
+  @keyframes flyInRight {
+    from {
+      transform: translateX(var(--vt-viewer-slide-distance));
+      opacity: var(--vt-viewer-opacity-start);
+      filter: blur(var(--vt-viewer-blur-max));
+    }
+    to {
+      opacity: 1;
+      filter: blur(0);
+    }
+  }
+
+  @keyframes flyOutRight {
+    from {
+      opacity: 1;
+      filter: blur(0);
+    }
+    to {
+      transform: translateX(var(--vt-viewer-slide-distance));
+      opacity: var(--vt-viewer-opacity-start);
+      filter: blur(var(--vt-viewer-blur-max));
+    }
+  }
+
+  /* cubic fade curves so combined opacity stays close to 1.0 during crossfade */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    50% {
+      opacity: 0.85;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.85;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* Reduced motion: when system preference is set */
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(hero) {
+      animation-name: none;
+    }
+
+    ::view-transition-old(hero) {
+      animation: none;
+      display: none;
+    }
+
+    ::view-transition-new(hero) {
+      animation: none;
+    }
+
+    html:active-view-transition-type(viewer) {
+      &::view-transition-old(hero) {
+        animation: none;
+        display: none;
+      }
+      &::view-transition-new(hero) {
+        animation: var(--vt-duration-default) 0s fadeIn forwards;
+      }
+    }
+
+    html:active-view-transition-type(timeline) {
+      &::view-transition-old(hero) {
+        animation: var(--vt-duration-default) 0s fadeOut forwards;
+      }
+      &::view-transition-new(hero) {
+        animation: var(--vt-duration-default) 0s fadeIn forwards;
+      }
+    }
+
+    ::view-transition-group(letterbox-left),
+    ::view-transition-group(letterbox-right),
+    ::view-transition-group(letterbox-top),
+    ::view-transition-group(letterbox-bottom) {
+      z-index: 100;
+    }
+
+    ::view-transition-image-pair(letterbox-left),
+    ::view-transition-image-pair(letterbox-right),
+    ::view-transition-image-pair(letterbox-top),
+    ::view-transition-image-pair(letterbox-bottom) {
+      isolation: auto;
+    }
+
+    ::view-transition-old(letterbox-left),
+    ::view-transition-old(letterbox-right),
+    ::view-transition-old(letterbox-top),
+    ::view-transition-old(letterbox-bottom),
+    ::view-transition-new(letterbox-left),
+    ::view-transition-new(letterbox-right),
+    ::view-transition-new(letterbox-top),
+    ::view-transition-new(letterbox-bottom) {
+      animation: none;
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+    }
+
+    ::view-transition-group(previous),
+    ::view-transition-group(previous-old),
+    ::view-transition-group(next),
+    ::view-transition-group(next-old) {
+      width: 100% !important;
+      height: 100% !important;
+      transform: none !important;
+    }
+
+    ::view-transition-old(previous),
+    ::view-transition-old(previous-old),
+    ::view-transition-old(next),
+    ::view-transition-old(next-old) {
+      animation: var(--vt-duration-viewer-navigation) fadeOut forwards;
+      transform-origin: center;
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+      overflow: hidden;
+    }
+
+    ::view-transition-new(previous),
+    ::view-transition-new(previous-new),
+    ::view-transition-new(next),
+    ::view-transition-new(next-new) {
+      animation: var(--vt-duration-viewer-navigation) fadeIn forwards;
+      transform-origin: center;
+      height: 100%;
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+}
diff --git a/web/src/lib/components/AdaptiveImage.svelte b/web/src/lib/components/AdaptiveImage.svelte
index ec2eb2a24a..15e89729be 100644
--- a/web/src/lib/components/AdaptiveImage.svelte
+++ b/web/src/lib/components/AdaptiveImage.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import { thumbhash } from '$lib/actions/thumbhash';
   import AlphaBackground from '$lib/components/AlphaBackground.svelte';
+  import Letterboxes from '$lib/components/asset-viewer/letterboxes.svelte';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
   import DelayedLoadingSpinner from '$lib/components/DelayedLoadingSpinner.svelte';
   import ImageLayer from '$lib/components/ImageLayer.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { getAssetUrls } from '$lib/utils';
   import { AdaptiveImageLoader, type QualityList } from '$lib/utils/adaptive-image-loader.svelte';
+  import { SlideshowLook, SlideshowState } from '$lib/stores/slideshow.store';
   import { scaleToCover, scaleToFit } from '$lib/utils/container-utils';
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -21,6 +23,9 @@
       width: number;
       height: number;
     };
+    slideshowState?: SlideshowState;
+    slideshowLook?: SlideshowLook;
+    transitionName?: string | null | undefined;
     onUrlChange?: (url: string) => void;
     onImageReady?: () => void;
     onError?: () => void;
@@ -38,6 +43,9 @@
     sharedLink,
     objectFit = 'contain',
     container,
+    slideshowState = SlideshowState.None,
+    slideshowLook = SlideshowLook.Contain,
+    transitionName,
     onUrlChange,
     onImageReady,
     onError,
@@ -103,9 +111,13 @@
     return { width: 1, height: 1 };
   });
 
-  const { width, height, left, top } = $derived.by(() => {
+  const scaledDimensions = $derived.by(() => {
     const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-    const { width, height } = scaleFn(imageDimensions, container);
+    return scaleFn(imageDimensions, container);
+  });
+
+  const { width, height, left, top } = $derived.by(() => {
+    const { width, height } = scaledDimensions;
     return {
       width: width + 'px',
       height: height + 'px',
@@ -152,7 +164,24 @@
 <div class="relative h-full w-full overflow-hidden" bind:this={ref}>
   {@render backdrop?.()}
 
-  <div class="absolute" style:left style:top style:width style:height>
+  <Letterboxes
+    {transitionName}
+    {slideshowState}
+    {slideshowLook}
+    hasThumbhash={!!asset.thumbhash}
+    {scaledDimensions}
+    {container}
+  />
+
+  <div
+    class="absolute"
+    style:left
+    style:top
+    style:width
+    style:height
+    style:view-transition-name={transitionName}
+    data-transition-name={transitionName}
+  >
     {#if show.alphaBackground}
       <AlphaBackground />
     {/if}
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index 9a1b346c3e..7a2f7e55a7 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
   import { focusTrap } from '$lib/actions/focus-trap';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
   import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
@@ -12,6 +13,8 @@
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { editManager, EditToolType } from '$lib/managers/edit/edit-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+  import { Route } from '$lib/route';
   import { getAssetActions } from '$lib/services/asset.service';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
@@ -36,9 +39,9 @@
     type StackResponseDto,
   } from '@immich/sdk';
   import { CommandPaletteDefaultProvider } from '@immich/ui';
-  import { onDestroy, onMount, untrack } from 'svelte';
+  import { onDestroy, onMount, tick, untrack } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { fly } from 'svelte/transition';
+  import { fly, slide } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
   import ActivityStatus from './activity-status.svelte';
   import ActivityViewer from './activity-viewer.svelte';
@@ -87,7 +90,7 @@
     onRandom,
   }: Props = $props();
 
-  const { setAssetId } = assetViewingStore;
+  const { setAssetId, invisible } = assetViewingStore;
   const {
     restartProgress: restartSlideshowProgress,
     stopProgress: stopSlideshowProgress,
@@ -108,6 +111,10 @@
   let sharedLink = getSharedLink();
   let fullscreenElement = $state<Element>();
 
+  let slideShowPlaying = $derived($slideshowState === SlideshowState.PlaySlideshow);
+  let slideShowAscending = $derived($slideshowNavigation === SlideshowNavigation.AscendingOrder);
+  let slideShowShuffle = $derived($slideshowNavigation === SlideshowNavigation.Shuffle);
+
   let playOriginalVideo = $state($alwaysLoadOriginalVideo);
   let slideshowStartAssetId = $state<string>();
 
@@ -140,29 +147,44 @@
     }
   };
 
+  let transitionName = $state<string | undefined>('hero');
+  let detailPanelTransitionName = $state<string | undefined>(undefined);
+
+  let unsubscribes: (() => void)[] = [];
   onMount(() => {
     syncAssetViewerOpenClass(true);
-    const slideshowStateUnsubscribe = slideshowState.subscribe((value) => {
-      if (value === SlideshowState.PlaySlideshow) {
-        slideshowHistory.reset();
-        slideshowHistory.queue(toTimelineAsset(asset));
-        handlePromiseError(handlePlaySlideshow());
-      } else if (value === SlideshowState.StopSlideshow) {
-        handlePromiseError(handleStopSlideshow());
-      }
-    });
 
-    const slideshowNavigationUnsubscribe = slideshowNavigation.subscribe((value) => {
-      if (value === SlideshowNavigation.Shuffle) {
-        slideshowHistory.reset();
-        slideshowHistory.queue(toTimelineAsset(asset));
-      }
-    });
-
-    return () => {
-      slideshowStateUnsubscribe();
-      slideshowNavigationUnsubscribe();
+    const addInfoTransition = () => {
+      detailPanelTransitionName = 'info';
+      transitionName = 'hero';
     };
+    const finished = () => {
+      detailPanelTransitionName = undefined;
+      transitionName = undefined;
+    };
+
+    unsubscribes.push(
+      eventManager.on({
+        TransitionToAssetViewer: addInfoTransition,
+        TransitionToTimeline: addInfoTransition,
+        Finished: finished,
+      }),
+      slideshowState.subscribe((value) => {
+        if (value === SlideshowState.PlaySlideshow) {
+          slideshowHistory.reset();
+          slideshowHistory.queue(toTimelineAsset(asset));
+          handlePromiseError(handlePlaySlideshow());
+        } else if (value === SlideshowState.StopSlideshow) {
+          handlePromiseError(handleStopSlideshow());
+        }
+      }),
+      slideshowNavigation.subscribe((value) => {
+        if (value === SlideshowNavigation.Shuffle) {
+          slideshowHistory.reset();
+          slideshowHistory.queue(toTimelineAsset(asset));
+        }
+      }),
+    );
   });
 
   onDestroy(() => {
@@ -170,9 +192,14 @@
     assetViewerManager.closeEditor();
     syncAssetViewerOpenClass(false);
     preloadManager.destroy();
+
+    for (const unsubscribe of unsubscribes) {
+      unsubscribe();
+    }
   });
 
   const closeViewer = () => {
+    transitionName = 'hero';
     onClose?.(asset);
   };
 
@@ -185,33 +212,83 @@
     assetViewerManager.closeEditor();
   };
 
-  const getNavigationTarget = () => {
-    if ($slideshowState === SlideshowState.PlaySlideshow) {
-      return $slideshowNavigation === SlideshowNavigation.AscendingOrder ? 'previous' : 'next';
-    } else {
-      return 'skip';
-    }
+  const startTransition = async (
+    types: string[],
+    targetTransition: string | null,
+    targetAsset: AssetResponseDto | null,
+    navigateFn: () => Promise<boolean>,
+  ) => {
+    const oldTransitionName = viewTransitionManager.getTransitionName('old', targetTransition);
+    const newTransitionName = viewTransitionManager.getTransitionName('new', targetTransition);
+
+    transitionName = oldTransitionName;
+    detailPanelTransitionName = 'detail-panel';
+    await tick();
+
+    const navigationResult = new Promise<boolean>((navigationResolve) => {
+      viewTransitionManager.startTransition(
+        new Promise<void>((resolve) => {
+          eventManager.once('StartViewTransition', async () => {
+            transitionName = newTransitionName;
+            await tick();
+            const result = await navigateFn();
+            navigationResolve(result);
+          });
+          eventManager.once('AssetViewerFree', () => void tick().then(resolve));
+        }),
+        types,
+      );
+    });
+    return navigationResult;
   };
 
-  const completeNavigation = async (target: 'previous' | 'next') => {
-    preloadManager.cancelBeforeNavigation(target);
-    let hasNext: boolean;
+  const getNavigationTarget = (): 'previous' | 'next' | undefined => {
+    if (slideShowPlaying) {
+      return slideShowAscending ? 'previous' : 'next';
+    }
+    return undefined;
+  };
 
-    if ($slideshowState === SlideshowState.PlaySlideshow && $slideshowNavigation === SlideshowNavigation.Shuffle) {
-      hasNext = target === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
-      if (!hasNext) {
-        const asset = await onRandom?.();
-        if (asset) {
-          slideshowHistory.queue(asset);
-          hasNext = true;
+  const completeNavigation = async (order: 'previous' | 'next', skipTransition: boolean) => {
+    preloadManager.cancelBeforeNavigation(order);
+    const skipped = viewTransitionManager.skipTransitions();
+    let hasNext: boolean;
+    if (slideShowPlaying && slideShowShuffle) {
+      const navigate = async () => {
+        let next = order === 'previous' ? slideshowHistory.previous() : slideshowHistory.next();
+        if (!next) {
+          const asset = await onRandom?.();
+          if (asset) {
+            slideshowHistory.queue(asset);
+            next = true;
+          }
         }
+        return next;
+      };
+      // eslint-disable-next-line unicorn/prefer-ternary
+      if (viewTransitionManager.isSupported() && !skipped && !skipTransition) {
+        hasNext = await startTransition(['slideshow'], null, null, navigate);
+      } else {
+        hasNext = await navigate();
       }
     } else {
-      hasNext =
-        target === 'previous' ? await navigateToAsset(cursor.previousAsset) : await navigateToAsset(cursor.nextAsset);
+      const targetAsset = order === 'previous' ? previousAsset : nextAsset;
+      const navigate = async () =>
+        order === 'previous' ? await navigateToAsset(previousAsset) : await navigateToAsset(nextAsset);
+      if (viewTransitionManager.isSupported() && !skipped && !skipTransition && !!targetAsset) {
+        const targetTransition = slideShowPlaying ? null : order;
+        hasNext = await startTransition(
+          slideShowPlaying ? ['slideshow'] : ['viewer-nav'],
+          targetTransition,
+          targetAsset,
+          navigate,
+        );
+      } else {
+        hasNext = await navigate();
+      }
     }
 
-    if ($slideshowState !== SlideshowState.PlaySlideshow) {
+    if (!slideShowPlaying) {
       return;
     }
 
@@ -226,15 +303,23 @@
   };
 
   const tracker = new InvocationTracker();
-  const navigateAsset = (target: 'previous' | 'next' | 'skip') => {
-    if (target === 'skip' || tracker.isActive()) {
+  const navigateAsset = (order?: 'previous' | 'next', skipTransition: boolean = false) => {
+    if (!order) {
+      if (slideShowPlaying) {
+        order = slideShowAscending ? 'previous' : 'next';
+      } else {
+        return;
+      }
+    }
+
+    if (tracker.isActive()) {
       return;
     }
 
     void tracker.invoke(
-      () => completeNavigation(target),
+      () => completeNavigation(order, skipTransition),
       (error: unknown) => handleError(error, $t('error_while_navigating')),
-      () => eventManager.emit('ViewerFinishNavigate'),
+      () => eventManager.emit('AssetViewerAfterNavigate'),
     );
   };
 
@@ -266,10 +351,11 @@
 
   const handleStopSlideshow = async () => {
     try {
-      if (document.fullscreenElement) {
-        document.body.style.cursor = '';
-        await document.exitFullscreen();
+      if (!document.fullscreenElement) {
+        return;
       }
+      document.body.style.cursor = '';
+      await document.exitFullscreen();
     } catch (error) {
       handleError(error, $t('errors.unable_to_exit_fullscreen'));
     } finally {
@@ -368,10 +454,13 @@
     if (cursor.current.id === lastCursor?.current.id) {
       return;
     }
+
     if (lastCursor) {
       selectedStackAsset = undefined;
       previewStackedAsset = undefined;
       preloadManager.updateAfterNavigation(lastCursor, cursor);
+      lastCursor = cursor;
+      return;
     }
     if (!lastCursor) {
       preloadManager.initializePreloads(cursor);
@@ -379,6 +468,23 @@
     lastCursor = cursor;
   });
 
+  const onAssetReplace = async ({ oldAssetId, newAssetId }: { oldAssetId: string; newAssetId: string }) => {
+    if (oldAssetId !== asset.id) {
+      return;
+    }
+
+    await new Promise((promise) => setTimeout(promise, 500));
+    await goto(Route.viewAsset({ id: newAssetId }));
+  };
+
+  const onAssetUpdate = (update: AssetResponseDto) => {
+    if (asset.id === update.id) {
+      cursor = { ...cursor, current: update };
+    }
+  };
+
+  const handleAssetViewerFree = () => eventManager.emit('AssetViewerFree');
+
   const viewerKind = $derived.by(() => {
     if (previewStackedAsset) {
       return asset.type === AssetTypeEnum.Image ? 'PhotoViewer' : 'StackVideoViewer';
@@ -431,12 +537,16 @@
 <section
   id="immich-asset-viewer"
   class="fixed start-0 top-0 grid size-full grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  class:invisible={$invisible}
   use:focusTrap
   bind:this={assetViewerHtmlElement}
 >
   <!-- Top navigation bar -->
   {#if $slideshowState === SlideshowState.None && !assetViewerManager.isShowEditor}
-    <div class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
+    <div
+      class="col-span-4 col-start-1 row-span-1 row-start-1 transition-transform"
+      style:view-transition-name="exclude"
+    >
       <AssetViewerNavBar
         {asset}
         {album}
@@ -468,7 +578,10 @@
   {/if}
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !isFaceEditMode.value && previousAsset}
-    <div class="my-auto col-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
+    <div
+      class="my-auto col-span-1 col-start-1 row-span-full row-start-1 justify-self-start"
+      style:view-transition-name="exclude-leftbutton"
+    >
       <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
     </div>
   {/if}
@@ -477,6 +590,7 @@
   <div data-viewer-content class="z-[-1] relative col-start-1 col-span-4 row-start-1 row-span-full">
     {#if viewerKind === 'StackVideoViewer'}
       <VideoViewer
+        {transitionName}
         cursor={{ ...cursor, current: previewStackedAsset! }}
         assetId={previewStackedAsset!.id}
         cacheKey={previewStackedAsset!.thumbhash}
@@ -486,10 +600,12 @@
         onClose={closeViewer}
         onVideoEnded={() => navigateAsset(getNavigationTarget())}
         onVideoStarted={handleVideoStarted}
+        onReady={handleAssetViewerFree}
         {playOriginalVideo}
       />
     {:else if viewerKind === 'LiveVideoViewer'}
       <VideoViewer
+        {transitionName}
         {cursor}
         assetId={asset.livePhotoVideoId!}
         {sharedLink}
@@ -498,20 +614,24 @@
         loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
         onSwipe={(direction) => navigateAsset(direction === 'left' ? 'next' : 'previous')}
         onVideoEnded={() => (assetViewerManager.isPlayingMotionPhoto = false)}
+        onReady={handleAssetViewerFree}
         {playOriginalVideo}
       />
     {:else if viewerKind === 'ImagePanaramaViewer'}
-      <ImagePanoramaViewer {asset} />
+      <ImagePanoramaViewer {asset} {transitionName} onReady={handleAssetViewerFree} />
     {:else if viewerKind === 'CropArea'}
-      <CropArea {asset} />
+      <CropArea {asset} onReady={handleAssetViewerFree} />
     {:else if viewerKind === 'PhotoViewer'}
       <PhotoViewer
+        {transitionName}
         cursor={{ ...cursor, current: asset }}
         {sharedLink}
         onSwipe={(direction) => navigateAsset(direction === 'left' ? 'next' : 'previous')}
+        onReady={handleAssetViewerFree}
       />
     {:else if viewerKind === 'VideoViewer'}
       <VideoViewer
+        {transitionName}
         {cursor}
         {sharedLink}
         cacheKey={asset.thumbhash}
@@ -521,6 +641,7 @@
         onClose={closeViewer}
         onVideoEnded={() => navigateAsset(getNavigationTarget())}
         onVideoStarted={handleVideoStarted}
+        onReady={handleAssetViewerFree}
         {playOriginalVideo}
       />
     {/if}
@@ -545,15 +666,19 @@
   </div>
 
   {#if $slideshowState === SlideshowState.None && showNavigation && !assetViewerManager.isShowEditor && !isFaceEditMode.value && nextAsset}
-    <div class="my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
+    <div
+      class="my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end"
+      style:view-transition-name="exclude-rightbutton"
+    >
       <NextAssetAction onNextAsset={() => navigateAsset('next')} />
     </div>
   {/if}
 
   {#if showDetailPanel || assetViewerManager.isShowEditor}
     <div
-      transition:fly={{ duration: 150 }}
+      transition:slide={{ axis: 'x', duration: 150 }}
       id="detail-panel"
+      style:view-transition-name={detailPanelTransitionName}
       class="row-start-1 row-span-4 overflow-y-auto transition-all dark:border-l dark:border-s-immich-dark-gray bg-light"
       translate="yes"
     >
diff --git a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte b/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte
index 7a84612fe8..6167725588 100644
--- a/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte
+++ b/web/src/lib/components/asset-viewer/editor/transform-tool/crop-area.svelte
@@ -7,9 +7,10 @@
 
   interface Props {
     asset: AssetResponseDto;
+    onReady?: () => void;
   }
 
-  let { asset }: Props = $props();
+  let { asset, onReady }: Props = $props();
 
   let canvasContainer = $state<HTMLElement | null>(null);
 
@@ -62,6 +63,8 @@
       src={imageSrc}
       alt={$getAltText(toTimelineAsset(asset))}
       style={imageTransform ? `transform: ${imageTransform}` : ''}
+      onload={() => onReady?.()}
+      onerror={() => onReady?.()}
     />
     <div
       class={`${transformManager.isInteracting ? 'resizing' : ''} crop-frame`}
diff --git a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte b/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
index e84bc9fa0c..a40d83f1e3 100644
--- a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
+++ b/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
@@ -13,7 +13,7 @@
   import { t } from 'svelte-i18n';
 
   interface Props {
-    htmlElement: HTMLImageElement | HTMLVideoElement;
+    htmlElement: HTMLImageElement | HTMLVideoElement | undefined | null;
     containerWidth: number;
     containerHeight: number;
     assetId: string;
@@ -82,6 +82,9 @@
   });
 
   const imageContentMetrics = $derived.by(() => {
+    if (!htmlElement) {
+      return { contentWidth: 0, contentHeight: 0, offsetX: 0, offsetY: 0 };
+    }
     const natural = getNaturalSize(htmlElement);
     const container = { width: containerWidth, height: containerHeight };
     const { width: contentWidth, height: contentHeight } = scaleToFit(natural, container);
diff --git a/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte b/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
index 1d597062cb..ed2528bb94 100644
--- a/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/image-panorama-viewer.svelte
@@ -4,13 +4,14 @@
   import { AssetMediaSize, viewAsset, type AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
   type Props = {
+    transitionName?: string;
     asset: AssetResponseDto;
+    onReady?: () => void;
   };
 
-  let { asset }: Props = $props();
+  let { transitionName, asset, onReady }: Props = $props();
 
   const assetId = $derived(asset.id);
 
@@ -20,11 +21,16 @@
   };
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
+<div class="flex h-dvh w-dvw select-none place-content-center place-items-center">
   {#await Promise.all([loadAssetData(assetId), import('./photo-sphere-viewer-adapter.svelte')])}
     <LoadingSpinner />
   {:then [data, { default: PhotoSphereViewer }]}
-    <PhotoSphereViewer panorama={data} originalPanorama={getAssetUrl({ asset, forceOriginal: true })} />
+    <PhotoSphereViewer
+      {transitionName}
+      panorama={data}
+      originalPanorama={getAssetUrl({ asset, forceOriginal: true })}
+      {onReady}
+    />
   {:catch}
     {$t('errors.failed_to_load_asset')}
   {/await}
diff --git a/web/src/lib/components/asset-viewer/letterboxes.svelte b/web/src/lib/components/asset-viewer/letterboxes.svelte
new file mode 100644
index 0000000000..d183f10a0b
--- /dev/null
+++ b/web/src/lib/components/asset-viewer/letterboxes.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { SlideshowLook, SlideshowState } from '$lib/stores/slideshow.store';
+
+  interface Props {
+    transitionName?: string | null | undefined;
+    slideshowState: SlideshowState;
+    slideshowLook: SlideshowLook;
+    hasThumbhash: boolean;
+    scaledDimensions: {
+      width: number;
+      height: number;
+    };
+    container: {
+      width: number;
+      height: number;
+    };
+  }
+
+  let { transitionName, slideshowState, slideshowLook, hasThumbhash, scaledDimensions, container }: Props = $props();
+
+  const blurredSlideshow = $derived(
+    slideshowState !== SlideshowState.None && slideshowLook === SlideshowLook.BlurredBackground && hasThumbhash,
+  );
+
+  const shouldShowLetterboxes = $derived(!!transitionName && transitionName !== 'hero' && !blurredSlideshow);
+
+  const transitionLetterboxLeft = $derived(shouldShowLetterboxes ? 'letterbox-left' : null);
+  const transitionLetterboxRight = $derived(shouldShowLetterboxes ? 'letterbox-right' : null);
+  const transitionLetterboxTop = $derived(shouldShowLetterboxes ? 'letterbox-top' : null);
+  const transitionLetterboxBottom = $derived(shouldShowLetterboxes ? 'letterbox-bottom' : null);
+
+  // Letterbox regions (the empty space around the main box)
+  const letterboxLeft = $derived.by(() => {
+    const { width } = scaledDimensions;
+    const leftOffset = (container.width - width) / 2;
+    return {
+      width: leftOffset + 'px',
+      height: container.height + 'px',
+      left: '0px',
+      top: '0px',
+    };
+  });
+
+  const letterboxRight = $derived.by(() => {
+    const { width } = scaledDimensions;
+    const leftOffset = (container.width - width) / 2;
+    const rightOffset = leftOffset;
+    return {
+      width: rightOffset + 'px',
+      height: container.height + 'px',
+      left: container.width - rightOffset + 'px',
+      top: '0px',
+    };
+  });
+
+  const letterboxTop = $derived.by(() => {
+    const { width, height } = scaledDimensions;
+    const topOffset = (container.height - height) / 2;
+    const leftOffset = (container.width - width) / 2;
+    return {
+      width: width + 'px',
+      height: topOffset + 'px',
+      left: leftOffset + 'px',
+      top: '0px',
+    };
+  });
+
+  const letterboxBottom = $derived.by(() => {
+    const { width, height } = scaledDimensions;
+    const topOffset = (container.height - height) / 2;
+    const bottomOffset = topOffset;
+    const leftOffset = (container.width - width) / 2;
+    return {
+      width: width + 'px',
+      height: bottomOffset + 'px',
+      left: leftOffset + 'px',
+      top: container.height - bottomOffset + 'px',
+    };
+  });
+</script>
+
+<!-- Letterbox regions (empty space around image) -->
+<div
+  class="absolute"
+  style:view-transition-name={transitionLetterboxLeft}
+  style:left={letterboxLeft.left}
+  style:top={letterboxLeft.top}
+  style:width={letterboxLeft.width}
+  style:height={letterboxLeft.height}
+></div>
+<div
+  class="absolute"
+  style:view-transition-name={transitionLetterboxRight}
+  style:left={letterboxRight.left}
+  style:top={letterboxRight.top}
+  style:width={letterboxRight.width}
+  style:height={letterboxRight.height}
+></div>
+<div
+  class="absolute"
+  style:view-transition-name={transitionLetterboxTop}
+  style:left={letterboxTop.left}
+  style:top={letterboxTop.top}
+  style:width={letterboxTop.width}
+  style:height={letterboxTop.height}
+></div>
+<div
+  class="absolute"
+  style:view-transition-name={transitionLetterboxBottom}
+  style:left={letterboxBottom.left}
+  style:top={letterboxBottom.top}
+  style:width={letterboxBottom.width}
+  style:height={letterboxBottom.height}
+></div>
diff --git a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
index 926383d9c2..96a1837fd0 100644
--- a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
+++ b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
+  import Letterboxes from '$lib/components/asset-viewer/letterboxes.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { ocrManager, type OcrBoundingBox } from '$lib/stores/ocr.svelte';
+  import { SlideshowLook, SlideshowState } from '$lib/stores/slideshow.store';
   import { boundingBoxesArray, type Faces } from '$lib/stores/people.store';
   import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
   import { calculateBoundingBoxMatrix, getOcrBoundingBoxes, type Point } from '$lib/utils/ocr-utils';
@@ -41,18 +43,30 @@
     'flex items-center justify-center text-white bg-black/50 cursor-text pointer-events-auto whitespace-pre-wrap wrap-break-word select-text';
 
   type Props = {
+    transitionName?: string;
     panorama: string | { source: string };
     originalPanorama?: string | { source: string };
     adapter?: AdapterConstructor | [AdapterConstructor, unknown];
     plugins?: (PluginConstructor | [PluginConstructor, unknown])[];
     navbar?: boolean;
+    onReady?: () => void;
   };
 
-  let { panorama, originalPanorama, adapter = EquirectangularAdapter, plugins = [], navbar = false }: Props = $props();
+  let {
+    transitionName,
+    panorama,
+    originalPanorama,
+    adapter = EquirectangularAdapter,
+    plugins = [],
+    navbar = false,
+    onReady,
+  }: Props = $props();
 
   let container: HTMLDivElement | undefined = $state();
   let viewer: Viewer;
 
+  const fullscreenDimensions = { width: globalThis.innerWidth || 0, height: globalThis.innerHeight || 0 };
+
   let animationInProgress: { cancel: () => void } | undefined;
   let previousFaces: Faces[] = [];
 
@@ -212,6 +226,7 @@
       zoomSpeed: 0.5,
       fisheye: false,
     });
+    viewer.addEventListener('ready', () => onReady?.(), { once: true });
     const resolutionPlugin = viewer.getPlugin<ResolutionPlugin>(ResolutionPlugin);
     const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
       // zoomLevel is 0-100
@@ -256,7 +271,22 @@
 <AssetViewerEvents {onZoom} />
 
 <svelte:document use:shortcuts={[{ shortcut: { key: 'z' }, onShortcut: onZoom, preventDefault: true }]} />
-<div class="h-full w-full mb-0" bind:this={container}></div>
+<div
+  id="sphere"
+  class="h-full w-full h-dvh w-dvw mb-0"
+  bind:this={container}
+  style:view-transition-name={transitionName}
+></div>
+
+<!-- Zero-sized letterboxes for view transitions from/to regular photos -->
+<Letterboxes
+  {transitionName}
+  slideshowState={SlideshowState.None}
+  slideshowLook={SlideshowLook.Contain}
+  hasThumbhash={false}
+  scaledDimensions={fullscreenDimensions}
+  container={fullscreenDimensions}
+/>
 
 <style>
   /* Reset the default tooltip styling */
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index bd309450f7..093e8db142 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -30,12 +30,13 @@
     cursor: AssetCursor;
     element?: HTMLDivElement;
     sharedLink?: SharedLinkResponseDto;
+    transitionName?: string;
     onReady?: () => void;
     onError?: () => void;
     onSwipe?: (direction: 'left' | 'right') => void;
   }
 
-  let { cursor, element = $bindable(), sharedLink, onReady, onError, onSwipe }: Props = $props();
+  let { cursor, element = $bindable(), sharedLink, transitionName, onReady, onError, onSwipe }: Props = $props();
 
   const { slideshowState, slideshowLook } = slideshowStore;
   const asset = $derived(cursor.current);
@@ -212,6 +213,7 @@
     }}
     bind:imgRef={assetViewerManager.imgRef}
     bind:ref={adaptiveImage}
+    {transitionName}
   >
     {#snippet backdrop()}
       {#if blurredSlideshow}
diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
index 276b3cb6ba..6f154879a3 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
@@ -22,6 +22,7 @@
   import { fade } from 'svelte/transition';
 
   interface Props {
+    transitionName?: string;
     cursor: AssetCursor;
     assetId?: string;
     sharedLink?: SharedLinkResponseDto;
@@ -32,9 +33,11 @@
     onVideoEnded?: () => void;
     onVideoStarted?: () => void;
     onClose?: () => void;
+    onReady?: () => void;
   }
 
   let {
+    transitionName,
     cursor,
     assetId,
     sharedLink,
@@ -45,6 +48,7 @@
     onVideoEnded = () => {},
     onVideoStarted = () => {},
     onClose = () => {},
+    onReady,
   }: Props = $props();
 
   const asset = $derived(cursor.current);
@@ -104,6 +108,7 @@
       width: videoPlayer?.videoWidth ?? 1,
       height: videoPlayer?.videoHeight ?? 1,
     };
+    onReady?.();
   };
 
   const handleCanPlay = async (video: HTMLVideoElement) => {
@@ -180,6 +185,7 @@
       {:else}
         <div class="relative">
           <video
+            style:view-transition-name={transitionName}
             style:height={box.height}
             style:width={box.width}
             bind:this={videoPlayer}
diff --git a/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte b/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte
index 2f22094bc7..553b49cf04 100644
--- a/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-panorama-viewer.svelte
@@ -3,13 +3,14 @@
   import type { AssetResponseDto } from '@immich/sdk';
   import { LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import { fade } from 'svelte/transition';
 
   interface Props {
+    transitionName?: string;
     asset: AssetResponseDto;
+    onReady?: () => void;
   }
 
-  const { asset }: Props = $props();
+  const { asset, transitionName, onReady }: Props = $props();
 
   const modules = Promise.all([
     import('./photo-sphere-viewer-adapter.svelte').then((module) => module.default),
@@ -19,16 +20,18 @@
   ]);
 </script>
 
-<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
+<div class="flex h-full select-none place-content-center place-items-center">
   {#await modules}
     <LoadingSpinner />
   {:then [PhotoSphereViewer, adapter, videoPlugin]}
     <PhotoSphereViewer
+      {transitionName}
       panorama={{ source: getAssetPlaybackUrl({ id: asset.id }) }}
       originalPanorama={{ source: getAssetUrl({ asset, forceOriginal: true })! }}
       plugins={[videoPlugin]}
       {adapter}
       navbar
+      {onReady}
     />
   {:catch}
     {$t('errors.failed_to_load_asset')}
diff --git a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
index 291c5a14eb..f2fa9842f2 100644
--- a/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-wrapper-viewer.svelte
@@ -6,6 +6,7 @@
   import type { SharedLinkResponseDto } from '@immich/sdk';
 
   interface Props {
+    transitionName?: string;
     cursor: AssetCursor;
     assetId?: string;
     sharedLink?: SharedLinkResponseDto;
@@ -17,9 +18,11 @@
     onSwipe: (direction: 'left' | 'right') => void;
     onVideoEnded?: () => void;
     onVideoStarted?: () => void;
+    onReady?: () => void;
   }
 
   let {
+    transitionName,
     cursor,
     assetId,
     sharedLink,
@@ -31,13 +34,15 @@
     onClose,
     onVideoEnded,
     onVideoStarted,
+    onReady,
   }: Props = $props();
 </script>
 
 {#if projectionType === ProjectionType.EQUIRECTANGULAR}
-  <VideoPanoramaViewer asset={cursor.current} />
+  <VideoPanoramaViewer {transitionName} asset={cursor.current} {onReady} />
 {:else}
   <VideoNativeViewer
+    {transitionName}
     {loopVideo}
     {cacheKey}
     {cursor}
@@ -48,5 +53,6 @@
     {onVideoEnded}
     {onVideoStarted}
     {onClose}
+    {onReady}
   />
 {/if}
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index 614b1377fb..31a52670cf 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -6,10 +6,11 @@
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
   import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
   import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
+  import { appManager } from '$lib/managers/app-manager.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';
-  import type { Snippet } from 'svelte';
+  import { type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -44,12 +45,17 @@
 
   let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar' : 'scrollbar-hidden');
   let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-(--spacing(16)))]' : 'top-0 h-full');
+  let isAssetViewer = $derived(appManager.isAssetViewer);
 </script>
 
 <header>
-  {#if !hideNavbar}
+  {#if !hideNavbar && !isAssetViewer}
     <NavigationBar onUploadClick={() => openFileUploadDialog()} />
   {/if}
+
+  {#if isAssetViewer}
+    <div class="max-md:h-(--navbar-height-md) h-(--navbar-height)"></div>
+  {/if}
 </header>
 <div
   tabindex="-1"
@@ -58,13 +64,15 @@
     {hideNavbar ? 'pt-(--navbar-height)' : ''}
     {hideNavbar ? 'max-md:pt-(--navbar-height-md)' : ''}"
 >
-  {#if sidebar}
+  {#if isAssetViewer}
+    <div></div>
+  {:else if sidebar}
     {@render sidebar()}
   {:else}
     <UserSidebar />
   {/if}
 
-  <main class="relative">
+  <main class="relative w-full">
     <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto p-2" use:useActions={use}>
       {@render children?.()}
     </div>
diff --git a/web/src/lib/components/timeline/AssetLayout.svelte b/web/src/lib/components/timeline/AssetLayout.svelte
index 8b06d9b72b..431e5fa968 100644
--- a/web/src/lib/components/timeline/AssetLayout.svelte
+++ b/web/src/lib/components/timeline/AssetLayout.svelte
@@ -1,20 +1,14 @@
 <script lang="ts">
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import type { Snippet } from 'svelte';
-  import { flip } from 'svelte/animate';
-  import { scale } from 'svelte/transition';
-
-  let { isUploading } = uploadAssetsStore;
 
   type Props = {
+    animationTargetAssetId?: string | null;
     viewerAssets: ViewerAsset[];
     width: number;
     height: number;
-    manager: VirtualScrollManager;
     thumbnail: Snippet<
       [
         {
@@ -26,10 +20,7 @@
     customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
   };
 
-  const { viewerAssets, width, height, manager, thumbnail, customThumbnailLayout }: Props = $props();
-
-  const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+  const { animationTargetAssetId, viewerAssets, width, height, thumbnail, customThumbnailLayout }: Props = $props();
 
   const filterIntersecting = <T extends { intersecting: boolean }>(intersectables: T[]) => {
     return intersectables.filter(({ intersecting }) => intersecting);
@@ -41,18 +32,20 @@
   {#each filterIntersecting(viewerAssets) as viewerAsset (viewerAsset.id)}
     {@const position = viewerAsset.position!}
     {@const asset = viewerAsset.asset!}
+    {@const transitionName = animationTargetAssetId === asset.id ? 'hero' : undefined}
 
     <!-- note: don't remove data-asset-id - its used by web e2e tests -->
     <div
       data-asset-id={asset.id}
       class="absolute"
+      data-transition-name={transitionName}
+      style:view-transition-name={transitionName}
       style:top={position.top + 'px'}
       style:inset-inline-start={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 }}
     >
+      <!-- animate:flip={{ duration: transitionDuration }} -->
       {@render thumbnail({ asset, position })}
       {@render customThumbnailLayout?.(asset)}
     </div>
diff --git a/web/src/lib/components/timeline/Month.svelte b/web/src/lib/components/timeline/Month.svelte
index 91073a0a5f..bc6f88d898 100644
--- a/web/src/lib/components/timeline/Month.svelte
+++ b/web/src/lib/components/timeline/Month.svelte
@@ -1,34 +1,37 @@
 <script lang="ts">
+  import { focusAsset } from '$lib/components/timeline/actions/focus-actions';
   import AssetLayout from '$lib/components/timeline/AssetLayout.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import type { Snippet } from 'svelte';
+  import { onMount, tick, type Snippet } from 'svelte';
 
   type Props = {
+    toAssetViewerTransitionId?: string | null;
     thumbnail: Snippet<[{ asset: TimelineAsset; position: CommonPosition; dayGroup: DayGroup; groupIndex: number }]>;
     customThumbnailLayout?: Snippet<[TimelineAsset]>;
     singleSelect: boolean;
     assetInteraction: AssetInteraction;
     monthGroup: MonthGroup;
-    manager: VirtualScrollManager;
     onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
   };
+
   let {
+    toAssetViewerTransitionId,
     thumbnail: thumbnailWithGroup,
     customThumbnailLayout,
     singleSelect,
     assetInteraction,
     monthGroup,
-    manager,
     onDayGroupSelect,
   }: Props = $props();
 
@@ -50,6 +53,32 @@
     });
     return getDateLocaleString(date);
   };
+
+  let toTimelineTransitionAssetId = $state<string | null>(null);
+  let animationTargetAssetId = $derived(toTimelineTransitionAssetId ?? toAssetViewerTransitionId ?? null);
+
+  const transitionToTimelineCallback = ({ id }: { id: string }) => {
+    const asset = monthGroup.findAssetById({ id });
+    if (!asset) {
+      return;
+    }
+    viewTransitionManager.startTransition(
+      new Promise<void>((resolve) => {
+        eventManager.once('TimelineLoaded', (event: { id: string | null }) => {
+          toTimelineTransitionAssetId = event.id;
+          void tick().then(resolve);
+        });
+      }),
+      ['timeline'],
+      () => {
+        toTimelineTransitionAssetId = null;
+        focusAsset(asset.id);
+      },
+    );
+  };
+  if (viewTransitionManager.isSupported()) {
+    onMount(() => eventManager.on({ TransitionToTimeline: transitionToTimelineCallback }));
+  }
 </script>
 
 {#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
@@ -93,7 +122,7 @@
     </div>
 
     <AssetLayout
-      {manager}
+      {animationTargetAssetId}
       viewerAssets={dayGroup.viewerAssets}
       height={dayGroup.height}
       width={dayGroup.width}
diff --git a/web/src/lib/components/timeline/Scrubber.svelte b/web/src/lib/components/timeline/Scrubber.svelte
index c6f81eb1ce..c27a4367e2 100644
--- a/web/src/lib/components/timeline/Scrubber.svelte
+++ b/web/src/lib/components/timeline/Scrubber.svelte
@@ -11,6 +11,7 @@
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
+    invisible: boolean;
     /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
     /** Offset from the bottom of the timeline (e.g., for footers) */
@@ -39,6 +40,7 @@
   }
 
   let {
+    invisible = false,
     timelineTopOffset = 0,
     timelineBottomOffset = 0,
     height = 0,
@@ -438,7 +440,7 @@
           next = forward
             ? (focusable[(index + 1) % focusable.length] as HTMLElement)
             : (focusable[(index - 1) % focusable.length] as HTMLElement);
-          next.focus();
+          next?.focus();
         }
       }
     }
@@ -509,6 +511,7 @@
   aria-valuemin={toScrollY(0)}
   data-id="scrubber"
   class="absolute end-0 z-1 select-none hover:cursor-row-resize"
+  class:invisible
   style:padding-top={PADDING_TOP + 'px'}
   style:padding-bottom={PADDING_BOTTOM + 'px'}
   style:width
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index d6ce722c96..e8d245710a 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -11,6 +11,8 @@
   import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
   import Portal from '$lib/elements/Portal.svelte';
   import Skeleton from '$lib/elements/Skeleton.svelte';
+  import { viewTransitionManager } from '$lib/managers/ViewTransitionManager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
   import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
@@ -26,7 +28,6 @@
   import { DateTime } from 'luxon';
   import { onDestroy, onMount, tick, type Snippet } from 'svelte';
   import type { UpdatePayload } from 'vite';
-
   interface Props {
     isSelectionMode?: boolean;
     singleSelect?: boolean;
@@ -102,6 +103,7 @@
   // Overall scroll percentage through the entire timeline (0-1)
   let timelineScrollPercent: number = $state(0);
   let scrubberWidth = $state(0);
+  let toAssetViewerTransitionId = $state<string | null>(null);
 
   const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
   const maxMd = $derived(mediaQueryManager.maxMd);
@@ -209,7 +211,7 @@
         timelineManager.viewportWidth = rect.width;
       }
     }
-    const scrollTarget = $gridScrollTarget?.at;
+    const scrollTarget = getScrollTarget();
     let scrolled = false;
     if (scrollTarget) {
       scrolled = await scrollAndLoadAsset(scrollTarget);
@@ -221,7 +223,7 @@
       await tick();
       focusAsset(scrollTarget);
     }
-    invisible = false;
+    invisible = isAssetViewerRoute(page) ? true : false;
   };
 
   // note: only modified once in afterNavigate()
@@ -239,10 +241,13 @@
     hasNavigatedToOrFromAssetViewer = isNavigatingToAssetViewer !== isNavigatingFromAssetViewer;
   });
 
+  const getScrollTarget = () => {
+    return $gridScrollTarget?.at ?? page.params.assetId ?? null;
+  };
   // afterNavigate is only called after navigation to a new URL, {complete} will resolve
   // after successful navigation.
   afterNavigate(({ complete }) => {
-    void complete.finally(() => {
+    void complete.finally(async () => {
       const isAssetViewerPage = isAssetViewerRoute(page);
 
       // Set initial load state only once - if initialLoadWasAssetViewer is null, then
@@ -251,8 +256,13 @@
       if (isDirectNavigation) {
         initialLoadWasAssetViewer = isAssetViewerPage && !hasNavigatedToOrFromAssetViewer;
       }
-
       void scrollAfterNavigate();
+      if (!isAssetViewerPage) {
+        const scrollTarget = getScrollTarget();
+        await tick();
+
+        eventManager.emit('TimelineLoaded', { id: scrollTarget });
+      }
     });
   });
 
@@ -260,7 +270,7 @@
   // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
 
   onMount(() => {
-    if (!enableRouting) {
+    if (!enableRouting && !isAssetViewerRoute(page)) {
       invisible = false;
     }
   });
@@ -544,19 +554,6 @@
 
     assetInteraction.selectAll = timelineManager.assetCount === assetInteraction.selectedAssets.length;
   };
-
-  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 });
-  };
 </script>
 
 <svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
@@ -587,6 +584,7 @@
 {#if timelineManager.months.length > 0}
   <Scrubber
     {timelineManager}
+    {invisible}
     height={timelineManager.viewportHeight}
     timelineTopOffset={timelineManager.topSectionHeight}
     timelineBottomOffset={timelineManager.bottomSectionHeight}
@@ -666,11 +664,11 @@
           style:width="100%"
         >
           <Month
+            {toAssetViewerTransitionId}
             {assetInteraction}
             {customThumbnailLayout}
             {singleSelect}
             {monthGroup}
-            manager={timelineManager}
             onDayGroupSelect={handleGroupSelect}
           >
             {#snippet thumbnail({ asset, position, dayGroup, groupIndex })}
@@ -684,12 +682,56 @@
                 {asset}
                 {albumUsers}
                 {groupIndex}
-                onClick={(asset) => {
-                  if (typeof onThumbnailClick === 'function') {
-                    onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
-                  } else {
-                    _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+                onClick={async (asset) => {
+                  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 dispatchClick = () => {
+                    if (typeof onThumbnailClick === 'function') {
+                      onThumbnailClick(asset, timelineManager, dayGroup, onClick);
+                    } else {
+                      onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+                    }
+                  };
+
+                  const hasThumbnailClick = typeof onThumbnailClick === 'function';
+                  const selectingAssets = isSelectionMode || assetInteraction.selectionActive;
+
+                  if (!viewTransitionManager.isSupported() || hasThumbnailClick || selectingAssets) {
+                    dispatchClick();
+                    return;
                   }
+
+                  // tag  target on the 'old' snapshot
+                  toAssetViewerTransitionId = asset.id;
+                  await tick();
+
+                  eventManager.once('StartViewTransition', () => {
+                    toAssetViewerTransitionId = null;
+                    dispatchClick();
+                  });
+
+                  viewTransitionManager.startTransition(
+                    new Promise<void>((resolve) => {
+                      eventManager.once('AssetViewerFree', () => {
+                        void tick().then(() => {
+                          eventManager.emit('TransitionToAssetViewer');
+                          resolve();
+                        });
+                      });
+                    }),
+                    ['viewer'],
+                  );
                 }}
                 onSelect={() => {
                   if (isSelectionMode || assetInteraction.selectionActive) {
diff --git a/web/src/lib/components/timeline/TimelineAssetViewer.svelte b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
index bd4ead6def..75d5c92548 100644
--- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte
+++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
@@ -4,6 +4,7 @@
   import { AssetAction } from '$lib/constants';
   import { assetCacheManager } from '$lib/managers/AssetCacheManager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -98,6 +99,10 @@
   };
 
   const handleClose = async (asset: { id: string }) => {
+    const awaitInit = new Promise<void>((resolve) => eventManager.once('StartViewTransition', resolve));
+    eventManager.emit('TransitionToTimeline', { id: asset.id });
+    await awaitInit;
+
     invisible = true;
     $gridScrollTarget = { at: asset.id };
     await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
diff --git a/web/src/lib/managers/ViewTransitionManager.svelte.ts b/web/src/lib/managers/ViewTransitionManager.svelte.ts
new file mode 100644
index 0000000000..fc3a0bf719
--- /dev/null
+++ b/web/src/lib/managers/ViewTransitionManager.svelte.ts
@@ -0,0 +1,127 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function traceTransitionEvents(msg: string, error?: unknown) {
+  // console.log(msg, error);
+}
+class ViewTransitionManager {
+  #activeViewTransition = $state<ViewTransition | null>(null);
+  #finishedCallbacks: (() => void)[] = [];
+
+  #splitViewerNavTransitionNames = true;
+
+  constructor() {
+    const root = document.documentElement;
+    const value = getComputedStyle(root).getPropertyValue('--immich-split-viewer-nav').trim();
+    this.#splitViewerNavTransitionNames = value === 'enabled';
+  }
+
+  getTransitionName = (kind: 'old' | 'new', name: string | null | undefined) => {
+    if (name === 'previous' || name === 'next') {
+      return this.#splitViewerNavTransitionNames ? name + '-' + kind : name;
+    } else if (name) {
+      return name;
+    }
+    return undefined;
+  };
+
+  get activeViewTransition() {
+    return this.#activeViewTransition;
+  }
+
+  isSupported() {
+    return 'startViewTransition' in document;
+  }
+
+  skipTransitions() {
+    const skippedTransitions = !!this.#activeViewTransition;
+    this.#activeViewTransition?.skipTransition();
+    this.#notifyFinished();
+    return skippedTransitions;
+  }
+
+  startTransition(domUpdateComplete: Promise<unknown>, types?: string[], finishedCallback?: () => unknown) {
+    if (!this.isSupported()) {
+      throw new Error('View transition API not available');
+    }
+    if (this.#activeViewTransition) {
+      traceTransitionEvents('Can not start transition - one already active');
+      return;
+    }
+
+    // good time to add view-transition-name styles (if needed)
+    traceTransitionEvents('emit BeforeStartViewTransition');
+    eventManager.emit('BeforeStartViewTransition');
+
+    // next call will create the 'old' view snapshot
+    let transition: ViewTransition;
+    try {
+      // eslint-disable-next-line tscompat/tscompat
+      transition = document.startViewTransition({
+        update: async () => {
+          // Good time to remove any view-transition-name styles created during
+          // BeforeStartViewTransition, then trigger the actual view transition.
+          traceTransitionEvents('emit StartViewTransition');
+          eventManager.emit('StartViewTransition');
+
+          await domUpdateComplete;
+          traceTransitionEvents('awaited domUpdateComplete');
+        },
+        types,
+      });
+    } catch {
+      // eslint-disable-next-line tscompat/tscompat
+      transition = document.startViewTransition(async () => {
+        // Good time to remove any view-transition-name styles created during
+        // BeforeStartViewTransition, then trigger the actual view transition.
+        traceTransitionEvents('emit StartViewTransition');
+        eventManager.emit('StartViewTransition');
+        await domUpdateComplete;
+        traceTransitionEvents('awaited domUpdateComplete');
+      });
+    }
+    this.#activeViewTransition = transition;
+    this.#finishedCallbacks.push(() => {
+      this.#activeViewTransition = null;
+    });
+    if (finishedCallback) {
+      this.#finishedCallbacks.push(finishedCallback);
+    }
+    // UpdateCallbackDone is a good time to add any view-transition-name styles
+    // to the new DOM state, before the 'new' view snapshot is creatd
+    // eslint-disable-next-line tscompat/tscompat
+    transition.updateCallbackDone
+      .then(() => {
+        traceTransitionEvents('emit UpdateCallbackDone');
+        eventManager.emit('UpdateCallbackDone');
+      })
+      .catch((error: unknown) => traceTransitionEvents('error in UpdateCallbackDone', error));
+    // Both old/new snapshots are taken - pseudo elements are created, transition is
+    // about to start
+    // eslint-disable-next-line tscompat/tscompat
+    transition.ready
+      .then(() => eventManager.emit('Ready'))
+      .catch((error: unknown) => {
+        this.#notifyFinished();
+        traceTransitionEvents('error in Ready', error);
+      });
+    // Transition is complete
+    // eslint-disable-next-line tscompat/tscompat
+    transition.finished
+      .then(() => {
+        traceTransitionEvents('emit Finished');
+        eventManager.emit('Finished');
+      })
+      .catch((error: unknown) => traceTransitionEvents('error in Finished', error));
+    // eslint-disable-next-line tscompat/tscompat
+    void transition.finished.then(() => this.#notifyFinished());
+  }
+
+  #notifyFinished() {
+    for (const callback of this.#finishedCallbacks) {
+      callback();
+    }
+    this.#finishedCallbacks = [];
+  }
+}
+
+export const viewTransitionManager = new ViewTransitionManager();
diff --git a/web/src/lib/managers/app-manager.svelte.ts b/web/src/lib/managers/app-manager.svelte.ts
new file mode 100644
index 0000000000..b0b7229ab8
--- /dev/null
+++ b/web/src/lib/managers/app-manager.svelte.ts
@@ -0,0 +1,13 @@
+class AppManager {
+  #isAssetViewer = $state<boolean>(false);
+
+  set isAssetViewer(value: boolean) {
+    this.#isAssetViewer = value;
+  }
+
+  get isAssetViewer() {
+    return this.#isAssetViewer;
+  }
+}
+
+export const appManager = new AppManager();
diff --git a/web/src/lib/managers/event-manager.svelte.ts b/web/src/lib/managers/event-manager.svelte.ts
index 47e163cb17..3bfc098bc7 100644
--- a/web/src/lib/managers/event-manager.svelte.ts
+++ b/web/src/lib/managers/event-manager.svelte.ts
@@ -23,6 +23,7 @@ export type Events = {
 
   ResetSwipeFeedback: [];
   ViewerFinishNavigate: [];
+  AssetViewerAfterNavigate: [];
 
   AuthLogin: [LoginResponseDto];
   AuthLogout: [];
@@ -78,6 +79,19 @@ export type Events = {
 
   SessionLocked: [];
 
+  TransitionToTimeline: [{ id: string }];
+  TimelineLoaded: [{ id: string | null }];
+
+  TransitionToAssetViewer: [];
+  AssetViewerLoaded: [];
+  AssetViewerFree: [];
+
+  BeforeStartViewTransition: [];
+  Finished: [];
+  Ready: [];
+  UpdateCallbackDone: [];
+  StartViewTransition: [];
+
   SystemConfigUpdate: [SystemConfigDto];
 
   LibraryCreate: [LibraryResponseDto];
diff --git a/web/src/lib/stores/asset-viewing.store.ts b/web/src/lib/stores/asset-viewing.store.ts
index 3cd2cd9579..f137e917f9 100644
--- a/web/src/lib/stores/asset-viewing.store.ts
+++ b/web/src/lib/stores/asset-viewing.store.ts
@@ -5,6 +5,7 @@ import { readonly, writable } from 'svelte/store';
 
 function createAssetViewingStore() {
   const viewingAssetStoreState = writable<AssetResponseDto>();
+  const invisible = writable<boolean>(false);
   const viewState = writable<boolean>(false);
   const gridScrollTarget = writable<AssetGridRouteSearchParams | null | undefined>();
 
@@ -30,6 +31,7 @@ function createAssetViewingStore() {
     setAsset,
     setAssetId,
     showAssetViewer,
+    invisible,
   };
 }
 
diff --git a/web/src/lib/utils/base-event-manager.svelte.ts b/web/src/lib/utils/base-event-manager.svelte.ts
index 5112076988..f4611df4ce 100644
--- a/web/src/lib/utils/base-event-manager.svelte.ts
+++ b/web/src/lib/utils/base-event-manager.svelte.ts
@@ -43,6 +43,14 @@ export class BaseEventManager<Events extends EventsBase> {
     };
   }
 
+  once<T extends keyof Events>(event: T, callback: EventCallback<Events, T>) {
+    const unsubscribe = this.#onEvent(event, (...args: Events[T]) => {
+      unsubscribe();
+      return callback(...args);
+    });
+    return unsubscribe;
+  }
+
   emit<T extends keyof Events>(event: T, ...params: Events[T]) {
     const listeners = this.getListeners(event);
     for (const listener of listeners) {
diff --git a/web/src/routes/(user)/+layout.svelte b/web/src/routes/(user)/+layout.svelte
index e6e349fe91..bf086ca97a 100644
--- a/web/src/routes/(user)/+layout.svelte
+++ b/web/src/routes/(user)/+layout.svelte
@@ -24,7 +24,7 @@
   });
 </script>
 
-<div class:display-none={$showAssetViewer}>
+<div>
   {@render children?.()}
 </div>
 <UploadCover />
@@ -33,7 +33,4 @@
   :root {
     overscroll-behavior: none;
   }
-  .display-none {
-    display: none;
-  }
 </style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 046d5ce068..b66b441a13 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterNavigate, beforeNavigate, goto } from '$app/navigation';
+  import { afterNavigate, beforeNavigate, goto, onNavigate } from '$app/navigation';
   import { page } from '$app/state';
   import { shortcut } from '$lib/actions/shortcut';
   import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
@@ -8,6 +8,7 @@
   import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
   import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
   import VersionAnnouncement from '$lib/components/VersionAnnouncement.svelte';
+  import { appManager } from '$lib/managers/app-manager.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
@@ -77,6 +78,8 @@
 
   let showNavigationLoadingBar = $state(false);
 
+  appManager.isAssetViewer = isAssetViewerRoute(page);
+
   const getMyImmichLink = () => {
     return new URL(page.url.pathname + page.url.search, 'https://my.immich.app');
   };
@@ -102,8 +105,15 @@
     showNavigationLoadingBar = true;
   });
 
-  afterNavigate(() => {
-    showNavigationLoadingBar = false;
+  onNavigate(({ to }) => {
+    appManager.isAssetViewer = isAssetViewerRoute(to) ? true : false;
+  });
+
+  afterNavigate(({ to, complete }) => {
+    appManager.isAssetViewer = isAssetViewerRoute(to) ? true : false;
+    void complete.finally(() => {
+      showNavigationLoadingBar = false;
+    });
   });
 
   const { serverRestarting } = websocketStore;