diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
index 98c116427..bc5fdf8af 100644
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -1,213 +1,214 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
 import type { ThreadInfo } from 'lib/types/thread-types';
 import type { UserInfo } from 'lib/types/user-types';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import Button from '../components/button.react';
 import ColorSplotch from '../components/color-splotch.react';
 import { SingleLine } from '../components/single-line.react';
 import ThreadAncestorsLabel from '../components/thread-ancestors-label.react';
 import UnreadDot from '../components/unread-dot.react';
 import { useColors, useStyles } from '../themes/colors';
 import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react';
 import ChatThreadListSidebar from './chat-thread-list-sidebar.react';
 import MessagePreview from './message-preview.react';
 import SwipeableThread from './swipeable-thread.react';
 
 type Props = {
   +data: ChatThreadItem,
   +onPressItem: (
     threadInfo: ThreadInfo,
     pendingPersonalThreadUserInfo?: UserInfo,
   ) => void,
   +onPressSeeMoreSidebars: (threadInfo: ThreadInfo) => void,
   +onSwipeableWillOpen: (threadInfo: ThreadInfo) => void,
   +currentlyOpenedSwipeableId: string,
 };
 function ChatThreadListItem({
   data,
   onPressItem,
   onPressSeeMoreSidebars,
   onSwipeableWillOpen,
   currentlyOpenedSwipeableId,
 }: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const lastMessage = React.useMemo(() => {
     const mostRecentMessageInfo = data.mostRecentMessageInfo;
     if (!mostRecentMessageInfo) {
       return (
         <Text style={styles.noMessages} numberOfLines={1}>
           No messages
         </Text>
       );
     }
     return (
       <MessagePreview
         messageInfo={mostRecentMessageInfo}
         threadInfo={data.threadInfo}
       />
     );
   }, [data.mostRecentMessageInfo, data.threadInfo, styles]);
 
-  const sidebars = data.sidebars.map(sidebarItem => {
+  const sidebars = data.sidebars.map((sidebarItem, index) => {
     if (sidebarItem.type === 'sidebar') {
       const { type, ...sidebarInfo } = sidebarItem;
       return (
         <ChatThreadListSidebar
           sidebarInfo={sidebarInfo}
           onPressItem={onPressItem}
           onSwipeableWillOpen={onSwipeableWillOpen}
           currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
           key={sidebarItem.threadInfo.id}
+          extendArrow={index > 0}
         />
       );
     } else if (sidebarItem.type === 'seeMore') {
       return (
         <ChatThreadListSeeMoreSidebars
           threadInfo={data.threadInfo}
           unread={sidebarItem.unread}
           onPress={onPressSeeMoreSidebars}
           key="seeMore"
         />
       );
     } else {
       return <View style={styles.spacer} key="spacer" />;
     }
   });
 
   const onPress = React.useCallback(() => {
     onPressItem(data.threadInfo, data.pendingPersonalThreadUserInfo);
   }, [onPressItem, data.threadInfo, data.pendingPersonalThreadUserInfo]);
 
   const threadNameStyle = React.useMemo(() => {
     if (!data.threadInfo.currentUser.unread) {
       return styles.threadName;
     }
     return [styles.threadName, styles.unreadThreadName];
   }, [
     data.threadInfo.currentUser.unread,
     styles.threadName,
     styles.unreadThreadName,
   ]);
 
   const lastActivity = shortAbsoluteDate(data.lastUpdatedTime);
   const lastActivityStyle = React.useMemo(() => {
     if (!data.threadInfo.currentUser.unread) {
       return styles.lastActivity;
     }
     return [styles.lastActivity, styles.unreadLastActivity];
   }, [
     data.threadInfo.currentUser.unread,
     styles.lastActivity,
     styles.unreadLastActivity,
   ]);
 
   return (
     <>
       <SwipeableThread
         threadInfo={data.threadInfo}
         mostRecentNonLocalMessage={data.mostRecentNonLocalMessage}
         onSwipeableWillOpen={onSwipeableWillOpen}
         currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
         iconSize={24}
       >
         <Button
           onPress={onPress}
           iosFormat="highlight"
           iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
           iosActiveOpacity={0.85}
           style={styles.container}
         >
           <View style={styles.content}>
             <View style={styles.colorSplotch}>
               <UnreadDot unread={data.threadInfo.currentUser.unread} />
             </View>
             <View style={styles.colorSplotch}>
               <ColorSplotch color={data.threadInfo.color} size="profile" />
             </View>
             <View style={styles.threadDetails}>
               <ThreadAncestorsLabel threadInfo={data.threadInfo} />
               <View style={styles.row}>
                 <SingleLine style={threadNameStyle}>
                   {data.threadInfo.uiName}
                 </SingleLine>
               </View>
               <View style={styles.row}>
                 {lastMessage}
                 <Text style={lastActivityStyle}>{lastActivity}</Text>
               </View>
             </View>
           </View>
         </Button>
       </SwipeableThread>
       {sidebars}
     </>
   );
 }
 
 const chatThreadListItemHeight = 70;
 const spacerHeight = 6;
 const unboundStyles = {
   container: {
     height: chatThreadListItemHeight,
     justifyContent: 'center',
     backgroundColor: 'listBackground',
   },
   content: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   colorSplotch: {
     marginLeft: 6,
     marginBottom: 12,
   },
   threadDetails: {
     paddingLeft: 12,
     paddingRight: 18,
     justifyContent: 'center',
     flex: 1,
     marginTop: 5,
   },
   lastActivity: {
     color: 'listForegroundTertiaryLabel',
     fontSize: 14,
     marginLeft: 10,
   },
   unreadLastActivity: {
     color: 'listForegroundLabel',
     fontWeight: 'bold',
   },
   noMessages: {
     color: 'listForegroundTertiaryLabel',
     flex: 1,
     fontSize: 14,
     fontStyle: 'italic',
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   threadName: {
     color: 'listForegroundSecondaryLabel',
     flex: 1,
     fontSize: 21,
   },
   unreadThreadName: {
     color: 'listForegroundLabel',
     fontWeight: '500',
   },
   spacer: {
     height: spacerHeight,
   },
 };
 
 export { ChatThreadListItem, chatThreadListItemHeight, spacerHeight };
diff --git a/native/chat/chat-thread-list-sidebar.react.js b/native/chat/chat-thread-list-sidebar.react.js
index dc8c5e9d7..c8b9ff510 100644
--- a/native/chat/chat-thread-list-sidebar.react.js
+++ b/native/chat/chat-thread-list-sidebar.react.js
@@ -1,40 +1,92 @@
 // @flow
 
 import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
 
 import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
 
+import ArrowLong from '../components/arrow-long.react';
+import Arrow from '../components/arrow.react';
+import UnreadDot from '../components/unread-dot.react';
 import { SidebarItem } from './sidebar-item.react';
 import SwipeableThread from './swipeable-thread.react';
 
 type Props = {
   +sidebarInfo: SidebarInfo,
   +onPressItem: (threadInfo: ThreadInfo) => void,
   +onSwipeableWillOpen: (threadInfo: ThreadInfo) => void,
   +currentlyOpenedSwipeableId: string,
+  +extendArrow: boolean,
 };
 function ChatThreadListSidebar(props: Props): React.Node {
   const {
     sidebarInfo,
     onSwipeableWillOpen,
     currentlyOpenedSwipeableId,
     onPressItem,
+    extendArrow = false,
   } = props;
+
+  let arrow;
+  if (extendArrow) {
+    arrow = (
+      <View style={styles.longArrow}>
+        <ArrowLong />
+      </View>
+    );
+  } else {
+    arrow = (
+      <View style={styles.arrow}>
+        <Arrow />
+      </View>
+    );
+  }
+
   return (
-    <SwipeableThread
-      threadInfo={sidebarInfo.threadInfo}
-      mostRecentNonLocalMessage={sidebarInfo.mostRecentNonLocalMessage}
-      onSwipeableWillOpen={onSwipeableWillOpen}
-      currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
-      iconSize={16}
-    >
-      <SidebarItem
-        sidebarInfo={sidebarInfo}
-        onPressItem={onPressItem}
-        unreadIndicator={true}
-      />
-    </SwipeableThread>
+    <View style={styles.chatThreadListContainer}>
+      {arrow}
+      <View style={styles.unreadIndicatorContainer}>
+        <UnreadDot unread={sidebarInfo.threadInfo.currentUser.unread} />
+      </View>
+      <View style={styles.swipeableThreadContainer}>
+        <SwipeableThread
+          threadInfo={sidebarInfo.threadInfo}
+          mostRecentNonLocalMessage={sidebarInfo.mostRecentNonLocalMessage}
+          onSwipeableWillOpen={onSwipeableWillOpen}
+          currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
+          iconSize={16}
+        >
+          <SidebarItem sidebarInfo={sidebarInfo} onPressItem={onPressItem} />
+        </SwipeableThread>
+      </View>
+    </View>
   );
 }
 
+const styles = StyleSheet.create({
+  arrow: {
+    left: 27.5,
+    position: 'absolute',
+    top: -12,
+  },
+  chatThreadListContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  longArrow: {
+    left: 28,
+    position: 'absolute',
+    top: -19,
+  },
+  swipeableThreadContainer: {
+    flex: 1,
+  },
+  unreadIndicatorContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    paddingLeft: 6,
+    width: 56,
+  },
+});
+
 export default ChatThreadListSidebar;
diff --git a/native/chat/sidebar-item.react.js b/native/chat/sidebar-item.react.js
index 4f7955384..ca799b88e 100644
--- a/native/chat/sidebar-item.react.js
+++ b/native/chat/sidebar-item.react.js
@@ -1,124 +1,84 @@
 // @flow
 
 import * as React from 'react';
 import { Text } from 'react-native';
-import Icon from 'react-native-vector-icons/Entypo';
 
 import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import Button from '../components/button.react';
 import { SingleLine } from '../components/single-line.react';
-import UnreadDot from '../components/unread-dot.react';
 import { useColors, useStyles } from '../themes/colors';
 import type { ViewStyle } from '../types/styles';
 
 type Props = {
   +sidebarInfo: SidebarInfo,
   +onPressItem: (threadInfo: ThreadInfo) => void,
   +style?: ?ViewStyle,
-  +unreadIndicator?: boolean,
 };
 function SidebarItem(props: Props): React.Node {
   const { lastUpdatedTime } = props.sidebarInfo;
   const lastActivity = shortAbsoluteDate(lastUpdatedTime);
 
   const { threadInfo } = props.sidebarInfo;
   const styles = useStyles(unboundStyles);
   const unreadStyle = threadInfo.currentUser.unread ? styles.unread : null;
 
   const { onPressItem } = props;
   const onPress = React.useCallback(() => onPressItem(threadInfo), [
     threadInfo,
     onPressItem,
   ]);
 
   const colors = useColors();
 
-  const { unreadIndicator } = props;
   const sidebarStyle = React.useMemo(() => {
-    if (unreadIndicator) {
-      return [styles.sidebar, styles.sidebarWithUnreadIndicator, props.style];
-    }
     return [styles.sidebar, props.style];
-  }, [
-    props.style,
-    styles.sidebar,
-    styles.sidebarWithUnreadIndicator,
-    unreadIndicator,
-  ]);
-
-  const sidebarIconStyle = React.useMemo(() => {
-    if (unreadIndicator) {
-      return [styles.sidebarIcon, styles.sidebarIconWithUnreadIndicator];
-    }
-    return styles.sidebarIcon;
-  }, [
-    styles.sidebarIcon,
-    styles.sidebarIconWithUnreadIndicator,
-    unreadIndicator,
-  ]);
-
-  let unreadDot;
-  if (unreadIndicator) {
-    unreadDot = <UnreadDot unread={threadInfo.currentUser.unread} />;
-  }
+  }, [props.style, styles.sidebar]);
 
   return (
     <Button
       iosFormat="highlight"
       iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
       iosActiveOpacity={0.85}
       style={sidebarStyle}
       onPress={onPress}
     >
-      {unreadDot}
-      <Icon name="align-right" style={sidebarIconStyle} size={24} />
       <SingleLine style={[styles.name, unreadStyle]}>
         {threadInfo.uiName}
       </SingleLine>
       <Text style={[styles.lastActivity, unreadStyle]}>{lastActivity}</Text>
     </Button>
   );
 }
 
 const sidebarHeight = 30;
 const unboundStyles = {
   unread: {
     color: 'listForegroundLabel',
     fontWeight: 'bold',
   },
   sidebar: {
     height: sidebarHeight,
     flexDirection: 'row',
     display: 'flex',
-    paddingLeft: 28,
+    paddingLeft: 6,
     paddingRight: 18,
     alignItems: 'center',
     backgroundColor: 'listBackground',
   },
-  sidebarWithUnreadIndicator: {
-    paddingLeft: 6,
-  },
-  sidebarIcon: {
-    paddingRight: 5,
-    color: 'listForegroundSecondaryLabel',
-  },
-  sidebarIconWithUnreadIndicator: {
-    paddingLeft: 22,
-  },
   name: {
     color: 'listForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     paddingLeft: 3,
     paddingBottom: 2,
   },
   lastActivity: {
     color: 'listForegroundTertiaryLabel',
     fontSize: 14,
     marginLeft: 10,
   },
 };
 
 export { SidebarItem, sidebarHeight };