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 8205c8c353..4b8bb40f77 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
@@ -2,6 +2,7 @@
   import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
   import VideoRemoteViewer from '$lib/components/asset-viewer/video-remote-viewer.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { loopVideo as loopVideoPreference, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
@@ -41,8 +42,11 @@
   let assetFileUrl = $state('');
   let forceMuted = $state(false);
   let isScrubbing = $state(false);
+  let showVideo = $state(false);
 
   onMount(() => {
+    // Show video after mount to ensure fading in.
+    showVideo = true;
     assetFileUrl = getAssetPlaybackUrl({ id: assetId, cacheKey });
     if (videoPlayer) {
       forceMuted = false;
@@ -102,59 +106,61 @@
   });
 </script>
 
-<div
-  transition:fade={{ duration: 150 }}
-  class="flex h-full select-none place-content-center place-items-center"
-  bind:clientWidth={containerWidth}
-  bind:clientHeight={containerHeight}
->
-  {#if castManager.isCasting}
-    <div class="place-content-center h-full place-items-center">
-      <VideoRemoteViewer
+{#if showVideo}
+  <div
+    transition:fade={{ duration: assetViewerFadeDuration }}
+    class="flex h-full select-none place-content-center place-items-center"
+    bind:clientWidth={containerWidth}
+    bind:clientHeight={containerHeight}
+  >
+    {#if castManager.isCasting}
+      <div class="place-content-center h-full place-items-center">
+        <VideoRemoteViewer
+          poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
+          {onVideoStarted}
+          {onVideoEnded}
+          {assetFileUrl}
+        />
+      </div>
+    {:else}
+      <video
+        bind:this={videoPlayer}
+        loop={$loopVideoPreference && loopVideo}
+        autoplay
+        playsinline
+        controls
+        class="h-full object-contain"
+        use:swipe={() => ({})}
+        onswipe={onSwipe}
+        oncanplay={(e) => handleCanPlay(e.currentTarget)}
+        onended={onVideoEnded}
+        onvolumechange={(e) => {
+          if (!forceMuted) {
+            $videoViewerMuted = e.currentTarget.muted;
+          }
+        }}
+        onseeking={() => (isScrubbing = true)}
+        onseeked={() => (isScrubbing = false)}
+        onplaying={(e) => {
+          e.currentTarget.focus();
+        }}
+        onclose={() => onClose()}
+        muted={forceMuted || $videoViewerMuted}
+        bind:volume={$videoViewerVolume}
         poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
-        {onVideoStarted}
-        {onVideoEnded}
-        {assetFileUrl}
-      />
-    </div>
-  {:else}
-    <video
-      bind:this={videoPlayer}
-      loop={$loopVideoPreference && loopVideo}
-      autoplay
-      playsinline
-      controls
-      class="h-full object-contain"
-      use:swipe={() => ({})}
-      onswipe={onSwipe}
-      oncanplay={(e) => handleCanPlay(e.currentTarget)}
-      onended={onVideoEnded}
-      onvolumechange={(e) => {
-        if (!forceMuted) {
-          $videoViewerMuted = e.currentTarget.muted;
-        }
-      }}
-      onseeking={() => (isScrubbing = true)}
-      onseeked={() => (isScrubbing = false)}
-      onplaying={(e) => {
-        e.currentTarget.focus();
-      }}
-      onclose={() => onClose()}
-      muted={forceMuted || $videoViewerMuted}
-      bind:volume={$videoViewerVolume}
-      poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, cacheKey })}
-      src={assetFileUrl}
-    >
-    </video>
+        src={assetFileUrl}
+      >
+      </video>
 
-    {#if isLoading}
-      <div class="absolute flex place-content-center place-items-center">
-        <LoadingSpinner />
-      </div>
-    {/if}
+      {#if isLoading}
+        <div class="absolute flex place-content-center place-items-center">
+          <LoadingSpinner />
+        </div>
+      {/if}
 
-    {#if isFaceEditMode.value}
-      <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
+      {#if isFaceEditMode.value}
+        <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
+      {/if}
     {/if}
-  {/if}
-</div>
+  </div>
+{/if}
diff --git a/web/src/lib/components/memory-page/memory-photo-viewer.svelte b/web/src/lib/components/memory-page/memory-photo-viewer.svelte
new file mode 100644
index 0000000000..b0b1dc98a6
--- /dev/null
+++ b/web/src/lib/components/memory-page/memory-photo-viewer.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
+  import { assetViewerFadeDuration } from '$lib/constants';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getAltText } from '$lib/utils/thumbnail-util';
+  import { AssetMediaSize } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  interface Props {
+    asset: TimelineAsset;
+  }
+
+  const { asset }: Props = $props();
+
+  let assetFileUrl: string = $state('');
+  let imageLoaded: boolean = $state(false);
+  let loader = $state<HTMLImageElement>();
+
+  const onload = () => {
+    imageLoaded = true;
+    assetFileUrl = imageLoaderUrl;
+  };
+
+  onMount(() => {
+    if (loader?.complete) {
+      onload();
+    }
+    loader?.addEventListener('load', onload);
+    return () => {
+      loader?.removeEventListener('load', onload);
+    };
+  });
+
+  const imageLoaderUrl = $derived(getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Preview }));
+</script>
+
+{#if !imageLoaded}
+  <!-- svelte-ignore a11y_missing_attribute -->
+  <img bind:this={loader} style="display:none" src={imageLoaderUrl} aria-hidden="true" />
+{/if}
+
+{#if !imageLoaded}
+  <div id="spinner" class="flex h-full items-center justify-center">
+    <LoadingSpinner />
+  </div>
+{:else if imageLoaded}
+  <div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
+    <img
+      class="h-full w-full rounded-2xl object-contain transition-all"
+      src={assetFileUrl}
+      alt={$getAltText(asset)}
+      draggable="false"
+    />
+  </div>
+{/if}
+
+<style>
+  @keyframes delayedVisibility {
+    to {
+      visibility: visible;
+    }
+  }
+  #spinner {
+    visibility: hidden;
+    animation: 0s linear 0.4s forwards delayedVisibility;
+  }
+</style>
diff --git a/web/src/lib/components/memory-page/memory-video-viewer.svelte b/web/src/lib/components/memory-page/memory-video-viewer.svelte
new file mode 100644
index 0000000000..7758b067f3
--- /dev/null
+++ b/web/src/lib/components/memory-page/memory-video-viewer.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { assetViewerFadeDuration } from '$lib/constants';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
+  import { AssetMediaSize } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { fade } from 'svelte/transition';
+
+  interface Props {
+    asset: TimelineAsset;
+    videoPlayer: HTMLVideoElement | undefined;
+    videoViewerMuted?: boolean;
+    videoViewerVolume?: number;
+  }
+
+  let { asset, videoPlayer = $bindable(), videoViewerVolume, videoViewerMuted }: Props = $props();
+
+  let showVideo: boolean = $state(false);
+
+  onMount(() => {
+    // Show video after mount to ensure fading in.
+    showVideo = true;
+  });
+</script>
+
+{#if showVideo}
+  <div class="h-full w-full bg-pink-9000" transition:fade={{ duration: assetViewerFadeDuration }}>
+    <video
+      bind:this={videoPlayer}
+      autoplay
+      playsinline
+      class="h-full w-full rounded-2xl object-contain transition-all"
+      src={getAssetPlaybackUrl({ id: asset.id })}
+      poster={getAssetThumbnailUrl({ id: asset.id, size: AssetMediaSize.Preview })}
+      draggable="false"
+      muted={videoViewerMuted}
+      volume={videoViewerVolume}
+    ></video>
+  </div>
+{/if}
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 77ccebe42b..f1a15f4429 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -4,6 +4,8 @@
   import { intersectionObserver } from '$lib/actions/intersection-observer';
   import { resizeObserver } from '$lib/actions/resize-observer';
   import { shortcuts } from '$lib/actions/shortcut';
+  import MemoryPhotoViewer from '$lib/components/memory-page/memory-photo-viewer.svelte';
+  import MemoryVideoViewer from '$lib/components/memory-page/memory-video-viewer.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
   import ChangeDate from '$lib/components/photos-page/actions/change-date-action.svelte';
@@ -23,7 +25,7 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { AppRoute, assetViewerFadeDuration, QueryParameter } from '$lib/constants';
+  import { AppRoute, QueryParameter } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -31,9 +33,8 @@
   import { type MemoryAsset, memoryStore } from '$lib/stores/memory.store.svelte';
   import { locale, videoViewerMuted, videoViewerVolume } from '$lib/stores/preferences.store';
   import { preferences } from '$lib/stores/user.store';
-  import { getAssetPlaybackUrl, getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
+  import { getAssetThumbnailUrl, handlePromiseError, memoryLaneTitle } from '$lib/utils';
   import { cancelMultiselect } from '$lib/utils/asset-utils';
-  import { getAltText } from '$lib/utils/thumbnail-util';
   import { fromISODateTimeUTC, toTimelineAsset } from '$lib/utils/timeline-util';
   import { AssetMediaSize, getAssetInfo } from '@immich/sdk';
   import { IconButton } from '@immich/ui';
@@ -59,7 +60,6 @@
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
   import { Tween } from 'svelte/motion';
-  import { fade } from 'svelte/transition';
 
   let memoryGallery: HTMLElement | undefined = $state();
   let memoryWrapper: HTMLElement | undefined = $state();
@@ -363,15 +363,16 @@
       {/snippet}
 
       <div class="flex place-content-center place-items-center gap-2 overflow-hidden">
-        <IconButton
-          shape="round"
-          variant="ghost"
-          color="secondary"
-          aria-label={paused ? $t('play_memories') : $t('pause_memories')}
-          icon={paused ? mdiPlay : mdiPause}
-          onclick={() => handlePromiseError(handleAction('PlayPauseButtonClick', paused ? 'play' : 'pause'))}
-          class="hover:text-black"
-        />
+        <div class="w-[50px] dark">
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            aria-label={paused ? $t('play_memories') : $t('pause_memories')}
+            icon={paused ? mdiPlay : mdiPause}
+            onclick={() => handlePromiseError(handleAction('PlayPauseButtonClick', paused ? 'play' : 'pause'))}
+          />
+        </div>
 
         {#each current.memory.assets as asset, index (asset.id)}
           <a class="relative w-full py-2" href={asHref(asset)} aria-label={$t('view')}>
@@ -385,20 +386,23 @@
             {(current.assetIndex + 1).toLocaleString($locale)}/{current.memory.assets.length.toLocaleString($locale)}
           </p>
         </div>
-        <IconButton
-          shape="round"
-          variant="ghost"
-          color="secondary"
-          aria-label={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
-          icon={$videoViewerMuted ? mdiVolumeOff : mdiVolumeHigh}
-          onclick={() => ($videoViewerMuted = !$videoViewerMuted)}
-        />
+
+        <div class="w-[50px] dark">
+          <IconButton
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            aria-label={$videoViewerMuted ? $t('unmute_memories') : $t('mute_memories')}
+            icon={$videoViewerMuted ? mdiVolumeOff : mdiVolumeHigh}
+            onclick={() => ($videoViewerMuted = !$videoViewerMuted)}
+          />
+        </div>
       </div>
     </ControlAppBar>
 
     {#if galleryInView}
       <div
-        class="fixed top-20 start-1/2 -translate-x-1/2 transition-opacity"
+        class="fixed top-10 start-1/2 -translate-x-1/2 transition-opacity dark z-1"
         class:opacity-0={!galleryInView}
         class:opacity-100={galleryInView}
       >
@@ -409,7 +413,6 @@
         >
           <IconButton
             shape="round"
-            variant="ghost"
             color="secondary"
             aria-label={$t('hide_gallery')}
             icon={mdiChevronUp}
@@ -463,30 +466,16 @@
         >
           <div class="relative h-full w-full rounded-2xl bg-black">
             {#key current.asset.id}
-              <div transition:fade={{ duration: assetViewerFadeDuration }} class="h-full w-full">
-                {#if current.asset.isVideo}
-                  <video
-                    bind:this={videoPlayer}
-                    autoplay
-                    playsinline
-                    class="h-full w-full rounded-2xl object-contain transition-all"
-                    src={getAssetPlaybackUrl({ id: current.asset.id })}
-                    poster={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })}
-                    draggable="false"
-                    muted={$videoViewerMuted}
-                    volume={$videoViewerVolume}
-                    transition:fade
-                  ></video>
-                {:else}
-                  <img
-                    class="h-full w-full rounded-2xl object-contain transition-all"
-                    src={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })}
-                    alt={$getAltText(current.asset)}
-                    draggable="false"
-                    transition:fade
-                  />
-                {/if}
-              </div>
+              {#if current.asset.isVideo}
+                <MemoryVideoViewer
+                  asset={current.asset}
+                  bind:videoPlayer
+                  videoViewerMuted={$videoViewerMuted}
+                  videoViewerVolume={$videoViewerVolume}
+                />
+              {:else}
+                <MemoryPhotoViewer asset={current.asset} />
+              {/if}
             {/key}
 
             <div
@@ -543,26 +532,28 @@
             </div>
             <!-- CONTROL BUTTONS -->
             {#if current.previous}
-              <div class="absolute top-1/2 start-0 ms-4">
+              <div class="absolute top-1/2 start-0 ms-4 dark">
                 <IconButton
                   shape="round"
                   aria-label={$t('previous_memory')}
                   icon={mdiChevronLeft}
                   variant="ghost"
                   color="secondary"
+                  size="giant"
                   onclick={handlePreviousAsset}
                 />
               </div>
             {/if}
 
             {#if current.next}
-              <div class="absolute top-1/2 end-0 me-4">
+              <div class="absolute top-1/2 end-0 me-4 dark">
                 <IconButton
                   shape="round"
                   aria-label={$t('next_memory')}
                   icon={mdiChevronRight}
                   variant="ghost"
                   color="secondary"
+                  size="giant"
                   onclick={handleNextAsset}
                 />
               </div>
@@ -626,13 +617,12 @@
   <!-- GALLERY VIEWER -->
   <section class="bg-immich-dark-gray p-4">
     <div
-      class="sticky mb-10 flex place-content-center place-items-center transition-all"
+      class="sticky mb-10 flex place-content-center place-items-center transition-all dark"
       class:opacity-0={galleryInView}
       class:opacity-100={!galleryInView}
     >
       <IconButton
         shape="round"
-        variant="ghost"
         color="secondary"
         aria-label={$t('show_gallery')}
         icon={mdiChevronDown}
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index 22ee340006..a28dfd45cf 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -62,8 +62,6 @@
       document.removeEventListener('scroll', onScroll);
     }
   });
-
-  let buttonClass = $derived(forceDark ? 'hover:text-immich-dark-gray' : undefined);
 </script>
 
 <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent">
@@ -90,7 +88,6 @@
           variant="ghost"
           icon={backIcon}
           size="large"
-          class={buttonClass}
         />
       {/if}
       {@render leading?.()}