diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -6,6 +6,12 @@
   flex-direction: column;
   box-sizing: border-box;
 }
+div.composedMessageContainer {
+  position: relative;
+}
+div.withInlineSidebar {
+  margin-bottom: 36px;
+}
 div.activeContainer {
   border: 2px solid #5989d6;
   margin-left: 402px;
@@ -76,7 +82,7 @@
 }
 
 div.textMessage {
-  padding: 6px 12px;
+  padding: 8px 12px;
   white-space: pre-wrap;
   word-wrap: break-word;
   width: 100%;
@@ -121,6 +127,7 @@
   align-self: flex-end;
   justify-content: flex-end;
   padding-right: 4px;
+  position: relative;
 }
 div.iconContainer {
   margin-right: 1px;
@@ -216,9 +223,6 @@
 div.imageGrid > span.multimedia:nth-last-child(n + 5):first-child ~ * {
   grid-column-end: span 2;
 }
-div.sidebarMarginBottom {
-  margin-bottom: 8px;
-}
 svg.inlineSidebarIcon {
   color: #666666;
 }
diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js
--- a/web/chat/composed-message.react.js
+++ b/web/chat/composed-message.react.js
@@ -161,17 +161,19 @@
     if (item.threadCreatedFromMessage) {
       const position = isViewer ? 'right' : 'left';
       inlineSidebar = (
-        <div className={css.sidebarMarginBottom}>
-          <InlineSidebar
-            threadInfo={item.threadCreatedFromMessage}
-            position={position}
-          />
-        </div>
+        <InlineSidebar
+          threadInfo={item.threadCreatedFromMessage}
+          position={position}
+        />
       );
     }
 
+    const composedMessageCls = classNames(css.composedMessageContainer, {
+      [css.withInlineSidebar]: item.threadCreatedFromMessage,
+    });
+
     return (
-      <React.Fragment>
+      <div className={composedMessageCls}>
         {authorName}
         <div className={contentClassName}>
           <div
@@ -189,7 +191,7 @@
         </div>
         {failedSendInfo}
         {inlineSidebar}
-      </React.Fragment>
+      </div>
     );
   }
 
diff --git a/web/chat/inline-sidebar.css b/web/chat/inline-sidebar.css
--- a/web/chat/inline-sidebar.css
+++ b/web/chat/inline-sidebar.css
@@ -0,0 +1,28 @@
+div.container {
+  display: flex;
+  background: var(--inline-sidebar-bg);
+  justify-content: center;
+  align-items: center;
+  color: var(--fg);
+  padding: 8px;
+  border-radius: 28px;
+  font-size: var(--s-font-14);
+  position: absolute;
+  bottom: -23px;
+}
+
+div.container.right {
+  right: 30px;
+}
+
+div.container.left {
+  left: 12px;
+}
+
+div.container svg {
+  padding-right: 2px;
+}
+
+div.unread {
+  font-weight: var(--bold);
+}
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js
--- a/web/chat/inline-sidebar.react.js
+++ b/web/chat/inline-sidebar.react.js
@@ -1,25 +1,29 @@
 // @flow
-
+import classNames from 'classnames';
 import * as React from 'react';
 
 import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import { useOnClickThread } from '../selectors/nav-selectors';
+import SWMansionIcon from '../SWMansionIcon.react';
+import css from './inline-sidebar.css';
 
 type Props = {
   +threadInfo: ThreadInfo,
   +position: 'left' | 'center' | 'right',
 };
 function InlineSidebar(props: Props): React.Node {
-  const { threadInfo } = props;
+  const { threadInfo, position } = props;
   const { repliesText } = useInlineSidebarText(threadInfo);
-
   const onClick = useOnClickThread(threadInfo);
+  const containerCls = classNames(css.container, [css[position]]);
+  const replyCls = classNames({ [css.unread]: threadInfo.currentUser.unread });
 
   return (
-    <div onClick={onClick}>
-      <div>{repliesText}</div>
+    <div className={containerCls} onClick={onClick}>
+      <SWMansionIcon icon="reply-chat-bubble" size={12} />
+      <div className={replyCls}>{repliesText}</div>
     </div>
   );
 }
diff --git a/web/chat/robotext-message.css b/web/chat/robotext-message.css
--- a/web/chat/robotext-message.css
+++ b/web/chat/robotext-message.css
@@ -11,10 +11,6 @@
   position: relative;
   word-break: break-word;
 }
-div.sidebarMarginTop {
-  margin-top: 4px;
-  margin-bottom: -8px;
-}
 div.messageActionLinks {
   position: absolute;
   display: flex;
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js
--- a/web/chat/robotext-message.react.js
+++ b/web/chat/robotext-message.react.js
@@ -48,12 +48,10 @@
     let inlineSidebar;
     if (this.props.item.threadCreatedFromMessage) {
       inlineSidebar = (
-        <div className={css.sidebarMarginTop}>
-          <InlineSidebar
-            threadInfo={this.props.item.threadCreatedFromMessage}
-            position="center"
-          />
-        </div>
+        <InlineSidebar
+          threadInfo={this.props.item.threadCreatedFromMessage}
+          position="center"
+        />
       );
     }
 
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -159,4 +159,5 @@
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
+  --inline-sidebar-bg: var(--shades-black-70);
 }