diff --git a/src/components/email-viewer/email-viewer.scss b/src/components/email-viewer/email-viewer.scss
index fe01325301..a6a2e687a7 100644
--- a/src/components/email-viewer/email-viewer.scss
+++ b/src/components/email-viewer/email-viewer.scss
@@ -20,7 +20,6 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    padding-bottom: 0.5rem;
     box-shadow: var(--shadow-depth-8);
 }
 
@@ -93,7 +92,7 @@
 .attachments {
     flex-shrink: 0;
     padding: 0.5rem;
-    border-bottom: 1px dashed rga(var(--contrast-700));
+    border-bottom: 1px dashed rgba(var(--contrast-700));
 
     span {
         padding-left: 0.25rem;
@@ -106,47 +105,17 @@
         }
     }
 
-    ul {
-        all: unset;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    .attachment-list {
+        display: flex;
+        flex-wrap: wrap;
         gap: 0.5rem;
 
         padding: 0.5rem 0;
     }
 
-    li {
-        all: unset;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-
-        font-size: 0.6875rem;
-        line-height: normal;
-
-        padding: 0.5rem 0.5rem 1rem 0.5rem;
-        border-radius: 0.5rem;
-        border: 1px solid rgba(var(--contrast-600));
-        background-color: rgba(var(--contrast-400));
-    }
-
-    .attachment-filename {
-        font-weight: 500;
-    }
-
-    .attachment-mime-type {
-        opacity: 0.7;
-    }
-
-    limel-badge {
-        --badge-max-width: auto;
-        --badge-background-color: rgb(var(--contrast-1000), 0.7);
-        --badge-text-color: rgb(var(--color-white));
-        position: absolute;
-        bottom: 0.125rem;
-        right: 0.125rem;
-        box-shadow: var(--shadow-brighten-edges-outside);
+    limel-chip {
+        --chip-max-width: 18rem;
+        --badge-max-width: 3rem;
     }
 }
 
diff --git a/src/components/email-viewer/email-viewer.tsx b/src/components/email-viewer/email-viewer.tsx
index a9e06c341b..142ae43fe3 100644
--- a/src/components/email-viewer/email-viewer.tsx
+++ b/src/components/email-viewer/email-viewer.tsx
@@ -14,6 +14,9 @@ import { Email, EmailAttachment, EmailHeaderType } from './email-viewer.types';
 import { applyRemoteImagesPolicy, containsRemoteImages } from './remote-images';
 import { splitEmailAddressList } from './split-email-address-list';
 import { formatBytes } from '../../util/format-bytes';
+import { getIconForFile } from '../file/icons';
+import { getIconFillColorForFile } from '../file/icon-fill-colors';
+import { getIconBackgroundColorForFile } from '../file/icon-background-colors';
 
 /**
  * This is a private component, used to render `.eml` files inside
@@ -214,11 +217,11 @@ export class EmailViewer {
         return (
             <div class="attachments">
                 <span>{label}</span>
-                <ul>
+                <div class="attachment-list" role="list">
                     {attachments.map((attachment, index) =>
                         this.renderAttachment(attachment, index)
                     )}
-                </ul>
+                </div>
             </div>
         );
     }
@@ -228,21 +231,29 @@ export class EmailViewer {
             attachment.filename?.trim() ||
             this.getTranslation('file-viewer.email.attachment.unnamed');
         const mimeType = attachment.mimeType?.trim() || '';
-        return (
-            <li key={`attachment-${index}`}>
-                <span class="attachment-filename">{filename}</span>
-                <span class="attachment-mime-type"> {mimeType}</span>
-                {this.renderSizeBadge(attachment.size)}
-            </li>
-        );
-    };
+        const dotIndex = filename.lastIndexOf('.');
+        const extension = dotIndex > 0 ? filename.slice(dotIndex + 1) : '';
+        const tooltip = mimeType ? `${filename}\n${mimeType}` : filename;
+        const fileSize =
+            typeof attachment.size === 'number'
+                ? formatBytes(attachment.size)
+                : undefined;
 
-    private renderSizeBadge = (size?: number) => {
-        if (typeof size !== 'number') {
-            return;
-        }
         return (
-            <limel-badge class="attachment-size" label={formatBytes(size)} />
+            <limel-chip
+                key={`attachment-${index}`}
+                role="listitem"
+                title={tooltip}
+                text={filename}
+                icon={{
+                    name: getIconForFile(extension),
+                    color: getIconFillColorForFile(extension),
+                    backgroundColor: getIconBackgroundColorForFile(extension),
+                }}
+                badge={fileSize}
+                readonly={true}
+                language={this.language}
+            />
         );
     };
 
diff --git a/src/components/file-viewer/examples/file-viewer-basic.tsx b/src/components/file-viewer/examples/file-viewer-basic.tsx
index 7e306f2a77..0440f166d3 100644
--- a/src/components/file-viewer/examples/file-viewer-basic.tsx
+++ b/src/components/file-viewer/examples/file-viewer-basic.tsx
@@ -15,8 +15,8 @@ export class FileViewerExample {
     private files = [
         {
             title: 'Image',
-            url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/TEIDE.JPG/2880px-TEIDE.JPG',
-            alt: 'A synthetic-aperture radar image acquired by the SIR-C/X-SAR radar on board the Space Shuttle Endeavour shows the Teide volcano.',
+            url: 'https://picsum.photos/id/1018/2880/1920.jpg',
+            alt: 'A scenic mountain landscape from Picsum Photos.',
         },
         {
             title: 'Vector graphic',