diff --git a/src/lib/components/assets/details/asset-details-overlay.svelte b/src/lib/components/assets/details/asset-details-overlay.svelte
index 1f78cec8..232e1567 100644
--- a/src/lib/components/assets/details/asset-details-overlay.svelte
+++ b/src/lib/components/assets/details/asset-details-overlay.svelte
@@ -13,9 +13,9 @@
   <div class="row">
     <div class="preview">
       {#if $selectedAsset.kind === 'image'}
-        <Image asset={$selectedAsset} alt={$selectedAsset.name} checkerboard={true} />
+        <Image asset={$selectedAsset} blurBackground={true} alt={$selectedAsset.name} />
       {:else if $selectedAsset.kind === 'video'}
-        <Video asset={$selectedAsset} controls />
+        <Video asset={$selectedAsset} blurBackground={true} controls />
       {:else}
         <EmptyState>
           <span>{$_('no_preview_available')}</span>
diff --git a/src/lib/components/assets/list/asset-list-item.svelte b/src/lib/components/assets/list/asset-list-item.svelte
index d18219c8..276e061b 100644
--- a/src/lib/components/assets/list/asset-list-item.svelte
+++ b/src/lib/components/assets/list/asset-list-item.svelte
@@ -10,6 +10,10 @@
    * @type {Asset}
    */
   export let asset;
+  /**
+   * @type {ViewType}
+   */
+  export let viewType;
 
   $: ({ name, kind } = asset);
 </script>
@@ -34,10 +38,10 @@
   </TableCell>
   <TableCell class="image">
     {#if kind === 'image'}
-      <Image {asset} checkerboard={true} />
+      <Image {asset} variant={viewType === 'list' ? 'icon' : 'tile'} />
     {/if}
     {#if kind === 'video'}
-      <Video {asset} />
+      <Video {asset} variant={viewType === 'list' ? 'icon' : 'tile'} />
     {/if}
   </TableCell>
   <TableCell class="title">
diff --git a/src/lib/components/assets/list/asset-list.svelte b/src/lib/components/assets/list/asset-list.svelte
index a5438e40..2a2ddc9e 100644
--- a/src/lib/components/assets/list/asset-list.svelte
+++ b/src/lib/components/assets/list/asset-list.svelte
@@ -26,7 +26,7 @@
           {/if}
           <svelte:component this={$currentView.type === 'list' ? BasicListView : BasicGridView}>
             {#each assets as asset (asset.path)}
-              <AssetListItem {asset} />
+              <AssetListItem {asset} viewType={$currentView.type} />
             {/each}
           </svelte:component>
         </Group>
diff --git a/src/lib/components/assets/shared/assets-panel.svelte b/src/lib/components/assets/shared/assets-panel.svelte
index 3724cca8..bb611fcf 100644
--- a/src/lib/components/assets/shared/assets-panel.svelte
+++ b/src/lib/components/assets/shared/assets-panel.svelte
@@ -34,10 +34,10 @@
       {#each filteredAssets as asset (asset.path)}
         <Option value={asset.sha}>
           {#if asset.kind === 'image'}
-            <Image {asset} checkerboard={true} />
+            <Image {asset} variant="tile" />
           {/if}
           {#if asset.kind === 'video'}
-            <Video {asset} />
+            <Video {asset} variant="tile" />
           {/if}
           <span class="name">{asset.name}</span>
         </Option>
diff --git a/src/lib/components/assets/shared/external-assets-panel.svelte b/src/lib/components/assets/shared/external-assets-panel.svelte
index 0904d122..c995ef18 100644
--- a/src/lib/components/assets/shared/external-assets-panel.svelte
+++ b/src/lib/components/assets/shared/external-assets-panel.svelte
@@ -166,10 +166,10 @@
       {#each searchResults as { id, previewURL, description, kind: _kind } (id)}
         <Option value={id}>
           {#if _kind === 'image'}
-            <Image src={previewURL} crossorigin="anonymous" />
+            <Image src={previewURL} variant="tile" crossorigin="anonymous" />
           {/if}
           {#if _kind === 'video'}
-            <Video src={previewURL} crossorigin="anonymous" />
+            <Video src={previewURL} variant="tile" crossorigin="anonymous" />
           {/if}
           <span class="name">{description}</span>
         </Option>
diff --git a/src/lib/components/assets/shared/info-panel.svelte b/src/lib/components/assets/shared/info-panel.svelte
index 4cc5a58d..7bf3a68c 100644
--- a/src/lib/components/assets/shared/info-panel.svelte
+++ b/src/lib/components/assets/shared/info-panel.svelte
@@ -57,10 +57,10 @@
   {#if showPreview && canPreview}
     <div class="preview">
       {#if kind === 'image'}
-        <Image {asset} checkerboard={true} />
+        <Image {asset} variant="tile" />
       {/if}
       {#if kind === 'video'}
-        <Video {asset} controls />
+        <Video {asset} variant="tile" controls />
       {/if}
     </div>
   {/if}
@@ -168,6 +168,10 @@
       margin: 0 0 16px;
     }
 
+    h4 {
+      color: var(--sui-secondary-foreground-color);
+    }
+
     h4,
     p {
       margin: 0 0 4px;
diff --git a/src/lib/components/assets/shared/simple-image-grid.svelte b/src/lib/components/assets/shared/simple-image-grid.svelte
index cc275eef..bfce4212 100644
--- a/src/lib/components/assets/shared/simple-image-grid.svelte
+++ b/src/lib/components/assets/shared/simple-image-grid.svelte
@@ -29,8 +29,7 @@
           height: auto;
           transition: none;
 
-          :global(img),
-          :global(video) {
+          :global(.preview) {
             flex: none;
             border-radius: var(--sui-control-medium-border-radius);
             aspect-ratio: 1 / 1;
@@ -58,8 +57,7 @@
 
       :global(.option) {
         :global(button) {
-          :global(img),
-          :global(video) {
+          :global(.preview) {
             width: 100%;
           }
 
@@ -76,9 +74,8 @@
         :global(button) {
           gap: 16px;
 
-          :global(img),
-          :global(video) {
-            width: 48px;
+          :global(.preview) {
+            width: 64px;
           }
 
           :global(.name) {
diff --git a/src/lib/components/assets/shared/upload-assets-preview.svelte b/src/lib/components/assets/shared/upload-assets-preview.svelte
index 0ed6275c..99f4b239 100644
--- a/src/lib/components/assets/shared/upload-assets-preview.svelte
+++ b/src/lib/components/assets/shared/upload-assets-preview.svelte
@@ -16,7 +16,7 @@
     {@const [, extension = ''] = name.match(/\.([^.]+)$/) ?? []}
     <div class="file">
       {#if type.startsWith('image/')}
-        <Image src={URL.createObjectURL(file)} />
+        <Image src={URL.createObjectURL(file)} variant="icon" />
       {:else}
         <span class="image">
           <Icon name="draft" />
@@ -58,19 +58,15 @@
     align-items: center;
     gap: 16px;
 
-    :global(img),
     .image {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       width: 48px;
       height: 48px;
       aspect-ratio: 1 / 1;
       object-fit: cover;
       border-radius: var(--sui-control-medium-border-radius);
-    }
-
-    .image {
-      display: flex;
-      justify-content: center;
-      align-items: center;
       background-color: var(--sui-tertiary-background-color);
     }
 
diff --git a/src/lib/components/common/basic-grid-view.svelte b/src/lib/components/common/basic-grid-view.svelte
index 3172bc15..0af9057f 100644
--- a/src/lib/components/common/basic-grid-view.svelte
+++ b/src/lib/components/common/basic-grid-view.svelte
@@ -25,50 +25,43 @@
       display: block;
       position: relative;
       overflow: hidden;
-      border-width: 1px;
-      border-style: solid;
-      border-color: var(--sui-secondary-border-color);
-      border-radius: var(--sui-control-medium-border-radius);
       padding: 0;
       height: auto;
-      aspect-ratio: 1 / 1;
       text-align: left;
       cursor: pointer;
 
+      &:focus-visible {
+        outline-color: transparent;
+
+        :global(.preview) {
+          outline-offset: -2px;
+          outline-width: 2px;
+          outline-style: solid;
+          outline-color: var(--sui-primary-accent-color-light);
+        }
+      }
+
       :global(.table-cell) {
         display: block;
-        position: absolute;
       }
 
       :global(.checkbox) {
-        inset: 16px auto auto 16px;
+        position: absolute;
+        inset: 8px auto auto 8px;
         z-index: 2;
       }
 
       :global(.title) {
-        inset: auto 0 0 0;
-        z-index: 1;
-        padding: 16px 16px 16px 16px;
-        background-color: hsl(var(--sui-background-color-4-hsl) / 80%);
-
         :global(span) {
           display: -webkit-box;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
+          margin: 12px 8px 0;
           height: 40px;
           line-height: 1.5;
         }
       }
-
-      :global(.image) {
-        inset: 0;
-        z-index: 1;
-      }
-    }
-
-    :global([role='row'][aria-selected='true']) {
-      border-color: var(--sui-primary-accent-color);
     }
   }
 </style>
diff --git a/src/lib/components/common/basic-list-view.svelte b/src/lib/components/common/basic-list-view.svelte
index 7b9e4a04..e515aba7 100644
--- a/src/lib/components/common/basic-list-view.svelte
+++ b/src/lib/components/common/basic-list-view.svelte
@@ -67,18 +67,7 @@
       }
 
       :global([role='gridcell'].image) {
-        width: 32px;
-
-        :global(img) {
-          background-color: var(--sui-primary-accent-color-inverted);
-        }
-
-        :global(img),
-        :global(video) {
-          width: 32px;
-          height: 32px;
-          border-radius: var(--sui-control-medium-border-radius);
-        }
+        padding: 8px;
       }
     }
   }
diff --git a/src/lib/components/common/image.svelte b/src/lib/components/common/image.svelte
index a11f5c48..c7ee95df 100644
--- a/src/lib/components/common/image.svelte
+++ b/src/lib/components/common/image.svelte
@@ -1,70 +1,57 @@
 <script>
-  import { getAssetPreviewURL } from '$lib/services/assets/view';
+  import MediaPreview from '$lib/components/common/media-preview.svelte';
 
   /**
+   * Loading method.
    * @type {'lazy' | 'eager'}
    */
   export let loading = 'lazy';
   /**
+   * Asset.
    * @type {Asset | undefined}
    */
   export let asset = undefined;
   /**
+   * Source URL.
    * @type {string | undefined}
    */
   export let src = undefined;
-  export let alt = '';
-  export let checkerboard = false;
+  /**
+   * Style variant.
+   * @type {'tile' | 'icon' | undefined}
+   */
+  export let variant = undefined;
+  /**
+   * Whether to show a blurred background (like Slack’s media overlay).
+   * @type {boolean}
+   */
+  export let blurBackground = false;
+  /**
+   * Whether to use `object-fit: cover`.
+   * @type {boolean}
+   */
   export let cover = false;
-
   /**
-   * @type {HTMLImageElement}
+   * Whether to show a checkerboard background below a transparent image.
+   * @type {boolean}
    */
-  let element;
-  let updatingSrc = false;
-
+  export let checkerboard = true;
   /**
-   * Update the {@link src} property.
+   * Alt text for the image.
+   * @type {string}
    */
-  const updateSrc = async () => {
-    if (asset && element && !updatingSrc) {
-      updatingSrc = true;
-      src = await getAssetPreviewURL(asset, loading, element);
-      updatingSrc = false;
-    }
-  };
-
-  $: {
-    void element;
-    void asset;
-    updateSrc();
-  }
+  export let alt = '';
 </script>
 
-<img class:checkerboard class:cover {loading} {src} {alt} {...$$restProps} bind:this={element} />
-
-<style lang="scss">
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    background-color: var(--sui-tertiary-background-color);
-
-    &:not([src]) {
-      visibility: hidden;
-    }
-
-    &.cover {
-      object-fit: cover;
-    }
-
-    /* prettier-ignore */
-    &.checkerboard {
-      background-image:
-        linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
-        linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%);
-      background-size: 16px 16px;
-      background-position: 0 0, 8px 8px;
-    }
-  }
-</style>
+<MediaPreview
+  type="image"
+  {loading}
+  {asset}
+  {src}
+  {variant}
+  {blurBackground}
+  {cover}
+  {checkerboard}
+  {alt}
+  {...$$restProps}
+/>
diff --git a/src/lib/components/common/media-preview.svelte b/src/lib/components/common/media-preview.svelte
new file mode 100644
index 00000000..ec9211ca
--- /dev/null
+++ b/src/lib/components/common/media-preview.svelte
@@ -0,0 +1,187 @@
+<script>
+  import { getAssetPreviewURL } from '$lib/services/assets/view';
+
+  /**
+   * Media type.
+   * @type {'image' | 'video'}
+   */
+  export let type;
+  /**
+   * Loading method.
+   * @type {'lazy' | 'eager'}
+   */
+  export let loading = 'lazy';
+  /**
+   * Asset.
+   * @type {Asset | undefined}
+   */
+  export let asset = undefined;
+  /**
+   * Source URL.
+   * @type {string | undefined}
+   */
+  export let src = undefined;
+  /**
+   * Style variant.
+   * @type {'tile' | 'icon' | undefined}
+   */
+  export let variant = undefined;
+  /**
+   * Whether to show a blurred background (like Slack’s media overlay).
+   * @type {boolean}
+   */
+  export let blurBackground = false;
+  /**
+   * Whether to use `object-fit: cover`.
+   * @type {boolean}
+   */
+  export let cover = false;
+  /**
+   * Whether to show a checkerboard background below a transparent image.
+   * @type {boolean}
+   */
+  export let checkerboard = true;
+  /**
+   * Alt text for the image.
+   * @type {string}
+   */
+  export let alt = '';
+
+  /**
+   * @type {HTMLImageElement | HTMLVideoElement}
+   */
+  let element;
+  let updatingSrc = false;
+
+  /**
+   * Update the {@link src} property.
+   */
+  const updateSrc = async () => {
+    if (asset && element && !updatingSrc) {
+      updatingSrc = true;
+      src = await getAssetPreviewURL(asset, loading, element);
+      updatingSrc = false;
+    }
+  };
+
+  $: {
+    void element;
+    void asset;
+    updateSrc();
+  }
+</script>
+
+<div class="preview {variant ?? ''}">
+  {#if type === 'video'}
+    <!-- svelte-ignore a11y-media-has-caption -->
+    <video class:cover playsinline {src} {...$$restProps} bind:this={element} />
+  {:else}
+    <img
+      class:checkerboard
+      class:cover
+      {loading}
+      {src}
+      {alt}
+      {...$$restProps}
+      bind:this={element}
+    />
+  {/if}
+  {#if blurBackground}
+    <div class="blur">
+      <div class="overlay" />
+      {#if type === 'video'}
+        <!-- svelte-ignore a11y-media-has-caption -->
+        <video playsinline {src} />
+      {:else}
+        <img {loading} {src} alt="" />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .preview {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    &.tile {
+      border-width: 1px;
+      border-style: solid;
+      border-color: transparent;
+      padding: var(--tile-padding, 8px);
+      background-color: var(--sui-secondary-background-color);
+    }
+
+    &.icon {
+      width: 48px;
+      height: 48px;
+    }
+
+    &.tile,
+    &.icon {
+      overflow: hidden;
+      border-radius: var(--sui-control-medium-border-radius);
+      aspect-ratio: 1 / 1;
+    }
+
+    .blur {
+      display: contents;
+
+      & > * {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      :global(.overlay) {
+        z-index: -1;
+        backdrop-filter: blur(32px) brightness(0.8);
+      }
+
+      img,
+      video {
+        width: 100%;
+        height: 100%;
+        z-index: -2;
+        object-fit: contain;
+        transform: scale(1.2);
+      }
+    }
+
+    & > video,
+    & > img {
+      width: fit-content;
+      max-width: 100%;
+      height: fit-content;
+      max-height: 100%;
+    }
+  }
+
+  img {
+    /* prettier-ignore */
+    &.checkerboard {
+      background-image:
+        linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
+        linear-gradient(45deg, #eee 25%, #fff 25%, #fff 75%, #eee 75%);
+      background-size: 16px 16px;
+      background-position: 0 0, 8px 8px;
+    }
+  }
+
+  video,
+  img {
+    object-fit: contain;
+
+    &:not([src]) {
+      visibility: hidden;
+    }
+
+    &:global(.cover) {
+      object-fit: cover;
+    }
+  }
+</style>
diff --git a/src/lib/components/common/video.svelte b/src/lib/components/common/video.svelte
index f1b67c80..2c9b856b 100644
--- a/src/lib/components/common/video.svelte
+++ b/src/lib/components/common/video.svelte
@@ -1,59 +1,45 @@
 <script>
-  import { getAssetPreviewURL } from '$lib/services/assets/view';
+  import MediaPreview from '$lib/components/common/media-preview.svelte';
 
   /**
+   * Loading method.
    * @type {'lazy' | 'eager'}
    */
   export let loading = 'lazy';
   /**
+   * Asset.
    * @type {Asset | undefined}
    */
   export let asset = undefined;
   /**
+   * Source URL.
    * @type {string | undefined}
    */
   export let src = undefined;
-  export let cover = false;
-
   /**
-   * @type {HTMLVideoElement}
+   * Style variant.
+   * @type {'tile' | 'icon' | undefined}
    */
-  let element;
-  let updatingSrc = false;
-
+  export let variant = undefined;
   /**
-   * Update the {@link src} property.
+   * Whether to show a blurred background (like Slack’s media overlay).
+   * @type {boolean}
    */
-  const updateSrc = async () => {
-    if (asset && element && !updatingSrc) {
-      updatingSrc = true;
-      src = await getAssetPreviewURL(asset, loading, element);
-      updatingSrc = false;
-    }
-  };
-
-  $: {
-    void element;
-    void asset;
-    updateSrc();
-  }
+  export let blurBackground = false;
+  /**
+   * Whether to use `object-fit: cover`.
+   * @type {boolean}
+   */
+  export let cover = false;
 </script>
 
-<!-- svelte-ignore a11y-media-has-caption -->
-<video class:cover playsinline {src} {...$$restProps} bind:this={element} />
-
-<style lang="scss">
-  video {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-
-    &:not([src]) {
-      visibility: hidden;
-    }
-
-    &.cover {
-      object-fit: cover;
-    }
-  }
-</style>
+<MediaPreview
+  type="video"
+  {loading}
+  {asset}
+  {src}
+  {variant}
+  {blurBackground}
+  {cover}
+  {...$$restProps}
+/>
diff --git a/src/lib/components/contents/details/widgets/file/file-editor.svelte b/src/lib/components/contents/details/widgets/file/file-editor.svelte
index 8c38a042..69662261 100644
--- a/src/lib/components/contents/details/widgets/file/file-editor.svelte
+++ b/src/lib/components/contents/details/widgets/file/file-editor.svelte
@@ -122,7 +122,7 @@
 <div class="image-widget">
   {#if isImageWidget && currentValue}
     {#await getMediaFieldURL(currentValue, $entryDraft.originalEntry) then src}
-      <Image {src} checkerboard={true} />
+      <Image {src} variant="tile" />
     {/await}
   {/if}
   <div>
@@ -220,7 +220,7 @@
     align-items: center;
     gap: 16px;
 
-    :global(.checkerboard) {
+    :global(.preview) {
       flex: none;
       width: 160px !important;
       height: 160px !important;
diff --git a/src/lib/components/contents/list/entry-list-item.svelte b/src/lib/components/contents/list/entry-list-item.svelte
index d499bcc2..ac748b45 100644
--- a/src/lib/components/contents/list/entry-list-item.svelte
+++ b/src/lib/components/contents/list/entry-list-item.svelte
@@ -22,6 +22,10 @@
    * @type {LocaleCode}
    */
   export let locale;
+  /**
+   * @type {ViewType}
+   */
+  export let viewType;
 
   $: firstImageField = $selectedCollection.fields?.find(({ widget }) => widget === 'image');
 </script>
@@ -56,7 +60,7 @@
   {#if firstImageField}
     <TableCell class="image">
       {#await getMediaFieldURL(content[firstImageField?.name], entry) then src}
-        <Image {src} cover={true} />
+        <Image {src} variant={viewType === 'list' ? 'icon' : 'tile'} />
       {/await}
     </TableCell>
   {/if}
diff --git a/src/lib/components/contents/list/entry-list.svelte b/src/lib/components/contents/list/entry-list.svelte
index cced8b3d..0e42a906 100644
--- a/src/lib/components/contents/list/entry-list.svelte
+++ b/src/lib/components/contents/list/entry-list.svelte
@@ -28,7 +28,7 @@
               {@const locale = defaultLocale in locales ? defaultLocale : Object.keys(locales)[0]}
               {@const { content } = locales[locale]}
               {#if content}
-                <EntryListItem {entry} {content} {locale} />
+                <EntryListItem {entry} {content} {locale} viewType={$currentView.type} />
               {/if}
             {/each}
           </svelte:component>
diff --git a/src/lib/components/search/search-results.svelte b/src/lib/components/search/search-results.svelte
index 3fef8f34..34a36be6 100644
--- a/src/lib/components/search/search-results.svelte
+++ b/src/lib/components/search/search-results.svelte
@@ -38,7 +38,7 @@
                       ({ widget }) => widget === 'image',
                     )}
                     {#await getMediaFieldURL(content[firstImageField?.name], entry) then src}
-                      <Image {src} cover={true} />
+                      <Image {src} variant="icon" />
                     {/await}
                   {/if}
                 </TableCell>
@@ -78,10 +78,10 @@
             >
               <TableCell class="image">
                 {#if kind === 'image'}
-                  <Image {asset} checkerboard={true} cover={true} />
+                  <Image {asset} variant="icon" />
                 {/if}
                 {#if kind === 'video'}
-                  <Video {asset} cover={true} />
+                  <Video {asset} variant="icon" />
                 {/if}
               </TableCell>
               <TableCell class="collection">