diff --git a/frontend/src/components/MessageAttachment.svelte b/frontend/src/components/MessageAttachment.svelte
index 862f35b..9b645d3 100644
--- a/frontend/src/components/MessageAttachment.svelte
+++ b/frontend/src/components/MessageAttachment.svelte
@@ -48,7 +48,10 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        flex-wrap: wrap;
         padding: var(--space-norm);
+        padding-top: var(--space-sm);
+        padding-bottom: var(--space-sm);
         border-radius: 9999px;
         background-color: var(--background-color-0);
     }
@@ -68,13 +71,20 @@
     }
 
     .attachment-filename {
-        color: var(--foreground-color-3);
-        margin-right: 6px;
+        color: var(--foreground-color-2);
+        margin-right: var(--space-md);
     }
 
     .attachment-card .icon-button {
         margin-left: auto;
     }
+
+    .attachment-card .download {
+        background: var(--purple-1);
+        border-radius: 9999px;
+        padding: var(--space-xs);
+        color: var(--foreground-color-1);
+    }
 </style>
 
 
@@ -86,7 +96,7 @@
 {:else if renderAs === AttachmentRenderAs.DownloadableFile}
     <div class="attachment attachment-card">
         <div class="attachment-filename">{ attachment.file_name }</div>
-        <a class="icon-button material-icons-outlined" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a>
+        <a class="icon-button material-icons-outlined download" href="{ attachmentUrl(attachment.file) }" target="_blank">download</a>
     </div>
 {:else}
     <div class="attachment attachment-card">Couldn't render attachment</div>