diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
--- a/native/navigation/community-drawer-content.react.js
+++ b/native/navigation/community-drawer-content.react.js
@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import { View, FlatList } from 'react-native';
+import { FlatList } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
 
 import {
@@ -15,6 +16,7 @@
 import CommunityDrawerItemCommunity from './community-drawer-item-cummunity.react';
 
 const MAX_DEPTH = 2;
+const safeAreaEdges = ['top'];
 
 function CommunityDrawerContent(): React.Node {
   const communities = useSelector(communityThreadSelector);
@@ -60,9 +62,9 @@
   );
 
   return (
-    <View style={styles.drawerContent}>
+    <SafeAreaView style={styles.drawerContent} edges={safeAreaEdges}>
       <FlatList data={drawerItemsData} renderItem={renderItem} />
-    </View>
+    </SafeAreaView>
   );
 }
 
@@ -116,7 +118,7 @@
   drawerContent: {
     flex: 1,
     paddingRight: 8,
-    paddingTop: 52,
+    paddingTop: 8,
     backgroundColor: 'drawerBackgroud',
   },
 };
diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js
--- a/native/navigation/community-drawer-item.react.js
+++ b/native/navigation/community-drawer-item.react.js
@@ -1,11 +1,12 @@
 // @flow
 
 import * as React from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+import { View, FlatList, TouchableOpacity } from 'react-native';
 
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import type { MessageListParams } from '../chat/message-list-types';
+import { SingleLine } from '../components/single-line.react';
 import { useStyles } from '../themes/colors';
 import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react';
 
@@ -68,8 +69,12 @@
     <View>
       <View style={styles.threadEntry}>
         {itemExpandButton}
-        <TouchableOpacity onPress={onPress}>
-          <Text style={styles.title}>{threadInfo.uiName}</Text>
+        <TouchableOpacity
+          onPress={onPress}
+          style={styles.textTouchableWrapper}
+          onLongPress={onExpandToggled}
+        >
+          <SingleLine style={styles.title}>{threadInfo.uiName}</SingleLine>
         </TouchableOpacity>
       </View>
       {children}
@@ -81,7 +86,6 @@
   chatView: {
     marginLeft: 16,
     marginVertical: 6,
-    overflow: 'hidden',
   },
   threadEntry: {
     flexDirection: 'row',
@@ -90,6 +94,10 @@
     color: 'drawerItemLabel',
     fontSize: 16,
     lineHeight: 24,
+    fontWeight: '500',
+  },
+  textTouchableWrapper: {
+    flex: 1,
   },
 };
 
diff --git a/native/navigation/community-drawer-navigator.react.js b/native/navigation/community-drawer-navigator.react.js
--- a/native/navigation/community-drawer-navigator.react.js
+++ b/native/navigation/community-drawer-navigator.react.js
@@ -6,7 +6,7 @@
   type DrawerNavigationProp,
 } from '@react-navigation/drawer';
 import * as React from 'react';
-import { Dimensions, View } from 'react-native';
+import { View } from 'react-native';
 
 import { useStyles } from '../themes/colors';
 import type { AppNavigationProp } from './app-navigator.react';
@@ -65,7 +65,7 @@
     flex: 1,
   },
   drawerStyle: {
-    width: Dimensions.get('window').width - 36,
+    width: '80%',
   },
 };
 
diff --git a/native/navigation/expand-buttons.react.js b/native/navigation/expand-buttons.react.js
--- a/native/navigation/expand-buttons.react.js
+++ b/native/navigation/expand-buttons.react.js
@@ -1,13 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 import { useStyles } from '../themes/colors';
 
-const ICON_SIZE = 20;
-const PADDING_HORIZONTAL = 7.5;
+const ICON_SIZE = 12;
+const BUTTON_SIZE = 24;
+const HIT_SLOP_VALUE = 6;
+const PADDING = (BUTTON_SIZE - ICON_SIZE) / 2;
 
 type Props = {
   +onPress: () => void,
@@ -20,8 +22,21 @@
     ? styles.expandButtonExpanded
     : styles.expandButton;
   const icon = props.expanded ? 'caret-down' : 'caret-right';
+  const hitSlop = React.useMemo(
+    () => ({
+      bottom: HIT_SLOP_VALUE,
+      left: HIT_SLOP_VALUE,
+      right: HIT_SLOP_VALUE,
+      top: HIT_SLOP_VALUE,
+    }),
+    [],
+  );
   return (
-    <TouchableOpacity onPress={props.onPress}>
+    <TouchableOpacity
+      onPress={props.onPress}
+      hitSlop={hitSlop}
+      style={styles.wrapper}
+    >
       <Icon name={icon} size={ICON_SIZE} style={style} />
     </TouchableOpacity>
   );
@@ -30,26 +45,30 @@
 function ExpandButtonDisabled(): React.Node {
   const styles = useStyles(unboundStyles);
   return (
-    <Icon
-      name="caret-right"
-      size={ICON_SIZE}
-      style={styles.expandButtonDisabled}
-    />
+    <View style={styles.wrapper}>
+      <Icon
+        name="caret-right"
+        size={ICON_SIZE}
+        style={styles.expandButtonDisabled}
+      />
+    </View>
   );
 }
 
 const unboundStyles = {
   expandButton: {
     color: 'drawerExpandButton',
-    paddingHorizontal: PADDING_HORIZONTAL,
   },
   expandButtonDisabled: {
     color: 'drawerExpandButtonDisabled',
-    paddingHorizontal: PADDING_HORIZONTAL,
   },
   expandButtonExpanded: {
     color: 'drawerExpandButton',
-    paddingHorizontal: PADDING_HORIZONTAL,
+  },
+  wrapper: {
+    width: BUTTON_SIZE,
+    alignItems: 'center',
+    padding: PADDING,
   },
 };
 
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -83,10 +83,10 @@
   vibrantRedButton: '#F53100',
   tooltipBackground: '#E0E0E0',
   drawerExpandButton: '#808080',
-  drawerExpandButtonDisabled: '#404040',
-  drawerItemLabel: '#CCCCCC',
-  drawerOpenCommunityBackground: '#333333',
-  drawerBackgroud: '#404040',
+  drawerExpandButtonDisabled: '#CCCCCC',
+  drawerItemLabel: '#0A0A0A',
+  drawerOpenCommunityBackground: '#F5F5F5',
+  drawerBackgroud: '#FFFFFF',
 });
 export type Colors = $Exact<typeof light>;
 
@@ -165,8 +165,8 @@
   drawerExpandButton: '#808080',
   drawerExpandButtonDisabled: '#404040',
   drawerItemLabel: '#CCCCCC',
-  drawerOpenCommunityBackground: '#333333',
-  drawerBackgroud: '#404040',
+  drawerOpenCommunityBackground: '#191919',
+  drawerBackgroud: '#1F1F1F',
 });
 const colors = { light, dark };