diff --git a/native/chat/chat-constants.js b/native/chat/chat-constants.js
--- a/native/chat/chat-constants.js
+++ b/native/chat/chat-constants.js
@@ -1,7 +1,14 @@
 // @flow
 
-export const inlineSidebarHeight = 20;
+export const composedMessageMarginLeft = 12;
+export const composedMessageMarginRight = 7;
+
+export const inlineSidebarHeight = 38;
 export const inlineSidebarMarginTop = 5;
 export const inlineSidebarMarginBottom = 3;
+export const inlineSidebarLeftTopOffset = -10;
+export const inlineSidebarRightRightMargin = 22;
+export const inlineSidebarRightTopOffset = -10;
+export const inlineSidebarCenterTopOffset = -5;
 
 export const clusterEndHeight = 7;
diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js
--- a/native/chat/composed-message.react.js
+++ b/native/chat/composed-message.react.js
@@ -15,8 +15,13 @@
 import { type AnimatedStyleObj, AnimatedView } from '../types/styles';
 import {
   clusterEndHeight,
+  inlineSidebarLeftTopOffset,
   inlineSidebarMarginBottom,
   inlineSidebarMarginTop,
+  inlineSidebarRightTopOffset,
+  inlineSidebarRightRightMargin,
+  composedMessageMarginLeft,
+  composedMessageMarginRight,
 } from './chat-constants';
 import { useComposedMessageMaxWidth } from './composed-message-width';
 import { FailedSend } from './failed-send.react';
@@ -138,12 +143,13 @@
     let inlineSidebar = null;
     if (item.threadCreatedFromMessage) {
       const positioning = isViewer ? 'right' : 'left';
+      const inlineSidebarPositionStyle =
+        positioning === 'left'
+          ? styles.leftInlineSidebar
+          : styles.rightInlineSidebar;
       inlineSidebar = (
-        <View style={styles.inlineSidebar}>
-          <InlineSidebar
-            threadInfo={item.threadCreatedFromMessage}
-            positioning={positioning}
-          />
+        <View style={[styles.inlineSidebar, inlineSidebarPositionStyle]}>
+          <InlineSidebar threadInfo={item.threadCreatedFromMessage} />
         </View>
       );
     }
@@ -175,8 +181,8 @@
 
 const styles = StyleSheet.create({
   alignment: {
-    marginLeft: 12,
-    marginRight: 7,
+    marginLeft: composedMessageMarginLeft,
+    marginRight: composedMessageMarginRight,
   },
   content: {
     alignItems: 'center',
@@ -197,12 +203,23 @@
   leftChatBubble: {
     justifyContent: 'flex-end',
   },
+  leftInlineSidebar: {
+    justifyContent: 'flex-start',
+    position: 'relative',
+    top: inlineSidebarLeftTopOffset,
+  },
   messageBox: {
     marginRight: 5,
   },
   rightChatBubble: {
     justifyContent: 'flex-start',
   },
+  rightInlineSidebar: {
+    alignSelf: 'flex-end',
+    position: 'relative',
+    right: inlineSidebarRightRightMargin,
+    top: inlineSidebarRightTopOffset,
+  },
 });
 
 const ConnectedComposedMessage: React.ComponentType<BaseProps> = React.memo<BaseProps>(
diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-sidebar.react.js
--- a/native/chat/inline-sidebar.react.js
+++ b/native/chat/inline-sidebar.react.js
@@ -2,69 +2,91 @@
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
 
 import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
-import Button from '../components/button.react';
+import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react';
+import SWMansionIcon from '../components/swmansion-icon.react';
 import { useStyles } from '../themes/colors';
 import { inlineSidebarHeight } from './chat-constants';
 import { useNavigateToThread } from './message-list-types';
 
 type Props = {
-  +threadInfo: ThreadInfo,
-  +positioning: 'left' | 'center' | 'right',
+  +threadInfo: ?ThreadInfo,
+  +reactions?: $ReadOnlyArray<string>,
+  +disabled?: boolean,
 };
 function InlineSidebar(props: Props): React.Node {
-  const { threadInfo } = props;
-  const { sendersText, repliesText } = useInlineSidebarText(threadInfo);
+  const { disabled = false, reactions, threadInfo } = props;
+  const { repliesText } = useInlineSidebarText(threadInfo);
 
   const navigateToThread = useNavigateToThread();
   const onPress = React.useCallback(() => {
-    navigateToThread({ threadInfo });
-  }, [navigateToThread, threadInfo]);
+    if (threadInfo && !disabled) {
+      navigateToThread({ threadInfo });
+    }
+  }, [disabled, navigateToThread, threadInfo]);
 
   const styles = useStyles(unboundStyles);
-  let viewerIcon, nonViewerIcon, alignStyle;
-  if (props.positioning === 'right') {
-    viewerIcon = <Icon name="corner-down-left" size={18} style={styles.icon} />;
-    alignStyle = styles.rightAlign;
-  } else if (props.positioning === 'left') {
-    nonViewerIcon = (
-      <Icon name="corner-down-right" size={18} style={styles.icon} />
-    );
-    alignStyle = styles.leftAlign;
-  } else {
-    nonViewerIcon = (
-      <Icon name="corner-down-right" size={18} style={styles.icon} />
-    );
-    alignStyle = styles.centerAlign;
-  }
 
-  const unreadStyle = threadInfo.currentUser.unread ? styles.unread : null;
+  const reactionList = React.useMemo(() => {
+    if (!reactions || reactions.length === 0) {
+      return null;
+    }
+    const reactionItems = reactions.map((reaction, i) => {
+      return (
+        <Text key={i} style={styles.reaction}>
+          {reaction}
+        </Text>
+      );
+    });
+    return <View style={styles.reactionsContainer}>{reactionItems}</View>;
+  }, [reactions, styles.reaction, styles.reactionsContainer]);
 
-  return (
-    <View style={[styles.content, alignStyle]}>
-      <Button style={styles.sidebar} onPress={onPress}>
-        {nonViewerIcon}
-        <Text style={[styles.name, unreadStyle]}>
-          {sendersText}
+  const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null;
+  const marginRight = reactionList ? styles.repliesMarginRight : null;
+  const sidebarInfo = React.useMemo(() => {
+    if (!threadInfo) {
+      return null;
+    }
+    return (
+      <>
+        <SWMansionIcon style={styles.icon} size={14} name="sidebar-filled" />
+        <Text style={[styles.repliesText, unreadStyle, marginRight]}>
           {repliesText}
         </Text>
-        {viewerIcon}
-      </Button>
+      </>
+    );
+  }, [
+    marginRight,
+    repliesText,
+    styles.icon,
+    styles.repliesText,
+    threadInfo,
+    unreadStyle,
+  ]);
+  return (
+    <View style={styles.container}>
+      <GestureTouchableOpacity
+        onPress={onPress}
+        activeOpacity={0.7}
+        style={styles.sidebar}
+      >
+        {sidebarInfo}
+        {reactionList}
+      </GestureTouchableOpacity>
     </View>
   );
 }
 
 const unboundStyles = {
-  content: {
+  container: {
     flexDirection: 'row',
-    marginRight: 30,
-    marginLeft: 10,
-    flex: 1,
     height: inlineSidebarHeight,
+    display: 'flex',
+    backgroundColor: 'listBackground',
+    borderRadius: 16,
   },
   unread: {
     color: 'listForegroundLabel',
@@ -74,25 +96,32 @@
     flexDirection: 'row',
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'inlineSidebarBackground',
+    padding: 8,
+    borderRadius: 16,
+    height: inlineSidebarHeight,
   },
   icon: {
-    color: 'listForegroundTertiaryLabel',
+    color: 'inlineSidebarLabel',
+    marginRight: 4,
   },
-  name: {
-    paddingTop: 1,
-    color: 'listForegroundTertiaryLabel',
-    fontSize: 16,
-    paddingLeft: 4,
-    paddingRight: 2,
+  repliesText: {
+    color: 'inlineSidebarLabel',
+    fontSize: 14,
+    lineHeight: 22,
   },
-  leftAlign: {
-    justifyContent: 'flex-start',
+  repliesMarginRight: {
+    marginRight: 12,
   },
-  rightAlign: {
-    justifyContent: 'flex-end',
+  reaction: {
+    marginLeft: 4,
+    color: 'inlineSidebarLabel',
   },
-  centerAlign: {
-    justifyContent: 'center',
+  reactionsContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    marginLeft: -4,
   },
 };
 
diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js
--- a/native/chat/robotext-message.react.js
+++ b/native/chat/robotext-message.react.js
@@ -15,6 +15,7 @@
 import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types';
 import type { VerticalBounds } from '../types/layout-types';
 import { AnimatedView } from '../types/styles';
+import { inlineSidebarCenterTopOffset } from './chat-constants';
 import type { ChatNavigationProp } from './chat.react';
 import InlineSidebar from './inline-sidebar.react';
 import { InnerRobotextMessage } from './inner-robotext-message.react';
@@ -54,10 +55,7 @@
   if (item.threadCreatedFromMessage) {
     inlineSidebar = (
       <View style={styles.sidebar}>
-        <InlineSidebar
-          threadInfo={item.threadCreatedFromMessage}
-          positioning="center"
-        />
+        <InlineSidebar threadInfo={item.threadCreatedFromMessage} />
       </View>
     );
   }
@@ -191,8 +189,9 @@
 
 const unboundStyles = {
   sidebar: {
-    marginTop: -5,
-    marginBottom: 5,
+    marginTop: inlineSidebarCenterTopOffset,
+    marginBottom: -inlineSidebarCenterTopOffset,
+    alignSelf: 'center',
   },
 };
 
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -21,6 +21,8 @@
   greenButton: '#6EC472',
   greenText: 'green',
   headerChevron: '#0A0A0A',
+  inlineSidebarBackground: '#E0E0E0',
+  inlineSidebarLabel: '#000000',
   link: '#036AFF',
   listBackground: 'white',
   listBackgroundLabel: 'black',
@@ -90,6 +92,8 @@
   greenButton: '#43A047',
   greenText: '#44FF44',
   headerChevron: '#FFFFFF',
+  inlineSidebarBackground: '#666666',
+  inlineSidebarLabel: '#FFFFFF',
   link: '#129AFF',
   listBackground: '#0A0A0A',
   listBackgroundLabel: '#C7C7CC',