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
@@ -206,7 +206,7 @@
   grid-column-end: span 2;
 }
 div.sidebarMarginBottom {
-  margin-bottom: 8px;
+  margin-bottom: 2px;
 }
 svg.inlineSidebarIcon {
   color: #666666;
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
@@ -1,33 +1,55 @@
+div.inlineSidebarContainer {
+  display: flex;
+}
+div.centerContainer {
+  justify-content: center;
+}
+div.nonViewerMessageBoxContainer {
+  justify-content: flex-start;
+  position: relative;
+  top: -10px;
+  left: 12px;
+}
+div.viewerMessageBoxContainer {
+  justify-content: flex-end;
+  position: relative;
+  top: -10px;
+  right: 31px;
+}
 div.inlineSidebarContent {
+  background: var(--inline-sidebar-bg);
+  color: var(--inline-sidebar-color);
+  font-size: var(--s-font-14);
+  line-height: var(--line-height-text);
   flex-direction: row;
   display: flex;
-  margin: 0 40px 0 20px;
+  border-radius: 16px;
+  padding: 8px;
   cursor: pointer;
+  gap: 12px;
+  align-items: center;
+  transition: background 0.2s ease-in-out;
+}
+
+div.inlineSidebarContent:hover {
+  background: var(--inline-sidebar-bg-hover);
 }
-div.inlineSidebar {
+
+div.reactionsContainer {
   flex-direction: row;
   display: flex;
-  align-items: center;
+  gap: 4px;
 }
-div.inlineSidebarName {
-  padding-top: 1px;
-  color: #666666;
-  font-size: 16px;
-  padding-left: 4px;
-  padding-right: 2px;
+div.replies {
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 div.unread {
   font-weight: bold;
 }
-div.centerContainer {
-  justify-content: center;
-}
-div.nonViewerMessageBoxContainer {
-  justify-content: flex-start;
-}
-div.viewerMessageBoxContainer {
-  justify-content: flex-end;
-}
+
 svg.inlineSidebarIcon {
   color: #666666;
 }
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
@@ -2,61 +2,76 @@
 
 import classNames from 'classnames';
 import * as React from 'react';
-import {
-  CornerDownRight as CornerDownRightIcon,
-  CornerDownLeft as CornerDownLeftIcon,
-} from 'react-feather';
 
 import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
+import CommIcon from '../CommIcon.react';
 import { useOnClickThread } from '../selectors/nav-selectors';
 import css from './inline-sidebar.css';
 
 type Props = {
-  +threadInfo: ThreadInfo,
+  +threadInfo: ?ThreadInfo,
+  +reactions?: $ReadOnlyArray<string>,
   +positioning: 'left' | 'center' | 'right',
 };
 function InlineSidebar(props: Props): React.Node {
-  const { threadInfo } = props;
-  const { sendersText, repliesText } = useInlineSidebarText(threadInfo);
+  const { threadInfo, positioning, reactions = [] } = props;
+  const inlineSidebarText = useInlineSidebarText(threadInfo);
+
+  const containerClasses = classNames([
+    css.inlineSidebarContainer,
+    {
+      [css.nonViewerMessageBoxContainer]: positioning === 'left',
+      [css.centerContainer]: positioning === 'center',
+      [css.viewerMessageBoxContainer]: positioning === 'right',
+    },
+  ]);
+
+  const reactionsList = React.useMemo(() => {
+    if (!reactions || reactions.length === 0) {
+      return null;
+    }
+    const reactionsItems = reactions.map((e, i) => {
+      return (
+        <div key={i} className={css.reactions}>
+          {e}
+        </div>
+      );
+    });
+    return <div className={css.reactionsContainer}>{reactionsItems}</div>;
+  }, [reactions]);
 
   const onClick = useOnClickThread(threadInfo);
 
-  let viewerIcon, nonViewerIcon, alignStyle;
-  if (props.positioning === 'right') {
-    viewerIcon = (
-      <CornerDownLeftIcon className={css.inlineSidebarIcon} size={18} />
-    );
-    alignStyle = css.viewerMessageBoxContainer;
-  } else if (props.positioning === 'left') {
-    nonViewerIcon = (
-      <CornerDownRightIcon className={css.inlineSidebarIcon} size={18} />
-    );
-    alignStyle = css.nonViewerMessageBoxContainer;
-  } else {
-    nonViewerIcon = (
-      <CornerDownRightIcon className={css.inlineSidebarIcon} size={18} />
-    );
-    alignStyle = css.centerContainer;
-  }
+  const chatIcon = React.useMemo(
+    () => <CommIcon size={14} icon="sidebar-filled" />,
+    [],
+  );
+  const sidebarItem = React.useMemo(() => {
+    if (!threadInfo || !inlineSidebarText) {
+      return null;
+    }
 
-  const unreadStyle = threadInfo.currentUser.unread ? css.unread : null;
+    return (
+      <div className={css.replies}>
+        {chatIcon}
+        {inlineSidebarText.repliesText}
+      </div>
+    );
+  }, [chatIcon, inlineSidebarText, threadInfo]);
 
   return (
-    <div className={classNames([css.inlineSidebarContent, alignStyle])}>
-      <div onClick={onClick} className={css.inlineSidebar}>
-        {nonViewerIcon}
-        <div className={classNames([css.inlineSidebarName, unreadStyle])}>
-          {sendersText}
-          {repliesText}
-        </div>
-        {viewerIcon}
+    <div className={containerClasses}>
+      <div
+        className={css.inlineSidebarContent}
+        onClick={threadInfo ? onClick : null}
+      >
+        {sidebarItem}
+        {reactionsList}
       </div>
     </div>
   );
 }
 
-const inlineSidebarHeight = 20;
-
-export { InlineSidebar, inlineSidebarHeight };
+export { InlineSidebar };
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -176,4 +176,7 @@
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
+  --inline-sidebar-bg: var(--shades-black-70);
+  --inline-sidebar-bg-hover: var(--shades-black-80);
+  --inline-sidebar-color: var(--fg);
 }