diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
index bc5fdf8af..56bdcf786 100644
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -1,214 +1,218 @@
 // @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 numOfSidebarsWithExtendedArrow =
+    data.sidebars.filter(sidebarItem => sidebarItem.type === 'sidebar').length -
+    1;
+
   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}
+          extendArrow={index < numOfSidebarsWithExtendedArrow}
         />
       );
     } 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 c8b9ff510..fee4f1fb2 100644
--- a/native/chat/chat-thread-list-sidebar.react.js
+++ b/native/chat/chat-thread-list-sidebar.react.js
@@ -1,92 +1,117 @@
 // @flow
 
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
 import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
 
-import ArrowLong from '../components/arrow-long.react';
+import ExtendedArrow from '../components/arrow-extended.react';
 import Arrow from '../components/arrow.react';
+import Button from '../components/button.react';
 import UnreadDot from '../components/unread-dot.react';
-import { SidebarItem } from './sidebar-item.react';
+import { useColors, useStyles } from '../themes/colors';
+import { SidebarItem, sidebarHeight } 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 colors = useColors();
+  const styles = useStyles(unboundStyles);
+
   const {
     sidebarInfo,
     onSwipeableWillOpen,
     currentlyOpenedSwipeableId,
     onPressItem,
     extendArrow = false,
   } = props;
 
   let arrow;
   if (extendArrow) {
     arrow = (
-      <View style={styles.longArrow}>
-        <ArrowLong />
+      <View style={styles.extendedArrow}>
+        <ExtendedArrow />
       </View>
     );
   } else {
     arrow = (
       <View style={styles.arrow}>
         <Arrow />
       </View>
     );
   }
 
+  const { threadInfo } = sidebarInfo;
+
+  const onPress = React.useCallback(() => onPressItem(threadInfo), [
+    threadInfo,
+    onPressItem,
+  ]);
+
   return (
-    <View style={styles.chatThreadListContainer}>
+    <Button
+      iosFormat="highlight"
+      iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
+      iosActiveOpacity={0.85}
+      style={styles.sidebar}
+      onPress={onPress}
+    >
       {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} />
+          <SidebarItem sidebarInfo={sidebarInfo} />
         </SwipeableThread>
       </View>
-    </View>
+    </Button>
   );
 }
 
-const styles = StyleSheet.create({
+const unboundStyles = {
   arrow: {
-    left: 27.5,
+    left: 28,
     position: 'absolute',
     top: -12,
   },
-  chatThreadListContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-  },
-  longArrow: {
+  extendedArrow: {
     left: 28,
     position: 'absolute',
-    top: -19,
+    top: -6,
+  },
+  sidebar: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: '100%',
+    height: sidebarHeight,
+    paddingLeft: 6,
+    paddingRight: 18,
+    backgroundColor: 'listBackground',
   },
   swipeableThreadContainer: {
     flex: 1,
+    height: '100%',
   },
   unreadIndicatorContainer: {
-    display: 'flex',
-    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
     paddingLeft: 6,
     width: 56,
   },
-});
+};
 
 export default ChatThreadListSidebar;
diff --git a/native/chat/sidebar-item.react.js b/native/chat/sidebar-item.react.js
index ca799b88e..a7d113f0d 100644
--- a/native/chat/sidebar-item.react.js
+++ b/native/chat/sidebar-item.react.js
@@ -1,84 +1,58 @@
 // @flow
 
 import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 
-import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
+import type { 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 { useColors, useStyles } from '../themes/colors';
-import type { ViewStyle } from '../types/styles';
+import { useStyles } from '../themes/colors';
 
 type Props = {
   +sidebarInfo: SidebarInfo,
-  +onPressItem: (threadInfo: ThreadInfo) => void,
-  +style?: ?ViewStyle,
 };
 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 sidebarStyle = React.useMemo(() => {
-    return [styles.sidebar, props.style];
-  }, [props.style, styles.sidebar]);
-
   return (
-    <Button
-      iosFormat="highlight"
-      iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
-      iosActiveOpacity={0.85}
-      style={sidebarStyle}
-      onPress={onPress}
-    >
+    <View style={styles.itemContainer}>
       <SingleLine style={[styles.name, unreadStyle]}>
         {threadInfo.uiName}
       </SingleLine>
       <Text style={[styles.lastActivity, unreadStyle]}>{lastActivity}</Text>
-    </Button>
+    </View>
   );
 }
 
 const sidebarHeight = 30;
 const unboundStyles = {
+  itemContainer: {
+    flexDirection: 'row',
+    height: sidebarHeight,
+    alignItems: 'center',
+  },
   unread: {
     color: 'listForegroundLabel',
     fontWeight: 'bold',
   },
-  sidebar: {
-    height: sidebarHeight,
-    flexDirection: 'row',
-    display: 'flex',
-    paddingLeft: 6,
-    paddingRight: 18,
-    alignItems: 'center',
-    backgroundColor: 'listBackground',
-  },
   name: {
     color: 'listForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     paddingLeft: 3,
     paddingBottom: 2,
   },
   lastActivity: {
     color: 'listForegroundTertiaryLabel',
     fontSize: 14,
     marginLeft: 10,
   },
 };
 
 export { SidebarItem, sidebarHeight };
diff --git a/native/chat/sidebar-list-modal.react.js b/native/chat/sidebar-list-modal.react.js
index f86a54f60..b32c8589c 100644
--- a/native/chat/sidebar-list-modal.react.js
+++ b/native/chat/sidebar-list-modal.react.js
@@ -1,141 +1,200 @@
 // @flow
 
 import * as React from 'react';
-import { TextInput, FlatList, StyleSheet, View } from 'react-native';
+import { TextInput, FlatList, View } from 'react-native';
 
 import { useSearchSidebars } from 'lib/hooks/search-sidebars';
 import type { ThreadInfo, SidebarInfo } from 'lib/types/thread-types';
 
-import ArrowLong from '../components/arrow-long.react';
+import ExtendedArrow from '../components/arrow-extended.react';
+import Arrow from '../components/arrow.react';
+import Button from '../components/button.react';
 import Modal from '../components/modal.react';
 import Search from '../components/search.react';
 import type { RootNavigationProp } from '../navigation/root-navigator.react';
 import type { NavigationRoute } from '../navigation/route-names';
-import { useIndicatorStyle } from '../themes/colors';
+import { useColors, useIndicatorStyle, useStyles } from '../themes/colors';
 import { waitForModalInputFocus } from '../utils/timers';
 import { useNavigateToThread } from './message-list-types';
 import { SidebarItem } from './sidebar-item.react';
 
 export type SidebarListModalParams = {
   +threadInfo: ThreadInfo,
 };
 
 function keyExtractor(sidebarInfo: SidebarInfo) {
   return sidebarInfo.threadInfo.id;
 }
 function getItemLayout(data: ?$ReadOnlyArray<SidebarInfo>, index: number) {
   return { length: 24, offset: 24 * index, index };
 }
 
 type Props = {
   +navigation: RootNavigationProp<'SidebarListModal'>,
   +route: NavigationRoute<'SidebarListModal'>,
 };
 function SidebarListModal(props: Props): React.Node {
   const {
     listData,
     searchState,
     setSearchState,
     onChangeSearchInputText,
   } = useSearchSidebars(props.route.params.threadInfo);
 
   const searchTextInputRef = React.useRef();
   const setSearchTextInputRef = React.useCallback(
     async (textInput: ?React.ElementRef<typeof TextInput>) => {
       searchTextInputRef.current = textInput;
       if (!textInput) {
         return;
       }
       await waitForModalInputFocus();
       if (searchTextInputRef.current) {
         searchTextInputRef.current.focus();
       }
     },
     [],
   );
 
   const navigateToThread = useNavigateToThread();
   const onPressItem = React.useCallback(
     (threadInfo: ThreadInfo) => {
       setSearchState({
         text: '',
         results: new Set(),
       });
       if (searchTextInputRef.current) {
         searchTextInputRef.current.blur();
       }
       navigateToThread({ threadInfo });
     },
     [navigateToThread, setSearchState],
   );
 
+  const styles = useStyles(unboundStyles);
+
+  const numOfSidebarsWithExtendedArrow = React.useMemo(
+    () => listData.length - 1,
+    [listData],
+  );
+
   const renderItem = React.useCallback(
-    (row: { item: SidebarInfo, ... }) => {
+    (row: { item: SidebarInfo, index: number, ... }) => {
+      let extendArrow: boolean = false;
+      if (row.index < numOfSidebarsWithExtendedArrow) {
+        extendArrow = true;
+      }
       return (
-        <View style={styles.sidebarRowContainer}>
-          <View style={styles.arrow}>
-            <ArrowLong />
-          </View>
-          <View style={styles.spacer} />
-          <View style={styles.sidebarItemContainer}>
-            <SidebarItem
-              sidebarInfo={row.item}
-              onPressItem={onPressItem}
-              style={styles.sidebar}
-            />
-          </View>
-        </View>
+        <Item
+          item={row.item}
+          onPressItem={onPressItem}
+          extendArrow={extendArrow}
+        />
       );
     },
-    [onPressItem],
+    [onPressItem, numOfSidebarsWithExtendedArrow],
   );
 
   const indicatorStyle = useIndicatorStyle();
   return (
     <Modal>
       <Search
         searchText={searchState.text}
         onChangeText={onChangeSearchInputText}
         containerStyle={styles.search}
         placeholder="Search threads"
         ref={setSearchTextInputRef}
       />
       <FlatList
         data={listData}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         getItemLayout={getItemLayout}
         keyboardShouldPersistTaps="handled"
         initialNumToRender={20}
         indicatorStyle={indicatorStyle}
       />
     </Modal>
   );
 }
 
-const styles = StyleSheet.create({
+function Item(props: {
+  item: SidebarInfo,
+  onPressItem: (threadInfo: ThreadInfo) => void,
+  extendArrow: boolean,
+}): React.Node {
+  const { item, onPressItem, extendArrow } = props;
+  const { threadInfo } = item;
+
+  const onPressButton = React.useCallback(() => onPressItem(threadInfo), [
+    onPressItem,
+    threadInfo,
+  ]);
+
+  const colors = useColors();
+  const styles = useStyles(unboundStyles);
+
+  let arrow;
+  if (extendArrow) {
+    arrow = (
+      <View style={styles.extendedArrow}>
+        <ExtendedArrow />
+      </View>
+    );
+  } else {
+    arrow = (
+      <View style={styles.arrow}>
+        <Arrow />
+      </View>
+    );
+  }
+
+  return (
+    <Button
+      iosFormat="highlight"
+      iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
+      iosActiveOpacity={0.85}
+      style={styles.sidebar}
+      onPress={onPressButton}
+    >
+      <View style={styles.sidebarRowContainer}>
+        {arrow}
+        <View style={styles.spacer} />
+        <View style={styles.sidebarItemContainer}>
+          <SidebarItem sidebarInfo={item} />
+        </View>
+      </View>
+    </Button>
+  );
+}
+
+const unboundStyles = {
   arrow: {
     position: 'absolute',
-    top: -19,
+    top: -12,
+  },
+  extendedArrow: {
+    position: 'absolute',
+    top: -6,
   },
   search: {
     marginBottom: 8,
   },
   sidebar: {
-    backgroundColor: 'transparent',
+    backgroundColor: 'listBackground',
     paddingLeft: 0,
     paddingRight: 5,
   },
   sidebarItemContainer: {
     flex: 1,
   },
   sidebarRowContainer: {
     flex: 1,
     flexDirection: 'row',
   },
   spacer: {
     width: 30,
   },
-});
+};
 
 export default SidebarListModal;
diff --git a/native/components/arrow-extended.react.js b/native/components/arrow-extended.react.js
new file mode 100644
index 000000000..836aefad9
--- /dev/null
+++ b/native/components/arrow-extended.react.js
@@ -0,0 +1,23 @@
+// @flow
+
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+function ExtendedArrow(): React.Node {
+  return (
+    <Svg
+      width={27}
+      height={38}
+      viewBox="0 0 27 38"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M 1 19 H 0.5 v 26 h 1 V 26 Z m 25.354 0.354 a 0.5 0.5 0 0 0 0 -0.708 l -3.182 -3.181 a 0.5 0.5 0 1 0 -0.707 0.707 L 25.293 19 l -2.828 2.828 a 0.5 0.5 0 1 0 0.707 0.707 l 3.182 -3.181 Z M 0.5 0 v 26 h 1 V 0 h -1 Z m 0.5 19.5 h 25 v -1 H 1 v 0.5 Z"
+        fill="#808080"
+        fillRule="nonzero"
+      />
+    </Svg>
+  );
+}
+
+export default ExtendedArrow;
diff --git a/native/components/arrow-long.react.js b/native/components/arrow-long.react.js
deleted file mode 100644
index fe5457ca2..000000000
--- a/native/components/arrow-long.react.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import Svg, { Path } from 'react-native-svg';
-
-function ArrowLong(): React.Node {
-  return (
-    <Svg
-      width={27}
-      height={38}
-      viewBox="0 0 27 38"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M0 0h1v33.5h23.793l-2.328-2.328a.5.5 0 0 1-.058-.638l.058-.07a.5.5 0 0 1 .637-.057l.07.058 3.182 3.181a.5.5 0 0 1 .057.638l-.057.07-3.182 3.181a.5.5 0 0 1-.765-.637l.058-.07L24.79 34.5H0V0Z"
-        fill="#808080"
-        fillRule="nonzero"
-      />
-    </Svg>
-  );
-}
-
-export default ArrowLong;