diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 07a6b48..4e7dd8d 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -32,9 +32,8 @@
     .message {
         display: flex;
         flex-direction: row;
-        padding: 4px 4px 4px var(--space-xs);
-        margin-top: 16px;
-        overflow-x: hidden;
+        padding: 6px 6px 6px var(--space-xs);
+        margin-top: 14px;
         word-wrap: break-word;
         position: relative;
     }
@@ -121,13 +120,15 @@
     .message-actions {
         display: flex;
         position: absolute;
-        top: 3px;
+        top: -6px;
         right: 12px;
         z-index: 1;
+        background-color: var(--background-color-1);
+        border-radius: var(--radius-sm);
     }
 
     .message-actions .icon-button {
-        margin: 0;
+        margin: 7px;
         padding: 0;
     }
 
@@ -190,14 +191,14 @@
         {/if}
 
         <div class="message-actions">
-            <button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
-                reply
-            </button>
             {#if message._editable}
                 <button class="icon-button material-icons-outlined" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
                     edit
                 </button>
             {/if}
+            <button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
+                reply
+            </button>
         </div>
     </div>
 </div>