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,7 @@
 // @flow
 
-export const inlineSidebarHeight = 20;
+export const inlineSidebarHeight = 38;
 export const inlineSidebarMarginTop = 5;
-export const inlineSidebarMarginBottom = 3;
+export const inlineSidebarMarginBottom = 33;
 
 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
@@ -137,9 +137,13 @@
 
     let inlineSidebar = null;
     if (item.threadCreatedFromMessage) {
+      const position = isViewer ? 'right' : 'left';
       inlineSidebar = (
         <View style={styles.inlineSidebar}>
-          <InlineSidebar threadInfo={item.threadCreatedFromMessage} />
+          <InlineSidebar
+            threadInfo={item.threadCreatedFromMessage}
+            position={position}
+          />
         </View>
       );
     }
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
@@ -13,9 +13,10 @@
 
 type Props = {
   +threadInfo: ThreadInfo,
+  +position: 'left' | 'right',
 };
 function InlineSidebar(props: Props): React.Node {
-  const { threadInfo } = props;
+  const { threadInfo, position } = props;
   const { repliesText } = useInlineEngagementText(threadInfo);
 
   const navigateToThread = useNavigateToThread();
@@ -25,9 +26,10 @@
 
   const styles = useStyles(unboundStyles);
   const unreadStyle = threadInfo.currentUser.unread ? styles.unread : null;
+  const contentStyles = [styles.content, styles[position]];
 
   return (
-    <View style={styles.content}>
+    <View style={contentStyles}>
       <Button style={styles.sidebar} onPress={onPress}>
         <Text style={[styles.name, unreadStyle]}>{repliesText}</Text>
       </Button>
@@ -38,8 +40,12 @@
 const unboundStyles = {
   content: {
     flexDirection: 'row',
-    flex: 1,
     height: inlineSidebarHeight,
+    backgroundColor: 'inlineEngagementBackground',
+    borderRadius: 28,
+    padding: 8,
+    position: 'absolute',
+    bottom: -29,
   },
   unread: {
     color: 'listForegroundLabel',
@@ -54,12 +60,18 @@
     color: 'listForegroundTertiaryLabel',
   },
   name: {
+    color: 'listForegroundLabel',
     paddingTop: 1,
-    color: 'listForegroundTertiaryLabel',
-    fontSize: 16,
+    fontSize: 14,
     paddingLeft: 4,
     paddingRight: 2,
   },
+  left: {
+    left: 0,
+  },
+  right: {
+    right: 20,
+  },
 };
 
 export default InlineSidebar;
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
@@ -41,6 +41,7 @@
     verticalBounds,
     ...viewProps
   } = props;
+  const { isViewer } = item.messageInfo.creator;
 
   let timestamp = null;
   if (focused || item.startsConversation) {
@@ -52,9 +53,13 @@
   const styles = useStyles(unboundStyles);
   let inlineSidebar = null;
   if (item.threadCreatedFromMessage) {
+    const position = isViewer ? 'right' : 'left';
     inlineSidebar = (
       <View style={styles.sidebar}>
-        <InlineSidebar threadInfo={item.threadCreatedFromMessage} />
+        <InlineSidebar
+          threadInfo={item.threadCreatedFromMessage}
+          position={position}
+        />
       </View>
     );
   }
@@ -100,7 +105,6 @@
 
       const belowMargin = 20;
       const belowSpace = robotextMessageTooltipHeight + belowMargin;
-      const { isViewer } = item.messageInfo.creator;
       const aboveMargin = isViewer ? 30 : 50;
       const aboveSpace = robotextMessageTooltipHeight + aboveMargin;
 
@@ -128,7 +132,14 @@
         key: getMessageTooltipKey(item),
       });
     },
-    [item, props.navigation, props.route.key, verticalBounds, visibleEntryIDs],
+    [
+      item,
+      props.navigation,
+      props.route.key,
+      verticalBounds,
+      visibleEntryIDs,
+      isViewer,
+    ],
   );
 
   const onLongPress = React.useCallback(() => {
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,7 @@
   greenButton: '#6EC472',
   greenText: 'green',
   headerChevron: '#0A0A0A',
+  inlineEngagementBackground: '#666666',
   link: '#036AFF',
   listBackground: 'white',
   listBackgroundLabel: 'black',
@@ -90,6 +91,7 @@
   greenButton: '#43A047',
   greenText: '#44FF44',
   headerChevron: '#FFFFFF',
+  inlineEngagementBackground: '#666666',
   link: '#129AFF',
   listBackground: '#0A0A0A',
   listBackgroundLabel: '#C7C7CC',