diff --git a/native/chat/sidebar-list-modal.react.js b/native/chat/sidebar-list-modal.react.js
--- a/native/chat/sidebar-list-modal.react.js
+++ b/native/chat/sidebar-list-modal.react.js
@@ -62,6 +62,7 @@
       onChangeSearchInputText={onChangeSearchInputText}
       threadInfo={props.route.params.threadInfo}
       searchPlaceholder="Search threads"
+      modalTitle="Threads"
     />
   );
 }
@@ -128,6 +129,7 @@
   sidebar: {
     paddingLeft: 0,
     paddingRight: 5,
+    height: 38,
   },
   sidebarItemContainer: {
     flex: 1,
diff --git a/native/chat/subchannel-item.react.js b/native/chat/subchannel-item.react.js
--- a/native/chat/subchannel-item.react.js
+++ b/native/chat/subchannel-item.react.js
@@ -62,19 +62,18 @@
     </View>
   );
 }
-
+const fontSize = 14;
 const unboundStyles = {
   outerView: {
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
     paddingVertical: 8,
-    paddingHorizontal: 16,
+    paddingHorizontal: 8,
     height: 60,
   },
   itemRowContainer: {
     flexDirection: 'row',
-    height: 24,
     alignItems: 'center',
   },
   unread: {
@@ -85,12 +84,11 @@
     color: 'listForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
-    paddingLeft: 3,
-    paddingBottom: 2,
+    paddingBottom: 8,
   },
   lastActivity: {
     color: 'listForegroundTertiaryLabel',
-    fontSize: 14,
+    fontSize,
     marginLeft: 10,
   },
   iconWrapper: {
@@ -106,7 +104,7 @@
   noMessages: {
     color: 'listForegroundTertiaryLabel',
     flex: 1,
-    fontSize: 14,
+    fontSize,
     fontStyle: 'italic',
   },
 };
diff --git a/native/chat/subchannels-list-modal.react.js b/native/chat/subchannels-list-modal.react.js
--- a/native/chat/subchannels-list-modal.react.js
+++ b/native/chat/subchannels-list-modal.react.js
@@ -38,7 +38,8 @@
       setSearchState={setSearchState}
       onChangeSearchInputText={onChangeSearchInputText}
       threadInfo={props.route.params.threadInfo}
-      searchPlaceholder="Search Subchannels"
+      searchPlaceholder="Search subchannels"
+      modalTitle="Subchannels"
     />
   );
 }
diff --git a/native/chat/thread-list-modal.react.js b/native/chat/thread-list-modal.react.js
--- a/native/chat/thread-list-modal.react.js
+++ b/native/chat/thread-list-modal.react.js
@@ -1,7 +1,14 @@
 // @flow
 
+import { useNavigation } from '@react-navigation/native';
 import * as React from 'react';
-import { TextInput, FlatList, StyleSheet } from 'react-native';
+import {
+  Text,
+  TextInput,
+  FlatList,
+  View,
+  TouchableOpacity,
+} from 'react-native';
 
 import type { ThreadSearchState } from 'lib/hooks/search-threads';
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
@@ -10,7 +17,8 @@
 
 import Modal from '../components/modal.react';
 import Search from '../components/search.react';
-import { useIndicatorStyle } from '../themes/colors';
+import SWMansionIcon from '../components/swmansion-icon.react';
+import { useIndicatorStyle, useStyles } from '../themes/colors';
 import { waitForModalInputFocus } from '../utils/timers';
 import { useNavigateToThread } from './message-list-types';
 
@@ -37,7 +45,8 @@
   +searchState: ThreadSearchState,
   +setSearchState: SetState<ThreadSearchState>,
   +onChangeSearchInputText: (text: string) => mixed,
-  +searchPlaceholder: string,
+  +searchPlaceholder?: string,
+  +modalTitle: string,
 };
 function ThreadListModal<U: SidebarInfo | ChatThreadItem>(
   props: Props<U>,
@@ -49,6 +58,7 @@
     listData,
     createRenderItem,
     searchPlaceholder,
+    modalTitle,
   } = props;
 
   const searchTextInputRef = React.useRef();
@@ -86,33 +96,89 @@
     onPressItem,
   ]);
 
+  const styles = useStyles(unboundStyles);
   const indicatorStyle = useIndicatorStyle();
+  const navigation = useNavigation();
+
   return (
-    <Modal>
-      <Search
-        searchText={searchState.text}
-        onChangeText={onChangeSearchInputText}
-        containerStyle={styles.search}
-        placeholder={searchPlaceholder}
-        ref={setSearchTextInputRef}
-      />
-      <FlatList
-        data={listData}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        getItemLayout={getItemLayout}
-        keyboardShouldPersistTaps="handled"
-        initialNumToRender={20}
-        indicatorStyle={indicatorStyle}
-      />
+    <Modal modalStyle={styles.modal}>
+      <View style={styles.header}>
+        <Text style={styles.title}>{modalTitle}</Text>
+        <TouchableOpacity
+          onPress={navigation.goBack}
+          style={styles.closeButton}
+        >
+          <SWMansionIcon
+            name="cross"
+            size={24}
+            color={styles.closeIcon.color}
+          />
+        </TouchableOpacity>
+      </View>
+      <View style={styles.body}>
+        <Search
+          searchText={searchState.text}
+          onChangeText={onChangeSearchInputText}
+          containerStyle={styles.search}
+          placeholder={searchPlaceholder ?? 'Search'}
+          ref={setSearchTextInputRef}
+        />
+        <FlatList
+          data={listData}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          getItemLayout={getItemLayout}
+          keyboardShouldPersistTaps="handled"
+          initialNumToRender={20}
+          indicatorStyle={indicatorStyle}
+        />
+      </View>
     </Modal>
   );
 }
 
-const styles = StyleSheet.create({
+const unboundStyles = {
+  body: {
+    paddingHorizontal: 16,
+    flex: 1,
+  },
+  header: {
+    borderBottomColor: 'subthreadsModalSearch',
+    borderBottomWidth: 1,
+    height: 72,
+    padding: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  modal: {
+    borderRadius: 8,
+    paddingHorizontal: 0,
+    backgroundColor: 'subthreadsModalBackgroud',
+    paddingTop: 0,
+    justifyContent: 'flex-start',
+  },
   search: {
-    marginBottom: 8,
+    height: 40,
+    marginVertical: 16,
+    backgroundColor: 'subthreadsModalSearch',
   },
-});
+  title: {
+    color: 'listForegroundLabel',
+    fontSize: 20,
+    fontWeight: '500',
+    lineHeight: 26,
+    alignSelf: 'center',
+    marginLeft: 2,
+  },
+  closeIcon: {
+    color: 'subthreadsModalClose',
+  },
+  closeButton: {
+    marginRight: 2,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+};
 
 export default ThreadListModal;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -94,6 +94,9 @@
   drawerItemLabelLevel2: '#1F1F1F',
   drawerOpenCommunityBackground: '#F5F5F5',
   drawerBackgroud: '#FFFFFF',
+  subthreadsModalClose: '#808080',
+  subthreadsModalBackgroud: '#EEEEEE',
+  subthreadsModalSearch: 'rgba(0, 0, 0, 0.08)',
 });
 export type Colors = $Exact<typeof light>;
 
@@ -181,6 +184,9 @@
   drawerItemLabelLevel2: '#F5F5F5',
   drawerOpenCommunityBackground: '#191919',
   drawerBackgroud: '#1F1F1F',
+  subthreadsModalClose: '#808080',
+  subthreadsModalBackgroud: '#1F1F1F',
+  subthreadsModalSearch: 'rgba(255, 255, 255, 0.04)',
 });
 const colors = { light, dark };