diff --git a/e2e/src/specs/web/shared-link.e2e-spec.ts b/e2e/src/specs/web/shared-link.e2e-spec.ts
index 017bc0fcb296c..f6d1ec98d45a2 100644
--- a/e2e/src/specs/web/shared-link.e2e-spec.ts
+++ b/e2e/src/specs/web/shared-link.e2e-spec.ts
@@ -45,8 +45,7 @@ test.describe('Shared Links', () => {
     await page.goto(`/share/${sharedLink.key}`);
     await page.getByRole('heading', { name: 'Test Album' }).waitFor();
     await page.locator(`[data-asset-id="${asset.id}"]`).hover();
-    await page.waitForSelector('[data-group] svg');
-    await page.getByRole('checkbox').click();
+    await page.waitForSelector(`[data-asset-id="${asset.id}"] [role="checkbox"]`);
     await Promise.all([page.waitForEvent('download'), page.getByRole('button', { name: 'Download' }).click()]);
   });
 
diff --git a/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts b/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
index 9408f6079adf3..6a7ce8267210d 100644
--- a/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
+++ b/e2e/src/ui/specs/timeline/timeline.e2e-spec.ts
@@ -438,7 +438,7 @@ test.describe('Timeline', () => {
       const asset = getAsset(timelineRestData, album.assetIds[0])!;
       await pageUtils.goToAsset(page, asset.fileCreatedAt);
       await thumbnailUtils.expectInViewport(page, asset.id);
-      await thumbnailUtils.expectSelectedReadonly(page, asset.id);
+      await thumbnailUtils.expectSelectedDisabled(page, asset.id);
     });
     test('Add photos to album', async ({ page }) => {
       const album = timelineRestData.album;
@@ -447,7 +447,7 @@ test.describe('Timeline', () => {
       const asset = getAsset(timelineRestData, album.assetIds[0])!;
       await pageUtils.goToAsset(page, asset.fileCreatedAt);
       await thumbnailUtils.expectInViewport(page, asset.id);
-      await thumbnailUtils.expectSelectedReadonly(page, asset.id);
+      await thumbnailUtils.expectSelectedDisabled(page, asset.id);
       await pageUtils.selectDay(page, 'Tue, Feb 27, 2024');
       const put = pageRoutePromise(page, `**/api/albums/${album.id}/assets`, async (route, request) => {
         const requestJson = request.postDataJSON();
diff --git a/e2e/src/ui/specs/timeline/utils.ts b/e2e/src/ui/specs/timeline/utils.ts
index e3799a7c3b011..d3e4e5f7ec516 100644
--- a/e2e/src/ui/specs/timeline/utils.ts
+++ b/e2e/src/ui/specs/timeline/utils.ts
@@ -102,9 +102,9 @@ export const thumbnailUtils = {
   async expectThumbnailIsNotArchive(page: Page, assetId: string) {
     await expect(thumbnailUtils.withAssetId(page, assetId).locator('[data-icon-archive]')).toHaveCount(0);
   },
-  async expectSelectedReadonly(page: Page, assetId: string) {
+  async expectSelectedDisabled(page: Page, assetId: string) {
     await expect(
-      page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"][data-selected]`),
+      page.locator(`[data-thumbnail-focus-container][data-asset="${assetId}"][data-selected][data-disabled]`),
     ).toBeVisible();
   },
   async expectTimelineHasOnScreenAssets(page: Page) {
diff --git a/web/src/lib/components/Image.spec.ts b/web/src/lib/components/Image.spec.ts
new file mode 100644
index 0000000000000..8435e1bb25636
--- /dev/null
+++ b/web/src/lib/components/Image.spec.ts
@@ -0,0 +1,87 @@
+import Image from '$lib/components/Image.svelte';
+import { cancelImageUrl } from '$lib/utils/sw-messaging';
+import { fireEvent, render } from '@testing-library/svelte';
+
+vi.mock('$lib/utils/sw-messaging', () => ({
+  cancelImageUrl: vi.fn(),
+}));
+
+describe('Image component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders an img element when src is provided', () => {
+    const { baseElement } = render(Image, { src: '/test.jpg', alt: 'test' });
+    const img = baseElement.querySelector('img');
+    expect(img).not.toBeNull();
+    expect(img!.getAttribute('src')).toBe('/test.jpg');
+  });
+
+  it('does not render an img element when src is undefined', () => {
+    const { baseElement } = render(Image, { src: undefined });
+    const img = baseElement.querySelector('img');
+    expect(img).toBeNull();
+  });
+
+  it('calls onStart when src is set', () => {
+    const onStart = vi.fn();
+    render(Image, { src: '/test.jpg', onStart });
+    expect(onStart).toHaveBeenCalledOnce();
+  });
+
+  it('calls onLoad when image loads', async () => {
+    const onLoad = vi.fn();
+    const { baseElement } = render(Image, { src: '/test.jpg', onLoad });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.load(img);
+    expect(onLoad).toHaveBeenCalledOnce();
+  });
+
+  it('calls onError when image fails to load', async () => {
+    const onError = vi.fn();
+    const { baseElement } = render(Image, { src: '/test.jpg', onError });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.error(img);
+    expect(onError).toHaveBeenCalledOnce();
+    expect(onError).toHaveBeenCalledWith(expect.any(Error));
+    expect(onError.mock.calls[0][0].message).toBe('Failed to load image: /test.jpg');
+  });
+
+  it('calls cancelImageUrl on unmount', () => {
+    const { unmount } = render(Image, { src: '/test.jpg' });
+    expect(cancelImageUrl).not.toHaveBeenCalled();
+    unmount();
+    expect(cancelImageUrl).toHaveBeenCalledWith('/test.jpg');
+  });
+
+  it('does not call onLoad after unmount', async () => {
+    const onLoad = vi.fn();
+    const { baseElement, unmount } = render(Image, { src: '/test.jpg', onLoad });
+    const img = baseElement.querySelector('img')!;
+    unmount();
+    await fireEvent.load(img);
+    expect(onLoad).not.toHaveBeenCalled();
+  });
+
+  it('does not call onError after unmount', async () => {
+    const onError = vi.fn();
+    const { baseElement, unmount } = render(Image, { src: '/test.jpg', onError });
+    const img = baseElement.querySelector('img')!;
+    unmount();
+    await fireEvent.error(img);
+    expect(onError).not.toHaveBeenCalled();
+  });
+
+  it('passes through additional HTML attributes', () => {
+    const { baseElement } = render(Image, {
+      src: '/test.jpg',
+      alt: 'test alt',
+      class: 'my-class',
+      draggable: false,
+    });
+    const img = baseElement.querySelector('img')!;
+    expect(img.getAttribute('alt')).toBe('test alt');
+    expect(img.getAttribute('draggable')).toBe('false');
+  });
+});
diff --git a/web/src/lib/components/Image.svelte b/web/src/lib/components/Image.svelte
new file mode 100644
index 0000000000000..801a466ca8f6f
--- /dev/null
+++ b/web/src/lib/components/Image.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { imageManager } from '$lib/managers/ImageManager.svelte';
+  import { onDestroy, untrack } from 'svelte';
+  import type { HTMLImgAttributes } from 'svelte/elements';
+
+  type Props = Omit<HTMLImgAttributes, 'onload' | 'onerror'> & {
+    src: string | undefined;
+    onStart?: () => void;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+    ref?: HTMLImageElement;
+  };
+
+  let { src, onStart, onLoad, onError, ref = $bindable(), ...rest }: Props = $props();
+
+  let capturedSource: string | undefined = $state();
+  let destroyed = false;
+
+  $effect(() => {
+    if (src !== undefined && capturedSource === undefined) {
+      capturedSource = src;
+      untrack(() => {
+        onStart?.();
+      });
+    }
+  });
+
+  onDestroy(() => {
+    destroyed = true;
+    if (capturedSource !== undefined) {
+      imageManager.cancelPreloadUrl(capturedSource);
+    }
+  });
+
+  const handleLoad = () => {
+    if (destroyed || !src) {
+      return;
+    }
+    onLoad?.();
+  };
+
+  const handleError = () => {
+    if (destroyed || !src) {
+      return;
+    }
+    onError?.(new Error(`Failed to load image: ${src}`));
+  };
+</script>
+
+{#if capturedSource}
+  {#key capturedSource}
+    <img bind:this={ref} src={capturedSource} {...rest} onload={handleLoad} onerror={handleError} />
+  {/key}
+{/if}
diff --git a/web/src/lib/components/assets/broken-asset.svelte b/web/src/lib/components/assets/broken-asset.svelte
index a15a787e64cee..f66e80ef6d7a8 100644
--- a/web/src/lib/components/assets/broken-asset.svelte
+++ b/web/src/lib/components/assets/broken-asset.svelte
@@ -2,9 +2,10 @@
   import { Icon } from '@immich/ui';
   import { mdiImageBrokenVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import type { ClassValue } from 'svelte/elements';
 
   interface Props {
-    class?: string;
+    class?: ClassValue;
     hideMessage?: boolean;
     width?: string | undefined;
     height?: string | undefined;
@@ -14,7 +15,10 @@
 </script>
 
 <div
-  class="flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4 {className}"
+  class={[
+    'flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
+    className,
+  ]}
   style:width
   style:height
 >
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.spec.ts b/web/src/lib/components/assets/thumbnail/image-thumbnail.spec.ts
new file mode 100644
index 0000000000000..04835e92099ef
--- /dev/null
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.spec.ts
@@ -0,0 +1,89 @@
+import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+import { fireEvent, render } from '@testing-library/svelte';
+
+vi.mock('$lib/utils/sw-messaging', () => ({
+  cancelImageUrl: vi.fn(),
+}));
+
+describe('ImageThumbnail component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders an img element with correct attributes', () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+    });
+    const img = baseElement.querySelector('img');
+    expect(img).not.toBeNull();
+    expect(img!.getAttribute('src')).toBe('/test-thumbnail.jpg');
+    expect(img!.getAttribute('alt')).toBe('');
+  });
+
+  it('shows BrokenAsset on error', async () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+    });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.error(img);
+
+    expect(baseElement.querySelector('img')).toBeNull();
+    expect(baseElement.querySelector('span')?.textContent).toEqual('error_loading_image');
+  });
+
+  it('calls onComplete with false on successful load', async () => {
+    const onComplete = vi.fn();
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+      onComplete,
+    });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.load(img);
+    expect(onComplete).toHaveBeenCalledWith(false);
+  });
+
+  it('calls onComplete with true on error', async () => {
+    const onComplete = vi.fn();
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+      onComplete,
+    });
+    const img = baseElement.querySelector('img')!;
+    await fireEvent.error(img);
+    expect(onComplete).toHaveBeenCalledWith(true);
+  });
+
+  it('applies hidden styles when hidden is true', () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+      hidden: true,
+    });
+    const img = baseElement.querySelector('img')!;
+    const style = img.getAttribute('style') ?? '';
+    expect(style).toContain('grayscale');
+    expect(style).toContain('opacity');
+  });
+
+  it('sets alt text after loading', async () => {
+    const { baseElement } = render(ImageThumbnail, {
+      url: '/test-thumbnail.jpg',
+      altText: 'Test image',
+      widthStyle: '200px',
+    });
+    const img = baseElement.querySelector('img')!;
+    expect(img.getAttribute('alt')).toBe('');
+
+    await fireEvent.load(img);
+    expect(img.getAttribute('alt')).toBe('Test image');
+  });
+});
diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
index a1dd22f44f118..a54ad911fd16f 100644
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
-  import { imageManager } from '$lib/managers/ImageManager.svelte';
+  import Image from '$lib/components/Image.svelte';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';
-  import type { ActionReturn } from 'svelte/action';
   import type { ClassValue } from 'svelte/elements';
 
   interface Props {
@@ -49,51 +48,37 @@
     loaded = true;
     onComplete?.(false);
   };
+
   const setErrored = () => {
     errored = true;
     onComplete?.(true);
   };
 
-  function mount(elem: HTMLImageElement): ActionReturn {
-    if (elem.complete) {
-      loaded = true;
-      onComplete?.(false);
-    }
-    return {
-      destroy: () => imageManager.cancelPreloadUrl(url),
-    };
-  }
+  let sharedClasses = $derived([
+    curve && 'rounded-xl',
+    circle && 'rounded-full',
+    shadow && 'shadow-lg',
+    (circle || !heightStyle) && 'aspect-square',
+    border && 'border-3 border-immich-dark-primary/80 hover:border-immich-primary',
+  ]);
 
-  let optionalClasses = $derived(
-    [
-      curve && 'rounded-xl',
-      circle && 'rounded-full',
-      shadow && 'shadow-lg',
-      (circle || !heightStyle) && 'aspect-square',
-      border && 'border-3 border-immich-dark-primary/80 hover:border-immich-primary',
-      brokenAssetClass,
-    ]
-      .filter(Boolean)
-      .join(' '),
+  let style = $derived(
+    `width: ${widthStyle}; height: ${heightStyle ?? ''}; filter: ${hidden ? 'grayscale(50%)' : 'none'}; opacity: ${hidden ? '0.5' : '1'};`,
   );
 </script>
 
 {#if errored}
-  <BrokenAsset class={optionalClasses} width={widthStyle} height={heightStyle} />
+  <BrokenAsset class={[sharedClasses, brokenAssetClass]} width={widthStyle} height={heightStyle} />
 {:else}
-  <img
-    use:mount
-    onload={setLoaded}
-    onerror={setErrored}
-    style:width={widthStyle}
-    style:height={heightStyle}
-    style:filter={hidden ? 'grayscale(50%)' : 'none'}
-    style:opacity={hidden ? '0.5' : '1'}
+  <Image
     src={url}
+    onLoad={setLoaded}
+    onError={setErrored}
+    class={['object-cover bg-gray-300 dark:bg-gray-700', sharedClasses, imageClass]}
+    {style}
     alt={loaded || errored ? altText : ''}
-    {title}
-    class={['object-cover', optionalClasses, imageClass]}
-    draggable="false"
+    draggable={false}
+    title={title ?? undefined}
     loading={preload ? 'eager' : 'lazy'}
   />
 {/if}
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 5604e6f59df5f..2b5e9cdf93942 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -196,13 +196,19 @@
       document.removeEventListener('pointermove', moveHandler, true);
     };
   });
+  const backgroundColorClass = $derived.by(() => {
+    if (loaded && !selected) {
+      return 'bg-transparent';
+    }
+    if (disabled) {
+      return 'bg-gray-300';
+    }
+    return 'dark:bg-neutral-700 bg-neutral-200';
+  });
 </script>
 
 <div
-  class={[
-    'focus-visible:outline-none flex overflow-hidden',
-    disabled ? 'bg-gray-300' : 'dark:bg-neutral-700 bg-neutral-200',
-  ]}
+  class={['group focus-visible:outline-none flex overflow-hidden', backgroundColorClass, { 'rounded-xl': selected }]}
   style:width="{width}px"
   style:height="{height}px"
   onmouseenter={onMouseEnter}
@@ -224,18 +230,11 @@
   data-asset={asset.id}
   data-thumbnail-focus-container
   data-selected={selected ? true : undefined}
+  data-readonly={readonly ? true : undefined}
+  data-disabled={disabled ? true : undefined}
   tabindex={0}
   role="link"
 >
-  <!-- Outline on focus -->
-  <div
-    class={[
-      'pointer-events-none absolute z-1 size-full outline-hidden outline-4 -outline-offset-4 outline-immich-primary',
-      { 'rounded-xl': selected },
-    ]}
-    data-outline
-  ></div>
-
   <div
     class={['group absolute top-0 bottom-0', { 'cursor-not-allowed': disabled, 'cursor-pointer': !disabled }]}
     style:width="inherit"
@@ -248,32 +247,106 @@
         { 'rounded-xl': selected },
       ]}
     >
+      <ImageThumbnail
+        class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
+        url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
+        altText={$getAltText(asset)}
+        widthStyle="{width}px"
+        heightStyle="{height}px"
+        curve={selected}
+        onComplete={(errored) => ((loaded = true), (thumbError = errored))}
+      />
+      {#if asset.isVideo}
+        <div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
+          <VideoThumbnail
+            class="group-focus-visible:rounded-lg"
+            url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
+            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
+            curve={selected}
+            durationInSeconds={asset.duration ? timeToSeconds(asset.duration) : 0}
+            playbackOnIconHover={!$playVideoThumbnailOnHover}
+          />
+        </div>
+      {:else if asset.isImage && asset.livePhotoVideoId}
+        <div class="absolute h-full w-full pointer-events-none group-focus-visible:rounded-lg">
+          <VideoThumbnail
+            class="group-focus-visible:rounded-lg"
+            url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
+            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
+            pauseIcon={mdiMotionPauseOutline}
+            playIcon={mdiMotionPlayOutline}
+            showTime={false}
+            curve={selected}
+            playbackOnIconHover={!$playVideoThumbnailOnHover}
+          />
+        </div>
+      {:else if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000') && mouseOver}
+        <!-- GIF -->
+        <div class="absolute top-0 h-full w-full pointer-events-none">
+          <div class="absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%]"></div>
+          <ImageThumbnail
+            class={imageClass}
+            {brokenAssetClass}
+            url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Original, cacheKey: asset.thumbhash })}
+            altText={$getAltText(asset)}
+            widthStyle="{width}px"
+            heightStyle="{height}px"
+            curve={selected}
+          />
+          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+            <span class="pe-2 pt-2">
+              <Icon data-icon-playable-pause icon={mdiMotionPauseOutline} size="24" />
+            </span>
+          </div>
+        </div>
+      {/if}
+
+      {#if (!loaded || thumbError) && asset.thumbhash}
+        <canvas
+          use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
+          data-testid="thumbhash"
+          class="absolute top-0 object-cover group-focus-visible:rounded-lg"
+          style:width="{width}px"
+          style:height="{height}px"
+          class:rounded-xl={selected}
+          draggable="false"
+          out:fade={{ duration: THUMBHASH_FADE_DURATION }}
+        ></canvas>
+      {/if}
+
       <!-- icon overlay -->
-      <div>
+      <div class="z-2 absolute inset-0">
         <!-- Gradient overlay on hover -->
         {#if !usingMobileDevice && !disabled}
           <div
             class={[
-              'absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100',
-              { 'rounded-xl': selected },
+              'absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100 ',
+              { 'rounded-xl group-focus-visible:rounded-lg': selected },
             ]}
           ></div>
         {/if}
 
         <!-- Dimmed support -->
         {#if dimmed && !mouseOver}
-          <div id="a" class={['absolute h-full w-full bg-gray-700/40', { 'rounded-xl': selected }]}></div>
+          <div
+            id="a"
+            class={[
+              'z-2  absolute h-full w-full bg-gray-700/40 group-focus-visible:rounded-lg',
+              { 'rounded-xl': selected },
+            ]}
+          ></div>
         {/if}
 
         <!-- Favorite asset star -->
         {#if !authManager.isSharedLink && asset.isFavorite}
-          <div class="absolute bottom-2 start-2">
+          <div class="z-2 absolute bottom-2 start-2">
             <Icon data-icon-favorite icon={mdiHeart} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if !!assetOwner}
-          <div class="absolute bottom-1 end-2 max-w-[50%]">
+          <div class="z-2 absolute bottom-1 end-2 max-w-[50%]">
             <p class="text-xs font-medium text-white drop-shadow-lg max-w-[100%] truncate">
               {assetOwner.name}
             </p>
@@ -281,13 +354,13 @@
         {/if}
 
         {#if !authManager.isSharedLink && showArchiveIcon && asset.visibility === AssetVisibility.Archive}
-          <div class={['absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
+          <div class={['z-2  absolute start-2', asset.isFavorite ? 'bottom-10' : 'bottom-2']}>
             <Icon data-icon-archive icon={mdiArchiveArrowDownOutline} size="24" class="text-white" />
           </div>
         {/if}
 
         {#if asset.isImage && asset.projectionType === ProjectionType.EQUIRECTANGULAR}
-          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+          <div class="z-2 absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon data-icon-equirectangular icon={mdiRotate360} size="24" />
             </span>
@@ -295,7 +368,7 @@
         {/if}
 
         {#if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000')}
-          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
+          <div class="z-2 absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
             <span class="pe-2 pt-2">
               <Icon data-icon-playable icon={mdiFileGifBox} size="24" />
             </span>
@@ -306,7 +379,7 @@
         {#if asset.stack && showStackedIcon}
           <div
             class={[
-              'absolute flex place-items-center gap-1 text-xs font-medium text-white',
+              'z-2 absolute flex place-items-center gap-1 text-xs font-medium text-white',
               asset.isImage && !asset.livePhotoVideoId ? 'top-0 end-0' : 'top-7 end-1',
             ]}
           >
@@ -321,7 +394,7 @@
       <!-- lazy show the url on mouse over-->
       {#if !usingMobileDevice && mouseOver && !disableLinkMouseOver}
         <a
-          class="absolute w-full top-0 bottom-0"
+          class="z-2 absolute w-full top-0 bottom-0"
           style:cursor="unset"
           href={currentUrlReplaceAssetId(asset.id)}
           onclick={(evt) => evt.preventDefault()}
@@ -330,77 +403,11 @@
         >
         </a>
       {/if}
-
-      <ImageThumbnail
-        class={imageClass}
-        {brokenAssetClass}
-        url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
-        altText={$getAltText(asset)}
-        widthStyle="{width}px"
-        heightStyle="{height}px"
-        curve={selected}
-        onComplete={(errored) => ((loaded = true), (thumbError = errored))}
-      />
-      {#if asset.isVideo}
-        <div class="absolute top-0 h-full w-full pointer-events-none">
-          <VideoThumbnail
-            url={getAssetPlaybackUrl({ id: asset.id, cacheKey: asset.thumbhash })}
-            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
-            curve={selected}
-            durationInSeconds={asset.duration ? timeToSeconds(asset.duration) : 0}
-            playbackOnIconHover={!$playVideoThumbnailOnHover}
-          />
-        </div>
-      {:else if asset.isImage && asset.livePhotoVideoId}
-        <div class="absolute top-0 h-full w-full pointer-events-none">
-          <VideoThumbnail
-            url={getAssetPlaybackUrl({ id: asset.livePhotoVideoId, cacheKey: asset.thumbhash })}
-            enablePlayback={mouseOver && $playVideoThumbnailOnHover}
-            pauseIcon={mdiMotionPauseOutline}
-            playIcon={mdiMotionPlayOutline}
-            showTime={false}
-            curve={selected}
-            playbackOnIconHover={!$playVideoThumbnailOnHover}
-          />
-        </div>
-      {:else if asset.isImage && asset.duration && !asset.duration.includes('0:00:00.000') && mouseOver}
-        <!-- GIF -->
-        <div class="absolute top-0 h-full w-full pointer-events-none">
-          <div class="absolute h-full w-full bg-linear-to-b from-black/25 via-[transparent_25%]"></div>
-          <ImageThumbnail
-            class={imageClass}
-            {brokenAssetClass}
-            url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Original, cacheKey: asset.thumbhash })}
-            altText={$getAltText(asset)}
-            widthStyle="{width}px"
-            heightStyle="{height}px"
-            curve={selected}
-          />
-          <div class="absolute end-0 top-0 flex place-items-center gap-1 text-xs font-medium text-white">
-            <span class="pe-2 pt-2">
-              <Icon data-icon-playable-pause icon={mdiMotionPauseOutline} size="24" />
-            </span>
-          </div>
-        </div>
-      {/if}
-
-      {#if (!loaded || thumbError) && asset.thumbhash}
-        <canvas
-          use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
-          data-testid="thumbhash"
-          class="absolute top-0 object-cover"
-          style:width="{width}px"
-          style:height="{height}px"
-          class:rounded-xl={selected}
-          draggable="false"
-          out:fade={{ duration: THUMBHASH_FADE_DURATION }}
-        ></canvas>
-      {/if}
     </div>
 
     {#if selectionCandidate}
       <div
-        class="absolute top-0 h-full w-full bg-immich-primary opacity-40"
+        class={['z-2 absolute top-0 h-full w-full bg-immich-primary opacity-40', { 'rounded-xl': selected }]}
         in:fade={{ duration: 100 }}
         out:fade={{ duration: 100 }}
       ></div>
@@ -411,7 +418,7 @@
       <button
         type="button"
         onclick={onIconClickedHandler}
-        class={['absolute p-2 focus:outline-none', { 'cursor-not-allowed': disabled }]}
+        class={['absolute z-2 p-2 focus:outline-none', { 'cursor-not-allowed': disabled }]}
         role="checkbox"
         tabindex={-1}
         aria-checked={selected}
@@ -428,11 +435,14 @@
         {/if}
       </button>
     {/if}
+
+    <!-- Outline on focus -->
+    <div
+      class={[
+        'pointer-events-none absolute z-1 size-full outline-immich-primary dark:outline-immich-dark-primary group-focus-visible:outline-4 group-focus-visible:-outline-offset-4',
+        { 'rounded-xl': selected },
+      ]}
+      data-outline
+    ></div>
   </div>
 </div>
-
-<style>
-  [data-asset]:focus > [data-outline] {
-    outline-style: solid;
-  }
-</style>
diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index 222fa7a8ec099..28b7ef62ff6c6 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -2,6 +2,7 @@
   import { Icon, LoadingSpinner } from '@immich/ui';
   import { mdiAlertCircleOutline, mdiPauseCircleOutline, mdiPlayCircleOutline } from '@mdi/js';
   import { Duration } from 'luxon';
+  import type { ClassValue } from 'svelte/elements';
 
   interface Props {
     url: string;
@@ -12,6 +13,7 @@
     curve?: boolean;
     playIcon?: string;
     pauseIcon?: string;
+    class?: ClassValue;
   }
 
   let {
@@ -23,6 +25,7 @@
     curve = false,
     playIcon = mdiPlayCircleOutline,
     pauseIcon = mdiPauseCircleOutline,
+    class: className = undefined,
   }: Props = $props();
 
   let remainingSeconds = $state(durationInSeconds);
@@ -57,7 +60,7 @@
 {#if enablePlayback}
   <video
     bind:this={player}
-    class="h-full w-full object-cover"
+    class={['h-full w-full object-cover', className]}
     class:rounded-xl={curve}
     muted
     autoplay