diff --git a/src/components/messageStream/MessageBubble.tsx b/src/components/messageStream/MessageBubble.tsx
index 6dda60f..5dbfc93 100644
--- a/src/components/messageStream/MessageBubble.tsx
+++ b/src/components/messageStream/MessageBubble.tsx
@@ -35,7 +35,7 @@ export function MessageBubble({ post }: { post: Post }) {
   return (
     <div
       id={`post-${post.id}`}
-      className="mx-auto w-full max-w-[358px] scroll-mt-20 md:max-w-[680px] md:scroll-mt-24 lg:max-w-[900px] xl:max-w-[1120px]"
+      className="mx-auto w-full max-w-[358px] scroll-mt-[82px] md:max-w-[680px] md:scroll-mt-[98px] lg:max-w-[900px] xl:max-w-[1120px]"
     >
       <article
         className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${
diff --git a/src/components/messageStream/bubbles/FileDocBubble.tsx b/src/components/messageStream/bubbles/FileDocBubble.tsx
index 5642c57..fa8e492 100644
--- a/src/components/messageStream/bubbles/FileDocBubble.tsx
+++ b/src/components/messageStream/bubbles/FileDocBubble.tsx
@@ -33,15 +33,28 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
     }
   };
 
+  const isImage = att.kind === "image" || att.mime.startsWith("image/");
+  const previewUrl =
+    att.thumbnailUrl ?? att.posterUrl ?? (isImage ? att.url : undefined);
+
   return (
     <div className="group flex h-[52px] items-center gap-3">
-      <div
-        className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
-        style={{ backgroundColor: color }}
-        aria-hidden="true"
-      >
-        <Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
-      </div>
+      {previewUrl ? (
+        <img
+          src={previewUrl}
+          alt={displayFilename}
+          loading="lazy"
+          className="h-[52px] w-[52px] shrink-0 rounded-full object-cover"
+        />
+      ) : (
+        <div
+          className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-full"
+          style={{ backgroundColor: color }}
+          aria-hidden="true"
+        >
+          <Icon className="h-8 w-8 text-white" strokeWidth={2.1} />
+        </div>
+      )}
       <div className="min-w-0 flex-1">
         <div
           className="truncate text-[15px] font-medium leading-6 text-ark-gold group-hover:text-ark-gold2"