diff --git a/packages/ui/src/components/message-item.tsx b/packages/ui/src/components/message-item.tsx
index e68d51fd..39cf9b84 100644
--- a/packages/ui/src/components/message-item.tsx
+++ b/packages/ui/src/components/message-item.tsx
@@ -229,7 +229,7 @@ export default function MessageItem(props: MessageItemProps) {
         </For>
 
         <Show when={fileAttachments().length > 0}>
-          <div class="message-attachments">
+          <div class="message-attachments mt-1">
             <For each={fileAttachments()}>
               {(attachment) => {
                 const name = getAttachmentName(attachment)
diff --git a/packages/ui/src/styles/messaging/message-base.css b/packages/ui/src/styles/messaging/message-base.css
index 667f5e0b..a973fea9 100644
--- a/packages/ui/src/styles/messaging/message-base.css
+++ b/packages/ui/src/styles/messaging/message-base.css
@@ -11,20 +11,20 @@
 }
 
 .message-item-base:not(.assistant-message) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
 }
 
 .message-step-start {
   background-color: var(--message-assistant-bg);
   border-left: 4px solid var(--message-assistant-border);
-  margin-top: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 .message-step-finish {
   background-color: var(--message-assistant-bg);
   border-left: 4px solid var(--message-assistant-border);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
 }