diff --git a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
index 1f58cc67b..8ef31d0e3 100644
--- a/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/__snapshots__/index.test.tsx.snap
@@ -190,7 +190,7 @@ exports[`components/categories_list should render channels error 1`] = `
         style={
           Object {
             "borderBottomColor": "rgba(255,255,255,0.16)",
-            "borderLeftColor": "#1c58d9",
+            "borderLeftColor": "#ffffff",
             "borderRadius": 7,
             "borderRightColor": "rgba(255,255,255,0.16)",
             "borderTopColor": "rgba(255,255,255,0.16)",
diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/index.ts b/app/screens/home/channel_list/categories_list/categories/unreads/index.ts
index c83f160d2..cf146fb76 100644
--- a/app/screens/home/channel_list/categories_list/categories/unreads/index.ts
+++ b/app/screens/home/channel_list/categories_list/categories/unreads/index.ts
@@ -12,6 +12,7 @@ import {filterAndSortMyChannels, makeChannelsMap} from '@helpers/database';
 import {getChannelById, observeChannelsByLastPostAt, observeCurrentChannel, observeNotifyPropsByChannels, queryMyChannelUnreads} from '@queries/servers/channel';
 import {queryPreferencesByCategoryAndName} from '@queries/servers/preference';
 import {observeLastUnreadChannelId} from '@queries/servers/system';
+import {observeUnreadsAndMentionsInTeam} from '@queries/servers/thread';
 
 import UnreadCategories from './unreads';
 
@@ -63,8 +64,11 @@ const enhanced = withObservables(['currentTeamId', 'isTablet', 'onlyUnreads'], (
         }
         return of$([]);
     }));
+    const unreadThreads = observeUnreadsAndMentionsInTeam(database, currentTeamId, true);
+
     return {
         unreadChannels,
+        unreadThreads,
     };
 });
 
diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx
index 25e061c65..80e349a64 100644
--- a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx
+++ b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.test.tsx
@@ -23,6 +23,7 @@ describe('components/channel_list/categories/body', () => {
                 unreadChannels={[]}
                 onChannelSwitch={() => undefined}
                 onlyUnreads={false}
+                unreadThreads={{unreads: 0, mentions: 0}}
             />,
             {database},
         );
diff --git a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx
index 343af45fc..956f890eb 100644
--- a/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx
+++ b/app/screens/home/channel_list/categories_list/categories/unreads/unreads.tsx
@@ -35,11 +35,12 @@ type UnreadCategoriesProps = {
     onChannelSwitch: (channelId: string) => void;
     onlyUnreads: boolean;
     unreadChannels: ChannelModel[];
+    unreadThreads: {unreads: number; mentions: number};
 }
 
 const extractKey = (item: ChannelModel) => item.id;
 
-const UnreadCategories = ({onChannelSwitch, onlyUnreads, unreadChannels}: UnreadCategoriesProps) => {
+const UnreadCategories = ({onChannelSwitch, onlyUnreads, unreadChannels, unreadThreads}: UnreadCategoriesProps) => {
     const intl = useIntl();
     const theme = useTheme();
     const isTablet = useIsTablet();
@@ -60,7 +61,7 @@ const UnreadCategories = ({onChannelSwitch, onlyUnreads, unreadChannels}: Unread
         <Empty onlyUnreads={onlyUnreads}/>
     ) : undefined;
 
-    if (!unreadChannels.length && !onlyUnreads) {
+    if (!unreadChannels.length && !unreadThreads.mentions && !unreadThreads.mentions && !onlyUnreads) {
         return null;
     }
 
diff --git a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
index 7863f0562..70170cc6a 100644
--- a/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
+++ b/app/screens/home/channel_list/categories_list/header/__snapshots__/header.test.tsx.snap
@@ -170,7 +170,7 @@ exports[`components/channel_list/header Channel List Header Component should mat
       style={
         Object {
           "borderBottomColor": "rgba(255,255,255,0.16)",
-          "borderLeftColor": "#1c58d9",
+          "borderLeftColor": "#ffffff",
           "borderRadius": 7,
           "borderRightColor": "rgba(255,255,255,0.16)",
           "borderTopColor": "rgba(255,255,255,0.16)",
diff --git a/app/screens/home/channel_list/categories_list/header/loading_unreads.tsx b/app/screens/home/channel_list/categories_list/header/loading_unreads.tsx
index 47639c25e..eb7ecad7c 100644
--- a/app/screens/home/channel_list/categories_list/header/loading_unreads.tsx
+++ b/app/screens/home/channel_list/categories_list/header/loading_unreads.tsx
@@ -14,7 +14,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         height: 14,
         borderRadius: 7,
         borderBottomColor: changeOpacity(theme.sidebarText, 0.16),
-        borderLeftColor: theme.buttonBg,
+        borderLeftColor: theme.sidebarText,
         borderRightColor: changeOpacity(theme.sidebarText, 0.16),
         borderTopColor: changeOpacity(theme.sidebarText, 0.16),
         borderWidth: 2,