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
@@ -13,6 +13,7 @@
 
 import { useNavigateToThread } from '../chat/message-list-types';
 import { useStyles } from '../themes/colors';
+import type { TextStyle } from '../types/styles';
 import CommunityDrawerItemCommunity from './community-drawer-item-cummunity.react';
 
 const MAX_DEPTH = 2;
@@ -41,6 +42,7 @@
       const itemData = {
         threadInfo: item.threadInfo,
         itemChildren: item.itemChildren,
+        labelStyle: item.labelStyle,
       };
       return (
         <CommunityDrawerItemCommunity
@@ -55,10 +57,24 @@
     [navigateToThread, openCommunity, setOpenCommunnityOrClose],
   );
 
+  const labelStylesObj = useStyles(labelUnboundStyles);
+  const labelStyles = React.useMemo(
+    () => [
+      labelStylesObj.level0Label,
+      labelStylesObj.level1Label,
+      labelStylesObj.level2Label,
+    ],
+    [labelStylesObj],
+  );
+
   const drawerItemsData = React.useMemo(
     () =>
-      createRecursiveDrawerItemsData(childThreadInfosMap, communitiesSuffixed),
-    [childThreadInfosMap, communitiesSuffixed],
+      createRecursiveDrawerItemsData(
+        childThreadInfosMap,
+        communitiesSuffixed,
+        labelStyles,
+      ),
+    [childThreadInfosMap, communitiesSuffixed, labelStyles],
   );
 
   return (
@@ -71,11 +87,13 @@
 function createRecursiveDrawerItemsData(
   childThreadInfosMap: { +[id: string]: $ReadOnlyArray<ThreadInfo> },
   communities: $ReadOnlyArray<ThreadInfo>,
+  labelStyles: $ReadOnlyArray<TextStyle>,
 ) {
   const result = communities.map(community => ({
     key: community.id,
     threadInfo: community,
     itemChildren: [],
+    labelStyle: labelStyles[0],
   }));
   let queue = result.map(item => [item, 0]);
 
@@ -89,6 +107,7 @@
         .map(childItem => ({
           threadInfo: childItem,
           itemChildren: [],
+          labelStyle: labelStyles[Math.min(lvl + 1, labelStyles.length - 1)],
         }));
       queue = queue.concat(
         item.itemChildren.map(childItem => [childItem, lvl + 1]),
@@ -122,6 +141,26 @@
     backgroundColor: 'drawerBackgroud',
   },
 };
+const labelUnboundStyles = {
+  level0Label: {
+    color: 'drawerItemLabelLevel0',
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '500',
+  },
+  level1Label: {
+    color: 'drawerItemLabelLevel1',
+    fontSize: 14,
+    lineHeight: 22,
+    fontWeight: '500',
+  },
+  level2Label: {
+    color: 'drawerItemLabelLevel2',
+    fontSize: 14,
+    lineHeight: 22,
+    fontWeight: '400',
+  },
+};
 
 const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo(
   CommunityDrawerContent,
diff --git a/native/navigation/community-drawer-item-cummunity.react.js b/native/navigation/community-drawer-item-cummunity.react.js
--- a/native/navigation/community-drawer-item-cummunity.react.js
+++ b/native/navigation/community-drawer-item-cummunity.react.js
@@ -27,7 +27,7 @@
 
 const unboundStyles = {
   communityBase: {
-    paddingVertical: 8,
+    paddingVertical: 2,
     paddingRight: 24,
     paddingLeft: 8,
     overflow: 'hidden',
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
@@ -8,11 +8,13 @@
 import type { MessageListParams } from '../chat/message-list-types';
 import { SingleLine } from '../components/single-line.react';
 import { useStyles } from '../themes/colors';
+import type { TextStyle } from '../types/styles';
 import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react';
 
 export type CommunityDrawerItemData = {
   +threadInfo: ThreadInfo,
   +itemChildren?: $ReadOnlyArray<CommunityDrawerItemData>,
+  +labelStyle: TextStyle,
 };
 
 export type DrawerItemProps = {
@@ -24,7 +26,7 @@
 
 function CommunityDrawerItem(props: DrawerItemProps): React.Node {
   const {
-    itemData: { threadInfo, itemChildren },
+    itemData: { threadInfo, itemChildren, labelStyle },
     navigateToThread,
     expanded,
     toggleExpanded,
@@ -74,7 +76,7 @@
           style={styles.textTouchableWrapper}
           onLongPress={onExpandToggled}
         >
-          <SingleLine style={styles.title}>{threadInfo.uiName}</SingleLine>
+          <SingleLine style={labelStyle}>{threadInfo.uiName}</SingleLine>
         </TouchableOpacity>
       </View>
       {children}
@@ -85,16 +87,10 @@
 const unboundStyles = {
   chatView: {
     marginLeft: 16,
-    marginVertical: 6,
   },
   threadEntry: {
     flexDirection: 'row',
-  },
-  title: {
-    color: 'drawerItemLabel',
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: '500',
+    marginVertical: 6,
   },
   textTouchableWrapper: {
     flex: 1,
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -85,7 +85,9 @@
   tooltipBackground: '#E0E0E0',
   drawerExpandButton: '#808080',
   drawerExpandButtonDisabled: '#CCCCCC',
-  drawerItemLabel: '#0A0A0A',
+  drawerItemLabelLevel0: '#0A0A0A',
+  drawerItemLabelLevel1: '#0A0A0A',
+  drawerItemLabelLevel2: '#1F1F1F',
   drawerOpenCommunityBackground: '#F5F5F5',
   drawerBackgroud: '#FFFFFF',
 });
@@ -166,7 +168,9 @@
   tooltipBackground: '#1F1F1F',
   drawerExpandButton: '#808080',
   drawerExpandButtonDisabled: '#404040',
-  drawerItemLabel: '#CCCCCC',
+  drawerItemLabelLevel0: '#CCCCCC',
+  drawerItemLabelLevel1: '#CCCCCC',
+  drawerItemLabelLevel2: '#F5F5F5',
   drawerOpenCommunityBackground: '#191919',
   drawerBackgroud: '#1F1F1F',
 });