diff --git a/app/components/team_sidebar/add_team/index.tsx b/app/components/team_sidebar/add_team/index.tsx
index 7e412bb94..f91ee7470 100644
--- a/app/components/team_sidebar/add_team/index.tsx
+++ b/app/components/team_sidebar/add_team/index.tsx
@@ -17,15 +17,38 @@ import AddTeamSlideUp from './add_team_slide_up';
 
 import type TeamModel from '@typings/database/models/servers/team';
 
+type Props = {
+    canCreateTeams: boolean;
+    otherTeams: TeamModel[];
+}
+
 const ITEM_HEIGHT = 72;
 const CREATE_HEIGHT = 97;
 const HEADER_HEIGHT = 66;
 const CONTAINER_HEIGHT = 392;
 
-type Props = {
-    canCreateTeams: boolean;
-    otherTeams: TeamModel[];
-}
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
+    return {
+        container: {
+            flex: 0,
+            backgroundColor: changeOpacity(theme.sidebarText, 0.08),
+            borderRadius: 10,
+            height: 48,
+            width: 48,
+            marginTop: 6,
+            marginBottom: 12,
+            marginHorizontal: 12,
+            overflow: 'hidden',
+        },
+        touchable: {
+            width: '100%',
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    };
+});
+
 export default function AddTeam({canCreateTeams, otherTeams}: Props) {
     const theme = useTheme();
     const styles = getStyleSheet(theme);
@@ -70,31 +93,9 @@ export default function AddTeam({canCreateTeams, otherTeams}: Props) {
                 <CompassIcon
                     size={28}
                     name='plus'
-                    color={changeOpacity(theme.buttonColor, 0.64)}
+                    color={changeOpacity(theme.sidebarText, 0.64)}
                 />
             </TouchableWithFeedback>
         </View>
     );
 }
-
-const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
-    return {
-        container: {
-            flex: 0,
-            backgroundColor: changeOpacity(theme.centerChannelColor, 0.64),
-            borderRadius: 10,
-            height: 48,
-            width: 48,
-            marginTop: 6,
-            marginBottom: 12,
-            marginHorizontal: 12,
-            overflow: 'hidden',
-        },
-        touchable: {
-            width: '100%',
-            height: '100%',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-    };
-});
diff --git a/app/components/team_sidebar/team_list/team_item/team_icon.tsx b/app/components/team_sidebar/team_list/team_item/team_icon.tsx
index 5cc072a46..52b8e08ad 100644
--- a/app/components/team_sidebar/team_list/team_item/team_icon.tsx
+++ b/app/components/team_sidebar/team_list/team_item/team_icon.tsx
@@ -8,7 +8,8 @@ import FastImage from 'react-native-fast-image';
 import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import NetworkManager from '@managers/network_manager';
-import {makeStyleSheetFromTheme} from '@utils/theme';
+import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
@@ -17,7 +18,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
-            backgroundColor: theme.centerChannelColor,
+            backgroundColor: theme.sidebarBg,
             borderRadius: 10,
         },
         containerSelected: {
@@ -25,14 +26,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             height: '100%',
             alignItems: 'center',
             justifyContent: 'center',
-            backgroundColor: theme.centerChannelColor,
+            backgroundColor: theme.sidebarBg,
             borderRadius: 6,
         },
         text: {
             color: theme.sidebarText,
-            fontFamily: 'OpenSans',
-            fontWeight: 'bold',
-            fontSize: 15,
+            ...typography('Heading', 400, 'SemiBold'),
         },
         image: {
             borderRadius: 6,
@@ -43,6 +42,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             right: 0,
             backgroundColor: 'white',
         },
+        nameOnly: {
+            backgroundColor: changeOpacity(theme.sidebarText, 0.16),
+        },
     };
 });
 
@@ -88,29 +90,32 @@ export default function TeamIcon({
         }
     }, []);
 
+    const nameOnly = imageError || !lastIconUpdate || !client;
     const containerStyle = useMemo(() => {
         if (selected) {
-            return backgroundColor ? [styles.containerSelected, {backgroundColor}] : styles.containerSelected;
+            return backgroundColor ? [styles.containerSelected, {backgroundColor}] : [styles.containerSelected, nameOnly && styles.nameOnly];
         }
 
-        return backgroundColor ? [styles.container, {backgroundColor}] : styles.container;
-    }, [styles, backgroundColor, selected]);
+        return backgroundColor ? [styles.container, {backgroundColor}] : [styles.container, nameOnly && styles.nameOnly];
+    }, [styles, backgroundColor, selected, nameOnly]);
 
     let teamIconContent;
-    if (imageError || !lastIconUpdate || !client) {
+    if (nameOnly) {
+        const first = displayName[0].toUpperCase();
+        const second = displayName[1]?.toLowerCase() || '';
         teamIconContent = (
             <Text
                 style={textColor ? [styles.text, {color: textColor}] : styles.text}
                 testID={`${testID}.display_name_abbreviation`}
             >
-                {displayName?.substring(0, 2).toUpperCase()}
+                {`${first}${second}`}
             </Text>
         );
     } else {
         teamIconContent = (
             <FastImage
                 style={styles.image}
-                source={{uri: `${serverUrl}${client.getTeamIconUrl(id, lastIconUpdate)}`}}
+                source={{uri: `${serverUrl}${client!.getTeamIconUrl(id, lastIconUpdate)}`}}
                 onError={handleImageError}
             />
         );