diff --git a/web/chat/message-action-buttons.css b/web/chat/message-action-buttons.css
--- a/web/chat/message-action-buttons.css
+++ b/web/chat/message-action-buttons.css
@@ -1,7 +1,13 @@
-div.messageActionButtonsContainer {
+div.messageActionButtons {
+  font-size: 16px;
+}
+div.messageActionButtonsViewer {
   display: flex;
   flex-direction: row;
-  font-size: 16px;
+}
+div.messageActionButtonsNonViewer {
+  display: flex;
+  flex-direction: row-reverse;
 }
 div.messageActionLinkIcon {
   margin-left: 3px;
diff --git a/web/chat/message-action-buttons.js b/web/chat/message-action-buttons.js
--- a/web/chat/message-action-buttons.js
+++ b/web/chat/message-action-buttons.js
@@ -172,8 +172,14 @@
     );
   }
 
+  const { isViewer } = messageInfo.creator;
+  const messageActionButtonsContainer = classNames({
+    [css.messageActionButtons]: true,
+    [css.messageActionButtonsViewer]: isViewer,
+    [css.messageActionButtonsNonViewer]: !isViewer,
+  });
   return (
-    <div className={css.messageActionButtonsContainer}>
+    <div className={messageActionButtonsContainer}>
       {sidebarButton}
       {replyButton}
     </div>