diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
index 90254ee31..a12b3cbe1 100644
--- a/app/containers/ActionSheet/ActionSheet.tsx
+++ b/app/containers/ActionSheet/ActionSheet.tsx
@@ -161,7 +161,7 @@ const ActionSheet = React.memo(
 						handleComponent={renderHandle}
 						enablePanDownToClose
 						style={{ ...styles.container, ...bottomSheet }}
-						backgroundStyle={{ backgroundColor: colors.focusedBackground }}
+						backgroundStyle={{ backgroundColor: colors.surfaceLight }}
 						onChange={index => index === -1 && onClose()}
 						// We need this to allow horizontal swipe gesture inside the bottom sheet like in reaction picker
 						enableContentPanningGesture={data?.enableContentPanningGesture ?? true}
diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
index a32f27fc9..9003827a1 100644
--- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
+++ b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -48,13 +48,13 @@ const FooterButtons = ({
 	return (
 		<View style={styles.footerButtonsContainer}>
 			<Button
-				style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.cancelButton }]}
+				style={[styles.buttonSeparator, { flex: 1, backgroundColor: cancelBackgroundColor || colors.buttonBackgroundSecondaryDefault }]}
 				color={colors.backdropColor}
 				title={cancelTitle}
 				onPress={cancelAction}
 			/>
 			<Button
-				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.dangerColor }}
+				style={{ flex: 1, backgroundColor: confirmBackgroundColor || colors.buttonBackgroundDangerDefault }}
 				title={confirmTitle}
 				onPress={confirmAction}
 				disabled={disabled}
@@ -100,12 +100,12 @@ const ActionSheetContentWithInputAndSubmit = ({
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<>
 				<View style={styles.titleContainer}>
-					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.dangerColor} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.passcodePrimary, paddingLeft: iconName ? 16 : 0 }]}>
+					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
 						{title}
 					</Text>
 				</View>
-				<Text style={[styles.subtitleText, { color: colors.titleText }]}>{description}</Text>
+				<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text>
 				{customText}
 			</>
 			{showInput ? (
@@ -126,7 +126,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 				/>
 			) : null}
 			<FooterButtons
-				confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
+				confirmBackgroundColor={confirmBackgroundColor || colors.fontHint}
 				cancelAction={onCancel || hideActionSheet}
 				confirmAction={() => onSubmit(inputValue)}
 				cancelTitle={i18n.t('Cancel')}
diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
index 1c191b36d..5b06c2207 100644
--- a/app/containers/ActionSheet/BottomSheetContent.tsx
+++ b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -27,9 +27,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 		hasCancel ? (
 			<Touch
 				onPress={hide}
-				style={[styles.button, { backgroundColor: colors.auxiliaryBackground }]}
-				accessibilityLabel={I18n.t('Cancel')}>
-				<Text style={[styles.text, { color: colors.bodyText }]}>{I18n.t('Cancel')}</Text>
+				style={[styles.button, { backgroundColor: colors.surfaceHover }]}
+				accessibilityLabel={I18n.t('Cancel')}
+			>
+				<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
 			</Touch>
 		) : null;
 
@@ -44,10 +45,10 @@ const BottomSheetContent = React.memo(({ options, hasCancel, hide, children, onL
 				keyExtractor={item => item.title}
 				bounces={false}
 				renderItem={renderItem}
-				style={{ backgroundColor: colors.focusedBackground }}
+				style={{ backgroundColor: colors.strokeExtraDark }}
 				keyboardDismissMode='interactive'
 				indicatorStyle='black'
-				contentContainerStyle={{ paddingBottom: bottom }}
+				contentContainerStyle={{ paddingBottom: bottom, backgroundColor: colors.surfaceLight }}
 				ItemSeparatorComponent={List.Separator}
 				ListHeaderComponent={List.Separator}
 				ListFooterComponent={renderFooter}
diff --git a/app/containers/ActionSheet/Handle.tsx b/app/containers/ActionSheet/Handle.tsx
index 68f559c24..4408a18bc 100644
--- a/app/containers/ActionSheet/Handle.tsx
+++ b/app/containers/ActionSheet/Handle.tsx
@@ -9,7 +9,7 @@ export const Handle = React.memo(() => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.handle} testID='action-sheet-handle'>
-			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].auxiliaryText }]} />
+			<View style={[styles.handleIndicator, { backgroundColor: themes[theme].fontSecondaryInfo }]} />
 		</View>
 	);
 });
diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx
index db9e1ba97..53db17de5 100644
--- a/app/containers/ActionSheet/Item.tsx
+++ b/app/containers/ActionSheet/Item.tsx
@@ -27,19 +27,19 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 		}
 	};
 
-	let textColor = colors.bodyText;
+	let color = colors.fontDefault;
 	if (item.danger) {
-		textColor = colors.dangerColor;
+		color = colors.fontDanger;
 	}
 	if (!enabled) {
-		textColor = colors.fontDisabled;
+		color = colors.fontDisabled;
 	}
 
 	return (
-		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.focusedBackground }]} testID={item.testID}>
-			{item.icon ? <CustomIcon name={item.icon} size={20} color={textColor} /> : null}
+		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
+			{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
 			<View style={styles.titleContainer}>
-				<Text numberOfLines={1} style={[styles.title, { color: textColor, marginLeft: item.icon ? 16 : 0 }]}>
+				<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
 					{item.title}
 				</Text>
 			</View>
diff --git a/app/containers/ActivityIndicator.tsx b/app/containers/ActivityIndicator.tsx
index 6e4f2db0a..7469b7f29 100644
--- a/app/containers/ActivityIndicator.tsx
+++ b/app/containers/ActivityIndicator.tsx
@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
 const RCActivityIndicator = ({ absolute, ...props }: IActivityIndicator): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].auxiliaryText} {...props} />
+		<ActivityIndicator style={[styles.indicator, absolute && styles.absolute]} color={themes[theme].fontSecondaryInfo} {...props} />
 	);
 };
 
diff --git a/app/containers/AppVersion.tsx b/app/containers/AppVersion.tsx
index 59845f0b6..446f74439 100644
--- a/app/containers/AppVersion.tsx
+++ b/app/containers/AppVersion.tsx
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 
 const AppVersion = React.memo(({ theme }: { theme: TSupportedThemes }) => (
 	<View style={styles.container}>
-		<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>
+		<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>
 			{I18n.t('Version_no', { version: '' })}
 			<Text style={styles.bold}>{getReadableVersion}</Text>
 		</Text>
diff --git a/app/containers/AudioPlayer/PlayButton.tsx b/app/containers/AudioPlayer/PlayButton.tsx
index 16c105e88..6951d249f 100644
--- a/app/containers/AudioPlayer/PlayButton.tsx
+++ b/app/containers/AudioPlayer/PlayButton.tsx
@@ -31,10 +31,10 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo
 		customIconName = 'play-shape-filled';
 	}
 
-	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontPrimary} />;
+	return <CustomIcon name={customIconName} size={24} color={disabled ? colors.buttonBackgroundPrimaryDisabled : colors.buttonFontPrimary} />;
 };
 
-const PlayButton = ({ onPress, disabled = false, audioState }: IButton) => {
+const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.ReactElement => {
 	const { colors } = useTheme();
 
 	return (
diff --git a/app/containers/AudioPlayer/Seek.tsx b/app/containers/AudioPlayer/Seek.tsx
index dfba7c866..2cb9f1d33 100644
--- a/app/containers/AudioPlayer/Seek.tsx
+++ b/app/containers/AudioPlayer/Seek.tsx
@@ -102,7 +102,7 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		} as TextInputProps;
 	}, [timeLabel, duration, currentTime]);
 
-	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled;
+	const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled;
 
 	// TouchableNativeFeedback is avoiding do a long press message when seeking the audio
 	return (
diff --git a/app/containers/Avatar/AvatarWithEdit.tsx b/app/containers/Avatar/AvatarWithEdit.tsx
index 5e0a335ba..892f439c1 100644
--- a/app/containers/Avatar/AvatarWithEdit.tsx
+++ b/app/containers/Avatar/AvatarWithEdit.tsx
@@ -69,12 +69,11 @@ const AvatarWithEdit = ({
 				<Button
 					title={I18n.t('Edit')}
 					type='secondary'
-					backgroundColor={colors.editAndUploadButtonAvatar}
 					onPress={handleEdit}
 					testID='avatar-edit-button'
 					style={styles.editAvatarButton}
 					styleText={styles.textButton}
-					color={colors.titleText}
+					color={colors.fontTitlesLabels}
 					hitSlop={BUTTON_HIT_SLOP}
 				/>
 			) : null}
diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
index 34601df92..4e929feb4 100644
--- a/app/containers/BackgroundContainer/index.tsx
+++ b/app/containers/BackgroundContainer/index.tsx
@@ -36,8 +36,8 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): React.Rea
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
-			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
+			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint }]}>{text}</Text> : null}
+			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
 		</View>
 	);
 };
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index 48ccd1550..396426b61 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -9,7 +9,7 @@ import ActivityIndicator from '../ActivityIndicator';
 interface IButtonProps extends PlatformTouchableProps {
 	title: string;
 	onPress: () => void;
-	type?: string;
+	type?: string; // primary | secondary
 	backgroundColor?: string;
 	loading?: boolean;
 	color?: string;
@@ -34,10 +34,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Button = ({
+const Button: React.FC<IButtonProps> = ({
 	type = 'primary',
-	disabled = false,
-	loading = false,
+	disabled,
+	loading,
 	fontSize = 16,
 	title,
 	onPress,
@@ -46,32 +46,29 @@ const Button = ({
 	style,
 	styleText,
 	...otherProps
-}: IButtonProps): React.ReactElement => {
+}) => {
 	const { colors } = useTheme();
 	const isPrimary = type === 'primary';
+	const isDisabled = disabled || loading;
 
-	let textColor = isPrimary ? colors.buttonText : colors.bodyText;
-	if (color) {
-		textColor = color;
-	}
+	const defaultBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundSecondaryDefault;
+	const disabledBackgroundColor = isPrimary ? colors.buttonBackgroundPrimaryDisabled : colors.buttonBackgroundSecondaryDisabled;
+
+	const resolvedBackgroundColor = backgroundColor || defaultBackgroundColor;
+	const resolvedTextColor = color || (isPrimary ? colors.fontWhite : colors.fontDefault);
+
+	const containerStyle = [
+		styles.container,
+		{ backgroundColor: isDisabled ? disabledBackgroundColor : resolvedBackgroundColor },
+		isDisabled && backgroundColor ? styles.disabled : {},
+		style
+	];
+
+	const textStyle = [styles.text, { color: isDisabled ? colors.fontDisabled : resolvedTextColor, fontSize }, styleText];
 
 	return (
-		<Touchable
-			onPress={onPress}
-			disabled={disabled || loading}
-			style={[
-				styles.container,
-				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.actionTintColor : colors.backgroundColor },
-				disabled && styles.disabled,
-				style
-			]}
-			accessibilityLabel={title}
-			{...otherProps}>
-			{loading ? (
-				<ActivityIndicator color={textColor} />
-			) : (
-				<Text style={[styles.text, { color: textColor, fontSize }, styleText]}>{title}</Text>
-			)}
+		<Touchable onPress={onPress} disabled={isDisabled} style={containerStyle} accessibilityLabel={title} {...otherProps}>
+			{loading ? <ActivityIndicator color={resolvedTextColor} /> : <Text style={textStyle}>{title}</Text>}
 		</Touchable>
 	);
 };
diff --git a/app/containers/CallHeader.tsx b/app/containers/CallHeader.tsx
index 21e70b093..a0ca72520 100644
--- a/app/containers/CallHeader.tsx
+++ b/app/containers/CallHeader.tsx
@@ -30,11 +30,11 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 
 	const handleColors = (enabled: boolean) => {
 		if (calling) {
-			if (enabled) return { button: colors.conferenceCallCallBackButton, icon: colors.gray300 };
-			return { button: 'transparent', icon: colors.gray100 };
+			if (enabled) return { button: colors.buttonBackgroundSecondaryDisabled, icon: colors.strokeExtraDark };
+			return { button: 'transparent', icon: colors.strokeLight };
 		}
-		if (enabled) return { button: colors.conferenceCallEnabledIconBackground, icon: colors.conferenceCallEnabledIcon };
-		return { button: 'transparent', icon: colors.conferenceCallDisabledIcon };
+		if (enabled) return { button: colors.strokeHighlight, icon: colors.surfaceLight };
+		return { button: 'transparent', icon: colors.strokeExtraDark };
 	};
 
 	return (
@@ -79,7 +79,7 @@ function useStyle() {
 		actionSheetHeaderTitle: {
 			fontSize: 14,
 			...sharedStyles.textBold,
-			color: colors.n900
+			color: colors.fontDefault
 		},
 		actionSheetHeaderButtons: { flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' },
 		iconCallContainer: {
@@ -95,7 +95,7 @@ function useStyle() {
 		actionSheetUsername: {
 			fontSize: 16,
 			...sharedStyles.textBold,
-			color: colors.passcodePrimary,
+			color: colors.fontDefault,
 			flexShrink: 1
 		},
 		rowContainer: { flexDirection: 'row' },
diff --git a/app/containers/Check.tsx b/app/containers/Check.tsx
index a931fe678..d97b71f9e 100644
--- a/app/containers/Check.tsx
+++ b/app/containers/Check.tsx
@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
 
 const Check = React.memo(() => {
 	const { theme } = useTheme();
-	return <CustomIcon style={styles.icon} color={themes[theme].tintColor} size={22} name='check' />;
+	return <CustomIcon style={styles.icon} color={themes[theme].badgeBackgroundLevel2} size={22} name='check' />;
 });
 
 export default Check;
diff --git a/app/containers/Chip/index.tsx b/app/containers/Chip/index.tsx
index 44b2a64a7..6c41e8647 100644
--- a/app/containers/Chip/index.tsx
+++ b/app/containers/Chip/index.tsx
@@ -49,23 +49,24 @@ const Chip = ({ avatar, text, onPress, testID, style }: IChip) => {
 			style={({ pressed }) => [
 				styles.pressable,
 				{
-					backgroundColor: pressed ? colors.bannerBackground : colors.auxiliaryBackground
+					backgroundColor: pressed ? colors.surfaceNeutral : colors.surfaceHover
 				},
 				style
 			]}
 			disabled={!onPress}
 			onPress={() => onPress?.()}
 			android_ripple={{
-				color: colors.bannerBackground
-			}}>
+				color: colors.surfaceNeutral
+			}}
+		>
 			<View style={styles.container}>
 				{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{text}
 					</Text>
 				</View>
-				{onPress ? <CustomIcon name='close' size={16} color={colors.auxiliaryTintColor} /> : null}
+				{onPress ? <CustomIcon name='close' size={16} /> : null}
 			</View>
 		</Pressable>
 	);
diff --git a/app/containers/CollapsibleText/index.tsx b/app/containers/CollapsibleText/index.tsx
index 92d23513c..8c6e325cc 100644
--- a/app/containers/CollapsibleText/index.tsx
+++ b/app/containers/CollapsibleText/index.tsx
@@ -39,10 +39,10 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	if (truncatedText && showTruncated) {
 		return (
 			<Text testID={`collapsible-text-truncated-${m}`}>
-				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.bodyText }, ...style]}>
+				<Text accessibilityLabel={truncatedText} style={[styles.text, { color: colors.fontDefault }, ...style]}>
 					{`${truncatedText}... `}
 				</Text>
-				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.actionTintColor }]}>
+				<Text onPress={() => setShowTruncated(false)} style={[styles.textInfo, { color: colors.fontHint }]}>
 					{I18n.t('Show_more')}
 				</Text>
 			</Text>
@@ -52,7 +52,7 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: colors.bodyText, height: !showTruncated ? undefined : 0 }, ...style]}
+			style={[styles.text, { color: colors.fontDefault, height: !showTruncated ? undefined : 0 }, ...style]}
 			testID={`collapsible-text-${m}`}
 			onTextLayout={event => {
 				const { lines } = event.nativeEvent;
@@ -67,13 +67,15 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				} else {
 					setShowTruncated(false);
 				}
-			}}>
+			}}
+		>
 			{m}
 			{truncatedText ? (
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.actionTintColor }]}>
+					style={[styles.textInfo, { color: colors.fontHint }]}
+				>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}
diff --git a/app/containers/CustomIcon/index.tsx b/app/containers/CustomIcon/index.tsx
index bad4c27dd..31ca0cfc1 100644
--- a/app/containers/CustomIcon/index.tsx
+++ b/app/containers/CustomIcon/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
-import { TextProps } from 'react-native';
+import type { IconProps } from 'react-native-vector-icons/Icon';
 
 import { mappedIcons } from './mappedIcons';
+import { useTheme } from '../../theme';
 
 const icoMoonConfig = require('./selection.json');
 
@@ -10,14 +11,15 @@ export const IconSet = createIconSetFromIcoMoon(icoMoonConfig, 'custom', 'custom
 
 export type TIconsName = keyof typeof mappedIcons;
 
-export interface ICustomIcon extends TextProps {
+export interface ICustomIcon extends IconProps {
 	name: TIconsName;
 	size: number;
-	color: string;
+	color?: string;
 }
 
-const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon) => (
-	// @ts-ignore TODO remove this after update @types/react-native to 0.65.0
-	<IconSet name={name} size={size} color={color} style={[{ lineHeight: size }, style]} {...props} />
-);
+const CustomIcon = ({ name, size, color, style, ...props }: ICustomIcon): React.ReactElement => {
+	const { colors } = useTheme();
+	return <IconSet name={name} size={size} color={color || colors.fontDefault} style={[{ lineHeight: size }, style]} {...props} />;
+};
+
 export { CustomIcon };
diff --git a/app/containers/DirectoryItem/index.tsx b/app/containers/DirectoryItem/index.tsx
index f4f555478..785dc9029 100644
--- a/app/containers/DirectoryItem/index.tsx
+++ b/app/containers/DirectoryItem/index.tsx
@@ -33,7 +33,7 @@ const DirectoryItemLabel = React.memo(({ text, theme }: IDirectoryItemLabel) =>
 	if (!text) {
 		return null;
 	}
-	return <Text style={[styles.directoryItemLabel, { color: themes[theme].auxiliaryText }]}>{text}</Text>;
+	return <Text style={[styles.directoryItemLabel, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text>;
 });
 
 const DirectoryItem = ({
@@ -50,20 +50,20 @@ const DirectoryItem = ({
 }: IDirectoryItem): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }} testID={testID}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }} testID={testID}>
 			<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
 				<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
 				<View style={styles.directoryItemTextContainer}>
 					<View style={styles.directoryItemTextTitle}>
 						{type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null}
-						<Text style={[styles.directoryItemName, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.directoryItemName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{title}
 						</Text>
 					</View>
 					{description ? (
 						<MarkdownPreview
 							msg={description}
-							style={[styles.directoryItemUsername, { color: themes[theme].auxiliaryText }]}
+							style={[styles.directoryItemUsername, { color: themes[theme].fontSecondaryInfo }]}
 							numberOfLines={1}
 						/>
 					) : null}
diff --git a/app/containers/DotsLoader/index.tsx b/app/containers/DotsLoader/index.tsx
index 7dd534534..4192fd739 100644
--- a/app/containers/DotsLoader/index.tsx
+++ b/app/containers/DotsLoader/index.tsx
@@ -31,7 +31,7 @@ function Dot({ active }: { active: boolean }): JSX.Element {
 		width: SIZE,
 		borderRadius: SIZE / 2,
 		marginHorizontal: MARGIN,
-		backgroundColor: active ? colors.dotActiveBg : colors.dotBg
+		backgroundColor: active ? colors.badgeBackgroundLevel2 : colors.badgeBackgroundLevel1
 	};
 
 	return <Animated.View style={[style, animatedStyle]} />;
diff --git a/app/containers/EmojiPicker/Footer.tsx b/app/containers/EmojiPicker/Footer.tsx
index 232b139a0..7ca04951e 100644
--- a/app/containers/EmojiPicker/Footer.tsx
+++ b/app/containers/EmojiPicker/Footer.tsx
@@ -18,8 +18,9 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
 					styles.footerButtonsContainer,
 					{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
 				]}
-				testID='emoji-picker-search'>
-				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
+				testID='emoji-picker-search'
+			>
+				<CustomIcon size={24} name='search' />
 			</Pressable>
 
 			<Pressable
@@ -29,8 +30,9 @@ const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.Re
 					styles.footerButtonsContainer,
 					{ backgroundColor: isIOS && pressed ? colors.buttonBackgroundSecondaryPress : 'transparent' }
 				]}
-				testID='emoji-picker-backspace'>
-				<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
+				testID='emoji-picker-backspace'
+			>
+				<CustomIcon size={24} name='backspace' />
 			</Pressable>
 		</View>
 	);
diff --git a/app/containers/FormContainer.tsx b/app/containers/FormContainer.tsx
index 36af98164..2e0afd496 100644
--- a/app/containers/FormContainer.tsx
+++ b/app/containers/FormContainer.tsx
@@ -31,16 +31,18 @@ const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: themes[theme].backgroundColor }}
+			style={{ backgroundColor: themes[theme].surfaceRoom }}
 			contentContainerStyle={sharedStyles.container}
-			keyboardVerticalOffset={128}>
+			keyboardVerticalOffset={128}
+		>
 			<StatusBar />
 			<ScrollView
 				style={sharedStyles.container}
 				contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
 				{...scrollPersistTaps}
-				{...props}>
-				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
+				{...props}
+			>
+				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].surfaceRoom }}>
 					{children}
 					<AppVersion theme={theme} />
 				</SafeAreaView>
diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx
index b9645dcbd..6bdeab8c7 100644
--- a/app/containers/HeaderButton/Common.tsx
+++ b/app/containers/HeaderButton/Common.tsx
@@ -5,19 +5,21 @@ import I18n from '../../i18n';
 import { isIOS } from '../../lib/methods/helpers';
 import Container from './HeaderButtonContainer';
 import Item, { IHeaderButtonItem } from './HeaderButtonItem';
+import { useTheme } from '../../theme';
 
 interface IHeaderButtonCommon extends IHeaderButtonItem {
 	navigation?: any; // TODO: Evaluate proper type
 }
 
 // Left
-export const Drawer = React.memo(
-	({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => (
+export const Drawer = ({ navigation, testID, onPress = () => navigation?.toggleDrawer(), ...props }: IHeaderButtonCommon) => {
+	const { colors } = useTheme();
+	return (
 		<Container left>
-			<Item iconName='hamburguer' onPress={onPress} testID={testID} {...props} />
+			<Item iconName='hamburguer' onPress={onPress} testID={testID} color={colors.fontDefault} {...props} />
 		</Container>
-	)
-);
+	);
+};
 
 export const CloseModal = React.memo(({ testID, onPress, ...props }: IHeaderButtonCommon) => {
 	const { dispatch } = useNavigation();
diff --git a/app/containers/HeaderButton/HeaderButtonItem.tsx b/app/containers/HeaderButton/HeaderButtonItem.tsx
index eb5d02a18..c4b51452a 100644
--- a/app/containers/HeaderButton/HeaderButtonItem.tsx
+++ b/app/containers/HeaderButton/HeaderButtonItem.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { Platform, StyleSheet, Text } from 'react-native';
 import { PlatformPressable } from '@react-navigation/elements';
 
-import { CustomIcon, ICustomIcon, TIconsName } from '../CustomIcon';
+import { CustomIcon, TIconsName } from '../CustomIcon';
 import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 
-export interface IHeaderButtonItem extends Omit<ICustomIcon, 'name' | 'size' | 'color'> {
+export interface IHeaderButtonItem {
 	title?: string;
 	iconName?: TIconsName;
 	onPress?: <T>(arg: T) => void;
@@ -56,9 +56,9 @@ const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...pro
 			]}>
 			<>
 				{iconName ? (
-					<CustomIcon name={iconName} size={24} color={color || colors.headerTintColor} {...props} />
+					<CustomIcon name={iconName} size={24} color={color} {...props} />
 				) : (
-					<Text style={[styles.title, { color: color || colors.headerTintColor }]} {...props}>
+					<Text style={[styles.title, { color: color || colors.fontDefault }]} {...props}>
 						{title}
 					</Text>
 				)}
diff --git a/app/containers/HeaderButton/HeaderButtons.stories.tsx b/app/containers/HeaderButton/HeaderButtons.stories.tsx
index 5a0db9a44..60a717259 100644
--- a/app/containers/HeaderButton/HeaderButtons.stories.tsx
+++ b/app/containers/HeaderButton/HeaderButtons.stories.tsx
@@ -33,7 +33,7 @@ const HeaderExample = ({ left, right, colors, title = '' }: IHeader) => (
 		title={title}
 		headerLeft={left}
 		headerRight={right}
-		headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.headerBackground }} />}
+		headerBackground={() => <HeaderBackground style={{ backgroundColor: colors?.surfaceNeutral }} />}
 	/>
 );
 
@@ -120,7 +120,7 @@ const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
 			<HeaderExample
 				left={() => (
 					<HeaderButton.Container left>
-						<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />} />
+						<HeaderButton.Drawer badge={() => <HeaderButton.BadgeWarn color={colors[theme].buttonBackgroundDangerDefault} />} />
 						<HeaderButton.Item iconName='threads' />
 					</HeaderButton.Container>
 				)}
diff --git a/app/containers/ImageViewer/ImageViewer.tsx b/app/containers/ImageViewer/ImageViewer.tsx
index bb0141b3c..c0ff41457 100644
--- a/app/containers/ImageViewer/ImageViewer.tsx
+++ b/app/containers/ImageViewer/ImageViewer.tsx
@@ -114,7 +114,7 @@ export const ImageViewer = ({ uri = '', imageComponentType, width, height, ...pr
 	const { colors } = useTheme();
 
 	return (
-		<View style={[styles.flex, { width, height, backgroundColor: colors.previewBackground }]}>
+		<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceRoom }]}>
 			<GestureDetector gesture={gesture}>
 				<Animated.View onLayout={onLayout} style={[styles.flex, style]}>
 					<Component
diff --git a/app/containers/InAppNotification/IncomingCallNotification/index.tsx b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
index f43a90c62..a552e4d4a 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/index.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
@@ -10,7 +10,6 @@ import i18n from '../../../i18n';
 import { useAppSelector } from '../../../lib/hooks';
 import { useEndpointData } from '../../../lib/hooks/useEndpointData';
 import { hideNotification } from '../../../lib/methods/helpers/notifications';
-import { useTheme } from '../../../theme';
 import { CustomIcon } from '../../CustomIcon';
 import { CallHeader } from '../../CallHeader';
 import { useStyle } from './style';
@@ -41,7 +40,6 @@ const IncomingCallHeader = React.memo(
 		const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 		const styles = useStyle();
 		const insets = useSafeAreaInsets();
-		const { colors } = useTheme();
 
 		return (
 			<View
@@ -51,7 +49,8 @@ const IncomingCallHeader = React.memo(
 					{
 						marginTop: insets.top
 					}
-				]}>
+				]}
+			>
 				<CallHeader
 					title={i18n.t('Incoming_call_from')}
 					cam={cam}
@@ -70,8 +69,9 @@ const IncomingCallHeader = React.memo(
 							setAudio(!audio);
 							hideNotification();
 						}}
-						style={styles.closeButton}>
-						<CustomIcon name='close' size={20} color={colors.gray300} />
+						style={styles.closeButton}
+					>
+						<CustomIcon name='close' size={20} />
 					</Touchable>
 					<Touchable
 						hitSlop={BUTTON_HIT_SLOP}
@@ -80,7 +80,8 @@ const IncomingCallHeader = React.memo(
 							hideNotification();
 							dispatch(cancelCall({ callId }));
 						}}
-						style={styles.cancelButton}>
+						style={styles.cancelButton}
+					>
 						<Text style={styles.buttonText}>{i18n.t('decline')}</Text>
 					</Touchable>
 					<Touchable
@@ -90,7 +91,8 @@ const IncomingCallHeader = React.memo(
 							hideNotification();
 							dispatch(acceptCall({ callId }));
 						}}
-						style={styles.acceptButton}>
+						style={styles.acceptButton}
+					>
 						<Text style={styles.buttonText}>{i18n.t('accept')}</Text>
 					</Touchable>
 				</View>
diff --git a/app/containers/InAppNotification/IncomingCallNotification/style.tsx b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
index 81cfcead4..4b3319afa 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/style.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
@@ -13,8 +13,8 @@ export const useStyle = () => {
 			marginHorizontal: 10,
 			borderWidth: StyleSheet.hairlineWidth,
 			borderRadius: 4,
-			backgroundColor: colors.focusedBackground,
-			borderColor: colors.separatorColor,
+			backgroundColor: colors.surfaceLight,
+			borderColor: colors.strokeLight,
 			flex: 1
 		},
 		small: {
@@ -26,7 +26,7 @@ export const useStyle = () => {
 			marginTop: 12
 		},
 		closeButton: {
-			backgroundColor: colors.passcodeButtonActive,
+			backgroundColor: colors.buttonBackgroundSecondaryDefault,
 			marginRight: 8,
 			alignItems: 'center',
 			justifyContent: 'center',
@@ -36,7 +36,7 @@ export const useStyle = () => {
 		},
 		cancelButton: {
 			borderRadius: 4,
-			backgroundColor: colors.cancelCallButton,
+			backgroundColor: colors.buttonBackgroundDangerDefault,
 			marginRight: 8,
 			flex: 2,
 			alignItems: 'center',
@@ -48,7 +48,7 @@ export const useStyle = () => {
 		},
 		acceptButton: {
 			borderRadius: 4,
-			backgroundColor: colors.acceptCallButton,
+			backgroundColor: colors.buttonBackgroundSuccessDefault,
 			flex: 2,
 			alignItems: 'center',
 			justifyContent: 'center'
diff --git a/app/containers/InAppNotification/NotifierComponent.tsx b/app/containers/InAppNotification/NotifierComponent.tsx
index 8184cdadd..d1c81bebe 100644
--- a/app/containers/InAppNotification/NotifierComponent.tsx
+++ b/app/containers/InAppNotification/NotifierComponent.tsx
@@ -103,8 +103,8 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				styles.container,
 				isMasterDetail && styles.small,
 				{
-					backgroundColor: themes[theme].focusedBackground,
-					borderColor: themes[theme].separatorColor,
+					backgroundColor: themes[theme].surfaceLight,
+					borderColor: themes[theme].strokeLight,
 					marginTop: insets.top
 				}
 			]}>
@@ -117,17 +117,17 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 				<>
 					<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
 					<View style={styles.inner}>
-						<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{title}
 						</Text>
-						<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.message, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{text}
 						</Text>
 					</View>
 				</>
 			</Touchable>
 			<Touchable onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP} background={Touchable.SelectableBackgroundBorderless()}>
-				<CustomIcon name='close' size={20} color={themes[theme].titleText} style={styles.close} />
+				<CustomIcon name='close' size={20} style={styles.close} />
 			</Touchable>
 		</View>
 	);
diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
index 4927d9c67..5d22869c5 100644
--- a/app/containers/List/ListHeader.tsx
+++ b/app/containers/List/ListHeader.tsx
@@ -28,7 +28,7 @@ const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) =>
 
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
+			<Text style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={1}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>
diff --git a/app/containers/List/ListIcon.tsx b/app/containers/List/ListIcon.tsx
index 114d588d8..3e88f4be9 100644
--- a/app/containers/List/ListIcon.tsx
+++ b/app/containers/List/ListIcon.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { themes } from '../../lib/constants';
 import { CustomIcon, TIconsName } from '../CustomIcon';
-import { useTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
 interface IListIcon {
 	name: TIconsName;
-	color?: string | null;
+	color?: string;
 	style?: StyleProp<ViewStyle>;
 	testID?: string;
 	size?: number;
@@ -21,15 +19,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ListIcon = React.memo(({ name, color, style, testID, size }: IListIcon) => {
-	const { theme } = useTheme();
-
-	return (
-		<View style={[styles.icon, style]}>
-			<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={size ?? ICON_SIZE} testID={testID} />
-		</View>
-	);
-});
+const ListIcon = ({ name, color, style, testID, size }: IListIcon): React.ReactElement => (
+	<View style={[styles.icon, style]}>
+		<CustomIcon name={name} color={color} size={size ?? ICON_SIZE} testID={testID} />
+	</View>
+);
 
 ListIcon.displayName = 'List.Icon';
 
diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx
index 1a8dc8910..98050d16b 100644
--- a/app/containers/List/ListInfo.tsx
+++ b/app/containers/List/ListInfo.tsx
@@ -27,7 +27,7 @@ const ListInfo = React.memo(({ info, translateInfo = true }: IListInfo) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+			<Text style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</Text>
 		</View>
 	);
 });
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index 6c58bab13..80026daf2 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -96,15 +96,15 @@ const Content = React.memo(
 				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 				<View style={styles.textContainer}>
 					<View style={styles.textAlertContainer}>
-						<Text style={[styles.title, styleTitle, { color: color || themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.title, styleTitle, { color: color || themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{translateTitle && title ? I18n.t(title) : title}
 						</Text>
 						{alert ? (
-							<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].dangerColor} style={styles.alertIcon} />
+							<CustomIcon name='info' size={ICON_SIZE} color={themes[theme].buttonBackgroundDangerDefault} style={styles.alertIcon} />
 						) : null}
 					</View>
 					{subtitle ? (
-						<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+						<Text style={[styles.subtitle, { color: themes[theme].fontSecondaryInfo }]} numberOfLines={1}>
 							{translateSubtitle ? I18n.t(subtitle) : subtitle}
 						</Text>
 					) : null}
@@ -135,7 +135,7 @@ interface IListItemButton {
 const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => (
 	<Touch
 		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
+		style={{ backgroundColor: backgroundColor || themes[props.theme].surfaceRoom }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}>
 		<Content {...props} />
@@ -155,7 +155,7 @@ const ListItem = React.memo(({ ...props }: IListItem) => {
 		return <Button {...props} theme={theme} onPress={onPress} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || themes[theme].backgroundColor }}>
+		<View style={{ backgroundColor: props.backgroundColor || themes[theme].surfaceRoom }}>
 			<Content {...props} theme={theme} />
 		</View>
 	);
diff --git a/app/containers/List/ListSeparator.tsx b/app/containers/List/ListSeparator.tsx
index d0e8d1cdd..2f2c36496 100644
--- a/app/containers/List/ListSeparator.tsx
+++ b/app/containers/List/ListSeparator.tsx
@@ -17,7 +17,7 @@ interface IListSeparator {
 const ListSeparator = React.memo(({ style }: IListSeparator) => {
 	const { theme } = useTheme();
 
-	return <View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />;
+	return <View style={[styles.separator, style, { backgroundColor: themes[theme].strokeLight }]} />;
 });
 
 ListSeparator.displayName = 'List.Separator';
diff --git a/app/containers/LoginServices/ButtonService.tsx b/app/containers/LoginServices/ButtonService.tsx
index 124490e0f..cdcb7b5de 100644
--- a/app/containers/LoginServices/ButtonService.tsx
+++ b/app/containers/LoginServices/ButtonService.tsx
@@ -16,12 +16,11 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
 			onPress={onPress}
 			style={[styles.serviceButton, { backgroundColor }]}
 			activeOpacity={0.5}
-			underlayColor={colors.buttonText}>
+			underlayColor={colors.fontWhite}
+		>
 			<View style={styles.serviceButtonContainer}>
-				{authType === 'oauth' || authType === 'apple' ? (
-					<CustomIcon name={icon} size={24} color={colors.titleText} style={styles.serviceIcon} />
-				) : null}
-				<Text style={[styles.serviceText, { color: colors.titleText }]}>{buttonText}</Text>
+				{authType === 'oauth' || authType === 'apple' ? <CustomIcon name={icon} size={24} style={styles.serviceIcon} /> : null}
+				<Text style={[styles.serviceText, { color: colors.fontTitlesLabels }]}>{buttonText}</Text>
 			</View>
 		</Touch>
 	);
diff --git a/app/containers/LoginServices/LoginServices.stories.tsx b/app/containers/LoginServices/LoginServices.stories.tsx
index 671de5b83..6778fa52b 100644
--- a/app/containers/LoginServices/LoginServices.stories.tsx
+++ b/app/containers/LoginServices/LoginServices.stories.tsx
@@ -84,7 +84,7 @@ export const ServiceList = () => (
 				<ButtonService
 					key={service._id}
 					onPress={() => {}}
-					backgroundColor={colors[theme].chatComponentBackground}
+					backgroundColor={colors[theme].surfaceTint}
 					buttonText={buttonText}
 					icon={icon}
 					name={service.name}
diff --git a/app/containers/LoginServices/Service.tsx b/app/containers/LoginServices/Service.tsx
index 3e5b74c56..028bb7736 100644
--- a/app/containers/LoginServices/Service.tsx
+++ b/app/containers/LoginServices/Service.tsx
@@ -86,7 +86,7 @@ const Service = React.memo(
 			);
 		}
 
-		const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.chatComponentBackground;
+		const backgroundColor = isSaml && service.buttonColor ? service.buttonColor : colors.buttonBackgroundSecondaryDefault;
 
 		return (
 			<ButtonService
diff --git a/app/containers/LoginServices/ServicesSeparator.tsx b/app/containers/LoginServices/ServicesSeparator.tsx
index 17727ff11..ef67f0184 100644
--- a/app/containers/LoginServices/ServicesSeparator.tsx
+++ b/app/containers/LoginServices/ServicesSeparator.tsx
@@ -20,7 +20,7 @@ const ServicesSeparator = ({ services, separator, collapsed, onPress }: IService
 					type='secondary'
 					onPress={onPress}
 					style={styles.options}
-					color={colors.actionTintColor}
+					color={colors.fontHint}
 				/>
 				<OrSeparator theme={theme} />
 			</>
diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
index f9abdfe85..5a55364b2 100644
--- a/app/containers/MessageActions/Header.tsx
+++ b/app/containers/MessageActions/Header.tsx
@@ -65,7 +65,8 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
 	<Touch
 		testID={`message-actions-emoji-${item}`}
 		onPress={() => onReaction({ emoji: item })}
-		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
+	>
 		{typeof item === 'string' ? (
 			<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text>
 		) : (
@@ -78,8 +79,9 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 	<Touch
 		testID='add-reaction'
 		onPress={(param: any) => onReaction(param)}
-		style={[styles.headerItem, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-		<CustomIcon name='reaction-add' size={24} color={themes[theme].bodyText} />
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
+	>
+		<CustomIcon name='reaction-add' size={24} />
 	</Touch>
 );
 
@@ -106,12 +108,12 @@ const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader)
 	}
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme].surfaceLight }]}>
 			<FlatList
 				data={frequentlyUsed.slice(0, quantity)}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: themes[theme].surfaceLight }}
 				keyExtractor={item => (typeof item === 'string' ? item : item.name)}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}
diff --git a/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
index b59178de7..a8f085f93 100644
--- a/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
+++ b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
@@ -118,9 +118,9 @@ exports[`MessageComposer Audio tap record 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -312,9 +312,9 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -423,9 +423,9 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -628,8 +628,8 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
                     "fontWeight": "400",
                     "textAlign": "left",
                   },
-                  {
-                    "color": "#2f343d",
+                  Object {
+                    "color": "#2F343D",
                   },
                   {
                     "backgroundColor": "transparent",
@@ -729,9 +729,9 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -840,9 +840,9 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -1046,8 +1046,8 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                     "fontWeight": "400",
                     "textAlign": "left",
                   },
-                  {
-                    "color": "#2f343d",
+                  Object {
+                    "color": "#2F343D",
                   },
                   {
                     "backgroundColor": "transparent",
@@ -1221,8 +1221,8 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                     "fontWeight": "400",
                     "textAlign": "left",
                   },
-                  {
-                    "color": "#2f343d",
+                  Object {
+                    "color": "#2F343D",
                   },
                   {
                     "backgroundColor": "transparent",
@@ -1322,9 +1322,9 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -1433,9 +1433,9 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -1639,8 +1639,8 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                     "fontWeight": "400",
                     "textAlign": "left",
                   },
-                  {
-                    "color": "#2f343d",
+                  Object {
+                    "color": "#2F343D",
                   },
                   {
                     "backgroundColor": "transparent",
@@ -1814,8 +1814,8 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                     "fontWeight": "400",
                     "textAlign": "left",
                   },
-                  {
-                    "color": "#2f343d",
+                  Object {
+                    "color": "#2F343D",
                   },
                   {
                     "backgroundColor": "transparent",
@@ -1950,9 +1950,9 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2022,9 +2022,9 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2094,9 +2094,9 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2166,9 +2166,9 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2238,9 +2238,9 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2310,9 +2310,9 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2382,9 +2382,9 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2521,9 +2521,9 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2593,9 +2593,9 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2665,9 +2665,9 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2737,9 +2737,9 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2809,9 +2809,9 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2881,9 +2881,9 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -2953,9 +2953,9 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3092,9 +3092,9 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3164,9 +3164,9 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3236,9 +3236,9 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3308,9 +3308,9 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3380,9 +3380,9 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3452,9 +3452,9 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3524,9 +3524,9 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3663,9 +3663,9 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3735,9 +3735,9 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3807,9 +3807,9 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3879,9 +3879,9 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -3951,9 +3951,9 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4023,9 +4023,9 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4095,9 +4095,9 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4234,9 +4234,9 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4306,9 +4306,9 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4378,9 +4378,9 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4450,9 +4450,9 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4522,9 +4522,9 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4594,9 +4594,9 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4666,9 +4666,9 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4805,9 +4805,9 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4877,9 +4877,9 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -4949,9 +4949,9 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5021,9 +5021,9 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5093,9 +5093,9 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5165,9 +5165,9 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5237,9 +5237,9 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5376,9 +5376,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5448,9 +5448,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5520,9 +5520,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5592,9 +5592,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5664,9 +5664,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5736,9 +5736,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5808,9 +5808,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -5947,9 +5947,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6019,9 +6019,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6091,9 +6091,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6163,9 +6163,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6235,9 +6235,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6307,9 +6307,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6379,9 +6379,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6518,9 +6518,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6590,9 +6590,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6662,9 +6662,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6734,9 +6734,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6806,9 +6806,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6878,9 +6878,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -6950,9 +6950,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7089,9 +7089,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7161,9 +7161,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7233,9 +7233,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7305,9 +7305,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7377,9 +7377,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7449,9 +7449,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7521,9 +7521,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7660,9 +7660,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7732,9 +7732,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7804,9 +7804,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7876,9 +7876,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -7948,9 +7948,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8020,9 +8020,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8092,9 +8092,9 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8231,9 +8231,9 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8303,9 +8303,9 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8375,9 +8375,9 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8447,9 +8447,9 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8519,9 +8519,9 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8658,9 +8658,9 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8730,9 +8730,9 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8802,9 +8802,9 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -8942,9 +8942,9 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -9014,9 +9014,9 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -9086,9 +9086,9 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -9158,9 +9158,9 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -9230,9 +9230,9 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -9667,7 +9667,32 @@ exports[`MessageComposer renders correctly 1`] = `
             accessibilityRole="button"
             accessible={true}
           >
-            <Text />
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#2F343D",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
           </View>
         </RNGestureHandlerButton>
       </View>
@@ -9753,7 +9778,32 @@ exports[`MessageComposer renders correctly 1`] = `
             accessibilityRole="button"
             accessible={true}
           >
-            <Text />
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#2F343D",
+                    "fontSize": 24,
+                  },
+                  Array [
+                    Object {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  Object {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  Object {},
+                ]
+              }
+            >
+              
+            </Text>
           </View>
         </RNGestureHandlerButton>
       </View>
@@ -9837,9 +9887,9 @@ exports[`MessageComposer renders correctly with audio recorder disabled 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -9987,9 +10037,9 @@ exports[`MessageComposer renders correctly with audio recorder disabled and with
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -10137,9 +10187,9 @@ exports[`MessageComposer renders correctly without audio upload permissions 1`]
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -10322,9 +10372,9 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -10394,9 +10444,9 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -10466,9 +10516,9 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -10538,9 +10588,9 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -10610,9 +10660,9 @@ exports[`MessageComposer renders toolbar when focused 1`] = `
             allowFontScaling={false}
             selectable={false}
             style={
-              [
-                {
-                  "color": "#6C727A",
+              Array [
+                Object {
+                  "color": "#2F343D",
                   "fontSize": 24,
                 },
                 [
@@ -10714,9 +10764,9 @@ exports[`MessageComposer send message 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
@@ -10825,9 +10875,9 @@ exports[`MessageComposer send message 1`] = `
               allowFontScaling={false}
               selectable={false}
               style={
-                [
-                  {
-                    "color": "#6C727A",
+                Array [
+                  Object {
+                    "color": "#2F343D",
                     "fontSize": 24,
                   },
                   [
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
index 989556b08..4adb5ab67 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
@@ -9,7 +9,7 @@ import { NO_CANNED_RESPONSES } from '../../constants';
 import { useStyle } from './styles';
 
 export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCannedResponse }) => {
-	const [styles, colors] = useStyle();
+	const [styles] = useStyle();
 	if (item.id === NO_CANNED_RESPONSES) {
 		return (
 			<View style={styles.canned}>
@@ -17,7 +17,7 @@ export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCanned
 					<Text style={styles.cannedTitleText}>
 						{I18n.t('No_match_found')} <Text style={sharedStyles.textSemibold}>{I18n.t('Check_canned_responses')}</Text>
 					</Text>
-					<CustomIcon name='chevron-right' size={24} color={colors.fontHint} />
+					<CustomIcon name='chevron-right' size={24} />
 				</View>
 			</View>
 		);
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
index 3a09d3eed..2cf5dd278 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
@@ -19,7 +19,7 @@ export const AutocompletePreview = ({ item, onPress }: IAutocompleteItemProps) =
 			item.preview.type === 'image' ? (
 				<FastImage style={styles.previewImage} source={{ uri: item.preview.value }} resizeMode={FastImage.resizeMode.cover} />
 			) : (
-				<CustomIcon name='attach' size={36} color={colors.fontInfo} />
+				<CustomIcon name='attach' size={36} />
 			);
 	}
 
diff --git a/app/containers/MessageComposer/components/Buttons/BaseButton.tsx b/app/containers/MessageComposer/components/Buttons/BaseButton.tsx
index 785957071..3c7e741cb 100644
--- a/app/containers/MessageComposer/components/Buttons/BaseButton.tsx
+++ b/app/containers/MessageComposer/components/Buttons/BaseButton.tsx
@@ -4,7 +4,6 @@ import { View, StyleSheet } from 'react-native';
 
 import I18n from '../../../../i18n';
 import { CustomIcon, TIconsName } from '../../../CustomIcon';
-import { useTheme } from '../../../../theme';
 
 export interface IBaseButton {
 	testID: string;
@@ -21,16 +20,13 @@ export const hitSlop = {
 	left: 16
 };
 
-export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => {
-	const { colors } = useTheme();
-	return (
-		<BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}>
-			<View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'>
-				<CustomIcon name={icon} size={24} color={color || colors.fontSecondaryInfo} />
-			</View>
-		</BorderlessButton>
-	);
-};
+export const BaseButton = ({ accessibilityLabel, icon, color, testID, onPress }: IBaseButton) => (
+	<BorderlessButton style={styles.button} onPress={() => onPress()} testID={testID} hitSlop={hitSlop}>
+		<View accessible accessibilityLabel={I18n.t(accessibilityLabel)} accessibilityRole='button'>
+			<CustomIcon name={icon} size={24} color={color} />
+		</View>
+	</BorderlessButton>
+);
 
 const styles = StyleSheet.create({
 	button: {
diff --git a/app/containers/MessageComposer/components/EmojiSearchbar.tsx b/app/containers/MessageComposer/components/EmojiSearchbar.tsx
index 99848c0d6..51905db2b 100644
--- a/app/containers/MessageComposer/components/EmojiSearchbar.tsx
+++ b/app/containers/MessageComposer/components/EmojiSearchbar.tsx
@@ -64,8 +64,9 @@ export const EmojiSearchbar = (): React.ReactElement | null => {
 					style={({ pressed }: { pressed: boolean }) => [styles.backButton, { opacity: pressed ? 0.7 : 1 }]}
 					onPress={openEmojiKeyboard}
 					hitSlop={BUTTON_HIT_SLOP}
-					testID='openback-emoji-keyboard'>
-					<CustomIcon name='chevron-left' size={24} color={colors.fontHint} />
+					testID='openback-emoji-keyboard'
+				>
+					<CustomIcon name='chevron-left' size={24} />
 				</Pressable>
 				<View style={styles.inputContainer}>
 					<EmojiSearch onBlur={closeEmojiKeyboard} onChangeText={handleTextChange} />
diff --git a/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx b/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
index 0ec27650e..f93a3208d 100644
--- a/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
+++ b/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
@@ -95,16 +95,21 @@ export const RecordAudio = (): ReactElement | null => {
 		try {
 			if (!rid) return;
 			setRecordingAudio(false);
-			const fileURI = recordingRef.current?.getURI();
-			const fileData = await getInfoAsync(fileURI as string);
-			const fileInfo = {
+			const fileURI = recordingRef.current?.getURI() as string;
+			const fileData = await getInfoAsync(fileURI);
+
+			if (!fileData.exists) {
+				return;
+			}
+
+			const fileInfo: IUpload = {
+				rid,
 				name: `${Date.now()}${RECORDING_EXTENSION}`,
-				mime: 'audio/aac',
 				type: 'audio/aac',
 				store: 'Uploads',
 				path: fileURI,
-				size: fileData.exists ? fileData.size : null
-			} as IUpload;
+				size: fileData.size
+			};
 
 			if (fileInfo) {
 				if (permissionToUpload) {
diff --git a/app/containers/MessageComposer/components/SendThreadToChannel.tsx b/app/containers/MessageComposer/components/SendThreadToChannel.tsx
index c090e5d16..060113bcf 100644
--- a/app/containers/MessageComposer/components/SendThreadToChannel.tsx
+++ b/app/containers/MessageComposer/components/SendThreadToChannel.tsx
@@ -75,9 +75,9 @@ export const SendThreadToChannel = (): React.ReactElement | null => {
 				testID={alsoSendThreadToChannel ? 'send-to-channel-checked' : 'send-to-channel-unchecked'}
 				name={alsoSendThreadToChannel ? 'checkbox-checked' : 'checkbox-unchecked'}
 				size={24}
-				color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.strokeDark}
+				color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.fontDefault}
 			/>
-			<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
+			<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
 		</TouchableWithoutFeedback>
 	);
 };
diff --git a/app/containers/OrSeparator.tsx b/app/containers/OrSeparator.tsx
index 0912f0add..2c505b425 100644
--- a/app/containers/OrSeparator.tsx
+++ b/app/containers/OrSeparator.tsx
@@ -29,8 +29,8 @@ interface IOrSeparator {
 }
 
 const OrSeparator = React.memo(({ theme }: IOrSeparator) => {
-	const line = { backgroundColor: themes[theme].borderColor };
-	const text = { color: themes[theme].auxiliaryText };
+	const line = { backgroundColor: themes[theme].strokeLight };
+	const text = { color: themes[theme].fontSecondaryInfo };
 	return (
 		<View style={styles.container}>
 			<View style={[styles.line, line]} />
diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx
index 00cde8cda..1e6fbd5e2 100644
--- a/app/containers/Passcode/Base/Button.tsx
+++ b/app/containers/Passcode/Base/Button.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Text, StyleProp, ViewStyle } from 'react-native';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import Touch from '../../Touch';
 import { CustomIcon, TIconsName } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
@@ -16,21 +15,22 @@ interface IPasscodeButton {
 }
 
 const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	const press = () => onPress && onPress(text);
 
 	return (
 		<Touch
 			style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
-			underlayColor={themes[theme].passcodeButtonActive}
-			rippleColor={themes[theme].passcodeButtonActive}
+			underlayColor={colors.buttonBackgroundSecondaryDefault}
+			rippleColor={colors.buttonBackgroundSecondaryPress}
 			enabled={!disabled}
-			onPress={press}>
+			onPress={press}
+		>
 			{icon ? (
-				<CustomIcon name={icon} size={36} color={themes[theme].passcodePrimary} />
+				<CustomIcon name={icon} size={36} />
 			) : (
-				<Text style={[styles.buttonText, { color: themes[theme].passcodePrimary }]}>{text}</Text>
+				<Text style={[styles.buttonText, { color: colors.fontDefault }]}>{text}</Text>
 			)}
 		</Touch>
 	);
diff --git a/app/containers/Passcode/Base/Dots.tsx b/app/containers/Passcode/Base/Dots.tsx
index 378f78b0e..b5c3c20e3 100644
--- a/app/containers/Passcode/Base/Dots.tsx
+++ b/app/containers/Passcode/Base/Dots.tsx
@@ -3,7 +3,6 @@ import { View } from 'react-native';
 import range from 'lodash/range';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 const SIZE_EMPTY = 12;
@@ -15,7 +14,7 @@ interface IPasscodeDots {
 }
 
 const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<View style={styles.dotsContainer}>
@@ -25,9 +24,9 @@ const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
 				const width = lengthSup ? SIZE_FULL : SIZE_EMPTY;
 				let backgroundColor = '';
 				if (lengthSup && passcode.length > 0) {
-					backgroundColor = themes[theme].passcodeDotFull;
+					backgroundColor = colors.strokeDark;
 				} else {
-					backgroundColor = themes[theme].passcodeDotEmpty;
+					backgroundColor = colors.strokeLight;
 				}
 				const borderRadius = lengthSup ? SIZE_FULL / 2 : SIZE_EMPTY / 2;
 				const marginRight = lengthSup ? 10 - (SIZE_FULL - SIZE_EMPTY) / 2 : 10;
diff --git a/app/containers/Passcode/Base/LockIcon.tsx b/app/containers/Passcode/Base/LockIcon.tsx
index 6c248d41c..cbb640ef2 100644
--- a/app/containers/Passcode/Base/LockIcon.tsx
+++ b/app/containers/Passcode/Base/LockIcon.tsx
@@ -3,20 +3,19 @@ import { View } from 'react-native';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { CustomIcon } from '../../CustomIcon';
 import { useTheme } from '../../../theme';
 
-const LockIcon = React.memo(() => {
-	const { theme } = useTheme();
+const LockIcon = () => {
+	const { colors } = useTheme();
 
 	return (
 		<Row style={styles.row}>
 			<View style={styles.iconView}>
-				<CustomIcon name='auth' size={40} color={themes[theme].passcodeLockIcon} />
+				<CustomIcon name='auth' size={40} color={colors.fontSecondaryInfo} />
 			</View>
 		</Row>
 	);
-});
+};
 
 export default LockIcon;
diff --git a/app/containers/Passcode/Base/Locked.tsx b/app/containers/Passcode/Base/Locked.tsx
index 43f5c7c30..b88f131c4 100644
--- a/app/containers/Passcode/Base/Locked.tsx
+++ b/app/containers/Passcode/Base/Locked.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Grid } from 'react-native-easy-grid';
 
-import { themes } from '../../../lib/constants';
 import { resetAttempts } from '../../../lib/methods/helpers/localAuthentication';
 import { TYPE } from '../constants';
 import { getDiff, getLockedUntil } from '../utils';
@@ -50,7 +49,7 @@ const Timer = React.memo(({ time, setStatus }: IPasscodeTimer) => {
 
 const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
 	const [lockedUntil, setLockedUntil] = useState<Date | null>(null);
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	const readItemFromStorage = async () => {
 		const l = await getLockedUntil();
@@ -62,7 +61,7 @@ const Locked = React.memo(({ setStatus }: IPasscodeLocked) => {
 	}, []);
 
 	return (
-		<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
+		<Grid style={[styles.grid, { backgroundColor: colors.strokeExtraLight }]}>
 			<LockIcon />
 			<Title text={I18n.t('Passcode_app_locked_title')} />
 			<Timer time={lockedUntil} setStatus={setStatus} />
diff --git a/app/containers/Passcode/Base/Subtitle.tsx b/app/containers/Passcode/Base/Subtitle.tsx
index e98615d45..4dcc05c4e 100644
--- a/app/containers/Passcode/Base/Subtitle.tsx
+++ b/app/containers/Passcode/Base/Subtitle.tsx
@@ -16,7 +16,7 @@ const Subtitle = React.memo(({ text }: IPasscodeSubtitle) => {
 	return (
 		<Row style={styles.row}>
 			<View style={styles.subtitleView}>
-				<Text style={[styles.textSubtitle, { color: themes[theme].passcodeSecondary }]}>{text}</Text>
+				<Text style={[styles.textSubtitle, { color: themes[theme].fontDanger }]}>{text}</Text>
 			</View>
 		</Row>
 	);
diff --git a/app/containers/Passcode/Base/Title.tsx b/app/containers/Passcode/Base/Title.tsx
index 8b8aa9578..0d5e1b2be 100644
--- a/app/containers/Passcode/Base/Title.tsx
+++ b/app/containers/Passcode/Base/Title.tsx
@@ -3,7 +3,6 @@ import { Text, View } from 'react-native';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
-import { themes } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 
 interface IPasscodeTitle {
@@ -11,12 +10,12 @@ interface IPasscodeTitle {
 }
 
 const Title = React.memo(({ text }: IPasscodeTitle) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<Row style={styles.row}>
 			<View style={styles.titleView}>
-				<Text style={[styles.textTitle, { color: themes[theme].passcodePrimary }]}>{text}</Text>
+				<Text style={[styles.textTitle, { color: colors.fontTitlesLabels }]}>{text}</Text>
 			</View>
 		</Row>
 	);
diff --git a/app/containers/Passcode/Base/index.tsx b/app/containers/Passcode/Base/index.tsx
index cef3de3e3..96135ffee 100644
--- a/app/containers/Passcode/Base/index.tsx
+++ b/app/containers/Passcode/Base/index.tsx
@@ -9,7 +9,7 @@ import styles from './styles';
 import Button from './Button';
 import Dots from './Dots';
 import { TYPE } from '../constants';
-import { PASSCODE_LENGTH, themes } from '../../../lib/constants';
+import { PASSCODE_LENGTH } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 import LockIcon from './LockIcon';
 import Title from './Title';
@@ -35,7 +35,7 @@ export interface IBase {
 
 const Base = forwardRef<IBase, IPasscodeBase>(
 	({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
-		const { theme } = useTheme();
+		const { colors } = useTheme();
 		const { height } = useDimensions();
 
 		// 206 is the height of the header calculating the margins, icon size height, title font size and subtitle height.
@@ -101,7 +101,7 @@ const Base = forwardRef<IBase, IPasscodeBase>(
 
 		return (
 			<Animatable.View ref={rootRef} style={styles.container}>
-				<Grid style={[styles.grid, { backgroundColor: themes[theme].passcodeBackground }]}>
+				<Grid style={[styles.grid, { backgroundColor: colors.surfaceNeutral }]}>
 					<LockIcon />
 					<Title text={title} />
 					{subtitle ? <Subtitle text={subtitle} /> : null}
diff --git a/app/containers/RadioButton/index.tsx b/app/containers/RadioButton/index.tsx
index b9c8efe5c..98592abcd 100644
--- a/app/containers/RadioButton/index.tsx
+++ b/app/containers/RadioButton/index.tsx
@@ -10,7 +10,7 @@ export const RadioButton = ({ check, testID, size }: { check: boolean; testID?:
 			testID={testID}
 			selected={check}
 			size={size || 20}
-			color={check ? colors.tintActive : colors.auxiliaryTintColor}
+			color={check ? colors.buttonBackgroundPrimaryDefault : colors.buttonBackgroundPrimaryDisabled}
 		/>
 	);
 };
diff --git a/app/containers/ReactionsList/AllTab.tsx b/app/containers/ReactionsList/AllTab.tsx
index 4bfa6be9b..911e73976 100644
--- a/app/containers/ReactionsList/AllTab.tsx
+++ b/app/containers/ReactionsList/AllTab.tsx
@@ -52,10 +52,10 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 				getCustomEmoji={getCustomEmoji}
 			/>
 			<View style={styles.textContainer}>
-				<Text style={[styles.allListNPeopleReacted, { color: colors.bodyText }]}>
+				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
 					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
 				</Text>
-				<Text style={[styles.allListWhoReacted, { color: colors.auxiliaryText }]}>{displayNames}</Text>
+				<Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</Text>
 			</View>
 		</View>
 	);
diff --git a/app/containers/ReactionsList/ReactionsTabBar.tsx b/app/containers/ReactionsList/ReactionsTabBar.tsx
index 2e4633c6b..9aae993ab 100644
--- a/app/containers/ReactionsList/ReactionsTabBar.tsx
+++ b/app/containers/ReactionsList/ReactionsTabBar.tsx
@@ -36,7 +36,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
 			testID={`tabBarItem-${tab.emoji}`}>
 			<View style={styles.tabBarItem}>
 				{tab._id === 'All' ? (
-					<Text style={[styles.allTabItem, { color: colors.auxiliaryTintColor }]}>{I18n.t('All')}</Text>
+					<Text style={[styles.allTabItem, { color: colors.fontHint }]}>{I18n.t('All')}</Text>
 				) : (
 					<>
 						<Emoji
@@ -45,7 +45,7 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
 							customEmojiStyle={styles.customEmojiStyle}
 							getCustomEmoji={getCustomEmoji}
 						/>
-						<Text style={[styles.reactionCount, { color: colors.auxiliaryTintColor }]}>{tab.usernames.length}</Text>
+						<Text style={[styles.reactionCount, { color: colors.fontHint }]}>{tab.usernames.length}</Text>
 					</>
 				)}
 			</View>
@@ -67,7 +67,7 @@ const ReactionsTabBar = ({ tabs, activeTab, goToPage, getCustomEmoji }: IReactio
 							style={{
 								width: tabWidth,
 								borderBottomWidth: isActiveTab ? 2 : 1,
-								borderColor: isActiveTab ? colors.tintActive : colors.separatorColor
+								borderColor: isActiveTab ? colors.strokeHighlight : colors.strokeLight
 							}}
 							key={tab.emoji}>
 							<TabBarItem tab={tab} index={index} goToPage={goToPage} getCustomEmoji={getCustomEmoji} />
diff --git a/app/containers/ReactionsList/UsersList.tsx b/app/containers/ReactionsList/UsersList.tsx
index 9723b051f..9fa33d3c9 100644
--- a/app/containers/ReactionsList/UsersList.tsx
+++ b/app/containers/ReactionsList/UsersList.tsx
@@ -23,7 +23,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
 			contentContainerStyle={styles.listContainer}
 			ListHeaderComponent={
 				<View style={styles.emojiNameContainer}>
-					<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'>
+					<Text style={[styles.emojiName, { color: colors.fontSecondaryInfo }]} testID='usersListEmojiName'>
 						{emoji}
 					</Text>
 				</View>
@@ -32,7 +32,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
 				<View style={styles.listItemContainer} testID='userItem'>
 					<Avatar text={item.username} size={36} />
 					<View style={styles.textContainer}>
-						<Text style={[styles.usernameText, { color: colors.bodyText }]} numberOfLines={1}>
+						<Text style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
 							{useRealName && item.name ? item.name : item.username}
 						</Text>
 					</View>
diff --git a/app/containers/RoomHeader/RoomHeader.stories.tsx b/app/containers/RoomHeader/RoomHeader.stories.tsx
index 0e54650a1..f502c3dc0 100644
--- a/app/containers/RoomHeader/RoomHeader.stories.tsx
+++ b/app/containers/RoomHeader/RoomHeader.stories.tsx
@@ -14,7 +14,7 @@ export default {
 
 const HeaderExample = ({ title, theme = 'light' }: { title: Function; theme?: TSupportedThemes }) => (
 	// Using View directly instead of Header from react-navigation because it's easier to test.
-	<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].headerBackground }}>{title()}</View>
+	<View style={{ flex: 1, maxHeight: 48, backgroundColor: themes[theme].surfaceNeutral }}>{title()}</View>
 );
 
 const RoomHeader = ({ ...props }) => (
diff --git a/app/containers/RoomHeader/RoomHeader.tsx b/app/containers/RoomHeader/RoomHeader.tsx
index fccb282db..19bbeb316 100644
--- a/app/containers/RoomHeader/RoomHeader.tsx
+++ b/app/containers/RoomHeader/RoomHeader.tsx
@@ -88,7 +88,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 			usersText = usersTyping.join(', ');
 		}
 		return (
-			<Text style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} numberOfLines={1}>
+			<Text style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 				<Text style={styles.typingUsers}>{usersText} </Text>
 				{usersTyping.length > 1 ? I18n.t('are_typing') : I18n.t('is_typing')}...
 			</Text>
@@ -102,7 +102,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 
 	// subtitle
 	if (subtitle) {
-		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.auxiliaryText }]} />;
+		return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />;
 	}
 
 	return null;
@@ -110,7 +110,7 @@ const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoom
 
 const HeaderTitle = React.memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeaderTitle) => {
 	const { colors } = useTheme();
-	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.headerTitleColor };
+	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.fontTitlesLabels };
 	if (!tmid && !prid) {
 		return (
 			<Text style={[styles.title, titleStyle]} numberOfLines={1} testID={testID}>
@@ -163,7 +163,7 @@ const Header = React.memo(
 						status={status}
 						teamMain={teamMain}
 					/>
-					<Text style={[styles.subtitle, { color: colors.auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 						{parentTitle}
 					</Text>
 				</View>
diff --git a/app/containers/RoomItem/Actions.tsx b/app/containers/RoomItem/Actions.tsx
index 0d462b2be..71f5824a4 100644
--- a/app/containers/RoomItem/Actions.tsx
+++ b/app/containers/RoomItem/Actions.tsx
@@ -36,16 +36,17 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
 			<Animated.View
 				style={[
 					styles.actionLeftButtonContainer,
-					{ width: width * 2, backgroundColor: colors.tintColor, right: '100%' },
+					{ width: width * 2, backgroundColor: colors.badgeBackgroundLevel2, right: '100%' },
 					viewHeight,
 					animatedStyles
-				]}>
+				]}
+			>
 				<View style={[styles.actionLeftButtonContainer, viewHeight]}>
 					<RectButton style={styles.actionButton} onPress={onToggleReadPress}>
 						<CustomIcon
 							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 							name={isRead ? 'flag' : 'check'}
-							color={colors.buttonText}
+							color={colors.fontWhite}
 						/>
 					</RectButton>
 				</View>
@@ -117,17 +118,18 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					styles.actionRightButtonContainer,
 					{
 						width,
-						backgroundColor: colors.favoriteBackground,
+						backgroundColor: colors.statusFontWarning,
 						left: '100%'
 					},
 					viewHeight,
 					animatedFavStyles
-				]}>
-				<RectButton style={[styles.actionButton, { backgroundColor: colors.favoriteBackground }]} onPress={toggleFav}>
+				]}
+			>
+				<RectButton style={[styles.actionButton, { backgroundColor: colors.statusFontWarning }]} onPress={toggleFav}>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name={favorite ? 'star-filled' : 'star'}
-						color={colors.buttonText}
+						color={colors.fontWhite}
 					/>
 				</RectButton>
 			</Animated.View>
@@ -136,17 +138,21 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					styles.actionRightButtonContainer,
 					{
 						width: width * 2,
-						backgroundColor: colors.hideBackground,
+						backgroundColor: colors.buttonBackgroundSecondaryPress,
 						left: '100%'
 					},
 					isCondensed && { height: ROW_HEIGHT_CONDENSED },
 					animatedHideStyles
-				]}>
-				<RectButton style={[styles.actionButton, { backgroundColor: colors.hideBackground }]} onPress={onHidePress}>
+				]}
+			>
+				<RectButton
+					style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundSecondaryPress }]}
+					onPress={onHidePress}
+				>
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name='unread-on-top-disabled'
-						color={colors.buttonText}
+						color={colors.fontWhite}
 					/>
 				</RectButton>
 			</Animated.View>
diff --git a/app/containers/RoomItem/LastMessage.tsx b/app/containers/RoomItem/LastMessage.tsx
index 93edab14b..e968edba9 100644
--- a/app/containers/RoomItem/LastMessage.tsx
+++ b/app/containers/RoomItem/LastMessage.tsx
@@ -75,7 +75,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username,
 				username,
 				useRealName
 			})}
-			style={[styles.markdownText, { color: alert ? colors.bodyText : colors.auxiliaryText }, alignSelf]}
+			style={[styles.markdownText, { color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
 			numberOfLines={2}
 		/>
 	);
diff --git a/app/containers/RoomItem/Tag.tsx b/app/containers/RoomItem/Tag.tsx
index 68b2b444b..cb70d1c84 100644
--- a/app/containers/RoomItem/Tag.tsx
+++ b/app/containers/RoomItem/Tag.tsx
@@ -14,8 +14,8 @@ const Tag = React.memo(({ name, testID }: ITag) => {
 	const { theme } = useTheme();
 
 	return (
-		<View style={[styles.tagContainer, { backgroundColor: themes[theme].borderColor }]}>
-			<Text style={[styles.tagText, { color: themes[theme].infoText }]} numberOfLines={1} testID={testID}>
+		<View style={[styles.tagContainer, { backgroundColor: themes[theme].strokeLight }]}>
+			<Text style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
 				{name}
 			</Text>
 		</View>
diff --git a/app/containers/RoomItem/Title.tsx b/app/containers/RoomItem/Title.tsx
index ce9ff03b6..7ca14dd94 100644
--- a/app/containers/RoomItem/Title.tsx
+++ b/app/containers/RoomItem/Title.tsx
@@ -9,7 +9,7 @@ const Title = React.memo(({ name, hideUnreadStatus, alert }: ITitleProps) => {
 	const { colors } = useTheme();
 	return (
 		<Text
-			style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.titleText }]}
+			style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.fontTitlesLabels }]}
 			ellipsizeMode='tail'
 			numberOfLines={1}>
 			{name}
diff --git a/app/containers/RoomItem/Touchable.tsx b/app/containers/RoomItem/Touchable.tsx
index 433a4ee0e..36e9d57bf 100644
--- a/app/containers/RoomItem/Touchable.tsx
+++ b/app/containers/RoomItem/Touchable.tsx
@@ -223,8 +223,9 @@ const Touchable = ({
 								onPress={handlePress}
 								testID={testID}
 								style={{
-									backgroundColor: isFocused ? colors.chatComponentBackground : colors.backgroundColor
-								}}>
+									backgroundColor: isFocused ? colors.surfaceTint : colors.surfaceRoom
+								}}
+							>
 								{children}
 							</Touch>
 						</Animated.View>
diff --git a/app/containers/RoomItem/UpdatedAt.tsx b/app/containers/RoomItem/UpdatedAt.tsx
index f51ccc870..a7d4166a8 100644
--- a/app/containers/RoomItem/UpdatedAt.tsx
+++ b/app/containers/RoomItem/UpdatedAt.tsx
@@ -17,13 +17,13 @@ const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps
 			style={[
 				styles.date,
 				{
-					color: colors.auxiliaryText
+					color: colors.fontSecondaryInfo
 				},
 				alert &&
 					!hideUnreadStatus && [
 						styles.updateAlert,
 						{
-							color: colors.tintColor
+							color: colors.badgeBackgroundLevel2
 						}
 					]
 			]}
diff --git a/app/containers/RoomItem/Wrapper.tsx b/app/containers/RoomItem/Wrapper.tsx
index 4fcccb6d2..9affa8da3 100644
--- a/app/containers/RoomItem/Wrapper.tsx
+++ b/app/containers/RoomItem/Wrapper.tsx
@@ -18,7 +18,7 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
 				style={[
 					styles.centerContainer,
 					{
-						borderColor: colors.separatorColor
+						borderColor: colors.strokeLight
 					}
 				]}>
 				{children}
diff --git a/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx b/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
index 7009f5405..890706d57 100644
--- a/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
+++ b/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
-import { OmnichannelSourceType, IOmnichannelSource } from '../../definitions';
-import { STATUS_COLORS } from '../../lib/constants';
+import { OmnichannelSourceType, IOmnichannelSource, TUserStatus } from '../../definitions';
 import { useAppSelector } from '../../lib/hooks';
 import { CustomIcon, TIconsName } from '../CustomIcon';
+import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';
 
 interface IIconMap {
 	[key: string]: TIconsName;
@@ -24,7 +24,7 @@ interface IOmnichannelRoomIconProps {
 	size: number;
 	type: string;
 	style?: StyleProp<ViewStyle>;
-	status?: string;
+	status?: TUserStatus;
 	sourceType?: IOmnichannelSource;
 }
 
@@ -33,15 +33,9 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 	const [svgError, setSvgError] = useState(false);
 	const baseUrl = useAppSelector(state => state.server?.server);
 	const connected = useAppSelector(state => state.meteor?.connected);
+	const userStatusColor = useUserStatusColor(status || 'offline');
 
-	const customIcon = (
-		<CustomIcon
-			name={iconMap[sourceType?.type || 'other']}
-			size={size}
-			style={style}
-			color={STATUS_COLORS[status || 'offline']}
-		/>
-	);
+	const customIcon = <CustomIcon name={iconMap[sourceType?.type || 'other']} size={size} style={style} color={userStatusColor} />;
 
 	if (!svgError && sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
 		return (
@@ -49,7 +43,7 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 				<SvgUri
 					height={size}
 					width={size}
-					color={STATUS_COLORS[status || 'offline']}
+					color={userStatusColor}
 					uri={`${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`}
 					style={style}
 					onError={() => setSvgError(true)}
diff --git a/app/containers/RoomTypeIcon/index.tsx b/app/containers/RoomTypeIcon/index.tsx
index ef6f30b94..24a1f177e 100644
--- a/app/containers/RoomTypeIcon/index.tsx
+++ b/app/containers/RoomTypeIcon/index.tsx
@@ -55,7 +55,7 @@ const RoomTypeIcon = React.memo(
 			icon = 'message';
 		}
 
-		return <CustomIcon name={icon} size={size} color={themes[theme].titleText} style={iconStyle} />;
+		return <CustomIcon name={icon} size={size} color={themes[theme].fontTitlesLabels} style={iconStyle} />;
 	}
 );
 
diff --git a/app/containers/SafeAreaView.tsx b/app/containers/SafeAreaView.tsx
index 74a40ef05..4fc4e2904 100644
--- a/app/containers/SafeAreaView.tsx
+++ b/app/containers/SafeAreaView.tsx
@@ -23,7 +23,7 @@ const SafeAreaView = React.memo(({ style, children, vertical = true, ...props }:
 	const { theme } = useTheme();
 	return (
 		<SafeAreaContext
-			style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
+			style={[styles.view, { backgroundColor: themes[theme].surfaceHover }, style]}
 			edges={vertical ? ['right', 'left'] : undefined}
 			{...props}>
 			{children}
diff --git a/app/containers/SearchBox/index.tsx b/app/containers/SearchBox/index.tsx
index eed365351..baf6c51bd 100644
--- a/app/containers/SearchBox/index.tsx
+++ b/app/containers/SearchBox/index.tsx
@@ -23,7 +23,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps): J
 	}, []);
 
 	return (
-		<View testID='searchbox' style={{ backgroundColor: colors.backgroundColor }}>
+		<View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
 			<FormTextInput
 				autoCapitalize='none'
 				autoCorrect={false}
diff --git a/app/containers/SearchHeader.tsx b/app/containers/SearchHeader.tsx
index e4a0672c4..21928b851 100644
--- a/app/containers/SearchHeader.tsx
+++ b/app/containers/SearchHeader.tsx
@@ -32,7 +32,7 @@ const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.E
 		<View style={styles.container}>
 			<TextInput
 				autoFocus
-				style={[styles.title, isLight && { color: themes[theme].headerTitleColor }]}
+				style={[styles.title, isLight && { color: themes[theme].fontTitlesLabels }]}
 				placeholder={I18n.t('Search')}
 				onChangeText={onSearchChangeText}
 				testID={testID}
diff --git a/app/containers/ServerItem/index.tsx b/app/containers/ServerItem/index.tsx
index e0e568777..780b5640c 100644
--- a/app/containers/ServerItem/index.tsx
+++ b/app/containers/ServerItem/index.tsx
@@ -31,10 +31,11 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 			onPress={onPress}
 			onLongPress={() => onLongPress?.()}
 			testID={`rooms-list-header-server-${item.id}`}
-			android_ripple={{ color: themes[theme].bannerBackground }}
+			android_ripple={{ color: themes[theme].surfaceNeutral }}
 			style={({ pressed }: { pressed: boolean }) => ({
-				backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
-			})}>
+				backgroundColor: isIOS && pressed ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom
+			})}
+		>
 			<View style={styles.serverItemContainer}>
 				{item.iconURL ? (
 					<FastImage
@@ -51,10 +52,10 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 					<FastImage source={defaultLogo} style={styles.serverIcon} />
 				)}
 				<View style={styles.serverTextContainer}>
-					<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].titleText }]}>
+					<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].fontTitlesLabels }]}>
 						{item.name || item.id}
 					</Text>
-					<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>
+					<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].fontSecondaryInfo }]}>
 						{item.id}
 					</Text>
 				</View>
diff --git a/app/containers/Status/Status.tsx b/app/containers/Status/Status.tsx
index 3c6ac0b53..073e35d19 100644
--- a/app/containers/Status/Status.tsx
+++ b/app/containers/Status/Status.tsx
@@ -1,11 +1,16 @@
+// @ts-nocheck
 import React from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 
+import { useTheme } from '../../theme';
 import { CustomIcon, IconSet, TIconsName } from '../CustomIcon';
-import { STATUS_COLORS } from '../../lib/constants';
 import { IStatusComponentProps } from './definition';
+import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';
 
 const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: IStatusComponentProps) => {
+	const { colors } = useTheme();
+	const userStatusColor = useUserStatusColor(status);
+
 	const name: TIconsName = `status-${status}`;
 	const isNameValid = IconSet.hasIcon(name);
 	const iconName = isNameValid ? name : 'status-offline';
@@ -20,11 +25,11 @@ const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: I
 
 	return (
 		<CustomIcon
+			{...props}
 			style={calculatedStyle}
 			size={size}
 			name={iconName}
-			color={STATUS_COLORS[status] ?? STATUS_COLORS.offline}
-			{...props}
+			color={userStatusColor ?? colors.userPresenceOffline}
 		/>
 	);
 });
diff --git a/app/containers/StatusBar.tsx b/app/containers/StatusBar.tsx
index 996603a87..4643ed46b 100644
--- a/app/containers/StatusBar.tsx
+++ b/app/containers/StatusBar.tsx
@@ -21,7 +21,7 @@ const StatusBar = ({ barStyle, backgroundColor }: IStatusBar) => {
 			barStyle = 'dark-content';
 		}
 	}
-	return <StatusBarRN backgroundColor={backgroundColor ?? colors.headerBackground} barStyle={barStyle} animated />;
+	return <StatusBarRN backgroundColor={backgroundColor ?? colors.surfaceNeutral} barStyle={barStyle} animated />;
 };
 
 export default StatusBar;
diff --git a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
index e38c52e00..06f0442c5 100644
--- a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
@@ -46,19 +46,19 @@ export const SupportedVersionsExpired = () => {
 	};
 
 	return (
-		<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.focusedBackground }]}>
+		<View style={[styles.container, { paddingTop: 120, backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
-				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
+				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
-			<Text style={[styles.title, { color: colors.titleText }]}>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>
 				{I18n.t('Supported_versions_expired_title', { workspace_name: name })}
 			</Text>
-			<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('Supported_versions_expired_description')}</Text>
+			<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Supported_versions_expired_description')}</Text>
 			<Button title={I18n.t('Check_again')} type='primary' onPress={checkAgain} loading={checking} />
 			<Button
 				title={I18n.t('Learn_more')}
 				type='secondary'
-				backgroundColor={colors.chatComponentBackground}
+				backgroundColor={colors.surfaceTint}
 				onPress={() => Linking.openURL(LEARN_MORE_URL)}
 			/>
 		</View>
diff --git a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
index d396596b1..9d6758726 100644
--- a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
@@ -31,22 +31,22 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 	}
 
 	return (
-		<View style={[styles.container, { backgroundColor: colors.focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
 			<View style={styles.iconContainer}>
-				<CustomIcon name='warning' size={36} color={colors.dangerColor} />
+				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
 			{message.title ? (
-				<Text testID='sv-warn-title' style={[styles.title, { color: colors.titleText }]}>
+				<Text testID='sv-warn-title' style={[styles.title, { color: colors.fontTitlesLabels }]}>
 					{message.title}
 				</Text>
 			) : null}
 			{message.subtitle ? (
-				<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.bodyText }]}>
+				<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.fontDefault }]}>
 					{message.subtitle}
 				</Text>
 			) : null}
 			{message.description ? (
-				<Text testID='sv-warn-description' style={[styles.description, { color: colors.bodyText }]}>
+				<Text testID='sv-warn-description' style={[styles.description, { color: colors.fontDefault }]}>
 					{message.description}
 				</Text>
 			) : null}
@@ -54,7 +54,7 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 				testID='sv-warn-button'
 				title='Learn more'
 				type='secondary'
-				backgroundColor={colors.chatComponentBackground}
+				backgroundColor={colors.surfaceTint}
 				onPress={() => Linking.openURL(message.link || LEARN_MORE_URL)}
 			/>
 		</View>
diff --git a/app/containers/Switch/index.tsx b/app/containers/Switch/index.tsx
new file mode 100644
index 000000000..fb8e763ba
--- /dev/null
+++ b/app/containers/Switch/index.tsx
@@ -0,0 +1,17 @@
+import { Switch as RNSwitch, SwitchProps } from 'react-native';
+import React from 'react';
+
+import { useTheme } from '../../theme';
+
+const Switch = (props: SwitchProps): React.ReactElement => {
+	const { colors } = useTheme();
+
+	const trackColor = {
+		false: colors.buttonBackgroundDangerPress,
+		true: colors.buttonBackgroundSuccessPress
+	};
+
+	return <RNSwitch trackColor={trackColor} {...props} />;
+};
+
+export default Switch;
diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index 42dfa64b4..5e30e887f 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -29,7 +29,7 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		paddingVertical: 10,
 		borderWidth: 1,
-		borderRadius: 4
+		borderRadius: 2
 	},
 	inputIconLeft: {
 		paddingLeft: 45
@@ -91,7 +91,9 @@ export const FormTextInput = ({
 	return (
 		<View style={[styles.inputContainer, containerStyle]}>
 			{label ? (
-				<Text style={[styles.label, { color: colors.titleText }, error?.error && { color: colors.dangerColor }]}>{label}</Text>
+				<Text style={[styles.label, { color: colors.fontTitlesLabels }, error?.error && { color: colors.fontDanger }]}>
+					{label}
+				</Text>
 			) : null}
 
 			<View style={styles.wrap}>
@@ -101,13 +103,13 @@ export const FormTextInput = ({
 						iconLeft && styles.inputIconLeft,
 						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
 						{
-							backgroundColor: colors.backgroundColor,
-							borderColor: colors.separatorColor,
-							color: colors.titleText
+							backgroundColor: colors.surfaceRoom,
+							borderColor: colors.strokeLight,
+							color: colors.fontTitlesLabels
 						},
 						error?.error && {
-							color: colors.dangerColor,
-							borderColor: colors.dangerColor
+							color: colors.buttonBackgroundDangerDefault,
+							borderColor: colors.buttonBackgroundDangerDefault
 						},
 						inputStyle
 					]}
@@ -121,6 +123,7 @@ export const FormTextInput = ({
 					accessibilityLabel={placeholder}
 					placeholder={placeholder}
 					value={value}
+					placeholderTextColor={colors.fontAnnotation}
 					{...inputProps}
 				/>
 
@@ -129,14 +132,14 @@ export const FormTextInput = ({
 						name={iconLeft}
 						testID={testID ? `${testID}-icon-left` : undefined}
 						size={20}
-						color={colors.auxiliaryText}
+						color={colors.fontSecondaryInfo}
 						style={[styles.iconContainer, styles.iconLeft]}
 					/>
 				) : null}
 
 				{showClearInput ? (
 					<Touchable onPress={onClearInput} style={[styles.iconContainer, styles.iconRight]} testID='clear-text-input'>
-						<CustomIcon name='input-clear' size={20} color={colors.auxiliaryTintColor} />
+						<CustomIcon name='input-clear' size={20} color={colors.fontDefault} />
 					</Touchable>
 				) : null}
 
@@ -145,7 +148,7 @@ export const FormTextInput = ({
 						name={iconRight}
 						testID={testID ? `${testID}-icon-right` : undefined}
 						size={20}
-						color={colors.bodyText}
+						color={colors.fontDefault}
 						style={[styles.iconContainer, styles.iconRight]}
 					/>
 				) : null}
@@ -156,7 +159,7 @@ export const FormTextInput = ({
 							name={showPassword ? 'unread-on-top' : 'unread-on-top-disabled'}
 							testID={testID ? `${testID}-icon-password` : undefined}
 							size={20}
-							color={colors.auxiliaryText}
+							color={colors.fontDefault}
 						/>
 					</Touchable>
 				) : null}
@@ -164,13 +167,13 @@ export const FormTextInput = ({
 				{loading ? (
 					<ActivityIndicator
 						style={[styles.iconContainer, styles.iconRight]}
-						color={colors.bodyText}
+						color={colors.fontDefault}
 						testID={testID ? `${testID}-loading` : undefined}
 					/>
 				) : null}
 				{left}
 			</View>
-			{error && error.reason ? <Text style={[styles.error, { color: colors.dangerColor }]}>{error.reason}</Text> : null}
+			{error && error.reason ? <Text style={[styles.error, { color: colors.fontDanger }]}>{error.reason}</Text> : null}
 		</View>
 	);
 };
diff --git a/app/containers/TextInput/TextInput.tsx b/app/containers/TextInput/TextInput.tsx
index 0d9325991..20c8c6d68 100644
--- a/app/containers/TextInput/TextInput.tsx
+++ b/app/containers/TextInput/TextInput.tsx
@@ -20,8 +20,8 @@ export const TextInput = React.forwardRef<RNTextInput, IThemedTextInput>(({ styl
 	return (
 		<RNTextInput
 			ref={ref}
-			style={[{ color: themes[theme].titleText }, style, styles.input]}
-			placeholderTextColor={themes[theme].auxiliaryText}
+			style={[{ color: themes[theme].fontTitlesLabels }, style, styles.input]}
+			placeholderTextColor={themes[theme].fontSecondaryInfo}
 			keyboardAppearance={theme === 'light' ? 'light' : 'dark'}
 			{...props}
 		/>
diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
index 733539bf4..8d8b43cc5 100644
--- a/app/containers/ThreadDetails.tsx
+++ b/app/containers/ThreadDetails.tsx
@@ -68,18 +68,19 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 		<View style={[styles.container, style]}>
 			<View style={styles.detailsContainer}>
 				<View style={styles.detailContainer}>
-					<CustomIcon name='threads' size={24} color={themes[theme].auxiliaryText} />
+					<CustomIcon name='threads' size={24} />
 					<Text
 						testID={`thread-count-${count}`}
-						style={[styles.detailText, { color: themes[theme].auxiliaryText }]}
-						numberOfLines={1}>
+						style={[styles.detailText, { color: themes[theme].fontSecondaryInfo }]}
+						numberOfLines={1}
+					>
 						{count}
 					</Text>
 				</View>
 
 				<View style={styles.detailContainer}>
-					<CustomIcon name='user' size={24} color={themes[theme].auxiliaryText} />
-					<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name='user' size={24} />
+					<Text style={[styles.detailText, { color: themes[theme].fontSecondaryInfo }]} numberOfLines={1}>
 						{replies}
 					</Text>
 				</View>
@@ -87,11 +88,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 			<View style={styles.badgeContainer}>
 				{badgeColor ? <View style={[styles.badge, { backgroundColor: badgeColor }]} /> : null}
 				<Touchable onPress={() => toggleFollowThread?.(isFollowing, item.id)}>
-					<CustomIcon
-						size={24}
-						name={isFollowing ? 'notification' : 'notification-disabled'}
-						color={themes[theme].auxiliaryTintColor}
-					/>
+					<CustomIcon size={24} name={isFollowing ? 'notification' : 'notification-disabled'} />
 				</Touchable>
 			</View>
 		</View>
diff --git a/app/containers/Toast.tsx b/app/containers/Toast.tsx
index cf23d9eb6..81b6539b5 100644
--- a/app/containers/Toast.tsx
+++ b/app/containers/Toast.tsx
@@ -45,8 +45,8 @@ const Toast = (): React.ReactElement => {
 		<EasyToast
 			ref={getToastRef}
 			position='center'
-			style={[styles.toast, { backgroundColor: colors.toastBackground }]}
-			textStyle={[styles.text, { color: colors.buttonText }]}
+			style={[styles.toast, { backgroundColor: colors.surfaceDark }]}
+			textStyle={[styles.text, { color: colors.fontWhite }]}
 			opacity={0.9}
 		/>
 	);
diff --git a/app/containers/Touch.tsx b/app/containers/Touch.tsx
index 38793d9fc..aca34be8b 100644
--- a/app/containers/Touch.tsx
+++ b/app/containers/Touch.tsx
@@ -17,9 +17,10 @@ const Touch = React.forwardRef<RectButton, ITouchProps>(({ children, onPress, un
 			ref={ref}
 			onPress={onPress}
 			activeOpacity={1}
-			underlayColor={underlayColor || colors.bannerBackground}
-			rippleColor={colors.bannerBackground}
-			{...props}>
+			underlayColor={underlayColor || colors.surfaceNeutral}
+			rippleColor={colors.surfaceNeutral}
+			{...props}
+		>
 			{children}
 		</RectButton>
 	);
diff --git a/app/containers/TwoFactor/index.tsx b/app/containers/TwoFactor/index.tsx
index 991c5a534..b18422753 100644
--- a/app/containers/TwoFactor/index.tsx
+++ b/app/containers/TwoFactor/index.tsx
@@ -102,7 +102,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 		setData({});
 	};
 
-	const color = themes[theme].titleText;
+	const color = themes[theme].fontTitlesLabels;
 	return (
 		<Modal avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
 			<View style={styles.container} testID='two-factor'>
@@ -110,8 +110,9 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 					style={[
 						styles.content,
 						isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
-						{ backgroundColor: themes[theme].backgroundColor }
-					]}>
+						{ backgroundColor: themes[theme].surfaceHover }
+					]}
+				>
 					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
 					{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
 					<FormTextInput
@@ -135,7 +136,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
 						<Button
 							title={I18n.t('Cancel')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
+							backgroundColor={themes[theme].surfaceTint}
 							style={styles.button}
 							onPress={onCancel}
 						/>
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index 6af9a406d..13615ac13 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -64,10 +64,13 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 		button = (
 			<Touchable
 				onPress={() => onShow(!show)}
-				style={{ backgroundColor: themes[theme].backgroundColor }}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}>
-				<View style={[styles.input, { borderColor: error ? themes[theme].dangerColor : themes[theme].separatorColor }]}>
-					<Text style={[styles.inputText, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>
+				style={{ backgroundColor: themes[theme].surfaceRoom }}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+			>
+				<View
+					style={[styles.input, { borderColor: error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].strokeLight }]}
+				>
+					<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
 						{currentDate.toLocaleDateString(language)}
 					</Text>
 					{loading ? (
@@ -76,7 +79,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 						<CustomIcon
 							name='calendar'
 							size={20}
-							color={error ? themes[theme].dangerColor : themes[theme].auxiliaryText}
+							color={error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].fontSecondaryInfo}
 							style={styles.icon}
 						/>
 					)}
@@ -91,7 +94,7 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 			display={isAndroid ? 'default' : 'inline'}
 			value={currentDate}
 			onChange={onChange}
-			textColor={themes[theme].titleText}
+			textColor={themes[theme].fontTitlesLabels}
 		/>
 	) : null;
 
diff --git a/app/containers/UIKit/Input.tsx b/app/containers/UIKit/Input.tsx
index fa66d6707..9f2dbb0a5 100644
--- a/app/containers/UIKit/Input.tsx
+++ b/app/containers/UIKit/Input.tsx
@@ -35,11 +35,11 @@ const styles = StyleSheet.create({
 export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => (
 	<View style={styles.container}>
 		{label ? (
-			<Text style={[styles.label, { color: error ? themes[theme].dangerColor : themes[theme].titleText }]}>{label}</Text>
+			<Text style={[styles.label, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>{label}</Text>
 		) : null}
-		{description ? <Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{description}</Text> : null}
+		{description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null}
 		{parser.renderInputs({ ...element }, BlockContext.FORM, parser)}
-		{error ? <Text style={[styles.error, { color: themes[theme].dangerColor }]}>{error}</Text> : null}
-		{hint ? <Text style={[styles.hint, { color: themes[theme].auxiliaryText }]}>{hint}</Text> : null}
+		{error ? <Text style={[styles.error, { color: themes[theme].fontDanger }]}>{error}</Text> : null}
+		{hint ? <Text style={[styles.hint, { color: themes[theme].fontSecondaryInfo }]}>{hint}</Text> : null}
 	</View>
 );
diff --git a/app/containers/UIKit/MultiSelect/Chips.tsx b/app/containers/UIKit/MultiSelect/Chips.tsx
index 6fe4735be..f6a6c2964 100644
--- a/app/containers/UIKit/MultiSelect/Chips.tsx
+++ b/app/containers/UIKit/MultiSelect/Chips.tsx
@@ -29,15 +29,16 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 		<Touchable
 			key={item.value}
 			onPress={() => onSelect(item)}
-			style={[styles.chip, { backgroundColor: colors.auxiliaryBackground }, style]}
-			background={Touchable.Ripple(colors.bannerBackground)}
-			testID={`multi-select-chip-${item.value}`}>
+			style={[styles.chip, { backgroundColor: colors.surfaceHover }, style]}
+			background={Touchable.Ripple(colors.surfaceNeutral)}
+			testID={`multi-select-chip-${item.value}`}
+		>
 			<>
 				{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
-				<Text numberOfLines={1} style={[styles.chipText, { color: colors.titleText }]}>
+				<Text numberOfLines={1} style={[styles.chipText, { color: colors.fontTitlesLabels }]}>
 					{textParser([item.text])}
 				</Text>
-				<CustomIcon name='close' size={16} color={colors.auxiliaryText} />
+				<CustomIcon name='close' size={16} color={colors.fontSecondaryInfo} />
 			</>
 		</Touchable>
 	);
diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
index cbc7e41f7..6d3421e75 100644
--- a/app/containers/UIKit/MultiSelect/Input.tsx
+++ b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -22,16 +22,16 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 	return (
 		<Touchable
 			onPress={onPress}
-			style={[{ backgroundColor: colors.backgroundColor }, styles.inputBorder, inputStyle]}
-			background={Touchable.Ripple(colors.bannerBackground)}
-			// @ts-ignore
-			disabled={disabled}>
-			<View style={[styles.input, styles.inputBorder, { borderColor: colors.separatorColor }, innerInputStyle]}>
-				{placeholder ? <Text style={[styles.pickerText, { color: colors.auxiliaryText }]}>{placeholder}</Text> : children}
+			style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
+			background={Touchable.Ripple(colors.surfaceNeutral)}
+			disabled={disabled}
+		>
+			<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeLight }, innerInputStyle]}>
+				{placeholder ? <Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</Text> : children}
 				{loading ? (
 					<ActivityIndicator style={styles.icon} />
 				) : (
-					<CustomIcon name='chevron-down' size={22} color={colors.auxiliaryText} style={styles.icon} />
+					<CustomIcon name='chevron-down' size={22} color={colors.fontSecondaryInfo} style={styles.icon} />
 				)}
 			</View>
 		</Touchable>
diff --git a/app/containers/UIKit/MultiSelect/Items.tsx b/app/containers/UIKit/MultiSelect/Items.tsx
index 9f8f9cf26..cbaac4ee5 100644
--- a/app/containers/UIKit/MultiSelect/Items.tsx
+++ b/app/containers/UIKit/MultiSelect/Items.tsx
@@ -36,11 +36,11 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 					{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
 				</View>
 				<View style={styles.flex}>
-					<Text numberOfLines={1} style={{ color: colors.titleText }}>
+					<Text numberOfLines={1} style={{ color: colors.fontTitlesLabels }}>
 						{textParser([item.text])}
 					</Text>
 				</View>
-				<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.tintColor} size={22} name='check' /> : null}</View>
+				<View style={styles.flexZ}>{selected ? <CustomIcon color={colors.badgeBackgroundLevel2} size={22} name='check' /> : null}</View>
 			</View>
 		</Touchable>
 	);
diff --git a/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx b/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
index 270163692..1250659d4 100644
--- a/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
+++ b/app/containers/UIKit/MultiSelect/MultiSelectContent.tsx
@@ -71,7 +71,7 @@ export const MultiSelectContent = React.memo(
 						testID='multi-select-search'
 						onChangeText={handleSearch}
 						placeholder={I18n.t('Search')}
-						inputStyle={{ backgroundColor: colors.focusedBackground }}
+						inputStyle={{ backgroundColor: colors.surfaceLight }}
 						bottomSheet={isIOS}
 						onSubmitEditing={() => {
 							setTimeout(() => {
diff --git a/app/containers/UIKit/MultiSelect/index.tsx b/app/containers/UIKit/MultiSelect/index.tsx
index b1a669752..eed8af0a2 100644
--- a/app/containers/UIKit/MultiSelect/index.tsx
+++ b/app/containers/UIKit/MultiSelect/index.tsx
@@ -119,7 +119,7 @@ export const MultiSelect = React.memo(
 			<Button title={`${selected.length} selecteds`} onPress={onShow} loading={loading} />
 		) : (
 			<Input onPress={onShow} loading={loading} disabled={disabled} inputStyle={inputStyle} innerInputStyle={innerInputStyle}>
-				<Text style={[styles.pickerText, { color: currentValue ? colors.titleText : colors.auxiliaryText }]}>
+				<Text style={[styles.pickerText, { color: currentValue ? colors.fontTitlesLabels : colors.fontSecondaryInfo }]}>
 					{currentValue || placeholder.text}
 				</Text>
 			</Input>
@@ -131,7 +131,7 @@ export const MultiSelect = React.memo(
 					{selected.length ? (
 						<Chips items={selected} onSelect={(item: any) => (disabled ? {} : onSelect(item))} />
 					) : (
-						<Text style={[styles.pickerText, { color: colors.auxiliaryText }]}>{placeholder.text}</Text>
+						<Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder.text}</Text>
 					)}
 				</Input>
 			);
diff --git a/app/containers/UIKit/Overflow.tsx b/app/containers/UIKit/Overflow.tsx
index dfb49b6c1..f05eb6eb7 100644
--- a/app/containers/UIKit/Overflow.tsx
+++ b/app/containers/UIKit/Overflow.tsx
@@ -29,8 +29,9 @@ const styles = StyleSheet.create({
 const Option = ({ option: { text, value }, onOptionPress, parser, theme }: IOption) => (
 	<Touchable
 		onPress={() => onOptionPress({ value })}
-		background={Touchable.Ripple(themes[theme].bannerBackground)}
-		style={styles.option}>
+		background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+		style={styles.option}
+	>
 		<Text>{parser.text(text)}</Text>
 	</Touchable>
 );
@@ -61,12 +62,13 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 		<>
 			<Touchable
 				ref={ref => (touchable[blockId] = ref)}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 				onPress={() => onShow(!show)}
 				hitSlop={BUTTON_HIT_SLOP}
-				style={styles.menu}>
+				style={styles.menu}
+			>
 				{!loading ? (
-					<CustomIcon size={18} name='kebab' color={themes[theme].bodyText} />
+					<CustomIcon size={18} name='kebab' color={themes[theme].fontDefault} />
 				) : (
 					<ActivityIndicator style={styles.loading} />
 				)}
@@ -76,7 +78,8 @@ export const Overflow = ({ element, loading, action, parser }: IOverflow) => {
 				// fromView exists in Popover Component
 				/* @ts-ignore*/
 				fromView={touchable[blockId]}
-				onRequestClose={() => onShow(false)}>
+				onRequestClose={() => onShow(false)}
+			>
 				<Options options={options} onOptionPress={onOptionPress} parser={parser} theme={theme} />
 			</Popover>
 		</>
diff --git a/app/containers/UIKit/Section.tsx b/app/containers/UIKit/Section.tsx
index 7c5e4f99f..6d3ee2a56 100644
--- a/app/containers/UIKit/Section.tsx
+++ b/app/containers/UIKit/Section.tsx
@@ -31,7 +31,7 @@ const Accessory = ({ element, parser }: IAccessoryComponent) =>
 const Fields = ({ fields, parser, theme }: IFields) => (
 	<>
 		{fields.map(field => (
-			<Text style={[styles.text, styles.field, { color: themes[theme].bodyText }]}>{parser.text(field)}</Text>
+			<Text style={[styles.text, styles.field, { color: themes[theme].fontDefault }]}>{parser.text(field)}</Text>
 		))}
 	</>
 );
diff --git a/app/containers/UIKit/Select.tsx b/app/containers/UIKit/Select.tsx
index 856561d48..03dd83b89 100644
--- a/app/containers/UIKit/Select.tsx
+++ b/app/containers/UIKit/Select.tsx
@@ -51,8 +51,8 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 	const pickerStyle = {
 		...styles.viewContainer,
 		...(isIOS ? styles.iosPadding : {}),
-		borderColor: themes[theme].separatorColor,
-		backgroundColor: themes[theme].backgroundColor
+		borderColor: themes[theme].strokeLight,
+		backgroundColor: themes[theme].surfaceRoom
 	};
 
 	const placeholderObject = useMemo(
@@ -67,7 +67,7 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 		loading ? (
 			<ActivityIndicator style={styles.loading} />
 		) : (
-			<CustomIcon size={22} name='chevron-down' style={isAndroid && styles.icon} color={themes[theme].auxiliaryText} />
+			<CustomIcon size={22} name='chevron-down' style={isAndroid && styles.icon} color={themes[theme].fontSecondaryInfo} />
 		);
 
 	return (
@@ -87,7 +87,9 @@ export const Select = ({ options = [], placeholder, onChange, loading, disabled,
 			}}
 			Icon={Icon}
 			textInputProps={{
-				style: { ...styles.pickerText, color: selected ? themes[theme].titleText : themes[theme].auxiliaryText }
+				// style property was Omitted in lib, but can be used normally
+				// @ts-ignore
+				style: { ...styles.pickerText, color: selected ? themes[theme].fontTitlesLabels : themes[theme].fontSecondaryInfo }
 			}}
 		/>
 	);
diff --git a/app/containers/UIKit/UiKitMessage.stories.tsx b/app/containers/UIKit/UiKitMessage.stories.tsx
index 804ef0f98..60c44f282 100644
--- a/app/containers/UIKit/UiKitMessage.stories.tsx
+++ b/app/containers/UIKit/UiKitMessage.stories.tsx
@@ -40,8 +40,9 @@ export default {
 						onReactionPress: () => {},
 						onDiscussionPress: () => {},
 						onReactionLongPress: () => {},
-						threadBadgeColor: themes.light.tunreadColor
-					}}>
+						threadBadgeColor: themes.light.fontInfo
+					}}
+				>
 					<Story />
 				</MessageContext.Provider>
 			</ScrollView>
diff --git a/app/containers/UIKit/UiKitModal.stories.tsx b/app/containers/UIKit/UiKitModal.stories.tsx
index e6748715a..3e23d0e28 100644
--- a/app/containers/UIKit/UiKitModal.stories.tsx
+++ b/app/containers/UIKit/UiKitModal.stories.tsx
@@ -42,8 +42,9 @@ export default {
 						onReactionPress: () => {},
 						onDiscussionPress: () => {},
 						onReactionLongPress: () => {},
-						threadBadgeColor: themes.light.tunreadColor
-					}}>
+						threadBadgeColor: themes.light.fontInfo
+					}}
+				>
 					<Story />
 				</MessageContext.Provider>
 			</ScrollView>
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
index 309efeac5..d0ca5f585 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
@@ -18,20 +18,20 @@ export const VideoConferenceBaseContainer = ({ variant, children }: VideoConfMes
 	const iconStyle: { [key: string]: { icon: TIconsName; color: string; backgroundColor: string; label: string } } = {
 		ended: {
 			icon: 'phone-end',
-			color: colors.conferenceCallEndedPhoneIcon,
-			backgroundColor: colors.conferenceCallEndedPhoneBackground,
+			color: colors.fontSecondaryInfo,
+			backgroundColor: colors.surfaceNeutral,
 			label: i18n.t('Call_ended')
 		},
 		incoming: {
 			icon: 'phone-in',
-			color: colors.conferenceCallIncomingPhoneIcon,
-			backgroundColor: colors.conferenceCallIncomingPhoneBackground,
+			color: colors.fontInfo,
+			backgroundColor: colors.buttonBackgroundPrimaryDisabled,
 			label: i18n.t('Calling')
 		},
 		outgoing: {
 			icon: 'phone',
-			color: colors.conferenceCallOngoingPhoneIcon,
-			backgroundColor: colors.conferenceCallOngoingPhoneBackground,
+			color: colors.buttonBackgroundSuccessDefault,
+			backgroundColor: colors.buttonBackgroundSuccessDisabled,
 			label: i18n.t('Call_ongoing')
 		},
 		issue: {
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceSkeletonLoading.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceSkeletonLoading.tsx
index 9466f27ee..9e50520f0 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceSkeletonLoading.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceSkeletonLoading.tsx
@@ -7,8 +7,8 @@ export default function VideoConferenceSkeletonLoading(): React.ReactElement {
 	const { colors } = useTheme();
 
 	return (
-		<SkeletonPlaceholder backgroundColor={colors.conferenceCallBackground}>
-			<SkeletonPlaceholder.Item borderWidth={1} borderColor={colors.conferenceCallBorder} borderRadius={4} marginTop={8}>
+		<SkeletonPlaceholder backgroundColor={colors.surfaceTint}>
+			<SkeletonPlaceholder.Item borderWidth={1} borderColor={colors.surfaceHover} borderRadius={4} marginTop={8}>
 				<SkeletonPlaceholder.Item alignItems={'center'} flexDirection='row' marginTop={16} marginLeft={16}>
 					<SkeletonPlaceholder.Item width={28} height={26} />
 					<SkeletonPlaceholder.Item width={75} height={16} marginLeft={8} borderRadius={0} />
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
index 1f5da3554..523ff0029 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
+++ b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
@@ -6,13 +6,13 @@ import sharedStyles from '../../../../views/Styles';
 export default function useStyle() {
 	const { colors } = useTheme();
 	const style = StyleSheet.create({
-		container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.conferenceCallBorder },
+		container: { height: 108, flex: 1, borderWidth: 1, borderRadius: 4, marginTop: 8, borderColor: colors.surfaceHover },
 		callInfoContainer: { flex: 1, alignItems: 'center', paddingLeft: 16, flexDirection: 'row' },
 		infoContainerText: {
 			fontSize: 12,
 			marginLeft: 8,
 			...sharedStyles.textBold,
-			color: colors.auxiliaryTintColor
+			color: colors.fontHint
 		},
 		iconContainer: {
 			width: 28,
@@ -23,7 +23,7 @@ export default function useStyle() {
 		},
 		callToActionContainer: {
 			height: 48,
-			backgroundColor: colors.conferenceCallBackground,
+			backgroundColor: colors.surfaceHover,
 			flexDirection: 'row',
 			alignItems: 'center',
 			paddingLeft: 16
@@ -31,15 +31,15 @@ export default function useStyle() {
 		callToActionButtonText: {
 			fontSize: 12,
 			...sharedStyles.textSemibold,
-			color: colors.buttonText
+			color: colors.fontWhite
 		},
 		callToActionCallBackText: {
 			fontSize: 12,
 			...sharedStyles.textSemibold,
-			color: colors.conferenceCallCallBackText
+			color: colors.surfaceDark
 		},
 		callToActionButton: {
-			backgroundColor: colors.tintColor,
+			backgroundColor: colors.badgeBackgroundLevel2,
 			minWidth: 50,
 			alignItems: 'center',
 			justifyContent: 'center',
@@ -51,13 +51,13 @@ export default function useStyle() {
 		joined: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary,
+			color: colors.fontDefault,
 			marginLeft: 8
 		},
 		plusUsers: {
 			width: 28,
 			height: 28,
-			backgroundColor: colors.conferenceCallPlusUsersButton,
+			backgroundColor: colors.surfaceNeutral,
 			borderRadius: 4,
 			alignItems: 'center',
 			justifyContent: 'center'
@@ -65,16 +65,16 @@ export default function useStyle() {
 		plusUsersText: {
 			fontSize: 14,
 			...sharedStyles.textSemibold,
-			color: colors.conferenceCallPlusUsersText,
+			color: colors.fontDefault,
 			alignSelf: 'center'
 		},
 		callBack: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.fontDefault
 		},
 		callToActionCallBack: {
-			backgroundColor: colors.conferenceCallPlusUsersButton,
+			backgroundColor: colors.surfaceSelected,
 			minWidth: 50,
 			alignItems: 'center',
 			justifyContent: 'center',
@@ -86,10 +86,10 @@ export default function useStyle() {
 		notAnswered: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.strokeDark
 		},
 		enabledBackground: {
-			backgroundColor: colors.conferenceCallEnabledIconBackground
+			backgroundColor: colors.strokeHighlight
 		}
 	});
 
diff --git a/app/containers/UIKit/index.tsx b/app/containers/UIKit/index.tsx
index a21a32823..8b35c472b 100644
--- a/app/containers/UIKit/index.tsx
+++ b/app/containers/UIKit/index.tsx
@@ -62,10 +62,10 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 		const isContext = context === BlockContext.CONTEXT;
 		if (isContext) {
 			return (
-				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
+				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
 			);
 		}
-		return <Text style={[styles.text, { color: themes[theme].bodyText }]}>{element.text}</Text>;
+		return <Text style={[styles.text, { color: themes[theme].fontDefault }]}>{element.text}</Text>;
 	}
 
 	mrkdwn(element: IMarkdown, context: BlockContext) {
@@ -74,10 +74,10 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 		const isContext = context === BlockContext.CONTEXT;
 		if (isContext) {
 			return (
-				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].auxiliaryText }]} numberOfLines={0} />
+				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
 			);
 		}
-		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].auxiliaryText }]} />;
+		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} />;
 	}
 
 	button(element: IButton, context: BlockContext) {
diff --git a/app/containers/UnreadBadge/getUnreadStyle.test.js b/app/containers/UnreadBadge/getUnreadStyle.test.js
index 41fef8aca..019dc86b0 100644
--- a/app/containers/UnreadBadge/getUnreadStyle.test.js
+++ b/app/containers/UnreadBadge/getUnreadStyle.test.js
@@ -15,8 +15,8 @@ const testsForTheme = theme => {
 				unread: 1
 			})
 		).toEqual({
-			backgroundColor: themes[theme].unreadColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].fontAnnotation,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -26,8 +26,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].tunreadColor,
-			color: themes[theme].buttonText
+			backgroundColor: theme === 'light' ? themes[theme].fontInfo : themes[theme].buttonBackgroundPrimaryPress,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -38,8 +38,8 @@ const testsForTheme = theme => {
 				userMentions: 1
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionMeColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel4,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -50,8 +50,8 @@ const testsForTheme = theme => {
 				groupMentions: 1
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionGroupColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel3,
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -64,8 +64,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionMeColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel4,
+			color: themes[theme].fontWhite
 		});
 		expect(
 			getUnreadStyleUtil({
@@ -74,8 +74,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].mentionGroupColor,
-			color: themes[theme].buttonText
+			backgroundColor: themes[theme].badgeBackgroundLevel3,
+			color: themes[theme].fontWhite
 		});
 		expect(
 			getUnreadStyleUtil({
@@ -83,8 +83,8 @@ const testsForTheme = theme => {
 				tunread: [1]
 			})
 		).toEqual({
-			backgroundColor: themes[theme].tunreadColor,
-			color: themes[theme].buttonText
+			backgroundColor: theme === 'light' ? themes[theme].fontInfo : themes[theme].buttonBackgroundPrimaryPress,
+			color: themes[theme].fontWhite
 		});
 	});
 };
diff --git a/app/containers/UnreadBadge/getUnreadStyle.ts b/app/containers/UnreadBadge/getUnreadStyle.ts
index 5d7035c10..e81cb03da 100644
--- a/app/containers/UnreadBadge/getUnreadStyle.ts
+++ b/app/containers/UnreadBadge/getUnreadStyle.ts
@@ -19,14 +19,14 @@ export const getUnreadStyle = ({
 		return {};
 	}
 
-	let backgroundColor = themes[theme].unreadColor;
-	const color = themes[theme].buttonText;
+	let backgroundColor = themes[theme].fontAnnotation;
+	const color = themes[theme].fontWhite;
 	if ((userMentions && userMentions > 0) || tunreadUser?.length) {
-		backgroundColor = themes[theme].mentionMeColor;
+		backgroundColor = themes[theme].badgeBackgroundLevel4;
 	} else if ((groupMentions && groupMentions > 0) || tunreadGroup?.length) {
-		backgroundColor = themes[theme].mentionGroupColor;
+		backgroundColor = themes[theme].badgeBackgroundLevel3;
 	} else if (tunread && tunread?.length > 0) {
-		backgroundColor = themes[theme].tunreadColor;
+		backgroundColor = theme === 'light' ? themes[theme].fontInfo : themes[theme].buttonBackgroundPrimaryPress;
 	}
 
 	return {
diff --git a/app/containers/UserGeneratedContentRules.tsx b/app/containers/UserGeneratedContentRules.tsx
index b3dea1af8..885d2a6fe 100644
--- a/app/containers/UserGeneratedContentRules.tsx
+++ b/app/containers/UserGeneratedContentRules.tsx
@@ -40,17 +40,19 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 	};
 	return (
 		<View style={[styles.bottomContainer, styleContainer]}>
-			<Text style={[styles.bottomContainerText, { color: colors.auxiliaryText }]}>
+			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
 				{`${I18n.t('Onboarding_agree_terms')}\n`}
 				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
-					onPress={() => openContract('terms-of-service')}>
+					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
+					onPress={() => openContract('terms-of-service')}
+				>
 					{I18n.t('Terms_of_Service')}
 				</Text>{' '}
 				{I18n.t('and')}
 				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
-					onPress={() => openContract('privacy-policy')}>
+					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
+					onPress={() => openContract('privacy-policy')}
+				>
 					{' '}
 					{I18n.t('Privacy_Policy')}
 				</Text>
diff --git a/app/containers/UserItem.tsx b/app/containers/UserItem.tsx
index 82ef18bd8..6fe87244c 100644
--- a/app/containers/UserItem.tsx
+++ b/app/containers/UserItem.tsx
@@ -54,19 +54,20 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
 			onLongPress={onLongPress}
 			testID={testID}
 			android_ripple={{
-				color: colors.bannerBackground
+				color: colors.surfaceNeutral
 			}}
 			style={({ pressed }: any) => ({
-				backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
-			})}>
+				backgroundColor: isIOS && pressed ? colors.surfaceNeutral : 'transparent'
+			})}
+		>
 			<View style={[styles.container, styles.button, style]}>
 				<Avatar text={username} size={30} style={styles.avatar} />
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.bodyText }]} numberOfLines={1}>
+					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{name}
 					</Text>
 				</View>
-				{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.actionTintColor} style={styles.icon} /> : null}
+				{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.fontHint} style={styles.icon} /> : null}
 			</View>
 		</Pressable>
 	);
diff --git a/app/containers/markdown/AtMention.tsx b/app/containers/markdown/AtMention.tsx
index 1f535754c..1bd1496b3 100644
--- a/app/containers/markdown/AtMention.tsx
+++ b/app/containers/markdown/AtMention.tsx
@@ -24,7 +24,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 				style={[
 					styles.mention,
 					{
-						color: themes[theme].mentionGroupColor
+						color: themes[theme].badgeBackgroundLevel3
 					},
 					...style
 				]}>
@@ -37,11 +37,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 	let mentionStyle = {};
 	if (itsMe) {
 		mentionStyle = {
-			color: themes[theme].mentionMeColor
+			color: themes[theme].badgeBackgroundLevel4
 		};
 	} else {
 		mentionStyle = {
-			color: themes[theme].mentionOtherColor
+			color: themes[theme].statusFontWarning
 		};
 	}
 
@@ -67,7 +67,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl
 		);
 	}
 
-	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`@${mention}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`@${mention}`}</Text>;
 });
 
 export default AtMention;
diff --git a/app/containers/markdown/BlockQuote.tsx b/app/containers/markdown/BlockQuote.tsx
index 58af09188..14db049d1 100644
--- a/app/containers/markdown/BlockQuote.tsx
+++ b/app/containers/markdown/BlockQuote.tsx
@@ -12,7 +12,7 @@ interface IBlockQuote {
 
 const BlockQuote = React.memo(({ children, theme }: IBlockQuote) => (
 	<View style={styles.container}>
-		<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
+		<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
 		<View style={styles.childContainer}>{children}</View>
 	</View>
 ));
diff --git a/app/containers/markdown/Emoji.tsx b/app/containers/markdown/Emoji.tsx
index 2980e8ada..fec3247bf 100644
--- a/app/containers/markdown/Emoji.tsx
+++ b/app/containers/markdown/Emoji.tsx
@@ -24,7 +24,7 @@ const Emoji = React.memo(({ literal, isMessageContainsOnlyEmoji, getCustomEmoji,
 		return <CustomEmoji style={[isMessageContainsOnlyEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
 	}
 	return (
-		<Text style={[{ color: colors.bodyText }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
+		<Text style={[{ color: colors.fontDefault }, isMessageContainsOnlyEmoji ? styles.textBig : styles.text, style]}>
 			{emojiUnicode}
 		</Text>
 	);
diff --git a/app/containers/markdown/Hashtag.tsx b/app/containers/markdown/Hashtag.tsx
index f6ecb8331..2433ec897 100644
--- a/app/containers/markdown/Hashtag.tsx
+++ b/app/containers/markdown/Hashtag.tsx
@@ -54,7 +54,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 				style={[
 					styles.mention,
 					{
-						color: themes[theme].mentionOtherColor
+						color: themes[theme].badgeBackgroundLevel1
 					},
 					...style
 				]}
@@ -63,7 +63,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH
 			</Text>
 		);
 	}
-	return <Text style={[styles.text, { color: themes[theme].bodyText }, ...style]}>{`#${hashtag}`}</Text>;
+	return <Text style={[styles.text, { color: themes[theme].fontDefault }, ...style]}>{`#${hashtag}`}</Text>;
 });
 
 export default Hashtag;
diff --git a/app/containers/markdown/Link.tsx b/app/containers/markdown/Link.tsx
index d3dce93db..1101d5967 100644
--- a/app/containers/markdown/Link.tsx
+++ b/app/containers/markdown/Link.tsx
@@ -37,7 +37,7 @@ const Link = React.memo(({ children, link, theme, onLinkPress }: ILink) => {
 
 	// if you have a [](https://rocket.chat) render https://rocket.chat
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].actionTintColor }}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={{ ...styles.link, color: themes[theme].fontHint }}>
 			{childLength !== 0 ? children : link}
 		</Text>
 	);
diff --git a/app/containers/markdown/ListItem.tsx b/app/containers/markdown/ListItem.tsx
index af0bdf922..255f36a48 100644
--- a/app/containers/markdown/ListItem.tsx
+++ b/app/containers/markdown/ListItem.tsx
@@ -44,7 +44,7 @@ const ListItem = React.memo(({ children, level, bulletWidth, continue: _continue
 	return (
 		<View style={style.container}>
 			<View style={[{ width: bulletWidth }, style.bullet]}>
-				<Text style={[styles.text, styles.listPrefix, { color: themes[theme].bodyText }]}>{bullet}</Text>
+				<Text style={[styles.text, styles.listPrefix, { color: themes[theme].fontDefault }]}>{bullet}</Text>
 			</View>
 			<View style={style.contents}>{children}</View>
 		</View>
diff --git a/app/containers/markdown/Markdown.stories.tsx b/app/containers/markdown/Markdown.stories.tsx
index 3b33ecf62..82814a474 100644
--- a/app/containers/markdown/Markdown.stories.tsx
+++ b/app/containers/markdown/Markdown.stories.tsx
@@ -11,7 +11,7 @@ const theme = 'light';
 const styles = StyleSheet.create({
 	container: {
 		marginHorizontal: 15,
-		backgroundColor: themes[theme].backgroundColor,
+		backgroundColor: themes[theme].surfaceRoom,
 		marginVertical: 50
 	}
 });
@@ -128,9 +128,9 @@ export const Links = () => (
 		<Markdown msg='<https://rocket.chat|Formatted Link>: `<url|description>`' theme={theme} />
 		<Markdown msg='[Markdown link](https://rocket.chat) and the text with default style' theme={theme} />
 		<Markdown
-			msg='[Markdown link](https://rocket.chat) and the text with a color specific as auxiliaryText'
+			msg='[Markdown link](https://rocket.chat) and the text with a color specific as fontSecondaryInfo'
 			theme={theme}
-			style={[{ color: themes[theme].auxiliaryText }]}
+			style={[{ color: themes[theme].fontSecondaryInfo }]}
 		/>
 	</View>
 );
diff --git a/app/containers/markdown/Preview.tsx b/app/containers/markdown/Preview.tsx
index 03571ea16..f52a0ebb4 100644
--- a/app/containers/markdown/Preview.tsx
+++ b/app/containers/markdown/Preview.tsx
@@ -24,7 +24,7 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdo
 	return (
 		<Text
 			accessibilityLabel={m}
-			style={[styles.text, { color: themes[theme].bodyText }, ...style]}
+			style={[styles.text, { color: themes[theme].fontDefault }, ...style]}
 			numberOfLines={numberOfLines}
 			testID={testID || `markdown-preview-${m}`}>
 			{m}
diff --git a/app/containers/markdown/Table.tsx b/app/containers/markdown/Table.tsx
index d45de1683..5f2390337 100644
--- a/app/containers/markdown/Table.tsx
+++ b/app/containers/markdown/Table.tsx
@@ -22,7 +22,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 
 	const renderRows = (drawExtraBorders = true) => {
-		const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].borderColor }];
+		const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].strokeLight }];
 		if (drawExtraBorders) {
 			tableStyle.push(styles.tableExtraBorders);
 		}
@@ -54,11 +54,12 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => {
 				showsVerticalScrollIndicator={false}
 				style={[
 					styles.containerTable,
-					{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].borderColor }
-				]}>
+					{ maxWidth: getTableWidth(), maxHeight: MAX_HEIGHT, borderColor: themes[theme].strokeLight }
+				]}
+			>
 				{renderRows(false)}
 			</ScrollView>
-			<Text style={[styles.textInfo, { color: themes[theme].auxiliaryText }]}>{I18n.t('Full_table')}</Text>
+			<Text style={[styles.textInfo, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Full_table')}</Text>
 		</TouchableOpacity>
 	);
 });
diff --git a/app/containers/markdown/TableCell.tsx b/app/containers/markdown/TableCell.tsx
index 98fca8300..906dea229 100644
--- a/app/containers/markdown/TableCell.tsx
+++ b/app/containers/markdown/TableCell.tsx
@@ -15,7 +15,7 @@ interface ITableCell {
 export const CELL_WIDTH = 100;
 
 const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell) => {
-	const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].borderColor }];
+	const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].strokeLight }];
 	if (!isLastCell) {
 		cellStyle.push(styles.cellRightBorder);
 	}
@@ -29,7 +29,7 @@ const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell
 
 	return (
 		<View style={[...cellStyle, { width: CELL_WIDTH }]}>
-			<Text style={[textStyle, { color: themes[theme].bodyText }]}>{children}</Text>
+			<Text style={[textStyle, { color: themes[theme].fontDefault }]}>{children}</Text>
 		</View>
 	);
 });
diff --git a/app/containers/markdown/TableRow.tsx b/app/containers/markdown/TableRow.tsx
index 2fbbbdd2b..a5abb704f 100644
--- a/app/containers/markdown/TableRow.tsx
+++ b/app/containers/markdown/TableRow.tsx
@@ -12,7 +12,7 @@ interface ITableRow {
 }
 
 const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRow) => {
-	const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].borderColor }];
+	const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].strokeLight }];
 	if (!isLastRow) {
 		rowStyle.push(styles.rowBottomBorder);
 	}
diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx
index 7c284ddf6..a2b663f41 100644
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@@ -156,9 +156,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 				style={[
 					{
 						...styles.codeInline,
-						color: themes[theme!].bodyText,
-						backgroundColor: themes[theme!].bannerBackground,
-						borderColor: themes[theme!].bannerBackground
+						color: themes[theme!].fontDefault,
+						backgroundColor: themes[theme!].surfaceNeutral,
+						borderColor: themes[theme!].surfaceNeutral
 					},
 					...style
 				]}>
@@ -174,9 +174,9 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 				style={[
 					{
 						...styles.codeBlock,
-						color: themes[theme!].bodyText,
-						backgroundColor: themes[theme!].bannerBackground,
-						borderColor: themes[theme!].bannerBackground
+						backgroundColor: themes[theme!].surfaceNeutral,
+						borderColor: themes[theme!].strokeLight,
+						color: themes[theme!].fontDefault
 					},
 					...style
 				]}>
@@ -196,7 +196,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 			return null;
 		}
 		return (
-			<Text style={[styles.text, { color: themes[theme!].bodyText }, ...style]} numberOfLines={numberOfLines}>
+			<Text style={[styles.text, { color: themes[theme!].fontDefault }, ...style]} numberOfLines={numberOfLines}>
 				{children}
 			</Text>
 		);
@@ -256,7 +256,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 		// @ts-ignore
 		const textStyle = styles[`heading${level}Text`];
 		return (
-			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].bodyText }]}>
+			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme!].fontDefault }]}>
 				{children}
 			</Text>
 		);
diff --git a/app/containers/markdown/new/Code.tsx b/app/containers/markdown/new/Code.tsx
index 9680e0b03..eaac15282 100644
--- a/app/containers/markdown/new/Code.tsx
+++ b/app/containers/markdown/new/Code.tsx
@@ -18,8 +18,8 @@ const Code = ({ value }: ICodeProps): React.ReactElement => {
 			style={[
 				styles.codeBlock,
 				{
-					backgroundColor: colors.bannerBackground,
-					borderColor: colors.borderColor
+					backgroundColor: colors.surfaceNeutral,
+					borderColor: colors.strokeLight
 				}
 			]}>
 			{value.map(block => {
diff --git a/app/containers/markdown/new/CodeLine.tsx b/app/containers/markdown/new/CodeLine.tsx
index 7c836c28e..401ffb32a 100644
--- a/app/containers/markdown/new/CodeLine.tsx
+++ b/app/containers/markdown/new/CodeLine.tsx
@@ -15,7 +15,7 @@ const CodeLine = ({ value }: ICodeLineProps): React.ReactElement | null => {
 		return null;
 	}
 
-	return <Text style={[styles.codeBlockText, { color: colors.bodyText }]}>{value.value}</Text>;
+	return <Text style={[styles.codeBlockText, { color: colors.fontDefault }]}>{value.value}</Text>;
 };
 
 export default CodeLine;
diff --git a/app/containers/markdown/new/Emoji.tsx b/app/containers/markdown/new/Emoji.tsx
index 7ca4b89f0..e22be829d 100644
--- a/app/containers/markdown/new/Emoji.tsx
+++ b/app/containers/markdown/new/Emoji.tsx
@@ -18,7 +18,7 @@ const Emoji = ({ block, isBigEmoji }: IEmojiProps) => {
 	const { getCustomEmoji } = useContext(MarkdownContext);
 
 	if ('unicode' in block) {
-		return <Text style={[{ color: colors.bodyText }, isBigEmoji ? styles.textBig : styles.text]}>{block.unicode}</Text>;
+		return <Text style={[{ color: colors.fontDefault }, isBigEmoji ? styles.textBig : styles.text]}>{block.unicode}</Text>;
 	}
 	const emojiToken = block?.shortCode ? `:${block.shortCode}:` : `:${block.value?.value}:`;
 	const emojiUnicode = shortnameToUnicode(emojiToken);
@@ -28,7 +28,7 @@ const Emoji = ({ block, isBigEmoji }: IEmojiProps) => {
 		return <CustomEmoji style={[isBigEmoji ? styles.customEmojiBig : styles.customEmoji]} emoji={emoji} />;
 	}
 	return (
-		<Text style={[{ color: colors.bodyText }, isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text]}>
+		<Text style={[{ color: colors.fontDefault }, isBigEmoji && emojiToken !== emojiUnicode ? styles.textBig : styles.text]}>
 			{emojiUnicode}
 		</Text>
 	);
diff --git a/app/containers/markdown/new/Heading.tsx b/app/containers/markdown/new/Heading.tsx
index 56db6a7fd..2472bf40b 100644
--- a/app/containers/markdown/new/Heading.tsx
+++ b/app/containers/markdown/new/Heading.tsx
@@ -16,7 +16,7 @@ const Heading = ({ value, level }: IHeadingProps) => {
 	const textStyle = styles[`heading${level}`];
 
 	return (
-		<Text style={[textStyle, { color: themes[theme].bodyText }]}>
+		<Text style={[textStyle, { color: themes[theme].fontDefault }]}>
 			{value.map(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':
diff --git a/app/containers/markdown/new/Image.tsx b/app/containers/markdown/new/Image.tsx
index d21ed9215..5c10b8dc9 100644
--- a/app/containers/markdown/new/Image.tsx
+++ b/app/containers/markdown/new/Image.tsx
@@ -21,12 +21,12 @@ const ImageProgress = createImageProgress(FastImage);
 
 const MessageImage = ({ img, theme }: TMessageImage) => (
 	<ImageProgress
-		style={[styles.inlineImage, { borderColor: themes[theme].borderColor }]}
+		style={[styles.inlineImage, { borderColor: themes[theme].strokeLight }]}
 		source={{ uri: encodeURI(img) }}
 		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
-			color: themes[theme].actionTintColor
+			color: themes[theme].fontHint
 		}}
 	/>
 );
diff --git a/app/containers/markdown/new/InlineCode.tsx b/app/containers/markdown/new/InlineCode.tsx
index c66996db5..d7bb22cbd 100644
--- a/app/containers/markdown/new/InlineCode.tsx
+++ b/app/containers/markdown/new/InlineCode.tsx
@@ -18,9 +18,9 @@ const InlineCode = ({ value }: IInlineCodeProps) => {
 			style={[
 				styles.codeInline,
 				{
-					color: themes[theme].bodyText,
-					backgroundColor: themes[theme].bannerBackground,
-					borderColor: themes[theme].borderColor
+					color: themes[theme].fontDefault,
+					backgroundColor: themes[theme].surfaceNeutral,
+					borderColor: themes[theme].strokeLight
 				}
 			]}>
 			{(block => {
diff --git a/app/containers/markdown/new/Katex.tsx b/app/containers/markdown/new/Katex.tsx
index 3dd4b4a01..b2cb59075 100644
--- a/app/containers/markdown/new/Katex.tsx
+++ b/app/containers/markdown/new/Katex.tsx
@@ -19,7 +19,7 @@ export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 	return (
 		<MathView
 			math={value}
-			style={{ color: colors.bodyText }}
+			style={{ color: colors.fontDefault }}
 			renderError={() => (
 				<Katex expression={value} style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]} />
 			)}
@@ -29,5 +29,5 @@ export const KaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 
 export const InlineKaTeX = ({ value }: IKaTeXProps): React.ReactElement | null => {
 	const { colors } = useTheme();
-	return <MathText color value={`$$${value}$$`} direction='ltr' style={{ color: colors.bodyText }} />;
+	return <MathText color value={`$$${value}$$`} direction='ltr' style={{ color: colors.fontDefault }} />;
 };
diff --git a/app/containers/markdown/new/Link.tsx b/app/containers/markdown/new/Link.tsx
index 47ffc9e58..a0d5e049f 100644
--- a/app/containers/markdown/new/Link.tsx
+++ b/app/containers/markdown/new/Link.tsx
@@ -39,7 +39,7 @@ const Link = ({ value }: ILinkProps) => {
 	};
 
 	return (
-		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].actionTintColor }]}>
+		<Text onPress={handlePress} onLongPress={onLongPress} style={[styles.link, { color: themes[theme].fontInfo }]}>
 			{(block => {
 				const blockArray = Array.isArray(block) ? block : [block];
 				return blockArray.map(blockInArray => {
diff --git a/app/containers/markdown/new/NewMarkdown.stories.tsx b/app/containers/markdown/new/NewMarkdown.stories.tsx
index 9bc46e2ac..86f680073 100644
--- a/app/containers/markdown/new/NewMarkdown.stories.tsx
+++ b/app/containers/markdown/new/NewMarkdown.stories.tsx
@@ -25,7 +25,7 @@ export default {
 const styles = StyleSheet.create({
 	container: {
 		marginHorizontal: 15,
-		backgroundColor: themes[theme].backgroundColor,
+		backgroundColor: themes[theme].surfaceRoom,
 		marginVertical: 50
 	}
 });
diff --git a/app/containers/markdown/new/OrderedList.tsx b/app/containers/markdown/new/OrderedList.tsx
index 2ccc2687f..feb755dd2 100644
--- a/app/containers/markdown/new/OrderedList.tsx
+++ b/app/containers/markdown/new/OrderedList.tsx
@@ -16,8 +16,8 @@ const OrderedList = ({ value }: IOrderedListProps): React.ReactElement => {
 		<View>
 			{value.map(item => (
 				<View style={styles.row} key={item.number?.toString()}>
-					<Text style={[styles.text, styles.listPrefix, { color: colors.bodyText }]}>{item.number}. </Text>
-					<Text style={[styles.text, styles.inline, { color: colors.bodyText }]}>
+					<Text style={[styles.text, styles.listPrefix, { color: colors.fontDefault }]}>{item.number}. </Text>
+					<Text style={[styles.text, styles.inline, { color: colors.fontDefault }]}>
 						<Inline value={item.value} />
 					</Text>
 				</View>
diff --git a/app/containers/markdown/new/Paragraph.tsx b/app/containers/markdown/new/Paragraph.tsx
index 2c8735138..f2701569e 100644
--- a/app/containers/markdown/new/Paragraph.tsx
+++ b/app/containers/markdown/new/Paragraph.tsx
@@ -32,7 +32,7 @@ const Paragraph = ({ value }: IParagraphProps) => {
 		forceTrim = true;
 	}
 	return (
-		<Text style={[styles.text, { color: themes[theme].bodyText }]}>
+		<Text style={[styles.text, { color: themes[theme].fontDefault }]}>
 			<Inline value={value} forceTrim={forceTrim} />
 		</Text>
 	);
diff --git a/app/containers/markdown/new/Quote.tsx b/app/containers/markdown/new/Quote.tsx
index 8578097b3..c2dcc5e3e 100644
--- a/app/containers/markdown/new/Quote.tsx
+++ b/app/containers/markdown/new/Quote.tsx
@@ -15,7 +15,7 @@ const Quote = ({ value }: IQuoteProps) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<View style={[styles.quote, { backgroundColor: themes[theme].borderColor }]} />
+			<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
 			<View style={styles.childContainer}>
 				{value.map(item => (
 					<Paragraph value={item.value} />
diff --git a/app/containers/markdown/new/TaskList.tsx b/app/containers/markdown/new/TaskList.tsx
index 3c47cd1d1..6777d989d 100644
--- a/app/containers/markdown/new/TaskList.tsx
+++ b/app/containers/markdown/new/TaskList.tsx
@@ -17,15 +17,14 @@ const TaskList = ({ value = [] }: ITasksProps) => {
 		<View>
 			{value.map(item => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: colors.bodyText }]}>
+					<Text style={[styles.text, { color: colors.fontDefault }]}>
 						<CustomIcon
 							testID={item.status ? 'task-list-checked' : 'task-list-unchecked'}
 							name={item.status ? 'checkbox-checked' : 'checkbox-unchecked'}
 							size={24}
-							color={colors.taskBoxColor}
 						/>
 					</Text>
-					<Text style={[styles.inline, { color: colors.bodyText }]}>
+					<Text style={[styles.inline, { color: colors.fontDefault }]}>
 						<Inline value={item.value} />
 					</Text>
 				</View>
diff --git a/app/containers/markdown/new/UnorderedList.tsx b/app/containers/markdown/new/UnorderedList.tsx
index 67a603291..36c7644b9 100644
--- a/app/containers/markdown/new/UnorderedList.tsx
+++ b/app/containers/markdown/new/UnorderedList.tsx
@@ -17,8 +17,8 @@ const UnorderedList = ({ value }: IUnorderedListProps) => {
 		<View>
 			{value.map(item => (
 				<View style={styles.row}>
-					<Text style={[styles.text, { color: themes[theme].bodyText }]}>{'\u2022'}</Text>
-					<Text style={[styles.inline, { color: themes[theme].bodyText }]}>
+					<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{'\u2022'}</Text>
+					<Text style={[styles.inline, { color: themes[theme].fontDefault }]}>
 						<Inline value={item.value} />
 					</Text>
 				</View>
diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx
index 1e96dbaac..d9cfcfa42 100644
--- a/app/containers/message/Attachments.tsx
+++ b/app/containers/message/Attachments.tsx
@@ -55,14 +55,14 @@ const AttachedActions = ({ attachment, getCustomEmoji }: { attachment: IAttachme
 
 const Attachments: React.FC<IMessageAttachments> = React.memo(
 	({ attachments, timeFormat, showAttachment, style, getCustomEmoji, isReply, author }: IMessageAttachments) => {
-		const { translateLanguage } = useContext(MessageContext);
+		const { translateLanguage, isEncrypted } = useContext(MessageContext);
 
 		if (!attachments || attachments.length === 0) {
 			return null;
 		}
 
 		const attachmentsElements = attachments.map((file: IAttachment, index: number) => {
-			const msg = getMessageFromAttachment(file, translateLanguage);
+			const msg = isEncrypted ? '' : getMessageFromAttachment(file, translateLanguage);
 			if (file && file.image_url) {
 				return (
 					<Image
diff --git a/app/containers/message/Broadcast.tsx b/app/containers/message/Broadcast.tsx
index 2e102eaf2..98b067d51 100644
--- a/app/containers/message/Broadcast.tsx
+++ b/app/containers/message/Broadcast.tsx
@@ -21,13 +21,13 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={replyBroadcast}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
-					style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
+					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+					style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
 					hitSlop={BUTTON_HIT_SLOP}
 					testID='message-broadcast-reply'>
 					<>
-						<CustomIcon name='arrow-back' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
-						<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Reply')}</Text>
+						<CustomIcon name='arrow-back' size={20} style={styles.buttonIcon} color={themes[theme].fontWhite} />
+						<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Reply')}</Text>
 					</>
 				</Touchable>
 			</View>
diff --git a/app/containers/message/CallButton.tsx b/app/containers/message/CallButton.tsx
index e9fa703ec..bef3c5ec3 100644
--- a/app/containers/message/CallButton.tsx
+++ b/app/containers/message/CallButton.tsx
@@ -16,12 +16,13 @@ const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
 		<View style={styles.buttonContainer}>
 			<Touchable
 				onPress={handleEnterCall}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}
-				style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
-				hitSlop={BUTTON_HIT_SLOP}>
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+				style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
+				hitSlop={BUTTON_HIT_SLOP}
+			>
 				<>
-					<CustomIcon name='camera' size={16} style={styles.buttonIcon} color={themes[theme].buttonText} />
-					<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Click_to_join')}</Text>
+					<CustomIcon name='camera' size={16} style={styles.buttonIcon} color={themes[theme].fontWhite} />
+					<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Click_to_join')}</Text>
 				</>
 			</Touchable>
 		</View>
diff --git a/app/containers/message/Components/CollapsibleQuote/index.tsx b/app/containers/message/Components/CollapsibleQuote/index.tsx
index f83cdc266..e7239bfcf 100644
--- a/app/containers/message/Components/CollapsibleQuote/index.tsx
+++ b/app/containers/message/Components/CollapsibleQuote/index.tsx
@@ -92,7 +92,7 @@ const Fields = React.memo(
 			<>
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
+						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>
 							{field.title}
 						</Text>
 						<Markdown
@@ -123,21 +123,15 @@ const CollapsibleQuote = React.memo(
 			setCollapsed(!collapsed);
 		};
 
-		let {
-			borderColor,
-			chatComponentBackground: backgroundColor,
-			collapsibleQuoteBorder,
-			collapsibleChevron,
-			headerTintColor
-		} = themes[theme];
+		let { strokeExtraLight, surfaceTint: backgroundColor, strokeLight, strokeMedium, fontSecondaryInfo } = themes[theme];
 
 		try {
 			if (attachment.color) {
 				backgroundColor = transparentize(attachment.color, 0.8);
-				borderColor = attachment.color;
-				collapsibleQuoteBorder = attachment.color;
-				collapsibleChevron = attachment.color;
-				headerTintColor = headerTintColor;
+				strokeExtraLight = attachment.color;
+				strokeLight = attachment.color;
+				strokeMedium = attachment.color;
+				fontSecondaryInfo = fontSecondaryInfo;
 			}
 		} catch (e) {
 			// fallback to default
@@ -154,24 +148,25 @@ const CollapsibleQuote = React.memo(
 						attachment.description && styles.marginBottom,
 						{
 							backgroundColor,
-							borderLeftColor: collapsibleQuoteBorder,
-							borderTopColor: borderColor,
-							borderRightColor: borderColor,
-							borderBottomColor: borderColor,
+							borderLeftColor: strokeLight,
+							borderTopColor: strokeExtraLight,
+							borderRightColor: strokeExtraLight,
+							borderBottomColor: strokeExtraLight,
 							borderLeftWidth: 2
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
-					hitSlop={BUTTON_HIT_SLOP}>
+					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+					hitSlop={BUTTON_HIT_SLOP}
+				>
 					<View style={styles.touchableContainer}>
 						<View style={styles.attachmentContainer}>
 							<View style={styles.authorContainer}>
-								<Text style={[styles.title, { color: headerTintColor }]}>{attachment.title}</Text>
+								<Text style={[styles.title, { color: fontSecondaryInfo }]}>{attachment.title}</Text>
 							</View>
 							{!collapsed && <Fields attachment={attachment} getCustomEmoji={getCustomEmoji} />}
 						</View>
 						<View style={styles.iconContainer}>
-							<CustomIcon name={!collapsed ? 'chevron-up' : 'chevron-down'} size={22} color={collapsibleChevron} />
+							<CustomIcon name={!collapsed ? 'chevron-up' : 'chevron-down'} size={22} color={strokeMedium} />
 						</View>
 					</View>
 				</Touchable>
diff --git a/app/containers/message/Components/OverlayComponent/index.tsx b/app/containers/message/Components/OverlayComponent/index.tsx
index 47b80c313..92994add2 100644
--- a/app/containers/message/Components/OverlayComponent/index.tsx
+++ b/app/containers/message/Components/OverlayComponent/index.tsx
@@ -19,9 +19,9 @@ const OverlayComponent = ({
 
 	return (
 		<>
-			<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
+			<View style={[style, styles.blurView, { backgroundColor: colors.surfaceDark }]} />
 			<View style={[style, styles.blurIndicator]}>
-				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
+				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon name={iconName} size={54} />}
 			</View>
 		</>
 	);
diff --git a/app/containers/message/Components/RightIcons/Edited.tsx b/app/containers/message/Components/RightIcons/Edited.tsx
index 3315e9531..37ad268d6 100644
--- a/app/containers/message/Components/RightIcons/Edited.tsx
+++ b/app/containers/message/Components/RightIcons/Edited.tsx
@@ -2,20 +2,16 @@ import React, { memo } from 'react';
 import { View } from 'react-native';
 
 import { CustomIcon } from '../../../CustomIcon';
-import { useTheme } from '../../../../theme';
-import { themes } from '../../../../lib/constants';
 import styles from '../../styles';
 
 const Edited = memo(({ isEdited, testID }: { isEdited: boolean; testID?: string }) => {
-	const { theme } = useTheme();
-
 	if (!isEdited) {
 		return null;
 	}
 
 	return (
 		<View testID={testID} style={styles.rightIcons}>
-			<CustomIcon name='edit' size={16} color={themes[theme].auxiliaryText} />
+			<CustomIcon name='edit' size={16} />
 		</View>
 	);
 });
diff --git a/app/containers/message/Components/RightIcons/Encrypted.tsx b/app/containers/message/Components/RightIcons/Encrypted.tsx
index c703afaf6..bf757df29 100644
--- a/app/containers/message/Components/RightIcons/Encrypted.tsx
+++ b/app/containers/message/Components/RightIcons/Encrypted.tsx
@@ -5,11 +5,9 @@ import { CustomIcon } from '../../../CustomIcon';
 import { BUTTON_HIT_SLOP } from '../../utils';
 import MessageContext from '../../Context';
 import styles from '../../styles';
-import { useTheme } from '../../../../theme';
-import { E2E_MESSAGE_TYPE, themes } from '../../../../lib/constants';
+import { E2E_MESSAGE_TYPE } from '../../../../lib/constants';
 
 const Encrypted = React.memo(({ type }: { type: string }) => {
-	const { theme } = useTheme();
 	const { onEncryptedPress } = useContext(MessageContext);
 
 	if (type !== E2E_MESSAGE_TYPE) {
@@ -18,7 +16,7 @@ const Encrypted = React.memo(({ type }: { type: string }) => {
 
 	return (
 		<Touchable onPress={onEncryptedPress} style={styles.rightIcons} hitSlop={BUTTON_HIT_SLOP}>
-			<CustomIcon name='encrypted' size={16} color={themes[theme].auxiliaryText} />
+			<CustomIcon name='encrypted' size={16} />
 		</Touchable>
 	);
 });
diff --git a/app/containers/message/Components/RightIcons/MessageError.tsx b/app/containers/message/Components/RightIcons/MessageError.tsx
index a33286640..cce2740bd 100644
--- a/app/containers/message/Components/RightIcons/MessageError.tsx
+++ b/app/containers/message/Components/RightIcons/MessageError.tsx
@@ -19,7 +19,7 @@ const MessageError = React.memo(
 
 		return (
 			<Touchable onPress={onErrorPress} style={styles.rightIcons} hitSlop={BUTTON_HIT_SLOP}>
-				<CustomIcon name='warning' color={themes[theme].dangerColor} size={16} />
+				<CustomIcon name='warning' color={themes[theme].buttonBackgroundDangerDefault} size={16} />
 			</Touchable>
 		);
 	},
diff --git a/app/containers/message/Components/RightIcons/ReadReceipt.tsx b/app/containers/message/Components/RightIcons/ReadReceipt.tsx
index 6e9b5e96f..3935df2d1 100644
--- a/app/containers/message/Components/RightIcons/ReadReceipt.tsx
+++ b/app/containers/message/Components/RightIcons/ReadReceipt.tsx
@@ -10,7 +10,7 @@ const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread }: { isReadReceip
 		return (
 			<CustomIcon
 				name='check'
-				color={!unread && unread !== null ? colors.tintColor : colors.auxiliaryTintColor}
+				color={!unread && unread !== null ? colors.badgeBackgroundLevel2 : colors.fontHint}
 				size={16}
 				style={styles.rightIcons}
 			/>
diff --git a/app/containers/message/Components/RightIcons/Translated.tsx b/app/containers/message/Components/RightIcons/Translated.tsx
index 65ad3993c..25e3ccc05 100644
--- a/app/containers/message/Components/RightIcons/Translated.tsx
+++ b/app/containers/message/Components/RightIcons/Translated.tsx
@@ -2,11 +2,9 @@ import React, { memo } from 'react';
 import { View } from 'react-native';
 
 import { CustomIcon } from '../../../CustomIcon';
-import { useTheme } from '../../../../theme';
 import styles from '../../styles';
 
 const Translated = memo(({ isTranslated }: { isTranslated: boolean }) => {
-	const { colors } = useTheme();
 
 	if (!isTranslated) {
 		return null;
@@ -14,7 +12,7 @@ const Translated = memo(({ isTranslated }: { isTranslated: boolean }) => {
 
 	return (
 		<View style={styles.rightIcons}>
-			<CustomIcon name='language' size={16} color={colors.auxiliaryText} />
+			<CustomIcon name='language' size={16} />
 		</View>
 	);
 });
diff --git a/app/containers/message/Content.tsx b/app/containers/message/Content.tsx
index 4a61eb2e8..f20f8e8c5 100644
--- a/app/containers/message/Content.tsx
+++ b/app/containers/message/Content.tsx
@@ -23,7 +23,7 @@ const Content = React.memo(
 			const infoMessage = getInfoMessage({ ...props });
 
 			const renderMessageContent = (
-				<Text style={[styles.textInfo, { color: themes[theme].auxiliaryText }]} accessibilityLabel={infoMessage}>
+				<Text style={[styles.textInfo, { color: themes[theme].fontSecondaryInfo }]} accessibilityLabel={infoMessage}>
 					{infoMessage}
 				</Text>
 			);
@@ -43,7 +43,7 @@ const Content = React.memo(
 
 		if (props.isEncrypted) {
 			content = (
-				<Text style={[styles.textInfo, { color: themes[theme].auxiliaryText }]} accessibilityLabel={I18n.t('Encrypted_message')}>
+				<Text style={[styles.textInfo, { color: themes[theme].fontSecondaryInfo }]} accessibilityLabel={I18n.t('Encrypted_message')}>
 					{I18n.t('Encrypted_message')}
 				</Text>
 			);
@@ -70,7 +70,7 @@ const Content = React.memo(
 		}
 
 		if (props.isIgnored) {
-			content = <Text style={[styles.textInfo, { color: themes[theme].auxiliaryText }]}>{I18n.t('Message_Ignored')}</Text>;
+			content = <Text style={[styles.textInfo, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Message_Ignored')}</Text>;
 		}
 
 		return <View style={props.isTemp && styles.temp}>{content}</View>;
diff --git a/app/containers/message/Discussion.tsx b/app/containers/message/Discussion.tsx
index 58f9ecbca..04fcfcbeb 100644
--- a/app/containers/message/Discussion.tsx
+++ b/app/containers/message/Discussion.tsx
@@ -24,20 +24,21 @@ const Discussion = React.memo(
 		const { onDiscussionPress } = useContext(MessageContext);
 		return (
 			<>
-				<Text style={[styles.startedDiscussion, { color: themes[theme].auxiliaryText }]}>{I18n.t('Started_discussion')}</Text>
-				<Text style={[styles.text, { color: themes[theme].bodyText }]}>{msg}</Text>
+				<Text style={[styles.startedDiscussion, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Started_discussion')}</Text>
+				<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{msg}</Text>
 				<View style={styles.buttonContainer}>
 					<Touchable
 						onPress={onDiscussionPress}
-						background={Touchable.Ripple(themes[theme].bannerBackground)}
-						style={[styles.button, { backgroundColor: themes[theme].tintColor }]}
-						hitSlop={BUTTON_HIT_SLOP}>
+						background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+						style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]}
+						hitSlop={BUTTON_HIT_SLOP}
+					>
 						<>
-							<CustomIcon name='discussions' size={16} style={styles.buttonIcon} color={themes[theme].buttonText} />
-							<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{buttonText}</Text>
+							<CustomIcon name='discussions' size={16} style={styles.buttonIcon} color={themes[theme].fontWhite} />
+							<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{buttonText}</Text>
 						</>
 					</Touchable>
-					<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
+					<Text style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text>
 				</View>
 			</>
 		);
diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx
index 72c902159..695ef8c03 100644
--- a/app/containers/message/Image.tsx
+++ b/app/containers/message/Image.tsx
@@ -45,7 +45,8 @@ const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => {
 			disabled={disabled}
 			onPress={onPress}
 			style={styles.imageContainer}
-			background={Touchable.Ripple(colors.bannerBackground)}>
+			background={Touchable.Ripple(colors.surfaceNeutral)}
+		>
 			{children}
 		</Touchable>
 	);
@@ -56,7 +57,7 @@ export const MessageImage = React.memo(({ imgUri, cached, loading }: { imgUri: s
 	return (
 		<>
 			<FastImage
-				style={[styles.image, { borderColor: colors.borderColor }]}
+				style={[styles.image, { borderColor: colors.strokeLight }]}
 				source={{ uri: encodeURI(imgUri) }}
 				resizeMode={FastImage.resizeMode.cover}
 			/>
diff --git a/app/containers/message/Message.stories.tsx b/app/containers/message/Message.stories.tsx
index 71cc742ab..477e89fea 100644
--- a/app/containers/message/Message.stories.tsx
+++ b/app/containers/message/Message.stories.tsx
@@ -43,7 +43,7 @@ export default {
 	decorators: [
 		(Story: any) => (
 			<NavigationContainer>
-				<ScrollView style={{ backgroundColor: themes[_theme].backgroundColor }}>
+				<ScrollView style={{ backgroundColor: themes[_theme].surfaceRoom }}>
 					<MessageContext.Provider
 						value={{
 							user,
@@ -56,8 +56,9 @@ export default {
 							onReactionPress: () => {},
 							onDiscussionPress: () => {},
 							onReactionLongPress: () => {},
-							threadBadgeColor: themes.light.tunreadColor
-						}}>
+							threadBadgeColor: themes.light.fontInfo
+						}}
+					>
 						<Story />
 					</MessageContext.Provider>
 				</ScrollView>
diff --git a/app/containers/message/Message.tsx b/app/containers/message/Message.tsx
index 7560472a7..3eea3ec2f 100644
--- a/app/containers/message/Message.tsx
+++ b/app/containers/message/Message.tsx
@@ -135,7 +135,7 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 		backgroundColor = themes[theme].statusBackgroundWarning2;
 	}
 	if (props.highlighted) {
-		backgroundColor = themes[theme].headerBackground;
+		backgroundColor = themes[theme].surfaceNeutral;
 	}
 
 	if (props.hasError) {
diff --git a/app/containers/message/Reactions.tsx b/app/containers/message/Reactions.tsx
index 2cdb0b408..f7e30bf24 100644
--- a/app/containers/message/Reactions.tsx
+++ b/app/containers/message/Reactions.tsx
@@ -35,11 +35,12 @@ const AddReaction = React.memo(({ theme }: { theme: TSupportedThemes }) => {
 			onPress={reactionInit}
 			key='message-add-reaction'
 			testID='message-add-reaction'
-			style={[styles.reactionButton, { backgroundColor: themes[theme].backgroundColor }]}
-			background={Touchable.Ripple(themes[theme].bannerBackground)}
-			hitSlop={BUTTON_HIT_SLOP}>
-			<View style={[styles.reactionContainer, { borderColor: themes[theme].borderColor }]}>
-				<CustomIcon name='reaction-add' size={21} color={themes[theme].tintColor} />
+			style={[styles.reactionButton, { backgroundColor: themes[theme].surfaceRoom }]}
+			background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+			hitSlop={BUTTON_HIT_SLOP}
+		>
+			<View style={[styles.reactionContainer, { borderColor: themes[theme].strokeLight }]}>
+				<CustomIcon name='reaction-add' size={21} color={themes[theme].badgeBackgroundLevel2} />
 			</View>
 		</Touchable>
 	);
@@ -54,20 +55,23 @@ const Reaction = React.memo(({ reaction, getCustomEmoji, theme }: IMessageReacti
 			onLongPress={onReactionLongPress}
 			key={reaction.emoji}
 			testID={`message-reaction-${reaction.emoji}`}
-			style={[
-				styles.reactionButton,
-				{ backgroundColor: reacted ? themes[theme].bannerBackground : themes[theme].backgroundColor }
-			]}
-			background={Touchable.Ripple(themes[theme].bannerBackground)}
-			hitSlop={BUTTON_HIT_SLOP}>
-			<View style={[styles.reactionContainer, { borderColor: reacted ? themes[theme].tintColor : themes[theme].borderColor }]}>
+			style={[styles.reactionButton, { backgroundColor: reacted ? themes[theme].surfaceNeutral : themes[theme].surfaceRoom }]}
+			background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+			hitSlop={BUTTON_HIT_SLOP}
+		>
+			<View
+				style={[
+					styles.reactionContainer,
+					{ borderColor: reacted ? themes[theme].badgeBackgroundLevel2 : themes[theme].strokeLight }
+				]}
+			>
 				<Emoji
 					content={reaction.emoji}
 					standardEmojiStyle={styles.reactionEmoji}
 					customEmojiStyle={styles.reactionCustomEmoji}
 					getCustomEmoji={getCustomEmoji}
 				/>
-				<Text style={[styles.reactionCount, { color: themes[theme].tintColor }]}>{reaction.usernames.length}</Text>
+				<Text style={[styles.reactionCount, { color: themes[theme].badgeBackgroundLevel2 }]}>{reaction.usernames.length}</Text>
 			</View>
 		</Touchable>
 	);
diff --git a/app/containers/message/RepliedThread.tsx b/app/containers/message/RepliedThread.tsx
index bc877a184..c0a2c7d68 100644
--- a/app/containers/message/RepliedThread.tsx
+++ b/app/containers/message/RepliedThread.tsx
@@ -34,10 +34,10 @@ const RepliedThread = memo(({ tmid, tmsg, isHeader, fetchThreadName, id, isEncry
 
 	return (
 		<View style={styles.repliedThread} testID={`message-thread-replied-on-${msg}`}>
-			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].tintColor} />
-			<MarkdownPreview msg={msg} style={[styles.repliedThreadName, { color: themes[theme].tintColor }]} />
+			<CustomIcon name='threads' size={20} style={styles.repliedThreadIcon} color={themes[theme].badgeBackgroundLevel2} />
+			<MarkdownPreview msg={msg} style={[styles.repliedThreadName, { color: themes[theme].badgeBackgroundLevel2 }]} />
 			<View style={styles.repliedThreadDisclosure}>
-				<CustomIcon name='chevron-right' color={themes[theme].auxiliaryText} size={20} />
+				<CustomIcon name='chevron-right' color={themes[theme].fontSecondaryInfo} size={20} />
 			</View>
 		</View>
 	);
diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx
index 948a6c681..bfcd85cbf 100644
--- a/app/containers/message/Reply.tsx
+++ b/app/containers/message/Reply.tsx
@@ -101,12 +101,12 @@ const Title = React.memo(
 		return (
 			<View style={styles.authorContainer}>
 				{attachment.author_name ? (
-					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].auxiliaryTintColor }]}>
+					<Text numberOfLines={1} style={[styles.author, { color: themes[theme].fontHint }]}>
 						{attachment.author_name}
 					</Text>
 				) : null}
-				{time ? <Text style={[messageStyles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text> : null}
-				{attachment.title ? <Text style={[styles.title, { color: themes[theme].bodyText }]}>{attachment.title}</Text> : null}
+				{time ? <Text style={[messageStyles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text> : null}
+				{attachment.title ? <Text style={[styles.title, { color: themes[theme].fontDefault }]}>{attachment.title}</Text> : null}
 			</View>
 		);
 	}
@@ -132,7 +132,7 @@ const Description = React.memo(
 		return (
 			<Markdown
 				msg={text}
-				style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14 }]}
+				style={[{ color: themes[theme].fontHint, fontSize: 14 }]}
 				username={user.username}
 				getCustomEmoji={getCustomEmoji}
 				theme={theme}
@@ -187,7 +187,7 @@ const Fields = React.memo(
 			<View style={styles.fieldsContainer}>
 				{attachment.fields.map(field => (
 					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-						<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
+						<Text style={[styles.fieldTitle, { color: themes[theme].fontDefault }]}>{field.title}</Text>
 						<Markdown msg={field?.value || ''} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />
 					</View>
 				))}
@@ -223,9 +223,9 @@ const Reply = React.memo(
 			openLink(url, theme);
 		};
 
-		let { borderColor } = themes[theme];
+		let { strokeExtraLight } = themes[theme];
 		if (attachment.color) {
-			borderColor = attachment.color;
+			strokeExtraLight = attachment.color;
 		}
 
 		return (
@@ -239,11 +239,12 @@ const Reply = React.memo(
 						index > 0 && styles.marginTop,
 						msg && styles.marginBottom,
 						{
-							borderColor
+							borderColor: strokeExtraLight
 						}
 					]}
-					background={Touchable.Ripple(themes[theme].bannerBackground)}
-					disabled={loading || !!attachment.message_link}>
+					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+					disabled={loading || attachment.message_link}
+				>
 					<View style={styles.attachmentContainer}>
 						<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
 						<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
@@ -252,7 +253,7 @@ const Reply = React.memo(
 							attachments={attachment.attachments}
 							getCustomEmoji={getCustomEmoji}
 							timeFormat={timeFormat}
-							style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14, marginBottom: 8 }]}
+							style={[{ color: themes[theme].fontHint, fontSize: 14, marginBottom: 8 }]}
 							isReply
 							showAttachment={showAttachment}
 						/>
@@ -262,8 +263,9 @@ const Reply = React.memo(
 								<View
 									style={[
 										styles.backdrop,
-										{ backgroundColor: themes[theme].bannerBackground, opacity: themes[theme].attachmentLoadingOpacity }
-									]}></View>
+										{ backgroundColor: themes[theme].surfaceNeutral, opacity: themes[theme].attachmentLoadingOpacity }
+									]}
+								></View>
 								<RCActivityIndicator />
 							</View>
 						) : null}
diff --git a/app/containers/message/Thread.tsx b/app/containers/message/Thread.tsx
index 19fd2db98..a96594615 100644
--- a/app/containers/message/Thread.tsx
+++ b/app/containers/message/Thread.tsx
@@ -20,8 +20,8 @@ const Thread = React.memo(
 
 		return (
 			<View style={styles.buttonContainer}>
-				<View style={[styles.button, { backgroundColor: themes[theme].tintColor }]} testID={`message-thread-button-${msg}`}>
-					<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{I18n.t('Reply')}</Text>
+				<View style={[styles.button, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]} testID={`message-thread-button-${msg}`}>
+					<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Reply')}</Text>
 				</View>
 				<ThreadDetails
 					item={{
diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx
index 916c734fc..3904ff978 100644
--- a/app/containers/message/Urls.tsx
+++ b/app/containers/message/Urls.tsx
@@ -66,12 +66,12 @@ const UrlContent = React.memo(
 		return (
 			<View style={styles.textContainer}>
 				{title ? (
-					<Text style={[styles.title, { color: colors.tintColor }]} numberOfLines={2}>
+					<Text style={[styles.title, { color: colors.badgeBackgroundLevel2 }]} numberOfLines={2}>
 						{title}
 					</Text>
 				) : null}
 				{description ? (
-					<Text style={[styles.description, { color: colors.auxiliaryText }]} numberOfLines={2}>
+					<Text style={[styles.description, { color: colors.fontSecondaryInfo }]} numberOfLines={2}>
 						{description}
 					</Text>
 				) : null}
@@ -123,12 +123,13 @@ const Url = React.memo(
 					index > 0 && styles.marginTop,
 					styles.container,
 					{
-						backgroundColor: themes[theme].chatComponentBackground,
-						borderColor: themes[theme].borderColor
+						backgroundColor: themes[theme].surfaceTint,
+						borderColor: themes[theme].strokeLight
 					},
 					imageLoadedState === 'loading' && styles.loading
 				]}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}>
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+			>
 				<>
 					{image ? (
 						<FastImage
diff --git a/app/containers/message/User.tsx b/app/containers/message/User.tsx
index 7c7326f9e..3c4cb5f47 100644
--- a/app/containers/message/User.tsx
+++ b/app/containers/message/User.tsx
@@ -83,7 +83,7 @@ const User = React.memo(
 
 		if (isHeader) {
 			const username = (useRealName && author?.name) || author?.username;
-			const aliasUsername = alias ? <Text style={[styles.alias, { color: colors.auxiliaryText }]}> @{username}</Text> : null;
+			const aliasUsername = alias ? <Text style={[styles.alias, { color: colors.fontSecondaryInfo }]}> @{username}</Text> : null;
 			const time = moment(ts).format(timeFormat);
 			const itsMe = author?._id === user.id;
 
@@ -104,7 +104,7 @@ const User = React.memo(
 
 			if (messageHaveAuthorName(type as MessageTypesValues)) {
 				return (
-					<Text style={[styles.usernameInfoMessage, { color: colors.titleText }]} onPress={onUserPress}>
+					<Text style={[styles.usernameInfoMessage, { color: colors.fontTitlesLabels }]} onPress={onUserPress}>
 						{textContent}
 					</Text>
 				);
@@ -113,10 +113,10 @@ const User = React.memo(
 			return (
 				<View style={styles.container}>
 					<TouchableOpacity testID={`username-header-${username}`} style={styles.titleContainer} onPress={onUserPress}>
-						<Text style={[styles.username, { color: colors.titleText }]} numberOfLines={1}>
+						<Text style={[styles.username, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 							{textContent}
 						</Text>
-						<Text style={[messageStyles.time, { color: colors.auxiliaryText }]}>{time}</Text>
+						<Text style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</Text>
 					</TouchableOpacity>
 					<RightIcons
 						type={type}
diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx
index 45ce3c823..54a8bee4a 100644
--- a/app/containers/message/Video.tsx
+++ b/app/containers/message/Video.tsx
@@ -68,7 +68,7 @@ const CancelIndicator = () => {
 	const { colors } = useTheme();
 	return (
 		<View style={styles.cancelContainer}>
-			<Text style={[styles.text, { color: colors.auxiliaryText }]}>{I18n.t('Cancel')}</Text>
+			<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{I18n.t('Cancel')}</Text>
 		</View>
 	);
 };
@@ -224,8 +224,9 @@ const Video = ({ file, showAttachment, getCustomEmoji, style, isReply, msg }: IM
 			<Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} style={[isReply && style]} theme={theme} />
 			<Touchable
 				onPress={onPress}
-				style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
-				background={Touchable.Ripple(themes[theme].bannerBackground)}>
+				style={[styles.button, { backgroundColor: themes[theme].surfaceDark }]}
+				background={Touchable.Ripple(themes[theme].surfaceNeutral)}
+			>
 				<Thumbnail loading={loading} cached={cached} />
 			</Touchable>
 		</>
diff --git a/app/containers/message/index.tsx b/app/containers/message/index.tsx
index fff514f2f..d9e029fb8 100644
--- a/app/containers/message/index.tsx
+++ b/app/containers/message/index.tsx
@@ -428,8 +428,10 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					threadBadgeColor,
 					toggleFollowThread,
 					replies,
-					translateLanguage: canTranslateMessage ? autoTranslateLanguage : undefined
-				}}>
+					translateLanguage: canTranslateMessage ? autoTranslateLanguage : undefined,
+					isEncrypted: this.isEncrypted
+				}}
+			>
 				{/* @ts-ignore*/}
 				<Message
 					id={id}
diff --git a/app/definitions/IUpload.ts b/app/definitions/IUpload.ts
index a2935575b..187e34881 100644
--- a/app/definitions/IUpload.ts
+++ b/app/definitions/IUpload.ts
@@ -1,8 +1,10 @@
 import Model from '@nozbe/watermelondb/Model';
 
+import { E2EType, MessageType } from './IMessage';
+
 export interface IUpload {
 	id?: string;
-	rid?: string;
+	rid: string;
 	path: string;
 	name?: string;
 	tmid?: string;
@@ -14,6 +16,8 @@ export interface IUpload {
 	error?: boolean;
 	subscription?: { id: string };
 	msg?: string;
+	t?: MessageType;
+	e2e?: E2EType;
 }
 
 export type TUploadModel = IUpload & Model;
diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
index 7ce8b2320..3cc832066 100644
--- a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
+++ b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
@@ -21,19 +21,19 @@ const OmnichannelQueue = ({ queueSize, onPress }: IOmnichannelQueue) => {
 			<List.Item
 				title='Omnichannel_queue'
 				heightContainer={50}
-				left={() => <List.Icon name='queue' size={24} color={themes[theme].auxiliaryTintColor} />}
-				color={themes[theme].bodyText}
+				left={() => <List.Icon name='queue' size={24} color={themes[theme].fontHint} />}
+				color={themes[theme].fontDefault}
 				onPress={queueSize ? onPress : undefined}
 				styleTitle={styles.titleOmnichannelQueue}
 				right={() => (
 					<View style={styles.omnichannelRightContainer}>
 						{queueSize ? (
 							<>
-								<UnreadBadge style={[styles.queueIcon, { backgroundColor: themes[theme].tintColor }]} unread={queueSize} />
-								<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].bodyText} size={24} />
+								<UnreadBadge style={[styles.queueIcon, { backgroundColor: themes[theme].badgeBackgroundLevel2 }]} unread={queueSize} />
+								<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].fontDefault} size={24} />
 							</>
 						) : (
-							<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{i18n.t('Empty')}</Text>
+							<Text style={[styles.emptyText, { color: themes[theme].fontHint }]}>{i18n.t('Empty')}</Text>
 						)}
 					</View>
 				)}
diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx
index 51a9cfc4d..dc570346c 100644
--- a/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx
+++ b/app/ee/omnichannel/containers/OmnichannelHeader/index.tsx
@@ -1,9 +1,9 @@
 import React, { memo, useEffect, useState } from 'react';
-import { Switch, View } from 'react-native';
+import { View } from 'react-native';
 
 import * as List from '../../../../containers/List';
 import styles from './styles';
-import { SWITCH_TRACK_COLOR, themes } from '../../../../lib/constants';
+import { themes } from '../../../../lib/constants';
 import { useTheme } from '../../../../theme';
 import { IUser } from '../../../../definitions';
 import { showConfirmationAlert } from '../../../../lib/methods/helpers/info';
@@ -11,6 +11,7 @@ import I18n from '../../../../i18n';
 import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../lib';
 import OmnichannelQueue from './OmnichannelQueue';
 import { isOmnichannelModuleAvailable } from '../../../../lib/methods';
+import Switch from '../../../../containers/Switch';
 
 interface IOmnichannelStatus {
 	searching: boolean;
@@ -60,11 +61,11 @@ const OmnichannelStatus = memo(({ searching, goQueue, queueSize, user }: IOmnich
 		<>
 			<List.Item
 				title='Omnichannel'
-				color={themes[theme].bodyText}
+				color={themes[theme].fontDefault}
 				onPress={toggleLivechat}
 				right={() => (
 					<View style={styles.omnichannelRightContainer}>
-						<Switch value={status} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleLivechat} />
+						<Switch value={status} onValueChange={toggleLivechat} />
 					</View>
 				)}
 			/>
diff --git a/app/ee/omnichannel/views/QueueListView.tsx b/app/ee/omnichannel/views/QueueListView.tsx
index c606faefd..0c2ed27c6 100644
--- a/app/ee/omnichannel/views/QueueListView.tsx
+++ b/app/ee/omnichannel/views/QueueListView.tsx
@@ -104,14 +104,14 @@ const QueueListView = React.memo(() => {
 	};
 
 	return (
-		<SafeAreaView testID='queue-list-view' style={{ backgroundColor: colors.backgroundColor }}>
+		<SafeAreaView testID='queue-list-view' style={{ backgroundColor: colors.surfaceRoom }}>
 			<StatusBar />
 			<FlatList
 				ref={getScrollRef}
 				data={queued}
 				extraData={queued}
 				keyExtractor={keyExtractor}
-				style={{ backgroundColor: colors.backgroundColor }}
+				style={{ backgroundColor: colors.surfaceRoom }}
 				renderItem={renderItem}
 				getItemLayout={getItemLayout}
 				removeClippedSubviews={isIOS}
diff --git a/app/i18n/index.ts b/app/i18n/index.ts
index c9a2d4bf3..e84bef8c1 100644
--- a/app/i18n/index.ts
+++ b/app/i18n/index.ts
@@ -34,6 +34,11 @@ export const LANGUAGES: ILanguage[] = [
 		value: 'bn',
 		file: () => require('./locales/bn-IN.json')
 	},
+	{
+		label: 'Czech',
+		value: 'cs',
+		file: () => require('./locales/cs.json')
+	},
 	{
 		label: 'Deutsch',
 		value: 'de',
diff --git a/app/i18n/locales/cs.json b/app/i18n/locales/cs.json
index 9e26dfeeb..95405c892 100644
--- a/app/i18n/locales/cs.json
+++ b/app/i18n/locales/cs.json
@@ -1 +1,840 @@
-{}
\ No newline at end of file
+{
+  "__count__empty_room_will_be_removed_automatically": "{{count}} prázdná místnost bude smazána.",
+  "__count__empty_rooms_will_be_removed_automatically": "{{count}} prázdných místností bude smazáno.",
+  "1_person_reacted": "1 osoba reagovala",
+  "A_meaningful_name_for_the_discussion_room": "Smysluplný název pro diskusní místnost",
+  "A_new_owner_will_be_assigned_automatically_to__count__room": "K {{count}} místnosti bude automaticky přiřazen nový vlastník.",
+  "A_new_owner_will_be_assigned_automatically_to__count__rooms": "K {{count}} místnostem bude automaticky přiřazen nový vlastník.",
+  "accept": "Akceptovat",
+  "Accounts_Default_User_Preferences_alsoSendThreadToChannel_Description": "Povolit uživatelům vybrat chování 'Také odeslat do kanálu'",
+  "Actions": "Akce",
+  "Activity": "Aktivita",
+  "Add_Channel_to_Team": "Přidat kanál do týmu",
+  "Add_Existing": "Přidat existující",
+  "Add_Existing_Channel": "Přidat existující kanál",
+  "Add_Server": "Přidat pracovní prostor",
+  "Add_server": "Přidat pracovní prostor",
+  "Add_thread_reply": "Přidat odpověď vlákna",
+  "Add_users": "Přidat uživatele",
+  "added__roomName__to_this_team": "přidal #{{roomName}} do tohoto týmu",
+  "Added__username__to_this_team": "do tohoto týmu přidán @{{user_added}}",
+  "Admin_Panel": "Administrátorská lišta",
+  "admin-no-active-video-conf-provider-body": "Nakonfigurujte konferenční hovory, aby byly dostupné v tomto pracovním prostoru.",
+  "admin-no-active-video-conf-provider-header": "Konferenční hovor není povolen",
+  "admin-no-videoconf-provider-app-body": "Aplikace pro konferenční hovory jsou dostupné na Rocket.Chat Marketplace.",
+  "admin-no-videoconf-provider-app-header": "Konferenční hovor není povolen",
+  "admin-video-conf-provider-not-configured-body": "Nakonfigurujte konferenční hovory, aby byly dostupné v tomto pracovním prostoru.",
+  "admin-video-conf-provider-not-configured-header": "Konferenční hovor není povolen",
+  "After_seconds_set_by_admin": "Po {{seconds}} sekundách (nastaveno administrátorem)",
+  "Agent": "Agent",
+  "Alert": "Upozornění",
+  "alert": "upozornění",
+  "alerts": "upozornění",
+  "All": "Všechno",
+  "All_Messages": "Všechny zprávy",
+  "All_users_in_the_channel_can_write_new_messages": "Všichni uživatelé v kanálu mohou psát nové zprávy",
+  "All_users_in_the_team_can_write_new_messages": "Všichni uživatelé v týmu mohou psát nové zprávy",
+  "Allow_push_notifications_for_rocket_chat": "Povolit oznámení push pro Rocket.Chat",
+  "Allow_Reactions": "Povolit reakce",
+  "Also_send_thread_message_to_channel_behavior": "Také odeslat zprávu vlákna na kanál",
+  "and": "a",
+  "and_N_more": "a {{count}} dalších",
+  "Announcement": "Oznámení",
+  "announcement": "oznámení",
+  "App_users_are_not_allowed_to_log_in_directly": "Uživatelé aplikace se nemohou přihlásit přímo.",
+  "Apply_Your_Certificate": "Použijte svůj certifikát",
+  "ARCHIVE": "ARCHIV",
+  "archive": "archiv",
+  "are_typing": "píšou",
+  "Are_you_sure_question_mark": "Jsi si jistá?",
+  "Are_you_sure_you_want_to_delete_your_account": "Opravdu chcete smazat svůj účet?",
+  "Are_you_sure_you_want_to_leave_the_room": "Opravdu chcete opustit místnost {{room}}?",
+  "Audio": "Zvuk",
+  "Auto_Translate": "Automatický překlad",
+  "Auto-join": "Automatické připojení",
+  "Automatic": "Automatický",
+  "Avatar": "Avatar",
+  "Avatar_changed_successfully": "Avatar se úspěšně změnil!",
+  "Avatar_Url": "Adresa URL avatara",
+  "Avatars": "Avataři",
+  "Away": "Pryč",
+  "Before_you_can_login": "Než se budete moci přihlásit, váš účet musí být ručně aktivován administrátorem.",
+  "Bio": "Bio",
+  "Black": "Černá",
+  "Block": "Blok",
+  "Bold": "Tučně",
+  "Broadcast": "Přenos",
+  "Broadcast_hint": "Pouze oprávnění uživatelé mohou psát nové zprávy, ale ostatní uživatelé budou moci odpovídat",
+  "Browser": "Prohlížeč",
+  "Busy": "Zaneprázdněný",
+  "Call": "Volání",
+  "Call_again": "Zavolat znovu",
+  "Call_already_ended": "Volání již ukončeno!",
+  "Call_back": "Zavolat zpět",
+  "Call_ended": "Hovor byl ukončen",
+  "Call_issue": "Problém s voláním",
+  "Call_ongoing": "Hovor probíhá",
+  "Call_rejected": "Hovor odmítnut",
+  "Call_started": "Hovor zahájen",
+  "Call_was_not_answered": "Volání nebylo přijato",
+  "Calling": "Povolání",
+  "Cancel": "Zrušení",
+  "Cancel_editing": "Zrušit úpravy",
+  "Cancel_recording": "Zrušit nahrávání",
+  "Canned_Responses": "Předpřipravené odpovědi",
+  "Cannot_delete": "Nelze smazat",
+  "Cannot_leave": "Nelze odejít",
+  "Cannot_remove": "Nelze odstranit",
+  "Certificate_password": "Heslo k certifikátu",
+  "Change_Language": "Změnit jazyk",
+  "Change_language_loading": "Změna jazyka.",
+  "changed_room_announcement": "změnilo oznámení místnosti na: {{announcement}}",
+  "changed_room_description": "změnil popis pokoje na: {{description}}",
+  "changing_avatar": "měnící se avatar",
+  "Channel": "Kanál",
+  "Channel_hint_encrypted": "End to end šifrovaný kanál. Vyhledávání nebude fungovat se šifrovanými kanály a oznámení nemusí zobrazovat obsah zpráv.",
+  "Channel_hint_encrypted_not_available": "Není k dispozici pro veřejné kanály",
+  "Channel_hint_not_read_only": "Všichni uživatelé v kanálu mohou psát nové zprávy",
+  "Channel_hint_private": "K tomuto kanálu mají přístup pouze pozvaní uživatelé",
+  "Channel_hint_public": "K tomuto kanálu má přístup každý",
+  "Channel_Name": "Název kanálu",
+  "Channels": "Kanály",
+  "Chat_closed_by_agent": "Chat uzavřen agentem",
+  "Chat_is_on_hold": "Tento chat je pozastaven z důvodu nečinnosti",
+  "Chat_started": "Chat zahájen",
+  "Chats": "Chaty",
+  "Check_again": "Zkontrolovat znovu",
+  "Check_canned_responses": "Zkontrolujte předem připravené odpovědi.",
+  "Choose": "Vybrat",
+  "Choose_file": "Vyberte soubor",
+  "Choose_from_library": "Vybrat z knihovny",
+  "Choose_where_you_want_links_be_opened": "Vyberte, kde chcete otevřít odkazy",
+  "Clear": "Průhledná",
+  "Clear_cache": "Vymazat místní mezipaměť pracovního prostoru",
+  "Clear_cache_loading": "Vymazání mezipaměti.",
+  "Clear_cookies_alert": "Chcete vymazat všechny soubory cookie?",
+  "Clear_cookies_desc": "Tato akce vymaže všechny přihlašovací soubory cookie, což vám umožní přihlásit se k jiným účtům.",
+  "Clear_cookies_no": "Ne, ponechat si cookies",
+  "Clear_cookies_yes": "Ano, vymazat soubory cookie",
+  "Click_to_join": "Kliknutím se připojte!",
+  "Close": "Zavřít",
+  "Close_Chat": "Zavřít chat",
+  "Close_emoji_selector": "Zavřít výběr emodži",
+  "Code_block": "Blok kódu",
+  "Code_or_password_invalid": "Neplatný kód nebo heslo",
+  "Collaborative": "Spolupráce",
+  "Community_edition_push_quota": "Komunitní push kvóta",
+  "Condensed": "Zhuštěný",
+  "conference_call": "Konferenční hovor",
+  "Confirm": "Potvrdit",
+  "Confirmation": "Potvrzení",
+  "Connect": "Připojit",
+  "Connecting": "Spojovací...",
+  "Contact_us": "Kontaktujte nás",
+  "Contact_your_server_admin": "Kontaktujte svého správce pracovního prostoru.",
+  "Content": "Obsah",
+  "Continue": "Pokračovat",
+  "Continue_with": "Pokračovat s",
+  "Conversation": "Konverzace",
+  "Conversation_closed": "Konverzace uzavřena",
+  "Convert": "Konvertovat",
+  "Convert_to_Channel": "Převést na kanál",
+  "Convert_to_Team": "Převést na tým",
+  "Convert_to_Team_Warning": "Převádíte tento kanál na tým. Všichni členové budou zachováni.",
+  "Converted__roomName__to_a_channel": "převedeno #{{roomName}} na kanál",
+  "Converted__roomName__to_a_team": "konvertoval #{{roomName}} na tým",
+  "Converting_Team_To_Channel": "Převod týmu na kanál",
+  "Copied_to_clipboard": "Zkopírováno do schránky!",
+  "Copy": "Kopírovat",
+  "Crash_report_disclaimer": "Nikdy nesledujeme obsah vašich chatů. Zprávy o selhání a analytické události pro nás obsahují pouze relevantní informace, abychom mohli identifikovat a opravit problémy.",
+  "Create": "Vytvořit",
+  "Create_A_New_Channel": "Vytvořit nový kanál",
+  "Create_a_new_workspace": "Vytvořit nový pracovní prostor",
+  "Create_account": "Vytvořit účet",
+  "Create_Channel": "Vytvořit kanál",
+  "Create_Direct_Messages": "Vytvářet přímé zprávy",
+  "Create_Discussion": "Vytvořit diskusi",
+  "Create_New": "Vytvořit nový",
+  "Create_Team": "Vytvořit tým",
+  "Created_snippet": "vytvořil úryvek",
+  "creating_channel": "vytvoření kanálu",
+  "creating_discussion": "vytvoření diskuse",
+  "creating_invite": "vytváření pozvánky",
+  "creating_team": "vytváření týmu",
+  "Custom_push_gateway_connected_description": "Váš pracovní prostor používá vlastní bránu pro oznámení push. Případné problémy si ověřte u správce pracovního prostoru.",
+  "Custom_push_gateway_connection": "Připojení vlastní brány",
+  "Dark": "Temný",
+  "Dark_level": "Temná úroveň",
+  "decline": "Pokles",
+  "Default": "Výchozí",
+  "Default_browser": "Výchozí prohlížeč",
+  "Defined_user_as_role": "definováno {{user}} jako {{role}}",
+  "DELETE": "VYMAZAT",
+  "Delete": "Vymazat",
+  "delete": "vymazat",
+  "Delete_Account": "Smazat účet",
+  "Delete_Account_confirm": "Ano, smazat",
+  "Delete_image": "Smazat obrázek",
+  "Delete_my_account": "Smazat můj účet",
+  "Delete_Room_Warning": "Smazáním místnosti se smažou všechny zprávy odeslané v místnosti. Tuto akci nelze vrátit zpět.",
+  "Delete_Team": "Smazat tým",
+  "Deleted__roomName__": "smazáno #{{roomName}}",
+  "Deleted_The_Room_Successfully": "Místnost byla úspěšně smazána",
+  "Deleted_The_Team_Successfully": "Tým byl úspěšně smazán",
+  "Deleting_a_user_will_delete_all_messages": "Smazání uživatele smaže všechny zprávy, místnosti a týmy také od tohoto uživatele. Tuto akci nelze vrátit zpět.",
+  "Deleting_account": "Smazání účtu",
+  "deleting_room": "mazání místnosti",
+  "deleting_team": "vymazávací tým",
+  "Department": "Oddělení",
+  "Description": "Popis",
+  "description": "popis",
+  "Desktop_Alert_info": "Tato oznámení se doručují na ploše",
+  "Desktop_Notifications": "Oznámení na ploše",
+  "Device_notification_settings": "Nastavení oznámení zařízení",
+  "Device_notifications_alert_description": "Přejděte do své aplikace nastavení a povolte upozornění pro Rocket.Chat",
+  "Device_notifications_alert_title": "Oznámení deaktivována",
+  "Direct_message": "Přímá zpráva",
+  "Direct_message_someone": "Přímá zpráva někomu",
+  "Direct_Messages": "Přímé zprávy",
+  "Directory": "Adresář",
+  "Disable_writing_in_room": "Zakázat psaní v místnosti",
+  "Disabled_E2E_Encryption_for_this_room": "deaktivováno E2E šifrování pro tuto místnost",
+  "Discard": "Vyřadit",
+  "Discard_changes": "Zrušit změny?",
+  "Discard_changes_description": "Pokud se vrátíte zpět bez uložení, všechny změny budou ztraceny.",
+  "Discussion": "Diskuse",
+  "Discussion_Desc": "Pomozte udržet si přehled o tom, co se děje! Vytvořením diskuze se vytvoří podkanál vámi vybraného kanálu a oba jsou propojeny.",
+  "Discussion_name": "Název diskuse",
+  "Discussions": "Diskuse",
+  "Display": "Zobrazit",
+  "Displays_action_text": "Zobrazí akční text",
+  "Do_you_have_a_certificate": "Máte certifikát?",
+  "Do_you_have_an_account": "Máte účet?",
+  "Do_you_really_want_to_key_this_room_question_mark": "Opravdu chcete {{key}} tento pokoj?",
+  "Documentation": "Dokumentace",
+  "Dont_activate": "Teď neaktivovat",
+  "Dont_Have_An_Account": "Nemáte účet?",
+  "Downloaded_file": "Stažený soubor",
+  "E2E_Encryption": "E2E šifrování",
+  "E2E_encryption_change_password_confirmation": "Ano, změnit",
+  "E2E_encryption_change_password_description": "Nyní můžete vytvářet šifrované soukromé skupiny a přímé zprávy. Můžete také změnit stávající soukromé skupiny nebo DM na šifrované. \nToto je šifrování typu end-to-end, takže klíč pro kódování/dekódování vašich zpráv nebude uložen na pracovním prostoru. K tomu důvod, proč potřebujete uložit své heslo na bezpečném místě, budete požádáni o jeho zadání na jiných zařízeních, na kterých chcete používat šifrování e2e.",
+  "E2E_encryption_change_password_error": "Chyba při změně hesla klíče E2E!",
+  "E2E_encryption_change_password_message": "Ujistěte se, že jste si pečlivě uložili jinde.",
+  "E2E_encryption_change_password_success": "Heslo klíče E2E bylo úspěšně změněno!",
+  "E2E_encryption_change_password_title": "Změnit heslo šifrování",
+  "E2E_encryption_reset_button": "Resetovat klíč E2E",
+  "E2E_encryption_reset_confirmation": "Ano, resetovat",
+  "E2E_encryption_reset_description": "Tato možnost odstraní váš aktuální E2E klíč a odhlásí vás. \nKdyž se znovu přihlásíte, Rocket.Chat vám vygeneruje nový klíč a obnoví váš přístup do jakékoli šifrované místnosti, která má jednoho nebo více členů online. \nVzhledem k povaze šifrování E2E, Rocket.Chat nebude moci obnovit přístup do žádné šifrované místnosti, která nemá žádného člena online.",
+  "E2E_encryption_reset_error": "Chyba při resetování klíče E2E!",
+  "E2E_encryption_reset_message": "Budete odhlášeni.",
+  "E2E_encryption_reset_title": "Resetovat klíč E2E",
+  "E2E_How_It_Works_info1": "Nyní můžete vytvářet šifrované soukromé skupiny a přímé zprávy. Můžete také změnit stávající soukromé skupiny nebo DM na šifrované.",
+  "E2E_How_It_Works_info2": "Toto je *šifrování od konce do konce*, takže klíč pro zakódování/dekódování vašich zpráv a nebudou uloženy na pracovní ploše. Z tohoto důvodu *musíte toto heslo uložit někde v bezpečí*, ke kterému budete mít přístup později, pokud budete potřebovat .",
+  "E2E_How_It_Works_info3": "Pokud budete pokračovat, bude automaticky vygenerováno heslo E2E.",
+  "E2E_How_It_Works_info4": "Nové heslo pro svůj šifrovací klíč můžete také nastavit kdykoli z libovolného prohlížeče, kde jste zadali stávající heslo E2E.",
+  "Edit": "Upravit",
+  "Edit_Invite": "Upravit pozvánku",
+  "Edit_Status": "Upravit stav",
+  "Email": "E-mailem",
+  "Email_Notification_Mode_All": "Každá zmínka/DM",
+  "Email_Notification_Mode_Disabled": "Zakázáno",
+  "Empty": "Prázdný",
+  "Enable_Auto_Translate": "Povolit automatický překlad",
+  "Enable_Message_Parser": "Povolit analyzátor zpráv",
+  "Enable_writing_in_room": "Povolit psaní v místnosti",
+  "Enabled_E2E_Encryption_for_this_room": "povoleno E2E šifrování pro tuto místnost",
+  "Encrypted": "Zašifrováno",
+  "Encrypted_message": "Zašifrovaná zpráva",
+  "Encryption_error_desc": "Nebylo možné dekódovat váš šifrovací klíč pro import.",
+  "Encryption_error_title": "Vaše heslo pro šifrování se zdá být špatné",
+  "End_to_end_encrypted_room": "End to end šifrovaná místnost",
+  "Enter_the_code": "Zadejte kód, který jsme vám právě poslali e-mailem.",
+  "Enter_workspace_URL": "Zadejte URL pracovního prostoru",
+  "Enter_Your_E2E_Password": "Zadejte heslo E2E",
+  "Enter_Your_Encryption_Password_desc1": "To vám umožní přístup k vašim zašifrovaným soukromým skupinám a přímým zprávám.",
+  "Enter_Your_Encryption_Password_desc2": "Ke kódování/dekódování zpráv musíte zadat heslo na každém místě, kde používáte chat.",
+  "Error_Download_file": "Chyba při stahování souboru",
+  "Error_uploading": "Chyba při nahrávání",
+  "error-action-not-allowed": "{{action}} není povolena",
+  "error-avatar-invalid-url": "Neplatná adresa URL avatara: {{url}}",
+  "error-duplicate-channel-name": "Kanál s názvem {{room_name}} existuje",
+  "error-email-send-failed": "Chyba při pokusu o odeslání e-mailu: {{message}}",
+  "error-file-too-large": "Soubor je příliš velký",
+  "error-init-video-conf": "Chyba při spouštění videohovoru",
+  "error-invalid-email": "Neplatný e-mail {{email}}",
+  "error-invalid-file-type": "Neplatný typ souboru",
+  "error-invalid-password": "Neplatné heslo",
+  "error-invalid-room-name": "{{room_name}} není platný název místnosti",
+  "error-no-tokens-for-this-user": "Pro tohoto uživatele neexistují žádné tokeny",
+  "error-not-allowed": "Nepovoleno",
+  "error-not-permission-to-upload-file": "Nemáte oprávnění nahrávat soubory",
+  "error-save-image": "Chyba při ukládání obrázku",
+  "error-save-video": "Chyba při ukládání videa",
+  "error-team-creation": "Chyba při vytváření týmu",
+  "error-too-many-requests": "Chyba, příliš mnoho požadavků. Zpomalte prosím. Než to zkusíte znovu, musíte počkat {{seconds}} sekund.",
+  "error-you-are-last-owner": "Jste poslední vlastník. Před opuštěním místnosti prosím nastavte nového vlastníka.",
+  "Everyone_can_access_this_channel": "K tomuto kanálu má přístup každý",
+  "Everyone_can_access_this_team": "Každý má přístup k tomuto týmu",
+  "Expanded": "Rozšířený",
+  "Expiration_Days": "Vypršení platnosti (dny)",
+  "Favorites": "Oblíbené",
+  "File_description": "Popis souboru",
+  "Files": "Soubory",
+  "FileUpload_Error": "Chyba nahrávání souboru",
+  "Finish_recording": "Dokončit nahrávání",
+  "Following": "Následující",
+  "Following_thread": "Následující vlákno",
+  "For_your_security_you_must_enter_your_current_password_to_continue": "Pro vaši bezpečnost musíte pro pokračování zadat své aktuální heslo",
+  "Forgot_password": "Zapomněli jste heslo?",
+  "Forgot_password_If_this_email_is_registered": "Pokud je tento e-mail zaregistrován, zašleme Vám pokyny, jak obnovit heslo. Pokud e-mail v nejbližší době neobdržíte, vraťte se a zkuste to znovu.",
+  "Forward": "Vpřed",
+  "Forward_Chat": "Přeposlat chat",
+  "Forward_message": "Přeposlat zprávu",
+  "Forward_to_department": "Předat na oddělení",
+  "Forward_to_user": "Přeposlat uživateli",
+  "Full_table": "Kliknutím zobrazíte celou tabulku",
+  "Generate_New_Link": "Vygenerovat nový odkaz",
+  "Get_link": "Získat odkaz",
+  "Go_to_your_device_settings_and_allow_microphone": "Přejděte do nastavení zařízení a povolte přístup k mikrofonu pro Rocket.Chat",
+  "Group_by": "Skupina vytvořená",
+  "Has_left_the_team": "opustil tým",
+  "Hide_room": "Skrýt",
+  "Hide_System_Messages": "Skrýt systémové zprávy",
+  "Hide_type_messages": "Skrýt \"{{type}}\" zprávy",
+  "How_It_Works": "Jak to funguje",
+  "I_Saved_My_E2E_Password": "Uložil jsem své heslo E2E",
+  "Ignore": "Ignorovat",
+  "Images": "Snímky",
+  "Images_uploaded": "Obrázky nahrány",
+  "In_app": "V aplikaci",
+  "In_App_And_Desktop": "V aplikaci a na ploše",
+  "In_App_and_Desktop_Alert_info": "Zobrazí banner v horní části obrazovky, když je otevřená aplikace, a zobrazí upozornění na ploše",
+  "In_app_message_notifications": "Oznámení o zprávách v aplikaci",
+  "Incoming_call_from": "Příchozí hovor od",
+  "Inline_code": "Vložený kód",
+  "insert_Avatar_URL": "sem vložte adresu URL obrázku",
+  "Insert_Join_Code": "Vložte připojovací kód",
+  "Invalid_Email": "Neplatný e-mail",
+  "Invalid_or_expired_invite_token": "Neplatný nebo vypršela platnost tokenu pozvánky",
+  "Invalid_server_version": "Pracovní prostor, který se pokoušíte připojit, používá verzi, která již není aplikací podporována: {{currentVersion}}.\n\nPožadujeme verzi {{minVersion}}",
+  "Invisible": "Neviditelný",
+  "Invite_Link": "Odkaz na pozvánku",
+  "Invite_user_to_join_channel": "Pozvat jednoho uživatele, aby se připojil k tomuto kanálu",
+  "Invite_user_to_join_channel_all_from": "Pozvat všechny uživatele z [#channel], aby se připojili k tomuto kanálu",
+  "Invite_user_to_join_channel_all_to": "Pozvat všechny uživatele z tohoto kanálu, aby se připojili ke [#channel]",
+  "Invite_users": "Pozvat uživatele",
+  "IP": "IP",
+  "is_typing": "píše",
+  "Italic": "kurzíva",
+  "Jitsi_authentication_before_making_calls": "Jitsi může před uskutečněním hovorů vyžadovat ověření. Chcete-li se dozvědět více o jejich zásadách, navštivte web Jitsi.",
+  "Jitsi_authentication_before_making_calls_admin": "Jitsi může před uskutečněním hovorů vyžadovat ověření. Chcete-li se dozvědět více o jejich zásadách, navštivte web Jitsi. V předvolbách můžete také aktualizovat výchozí aplikaci pro videohovory.",
+  "Jitsi_authentication_before_making_calls_ask_admin": "Pokud se domníváte, že existují problémy s Jitsi a její autentizací, požádejte o pomoc správce pracovního prostoru.",
+  "Jitsi_may_require_authentication": "Jitsi může vyžadovat ověření",
+  "Join": "Připojit se",
+  "Join_Code": "Připojit se ke kódu",
+  "Join_our_open_workspace": "Připojte se k našemu otevřenému pracovnímu prostoru",
+  "Join_the_given_channel": "Připojte se k danému kanálu",
+  "Joined": "Připojeno",
+  "Jump_to_message": "Přejít na zprávu",
+  "Just_invited_people_can_access_this_channel": "K tomuto kanálu mají přístup pouze pozvaní lidé",
+  "Just_invited_people_can_access_this_team": "K tomuto týmu mají přístup pouze pozvaní lidé",
+  "Language": "Jazyk",
+  "last_message": "poslední zpráva",
+  "Last_owner_team_room": "Jste posledním vlastníkem tohoto kanálu. Jakmile tým opustíte, kanál zůstane uvnitř týmu, ale budete ho spravovat zvenčí.",
+  "last-owner-can-not-be-removed": "Posledního vlastníka nelze odebrat",
+  "Leader": "Vůdce",
+  "Learn_more": "Další informace",
+  "Leave": "Odejít",
+  "leave": "odejít",
+  "Leave_Team": "Opustit tým",
+  "Leave_the_current_channel": "Opustit aktuální kanál",
+  "leaving_room": "opouští pokoj",
+  "Left_The_Room_Successfully": "Úspěšně jste opustili místnost",
+  "Left_The_Team_Successfully": "Úspěšně opustil tým",
+  "Legal": "Právní",
+  "License": "Licence",
+  "Light": "Světlo",
+  "Livechat_transfer_return_to_the_queue": "vrátil chat do fronty",
+  "Load_More": "Načíst další",
+  "Load_Newer": "Načíst novější",
+  "Load_Older": "Načíst starší",
+  "Local_authentication_auto_lock_1800": "Po 30 minutách",
+  "Local_authentication_auto_lock_300": "Po 5 minutách",
+  "Local_authentication_auto_lock_3600": "Po 1 hodině",
+  "Local_authentication_auto_lock_60": "Po 1 minutě",
+  "Local_authentication_auto_lock_900": "Po 15 minutách",
+  "Local_authentication_biometry_fallback": "Použít přístupový kód",
+  "Local_authentication_biometry_title": "Ověřit",
+  "Local_authentication_change_passcode": "Změnit heslo",
+  "Local_authentication_facial_recognition": "Rozpoznávání obličeje",
+  "Local_authentication_fingerprint": "otisk prstu",
+  "Local_authentication_info": "Poznámka: Pokud zapomenete přístupový kód, budete muset aplikaci smazat a znovu nainstalovat.",
+  "Local_authentication_unlock_option": "Odemknout pomocí hesla",
+  "Local_authentication_unlock_with_label": "Odemknout pomocí {{label}}",
+  "Log_analytics_events": "Protokolovat analytické události",
+  "Logged_out_by_server": "Byli jste odhlášeni pracovním prostorem. Přihlaste se prosím znovu.",
+  "Logged_out_of_other_clients_successfully": "Úspěšně jste odhlášeni od ostatních klientů",
+  "Logging_out": "Odhlášení.",
+  "Login": "Přihlásit se",
+  "Login_error": "Vaše přihlašovací údaje byly odmítnuty! Zkuste to prosím znovu.",
+  "Login_has_been_temporarily_blocked_for_this_IP": "Přihlášení bylo dočasně zablokováno pro tuto IP",
+  "Login_has_been_temporarily_blocked_for_this_User": "Přihlášení bylo pro tohoto uživatele dočasně zablokováno",
+  "Logout": "Odhlásit se",
+  "Logout_failed": "Odhlášení se nezdařilo!",
+  "Logout_from_other_logged_in_locations": "Odhlásit se z jiných přihlášených míst",
+  "Mark_as_unread": "Označit jako nepřečtené",
+  "Mark_as_unread_Info": "Zobrazit místnost jako nepřečtenou, když existují nepřečtené zprávy",
+  "Mark_unread": "Označit nepřečtené",
+  "Max_number_of_users_allowed_is_number": "Maximální povolený počet uživatelů je {{maxUsers}}",
+  "Max_number_of_uses": "Maximální počet použití",
+  "Media_auto_download": "Automatické stahování médií",
+  "Members": "Členové",
+  "members": "členové",
+  "Mentions": "Zmínky",
+  "Message": "Zpráva",
+  "message": "zpráva",
+  "Message_actions": "Akce zpráv",
+  "Message_composer_Send_to_channel": "Také odeslat do kanálu",
+  "Message_has_been_shared": "Zpráva byla sdílena",
+  "Message_HideType_added_user_to_team": "Skrýt zprávy \"Uživatel byl přidán do týmu\"",
+  "Message_HideType_au": "Uživatel přidán",
+  "Message_HideType_mute_unmute": "Uživatel ztlumen / zrušen",
+  "Message_HideType_r": "Název místnosti se změnil",
+  "Message_HideType_removed_user_from_team": "Skrýt zprávy \"Uživatel byl odebrán z týmu\"",
+  "Message_HideType_rm": "Zpráva odstraněna",
+  "Message_HideType_room_archived": "Místnost archivována",
+  "Message_HideType_room_unarchived": "Místnost obnovena z archivu",
+  "Message_HideType_ru": "Uživatel odstraněn",
+  "Message_HideType_subscription_role_added": "Byla nastavena role",
+  "Message_HideType_subscription_role_removed": "Role již není definována",
+  "Message_HideType_uj": "Připojení uživatele",
+  "Message_HideType_ujt": "Skrýt zprávy \"Uživatel se připojil k týmu\"",
+  "Message_HideType_ul": "Uživatelské volno",
+  "Message_HideType_ult": "Skrýt zprávy \"Uživatel opustil tým\"",
+  "Message_HideType_user_added_room_to_team": "Skrýt \"Uživatel přidal místnost do zpráv týmu\"",
+  "Message_HideType_user_converted_to_channel": "Skrýt zprávy \"Uživatel převedl tým na kanál\"",
+  "Message_HideType_user_converted_to_team": "Skrýt zprávy \"Uživatel převedl kanál na tým\"",
+  "Message_HideType_user_deleted_room_from_team": "Skrýt \"Uživatel smazal místnost ze zpráv týmu\"",
+  "Message_HideType_user_removed_room_from_team": "Skrýt \"Uživatel odebral místnost ze zpráv týmu\"",
+  "Message_HideType_ut": "Uživatel se připojil ke konverzaci",
+  "Message_HideType_wm": "Vítejte",
+  "Message_Ignored": "Zpráva ignorována. Klepnutím ji zobrazíte.",
+  "Message_removed": "zpráva odstraněna",
+  "Message_Reported": "Zpráva nahlášena",
+  "Message_roomname": "Zpráva {{roomName}}",
+  "Message_starred": "Zpráva označena hvězdičkou",
+  "Message_unstarred": "Zpráva nebyla označena hvězdičkou",
+  "messages": "zprávy",
+  "Microphone_access_needed_to_record_audio": "Pro záznam zvuku je nutný přístup k mikrofonu",
+  "Missed_call": "Zmeškaný hovor",
+  "Moderator": "Moderátor",
+  "move": "hýbat se",
+  "Move_Channel_Paragraph": "Přesunutí kanálu do týmu znamená, že tento kanál bude přidán do kontextu týmu, ale všichni členové kanálu, kteří nejsou členy příslušného týmu, budou mít stále přístup k tomuto kanálu, ale nebudou přidáni jako členové týmu. \n\nVeškerou správu kanálu budou nadále provádět vlastníci tohoto kanálu.\n\nČlenové týmu a dokonce i vlastníci týmu, pokud nejsou členy tohoto kanálu, nemají přístup k obsahu kanálu že vlastník týmu bude moci odebrat členy z kanálu.",
+  "Move_to_Team": "Přesunout do týmu",
+  "Move_to_Team_Warning": "Chcete po přečtení předchozích pokynů o tomto chování přesto přesunout tento kanál do vybraného týmu?",
+  "moving_channel_to_team": "přesun kanálu do týmu",
+  "Mute": "Ztlumit",
+  "Mute_someone_in_room": "Ztlumit někoho v místnosti",
+  "muted": "utlumený",
+  "N_channels": "{{n}} kanály",
+  "N_people_reacted": "{{n}} lidí reagovalo",
+  "N_Selected_members": "{{n}} vybráno",
+  "N_users": "{{n}} uživatelů",
+  "Name": "Název",
+  "Never": "Nikdy",
+  "New_chat_transfer": "Nový přenos chatu: {{agent}} vrátil chat do fronty",
+  "New_Message": "Nová zpráva",
+  "New_Password": "Nové heslo",
+  "Next": "Další",
+  "Nickname": "Přezdívka",
+  "No_available_agents_to_transfer": "Žádní dostupní agenti k převodu",
+  "No_canned_responses": "Žádné předpřipravené odpovědi",
+  "No_channels_in_team": "V tomto týmu nejsou žádné kanály",
+  "No_discussions": "Žádné diskuse",
+  "No_files": "Žádné soubory",
+  "No_further_action_is_needed": "Není potřeba žádná další akce",
+  "No_label_provided": "Nebylo poskytnuto žádné {{label}}.",
+  "No_limit": "Bez omezení",
+  "No_match_found": "Žádná shoda nenalezena.",
+  "No_members_found": "Nenalezeni žádní členové",
+  "No_mentioned_messages": "Žádné uvedené zprávy",
+  "No_Message": "Žádná zpráva",
+  "No_messages_yet": "Zatím žádné zprávy",
+  "No_pinned_messages": "Žádné připnuté zprávy",
+  "No_Reactions": "Žádné reakce",
+  "No_Read_Receipts": "Žádné potvrzení o přečtení",
+  "No_results_found": "Nebyly nalezeny žádné výsledky",
+  "No_starred_messages": "Žádné zprávy označené hvězdičkou",
+  "No_threads": "Neexistují žádná vlákna",
+  "No_threads_following": "Nesledujete žádná vlákna",
+  "No_threads_unread": "Neexistují žádná nepřečtená vlákna",
+  "no-active-video-conf-provider-body": "Správce pracovního prostoru musí nejprve povolit funkci konferenčního hovoru.",
+  "no-active-video-conf-provider-header": "Konferenční hovor není povolen",
+  "no-videoconf-provider-app-body": "Aplikace pro konferenční hovory může na Rocket.Chat Marketplace nainstalovat správce pracovního prostoru.",
+  "no-videoconf-provider-app-header": "Konferenční hovor není k dispozici",
+  "Not_in_channel": "Není v kanálu",
+  "Not_RC_Server": "Toto není pracovní prostor Rocket.Chat.\n{{kontakt}}",
+  "Nothing": "Nic",
+  "Nothing_to_save": "Není co zachraňovat!",
+  "Notification_delay": "Zpoždění oznámení",
+  "Notification_delay_description": "Existují faktory, které mohou přispět ke zpožděným oznámením. Další informace najdete v dokumentech Rocket.Chat.",
+  "Notification_Preferences": "Předvolby oznámení",
+  "Notifications": "Oznámení",
+  "Notify_active_in_this_room": "Upozornit aktivní uživatele v této místnosti",
+  "Notify_all_in_this_room": "Upozornit všechny v této místnosti",
+  "Off": "Vypnuto",
+  "Omnichannel": "Omnikanál",
+  "Omnichannel_enable_alert": "Nejste k dispozici na Omnikanálu. Chcete být k dispozici?",
+  "Omnichannel_on_hold_chat_resumed": "Podržený chat obnoven: {{comment}}",
+  "Omnichannel_placed_chat_on_hold": "Chat pozastaven: {{comment}}",
+  "Omnichannel_queue": "Omnikanálová fronta",
+  "On_hold_Livechats": "Omnikanálové chaty pozastaveny",
+  "Onboarding_agree_terms": "Pokračováním souhlasíte s Rocket.Chat",
+  "Onboarding_join_open_description": "Připojte se k našemu otevřenému pracovnímu prostoru a chatujte s týmem a komunitou Rocket.Chat.",
+  "Onboarding_less_options": "Méně možností",
+  "Onboarding_more_options": "Více možností",
+  "Onboarding_subtitle": "Mimo týmovou spolupráci",
+  "Online": "Online",
+  "Only_authorized_users_can_write_new_messages": "Pouze oprávnění uživatelé mohou psát nové zprávy",
+  "Oops": "Jejda!",
+  "Open_emoji_selector": "Otevřít výběr emodži",
+  "Open_Livechats": "Probíhají vícekanálové chaty",
+  "Open_markdown_tools": "Otevřít nástroje markdown",
+  "Open_mention_autocomplete": "Automatické doplňování otevřené zmínky",
+  "Open_your_authentication_app_and_enter_the_code": "Otevřete svou ověřovací aplikaci a zadejte kód.",
+  "OR": "NEBO",
+  "OS": "OS",
+  "Overwrites_the_server_configuration_and_use_room_config": "Přepíše konfiguraci pracovního prostoru a použije konfiguraci místnosti",
+  "Owner": "Majitel",
+  "Parent_channel_or_group": "Rodičovský kanál nebo skupina",
+  "Passcode_app_locked_subtitle": "Zkuste to znovu za {{timeLeft}} sekund",
+  "Passcode_app_locked_title": "Aplikace uzamčena",
+  "Passcode_choose_confirm_title": "Potvrďte svůj nový přístupový kód",
+  "Passcode_choose_error": "Hesla se neshodují. Zkuste to znovu.",
+  "Passcode_choose_force_set": "Heslo vyžaduje administrátor",
+  "Passcode_choose_title": "Vyberte si nový přístupový kód",
+  "Passcode_enter_title": "Zadejte přístupový kód",
+  "Password": "Heslo",
+  "Permalink_copied_to_clipboard": "Trvalý odkaz zkopírován do schránky!",
+  "Person_or_channel": "Osoba nebo kanál",
+  "Phone": "Telefon",
+  "Pin": "Kolík",
+  "Pinned": "Připnuto",
+  "Pinned_a_message": "Připnuta zpráva:",
+  "Place_chat_on_hold": "Pozastavit chat",
+  "Please_add_a_comment": "Přidejte prosím komentář",
+  "Please_enter_your_password": "Prosím zadejte své heslo",
+  "Please_wait": "Prosím, čekejte.",
+  "Preferences": "Předvolby",
+  "Presence_Cap_Warning_Description": "Aktivní připojení dosáhla limitu pro pracovní prostor, takže služba, která zpracovává stav uživatele, je zakázána. Lze ji znovu povolit ručně v nastavení pracovního prostoru.",
+  "Presence_Cap_Warning_Title": "Stav uživatele dočasně zakázán",
+  "Privacy_Policy": " Zásady ochrany osobních údajů",
+  "Private": "Soukromé",
+  "Processing": "Zpracovává se...",
+  "Profile": "Profil",
+  "Profile_saved_successfully": "Profil byl úspěšně uložen!",
+  "Public": "Veřejnost",
+  "Push_gateway_connected_description": "Pošlete si upozornění push, abyste zkontrolovali, zda brána funguje",
+  "Push_gateway_connection": "Připojení push brány",
+  "Push_gateway_not_connected_description": "Nemůžeme se připojit k bráně push. Pokud problém přetrvává, obraťte se na správce pracovního prostoru.",
+  "Push_Notifications": "Oznámení push",
+  "Push_Notifications_Alert_Info": "Tato oznámení se vám doručují, když aplikace není otevřená",
+  "Push_Troubleshooting": "Odstraňování problémů push",
+  "Queued_chats": "Chaty ve frontě",
+  "Quote": "Citát",
+  "Reactions_are_disabled": "Reakce jsou zakázány",
+  "Reactions_are_enabled": "Reakce jsou povoleny",
+  "Read_External_Permission": "Povolení ke čtení médií",
+  "Read_External_Permission_Message": "Rocket.Chat potřebuje přístup k fotografiím, médiím a souborům ve vašem zařízení",
+  "Read_Only": "Pouze ke čtení",
+  "Read_only_hint": "Pouze oprávnění uživatelé mohou psát nové zprávy",
+  "Read_Receipt": "Potvrzení o přečtení",
+  "Receive_Group_Mentions": "Přijímat zmínky o skupině",
+  "Receive_Group_Mentions_Info": "Přijímat @všechny a @zde zmínky",
+  "Receive_Notification": "Přijmout oznámení",
+  "Receive_notifications_from": "Přijímat oznámení od {{name}}",
+  "Recording_audio_in_progress": "Nahrávání zvukové zprávy",
+  "Register": "Registrovat",
+  "Registration_Succeeded": "Registrace byla úspěšná!",
+  "Remove": "Odstranit",
+  "remove": "odstranit",
+  "Remove_from_room": "Odebrat z místnosti",
+  "Remove_from_Team": "Odebrat z týmu",
+  "Remove_Member": "Odebrat člena",
+  "Remove_quote_message": "Odstranit zprávu s nabídkou",
+  "Remove_someone_from_room": "Odstranit někoho z místnosti",
+  "Remove_Team_Room_Warning": "Přejete si odebrat tento kanál z týmu? Kanál bude přesunut zpět do pracovního prostoru",
+  "Remove_User_Team_Channels": "Vyberte kanály, ze kterých chcete uživatele odebrat.",
+  "Removed__roomName__from_the_team": "odstraněno #{{roomName}} z tohoto týmu",
+  "Removed__username__from_the_team": "odstraněno @{{userRemoved}} z tohoto týmu",
+  "Removed_user_as_role": "odstraněno {{user}} jako {{role}}",
+  "removing_team": "odstranění z týmu",
+  "Removing_user_from_this_team": "Odebíráte uživatele {{user}} z tohoto týmu",
+  "replies": "odpovědi",
+  "Reply": "Odpověď",
+  "reply": "odpověď",
+  "Reply_in_direct_message": "Odpovědět v přímé zprávě",
+  "Reply_in_Thread": "Odpověď ve vláknu",
+  "Report": "Zpráva",
+  "Report_sent_successfully": "Hlášení bylo úspěšně odesláno",
+  "Report_user": "Nahlásit uživatele",
+  "Resend": "Přeposlat",
+  "Resend_email": "Přeposlat email",
+  "RESET": "RESETOVAT",
+  "Reset_password": "Obnovit heslo",
+  "resetting_password": "resetování hesla",
+  "Resume": "Životopis",
+  "Return_to_waiting_line": "Návrat na čekací frontu",
+  "Review_app_desc": "Dejte nám 5 hvězdiček v {{store}}",
+  "Review_app_later": "Možná později",
+  "Review_app_no": "Ne",
+  "Review_app_title": "Líbí se vám tato aplikace?",
+  "Review_app_unable_store": "Nelze otevřít {{store}}",
+  "Review_app_yes": "Tak určitě!",
+  "Review_this_app": "Zkontrolovat tuto aplikaci",
+  "Roles": "Role",
+  "room_allowed_reactions": "povolené reakce",
+  "room_archived": "archivovaná místnost",
+  "room_avatar_changed": "avatar změněné místnosti",
+  "room_changed_topic_to": "změnil téma místnosti na: {{topic}}",
+  "room_changed_type": "změnil pokoj na {{type}}",
+  "room_disallowed_reactions": "nepovolené reakce",
+  "Room_Info": "Informace o pokoji",
+  "Room_Info_Edit": "Úprava informací o místnosti",
+  "Room_name_changed_to": "změnil název místnosti na: {{name}}",
+  "Room_not_found": "Pokoj nenalezen",
+  "room_removed_read_only_permission": "odstraněno oprávnění pouze pro čtení",
+  "room_set_read_only_permission": "nastavit místnost pouze pro čtení",
+  "room_unarchived": "nearchivovaná místnost",
+  "room-name-already-exists": "Název místnosti již existuje",
+  "SAVE": "ULOŽIT",
+  "Save": "Uložit",
+  "Save_Changes": "Uložit změny",
+  "Save_Your_E2E_Password": "Uložte si heslo E2E",
+  "Save_Your_Encryption_Password": "Uložte své šifrovací heslo",
+  "Save_Your_Encryption_Password_info": "Pokud ztratíte své heslo, neexistuje způsob, jak ho obnovit a ztratíte přístup ke svým zprávám.",
+  "Save_Your_Encryption_Password_warning": "Toto heslo není nikde uloženo, proto si ho pečlivě uložte někde jinde.",
+  "Saved": "Uložené",
+  "saved_to_gallery": "Uloženo do galerie",
+  "saving_preferences": "ukládání předvoleb",
+  "saving_profile": "ukládání profilu",
+  "saving_settings": "uložení nastavení",
+  "Screen_lock": "Zámek obrazovky",
+  "Search": "Vyhledávání",
+  "Search_by": "Hledat pomocí",
+  "Search_emoji": "Vyhledat emotikony",
+  "Search_global_users": "Hledat globální uživatele",
+  "Search_global_users_description": "Pokud zapnete, můžete vyhledat libovolného uživatele z jiných společností nebo pracovních prostorů.",
+  "Search_Messages": "Hledat zprávy",
+  "Search_messages": "Hledat zprávy",
+  "Searching": "Hledání",
+  "Security_and_privacy": "Bezpečnost a soukromí",
+  "Select": "Vybrat",
+  "Select_a_Channel": "Vyberte kanál",
+  "Select_a_Department": "Vyberte oddělení",
+  "Select_a_User": "Vyberte uživatele",
+  "Select_an_option": "Vyberte možnost",
+  "Select_channels_to_delete": "Toto nelze vrátit zpět. Jakmile smažete tým, bude smazán veškerý obsah chatu a konfigurace. \n\nVyberte kanály, které chcete smazat. Ty, které se rozhodnete ponechat, budou dostupné ve vašem pracovním prostoru. Všimněte si, že veřejné kanály budou nadále veřejné a viditelné pro všechny.",
+  "Select_Members": "Vybrat členy",
+  "Select_Server": "Vybrat pracovní prostor",
+  "Select_tags": "Vybrat značky",
+  "Select_Team": "Vybrat tým",
+  "Select_Team_Channels": "Vyberte kanály týmu, které chcete opustit.",
+  "Select_Team_Channels_To_Delete": "Vyberte kanály týmu, které chcete smazat, ty, které nevyberete, budou přesunuty do pracovního prostoru. \n\nVšimněte si, že veřejné kanály budou veřejné a viditelné pro všechny.",
+  "Select_Users": "Vybrat uživatele",
+  "Send": "Poslat",
+  "Send_audio_message": "Odeslat zvukovou zprávu",
+  "Send_crash_report": "Odeslat zprávu o selhání",
+  "Send_email_confirmation": "Odeslat potvrzení e-mailem",
+  "Send_message": "Poslat zprávu",
+  "Send_to": "Poslat komu...",
+  "sending_email_confirmation": "zaslání potvrzení e-mailu",
+  "Sending_to": "Odesílání do",
+  "Server": "Pracovní prostor",
+  "Server_version": "Verze pracovního prostoru: {{version}}",
+  "Set_username_subtitle": "Uživatelské jméno se používá k tomu, aby se o vás ostatní mohli zmínit ve zprávách",
+  "Settings": "Nastavení",
+  "Settings_succesfully_changed": "Nastavení úspěšně změněno!",
+  "Share": "Podíl",
+  "Share_Link": "Sdílet odkaz",
+  "Share_this_app": "Sdílet tuto aplikaci",
+  "Sharing": "Sdílení",
+  "Shortcut": "Zkratka",
+  "Show_badge_for_mentions": "Zobrazit odznak pro zmínky",
+  "Show_badge_for_mentions_Info": "Zobrazit odznak pouze pro přímé zmínky",
+  "Show_less": "Ukaž méně",
+  "Show_more": "Zobrazit více",
+  "Show_the_keyboard_shortcut_list": "Zobrazit seznam klávesových zkratek",
+  "Sign_Up": "Přihlásit se",
+  "Skip": "Přeskočit",
+  "Slash_Gimme_Description": "Zobrazuje ༼ つ ◕_◕ ༽つ před vaší zprávou",
+  "Slash_LennyFace_Description": "Zobrazí ( ͡° ͜ʖ ͡°) po vaší zprávě",
+  "Slash_Shrug_Description": "Po vaší zprávě se zobrazí ¯\\_(ツ)_/¯",
+  "Slash_Status_Description": "Nastavit zprávu o stavu",
+  "Slash_Status_Params": "Zpráva o stavu",
+  "Slash_Tableflip_Description": "Zobrazuje (╯°□°）╯︵ ┻━┻",
+  "Slash_TableUnflip_Description": "Zobrazuje ┬─┬ ノ( ゜-゜ノ)",
+  "Slash_Topic_Description": "Nastavit téma",
+  "Slash_Topic_Params": "Zpráva tématu",
+  "Sort_by": "Seřazeno podle",
+  "Sound": "Zvuk",
+  "Star": "Hvězda",
+  "Starred": "S hvězdičkou",
+  "Start_a_call": "Zahájit hovor",
+  "Start_a_Discussion": "Zahájit diskusi",
+  "Started_call": "Hovor zahájil {{userBy}}",
+  "Started_discussion": "Zahájena diskuse:",
+  "Status_saved_successfully": "Stav úspěšně uložen!",
+  "Strikethrough": "Přeškrtnout",
+  "Supported_versions_expired_description": "Správce potřebuje aktualizovat pracovní prostor na podporovanou verzi, aby mohl znovu povolit přístup z mobilních a desktopových aplikací.",
+  "Supported_versions_expired_title": "{{workspace_name}} používá nepodporovanou verzi Rocket.Chat",
+  "Supported_versions_warning_update_required": "Vyžadována aktualizace",
+  "System_default": "Výchozí nastavení systému",
+  "Table": "Stůl",
+  "Tags": "Značky",
+  "Take_a_photo": "Vyfoť",
+  "Take_a_video": "Natočit video",
+  "Take_it": "Vzít to!",
+  "Team": "Tým",
+  "Team_hint_encrypted": "End to end šifrovaný tým. Vyhledávání nebude fungovat u šifrovaných týmů a oznámení nemusí zobrazovat obsah zpráv.",
+  "Team_hint_encrypted_not_available": "K dispozici pouze pro soukromý tým",
+  "Team_hint_not_read_only": "Všichni uživatelé v tomto týmu mohou psát zprávy",
+  "Team_hint_private": "Připojit se mohou pouze pozvaní lidé",
+  "Team_hint_public": "Když je deaktivován, kdokoli se může připojit k týmu",
+  "Team_Name": "Jméno týmu",
+  "Team_not_found": "Tým nenalezen",
+  "team-name-already-exists": "Tým s tímto názvem již existuje",
+  "Teams": "Týmy",
+  "Terms_of_Service": "Podmínky služby",
+  "Test_push_notification": "Testovat oznámení push",
+  "The_maximum_number_of_users_has_been_reached": "Bylo dosaženo maximálního počtu uživatelů.",
+  "The_room_does_not_exist": "Místnost neexistuje nebo možná nemáte oprávnění k přístupu",
+  "The_user_will_be_able_to_type_in_roomName": "Uživatel bude moci psát v {{roomName}}",
+  "The_user_will_be_removed_from_s": "Uživatel bude odebrán z {{s}}",
+  "The_user_wont_be_able_to_type_in_roomName": "Uživatel nebude moci psát v {{roomName}}",
+  "Theme": "Téma",
+  "There_was_an_error_while_action": "Při {{action}} došlo k chybě!",
+  "This_room_is_blocked": "Tato místnost je zablokována",
+  "This_room_is_read_only": "Tato místnost je pouze pro čtení",
+  "This_will_clear_all_your_offline_data": "Tímto vymažete všechna vaše offline data.",
+  "This_will_remove_all_data_from_this_server": "Tímto odstraníte všechna data z tohoto pracovního prostoru.",
+  "Thread": "Vlákno",
+  "Threads": "Vlákna",
+  "Threads_displaying_all": "Zobrazení všech",
+  "Threads_displaying_following": "Zobrazení sledování",
+  "Threads_displaying_unread": "Zobrazuji nepřečtené",
+  "Timezone": "Časové pásmo",
+  "Token_expired": "Vaše relace vypršela. Přihlaste se prosím znovu.",
+  "Topic": "Téma",
+  "topic": "téma",
+  "totp-invalid": "Neplatný kód nebo heslo",
+  "Translate": "Přeložit",
+  "Troubleshooting": "Odstraňování problémů",
+  "Try_again": "Zkusit to znovu",
+  "Two_Factor_Authentication": "Dvoufaktorové ověřování",
+  "Type_message": "Zadejte zprávu",
+  "Types": "Typy",
+  "UNARCHIVE": "UNARCHIVOVAT",
+  "unarchive": "zrušit archivaci",
+  "unauthorized": "Neoprávněný",
+  "Unblock": "Odblokovat",
+  "Unfollowed_thread": "Nesledované vlákno",
+  "Unignore": "Přestat ignorovat",
+  "Unmute": "Přestat ignorovat",
+  "Unmute_someone_in_room": "Zrušte zvuk někoho v místnosti",
+  "unmuted": "neztlumeno",
+  "Unpin": "Uvolnit",
+  "Unread": "Nepřečtený",
+  "unread_messages": "nepřečtený",
+  "Unread_on_top": "Nepřečteno nahoře",
+  "Unstar": "Odebrat hvězdičku",
+  "Unsupported_format": "Nepodporovaný formát",
+  "Unsupported_system_message": "Nepodporovaná systémová zpráva",
+  "Updating": "Aktualizuji...",
+  "Upload_image": "Nahrát obrázek",
+  "Upload_in_progress": "Probíhá nahrávání",
+  "Uploading": "Nahrávání",
+  "Use": "Použití",
+  "User": "Uživatel",
+  "User__username__is_now_a_leader_of__room_name_": "Uživatel {{username}} je nyní vedoucím {{room_name}}",
+  "User__username__is_now_a_moderator_of__room_name_": "Uživatel {{username}} je nyní moderátorem {{room_name}}",
+  "User__username__is_now_a_owner_of__room_name_": "Uživatel {{username}} je nyní vlastníkem místnosti {{room_name}}",
+  "User__username__removed_from__room_name__leaders": "Uživatel {{username}} byl odebrán z vedoucích {{room_name}}",
+  "User__username__removed_from__room_name__moderators": "Uživatel {{username}} byl odebrán z moderátorů {{room_name}}",
+  "User__username__removed_from__room_name__owners": "Uživatel {{username}} byl odebrán z vlastníků {{room_name}}",
+  "User_added_to": "přidáno {{userAdded}}",
+  "User_has_been_ignored": "Uživatel byl ignorován",
+  "User_has_been_key": "Uživatel byl {{key}}",
+  "User_has_been_muted": "muted {{userMuted}}",
+  "User_has_been_removed": "odstraněno {{userRemoved}}",
+  "User_has_been_removed_from_s": "Uživatel byl odebrán z {{s}}",
+  "User_has_been_unignored": "Uživatel již není ignorován",
+  "User_has_been_unmuted": "unmuted {{userUnmuted}}",
+  "User_Info": "Uživatelské informace",
+  "User_joined_the_channel": "připojil se ke kanálu",
+  "User_joined_the_conversation": "připojil se ke konverzaci",
+  "User_joined_the_team": "připojil se k tomuto týmu",
+  "User_left_this_channel": "opustil kanál",
+  "User_not_found_or": "Uživatel nenalezen nebo nesprávné heslo",
+  "User_sent_an_attachment": "{{user}} poslal přílohu",
+  "Username": "Uživatelské jméno",
+  "Username_or_email": "Uživatelské jméno nebo email",
+  "Users": "Uživatelé",
+  "Uses_server_configuration": "Používá konfiguraci pracovního prostoru",
+  "Verify": "Ověřit",
+  "Verify_email_desc": "Poslali jsme vám e-mail pro potvrzení vaší registrace. Pokud e-mail brzy neobdržíte, vraťte se a zkuste to znovu.",
+  "Version_no": "Verze: {{version}}",
+  "Vibrate": "Vibrovat",
+  "Video": "Video",
+  "video-conf-provider-not-configured-body": "Správce pracovního prostoru musí nejprve povolit funkci konferenčních hovorů.",
+  "video-conf-provider-not-configured-header": "Konferenční hovor není povolen",
+  "View_Original": "Zobrazit originál",
+  "Wait_activation_warning": "Než se budete moci přihlásit, váš účet musí být ručně aktivován administrátorem.",
+  "Waiting_for_answer": "Čekání na odpověď",
+  "Waiting_for_network": "Čekání na síť...",
+  "Waiting_for_server_connection": "Čekání na připojení k serveru",
+  "Websocket_disabled": "Websocket je pro tento pracovní prostor zakázán.\n{{contact}}",
+  "What_are_you_doing_right_now": "Co právě děláte?",
+  "Whats_the_password_for_your_certificate": "Jaké je heslo pro váš certifikát?",
+  "Why_do_you_want_to_report": "Jaky je důvod hlášení?",
+  "Wi_Fi": "Wi-Fi",
+  "Wi_Fi_and_mobile_data": "Wi-Fi a mobilní data",
+  "Without_Servers": "Bez pracovních prostorů",
+  "Workspace_consumption": "Spotřeba pracovního prostoru",
+  "Workspace_consumption_description": "Je stanovený počet push notifikací za měsíc",
+  "Workspace_URL_Example": "Např. vaše-společnost.rocket.chat",
+  "Workspaces": "Pracovní prostory",
+  "Would_like_to_place_on_hold": "Chcete tento chat pozastavit?",
+  "Would_you_like_to_return_the_inquiry": "Chcete vrátit dotaz?",
+  "Write_External_Permission": "Povolení galerie",
+  "Write_External_Permission_Message": "Rocket.Chat potřebuje přístup k vaší galerii, abyste mohli ukládat obrázky.",
+  "Yes": "Ano",
+  "Yes_action_it": "Ano, {{action}} to!",
+  "Yes_remove_user": "Ano, odebrat uživatele!",
+  "Yesterday": "Včera",
+  "You": "Vy",
+  "you": "vy",
+  "You_are_converting_the_team": "Převádíte tento tým na kanál",
+  "You_are_deleting_the_team": "Smažete tento tým.",
+  "You_are_in_preview_mode": "Jste v režimu náhledu",
+  "You_are_leaving_the_team": "Opouštíte tým '{{team}}''",
+  "You_can_search_using_RegExp_eg": "Můžete použít RegExp. např. `/^text$/i`",
+  "You_colon": "Vy: ",
+  "You_dont_have_permission_to_perform_this_action": "Nemáte oprávnění k provedení této akce. Informujte se u správce pracovního prostoru.",
+  "You_need_to_access_at_least_one_RocketChat_server_to_share_something": "Abyste mohli něco sdílet, musíte mít přístup alespoň k jednomu pracovnímu prostoru Rocket.Chat.",
+  "You_need_to_verifiy_your_email_address_to_get_notications": "Abyste mohli dostávat oznámení, musíte ověřit svou e-mailovou adresu",
+  "you_were_mentioned": "byl jsi zmíněn",
+  "You_were_removed_from_channel": "Byli jste odebráni z {{channel}}",
+  "You_will_be_logged_out_from_other_locations": "Budete odhlášeni z jiných míst.",
+  "You_will_be_logged_out_of_this_application": "Budete odhlášeni z této aplikace.",
+  "You_will_not_be_able_to_recover_this_message": "Tuto zprávu nebudete moci obnovit!",
+  "You_will_unset_a_certificate_for_this_server": "Zrušíte nastavení certifikátu pro tento pracovní prostor",
+  "Your_certificate": "Váš certifikát",
+  "Your_invite_link_will_expire_after__usesLeft__uses": "Platnost vašeho odkazu s pozvánkou vyprší po {{usesLeft}} použití.",
+  "Your_invite_link_will_expire_on__date__": "Platnost vašeho zvacího odkazu vyprší {{date}}.",
+  "Your_invite_link_will_expire_on__date__or_after__usesLeft__uses": "Platnost vašeho odkazu s pozvánkou vyprší {{date}} nebo po {{usesLeft}} použití.",
+  "Your_invite_link_will_never_expire": "Platnost vašeho odkazu s pozvánkou nikdy nevyprší.",
+  "Your_password_is": "Vaše heslo je",
+  "Your_push_was_sent_to_s_devices": "Vaše push byla odeslána do {{s}} zařízení",
+  "Your_workspace": "Váš pracovní prostor"
+}
\ No newline at end of file
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index f251c8537..306c8f9ab 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -689,6 +689,7 @@
   "Supported_versions_expired_description": "An admin needs to update the workspace to a supported version in order to reenable access from mobile and desktop apps.",
   "Supported_versions_expired_title": "{{workspace_name}} is running an unsupported version of Rocket.Chat",
   "Supported_versions_warning_update_required": "Update required",
+  "System_default": "System default",
   "Table": "Table",
   "Tags": "Tags",
   "Take_a_photo": "Take a photo",
diff --git a/app/i18n/locales/pt-BR.json b/app/i18n/locales/pt-BR.json
index 0d8b09fd6..d6f39bbe8 100644
--- a/app/i18n/locales/pt-BR.json
+++ b/app/i18n/locales/pt-BR.json
@@ -678,6 +678,7 @@
   "Supported_versions_expired_description": "Um administrador precisa atualizar o espaço de trabalho para uma versão suportada a fim de reabilitar o acesso a partir de aplicativos móveis e de desktop.",
   "Supported_versions_expired_title": "{{workspace_name}} está executando uma versão não suportada do Rocket.Chat",
   "Supported_versions_warning_update_required": "Atualização necessária",
+  "System_default": "Padrão do sistema",
   "Table": "Tabela",
   "Tags": "Tags",
   "Take_a_photo": "Tirar uma foto",
diff --git a/app/index.tsx b/app/index.tsx
index 765d8175e..8131fdac8 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -200,9 +200,7 @@ export default class Root extends React.Component<{}, IState> {
 	render() {
 		const { themePreferences, theme, width, height, scale, fontScale } = this.state;
 		return (
-			<SafeAreaProvider
-				initialMetrics={initialWindowMetrics}
-				style={{ backgroundColor: themes[this.state.theme].backgroundColor }}>
+			<SafeAreaProvider initialMetrics={initialWindowMetrics} style={{ backgroundColor: themes[this.state.theme].surfaceRoom }}>
 				<Provider store={store}>
 					<ThemeContext.Provider
 						value={{
@@ -210,7 +208,8 @@ export default class Root extends React.Component<{}, IState> {
 							themePreferences,
 							setTheme: this.setTheme,
 							colors: colors[theme]
-						}}>
+						}}
+					>
 						<DimensionsContext.Provider
 							value={{
 								width,
@@ -218,7 +217,8 @@ export default class Root extends React.Component<{}, IState> {
 								scale,
 								fontScale,
 								setDimensions: this.setDimensions
-							}}>
+							}}
+						>
 							<GestureHandlerRootView>
 								<ActionSheetProvider>
 									<AppContainer />
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index 1be9c6add..52a10b255 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -1,29 +1,6 @@
-export const BACKGROUND_PUSH_COLOR = '#F5455C';
+const backdropColor = '#000000';
 
-export const STATUS_COLORS: any = {
-	online: '#2de0a5',
-	busy: '#f5455c',
-	away: '#ffd21f',
-	offline: '#cbced1',
-	loading: '#9ea2a8',
-	disabled: '#F38C39'
-};
-
-export const SWITCH_TRACK_COLOR = {
-	false: '#f5455c',
-	true: '#2de0a5'
-};
-
-const mentions = {
-	unreadColor: '#6C727A',
-	tunreadColor: '#1d74f5',
-	mentionMeColor: '#F5455C',
-	mentionGroupColor: '#F38C39',
-	mentionOtherColor: '#F3BE08'
-};
-
-// TODO: Remove this after the new colors are implemented
-const newColors = {
+const light = {
 	surfaceLight: '#FFFFFF',
 	surfaceTint: '#F7F8FA',
 	surfaceRoom: '#FFFFFF',
@@ -114,7 +91,8 @@ const newColors = {
 	buttonFontSuccess: '#FFFFFF',
 	buttonSuccessDisabled: '#FFFFFF'
 };
-const newColorsDark = {
+
+const dark = {
 	surfaceLight: '#262931',
 	surfaceTint: '#1F2329',
 	surfaceRoom: '#1F2329',
@@ -129,14 +107,14 @@ const newColorsDark = {
 	strokeExtraLight: '#2F343D',
 	strokeLight: '#333842',
 	strokeMedium: '#404754',
-	strokeDark: '#9EA2A8',
+	strokeDark: '#1F2329',
 	strokeExtraDark: '#CBCED1',
 	strokeExtraLightHighlight: '#87CBFC',
 	strokeHighlight: '#3976D1',
 	strokeExtraLightError: '#F49AA6',
 	strokeError: '#BB3E4E',
 
-	fontWhite: '#2F343D',
+	fontWhite: '#FFFFFF',
 	fontDisabled: '#60646C',
 	fontAnnotation: '#9EA2A8',
 	fontHint: '#9EA2A8',
@@ -206,253 +184,116 @@ const newColorsDark = {
 	buttonSuccessDisabled: '#757575'
 };
 
-const callButtons = {
-	cancelCallButton: '#F5455C',
-	acceptCallButton: '#158D65'
+const black = {
+	surfaceLight: '#0d0d0d',
+	surfaceTint: '#16181a',
+	surfaceRoom: '#000000',
+	surfaceNeutral: '#16181a',
+	surfaceDisabled: '#24272E',
+	surfaceHover: '#080808',
+	surfaceSelected: '#3C3F44',
+	surfaceDark: '#E4E7EA',
+	surfaceFeatured: '#5F1477',
+	surfaceFeaturedHover: '#4A105D',
+
+	strokeExtraLight: '#2F343D',
+	strokeLight: '#1f2329',
+	strokeMedium: '#404754',
+	strokeDark: '#1F2329',
+	strokeExtraDark: '#CBCED1',
+	strokeExtraLightHighlight: '#87CBFC',
+	strokeHighlight: '#3976D1',
+	strokeExtraLightError: '#F49AA6',
+	strokeError: '#BB3E4E',
+
+	fontWhite: '#FFFFFF',
+	fontDisabled: '#60646C',
+	fontAnnotation: '#9EA2A8',
+	fontHint: '#9EA2A8',
+	fontSecondaryInfo: '#9EA2A8',
+	fontDefault: '#E4E7EA',
+	fontTitlesLabels: '#F2F3F5',
+	fontInfo: '#739EDE',
+	fontDanger: '#CF6E7A',
+	fontPureBlack: '#2F343D',
+	fontPureWhite: '#FFFFFF',
+
+	statusBackgroundInfo: '#A8C3EB',
+	statusBackgroundSuccess: '#C1EBDD',
+	statusBackgroundDanger: '#FFBDC5',
+	statusBackgroundWarning: '#FEEFBE',
+	statusBackgroundWarning2: '#4E4731',
+	statusBackgroundService: '#FCE3CF',
+	statusBackgroundService2: '#EDD0F7',
+	statusFontInfo: '#739EDE',
+	statusFontSuccess: '#58AD90',
+	statusFontDanger: '#D88892',
+	statusFontWarning: '#C7AA66',
+	statusFontWarning2: '#FFFFFF',
+	statusFontService: '#CA9163',
+	statusFontService2: '#C393D2',
+
+	badgeBackgroundLevel1: '#484C51',
+	badgeBackgroundLevel2: '#2C65BA',
+	badgeBackgroundLevel3: '#955828',
+	badgeBackgroundLevel4: '#B43C4C',
+
+	userPresenceOnline: '#1CBF89',
+	userPresenceBusy: '#C14454',
+	userPresenceAway: '#AC892F',
+	userPresenceOffline: '#6C727A',
+	userPresenceDisabled: '#955828',
+
+	buttonBackgroundPrimaryDefault: '#3976D1',
+	buttonBackgroundPrimaryPress: '#245399',
+	buttonBackgroundPrimaryDisabled: '#1D3963',
+
+	buttonBackgroundSecondaryDefault: '#0E0D0D',
+	buttonBackgroundSecondaryPress: '#454C59',
+	buttonBackgroundSecondaryDisabled: '#2F343D',
+
+	buttonBackgroundSecondaryDangerDefault: '#2F343D',
+	buttonBackgroundSecondaryDangerPress: '#454C59',
+	buttonBackgroundSecondaryDangerDisabled: '#2F343D',
+
+	buttonBackgroundDangerDefault: '#BB3E4E',
+	buttonBackgroundDangerPress: '#822C37',
+	buttonBackgroundDangerDisabled: '#3D2126',
+
+	buttonBackgroundSuccessDefault: '#1D7256',
+	buttonBackgroundSuccessPress: '#134937',
+	buttonBackgroundSuccessDisabled: '#1E4B40',
+
+	buttonFontPrimary: '#FFFFFF',
+	buttonPrimaryDisabled: '#6C727A',
+	buttonFontSecondary: '#E4E7EA',
+	buttonSecondaryDisabled: '#6C727A',
+	buttonFontSecondaryDanger: '#C14454',
+	buttonSecondaryDangerDisabled: '#613339',
+	buttonFontDanger: '#FFFFFF',
+	buttonDangerDisabled: '#757575',
+	buttonFontSuccess: '#FFFFFF',
+	buttonSuccessDisabled: '#757575'
 };
 
 export const colors = {
 	light: {
-		...newColors,
-
-		backgroundColor: '#ffffff',
-		focusedBackground: '#ffffff',
-		chatComponentBackground: '#f3f4f5',
-		auxiliaryBackground: '#efeff4',
-		bannerBackground: '#f1f2f4',
-		titleText: '#0d0e12',
-		bodyText: '#2f343d',
-		backdropColor: '#000000',
-		dangerColor: '#f5455c',
-		successColor: '#2de0a5',
-		borderColor: '#e1e5e8',
-		controlText: '#54585e',
-		auxiliaryText: '#9ca2a8',
-		infoText: '#6d6d72',
-		tintColor: '#1d74f5',
-		tintActive: '#549df9',
-		tintDisabled: '#88B4F5',
-		auxiliaryTintColor: '#6C727A',
-		actionTintColor: '#1d74f5',
-		separatorColor: '#cbcbcc',
-		navbarBackground: '#ffffff',
-		headerBorder: '#B2B2B2',
-		headerBackground: '#EEEFF1',
-		headerSecondaryBackground: '#ffffff',
-		headerTintColor: '#6C727A',
-		headerTitleColor: '#0C0D0F',
-		headerSecondaryText: '#1d74f5',
-		toastBackground: '#0C0D0F',
-		videoBackground: '#1f2329',
-		favoriteBackground: '#ffbb00',
-		hideBackground: '#54585e',
-		searchboxBackground: '#E6E6E7',
-		buttonBackground: '#414852',
-		buttonText: '#ffffff',
-		passcodeBackground: '#EEEFF1',
-		passcodeButtonActive: '#E4E7EA',
-		editAndUploadButtonAvatar: '#E4E7EA',
-		passcodeLockIcon: '#6C727A',
-		passcodePrimary: '#2F343D',
-		passcodeSecondary: '#6C727A',
-		passcodeDotEmpty: '#CBCED1',
-		passcodeDotFull: '#6C727A',
-		previewBackground: '#1F2329',
-		previewTintColor: '#f9f9f9',
+		...light,
+		backdropColor,
 		backdropOpacity: 0.3,
-		attachmentLoadingOpacity: 0.7,
-		collapsibleQuoteBorder: '#CBCED1',
-		collapsibleChevron: '#6C727A',
-		cancelButton: '#E4E7EA',
-		conferenceCallBorder: '#F2F3F5',
-		conferenceCallBackground: '#F7F8FA',
-		conferenceCallOngoingPhoneBackground: '#C0F6E4',
-		conferenceCallIncomingPhoneBackground: '#D1EBFE',
-		conferenceCallEndedPhoneBackground: '#E4E7EA',
-		conferenceCallOngoingPhoneIcon: '#158D65',
-		conferenceCallIncomingPhoneIcon: '#095AD2',
-		conferenceCallEndedPhoneIcon: '#6C727A',
-		conferenceCallPlusUsersButton: '#E4E7EA',
-		conferenceCallPlusUsersText: '#6C727A',
-		conferenceCallCallBackButton: '#EEEFF1',
-		conferenceCallCallBackText: '#1F2329',
-		conferenceCallDisabledIcon: '#6C727A',
-		conferenceCallEnabledIcon: '#FFFFFF',
-		conferenceCallEnabledIconBackground: '#156FF5',
-		conferenceCallPhotoBackground: '#E4E7EA',
-		textInputSecondaryBackground: '#E4E7EA',
-		dotBg: '#a9cbff',
-		dotActiveBg: '#1d74f5',
-		gray300: '#5f656e',
-		gray100: '#CBCED1',
-		n900: '#1F2329',
-		statusBackgroundWarning: '#FFECAD',
-		overlayColor: '#1F2329CC',
-		taskBoxColor: '#9297a2',
-		...mentions,
-		...callButtons
+		attachmentLoadingOpacity: 0.7
 	},
 	dark: {
-		...newColorsDark,
-		surfaceLight: '#0b182c',
-
-		backgroundColor: '#030b1b',
-		focusedBackground: '#0b182c',
-		chatComponentBackground: '#192132',
-		auxiliaryBackground: '#07101e',
-		bannerBackground: '#0e1f38',
-		titleText: '#f9f9f9',
-		bodyText: '#cbced1',
-		backdropColor: '#000000',
-		dangerColor: '#f5455c',
-		successColor: '#2de0a5',
-		borderColor: '#0f213d',
-		controlText: '#dadde6',
-		auxiliaryText: '#9297a2',
-		infoText: '#6D6D72',
-		tintColor: '#1d74f5',
-		tintActive: '#549df9',
-		tintDisabled: '#88B4F5',
-		auxiliaryTintColor: '#f9f9f9',
-		actionTintColor: '#1d74f5',
-		separatorColor: '#2b2b2d',
-		navbarBackground: '#0b182c',
-		headerBorder: '#2F3A4B',
-		headerBackground: '#0b182c',
-		headerSecondaryBackground: '#0b182c',
-		headerTintColor: '#f9f9f9',
-		headerTitleColor: '#f9f9f9',
-		headerSecondaryText: '#9297a2',
-		toastBackground: '#54585e',
-		videoBackground: '#1f2329',
-		favoriteBackground: '#ffbb00',
-		hideBackground: '#54585e',
-		searchboxBackground: '#192d4d',
-		buttonBackground: '#414852',
-		buttonText: '#ffffff',
-		passcodeBackground: '#030C1B',
-		passcodeButtonActive: '#0B182C',
-		editAndUploadButtonAvatar: '#0B182C',
-		passcodeLockIcon: '#6C727A',
-		passcodePrimary: '#FFFFFF',
-		passcodeSecondary: '#CBCED1',
-		passcodeDotEmpty: '#CBCED1',
-		passcodeDotFull: '#6C727A',
-		previewBackground: '#030b1b',
-		previewTintColor: '#f9f9f9',
+		...dark,
+		backdropColor,
 		backdropOpacity: 0.9,
-		attachmentLoadingOpacity: 0.3,
-		collapsibleQuoteBorder: '#CBCED1',
-		collapsibleChevron: '#6C727A',
-		cancelButton: '#E4E7EA',
-		conferenceCallBorder: '#1F2329',
-		conferenceCallBackground: '#1F2329',
-		conferenceCallOngoingPhoneBackground: '#106D4F',
-		conferenceCallIncomingPhoneBackground: '#D1EBFE',
-		conferenceCallEndedPhoneBackground: '#6C727A',
-		conferenceCallOngoingPhoneIcon: '#F7F8FA',
-		conferenceCallIncomingPhoneIcon: '#095AD2',
-		conferenceCallEndedPhoneIcon: '#F7F8FA',
-		conferenceCallPlusUsersButton: '#2F343D',
-		conferenceCallPlusUsersText: '#9EA2A8',
-		conferenceCallCallBackButton: '#E4E7EA',
-		conferenceCallCallBackText: '#FFFFFF',
-		conferenceCallDisabledIcon: '#6C727A',
-		conferenceCallEnabledIcon: '#FFFFFF',
-		conferenceCallEnabledIconBackground: '#156FF5',
-		conferenceCallPhotoBackground: '#E4E7EA',
-		textInputSecondaryBackground: '#030b1b',
-		dotBg: '#a9cbff',
-		dotActiveBg: '#1d74f5',
-		gray300: '#5f656e',
-		gray100: '#CBCED1',
-		n900: '#FFFFFF',
-		statusBackgroundWarning: '#FFECAD',
-		overlayColor: '#1F2329CC',
-		taskBoxColor: '#9297a2',
-		...mentions,
-		...callButtons
+		attachmentLoadingOpacity: 0.3
 	},
 	black: {
-		...newColorsDark,
-		surfaceLight: '#0d0d0d',
-
-		backgroundColor: '#000000',
-		focusedBackground: '#0d0d0d',
-		chatComponentBackground: '#16181a',
-		auxiliaryBackground: '#080808',
-		bannerBackground: '#1f2329',
-		titleText: '#f9f9f9',
-		bodyText: '#cbced1',
-		backdropColor: '#000000',
-		dangerColor: '#f5455c',
-		successColor: '#2de0a5',
-		borderColor: '#1f2329',
-		controlText: '#dadde6',
-		auxiliaryText: '#b2b8c6',
-		infoText: '#6d6d72',
-		tintColor: '#1e9bfe',
-		tintActive: '#76b7fc',
-		tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
-		auxiliaryTintColor: '#f9f9f9',
-		actionTintColor: '#1e9bfe',
-		separatorColor: '#272728',
-		navbarBackground: '#0d0d0d',
-		headerBorder: '#323232',
-		headerBackground: '#0d0d0d',
-		headerSecondaryBackground: '#0d0d0d',
-		headerTintColor: '#f9f9f9',
-		headerTitleColor: '#f9f9f9',
-		headerSecondaryText: '#b2b8c6',
-		toastBackground: '#54585e',
-		videoBackground: '#1f2329',
-		favoriteBackground: '#ffbb00',
-		hideBackground: '#54585e',
-		searchboxBackground: '#1f1f1f',
-		buttonBackground: '#414852',
-		buttonText: '#ffffff',
-		passcodeBackground: '#000000',
-		passcodeButtonActive: '#0E0D0D',
-		editAndUploadButtonAvatar: '#0E0D0D',
-		passcodeLockIcon: '#6C727A',
-		passcodePrimary: '#FFFFFF',
-		passcodeSecondary: '#CBCED1',
-		passcodeDotEmpty: '#CBCED1',
-		passcodeDotFull: '#6C727A',
-		previewBackground: '#000000',
-		previewTintColor: '#f9f9f9',
+		...black,
+		backdropColor,
 		backdropOpacity: 0.9,
-		attachmentLoadingOpacity: 0.3,
-		collapsibleQuoteBorder: '#CBCED1',
-		collapsibleChevron: '#6C727A',
-		cancelButton: '#E4E7EA',
-		conferenceCallBorder: '#1F2329',
-		conferenceCallBackground: '#1F2329',
-		conferenceCallOngoingPhoneBackground: '#106D4F',
-		conferenceCallIncomingPhoneBackground: '#D1EBFE',
-		conferenceCallEndedPhoneBackground: '#6C727A',
-		conferenceCallOngoingPhoneIcon: '#F7F8FA',
-		conferenceCallIncomingPhoneIcon: '#095AD2',
-		conferenceCallEndedPhoneIcon: '#F7F8FA',
-		conferenceCallPlusUsersButton: '#2F343D',
-		conferenceCallPlusUsersText: '#9EA2A8',
-		conferenceCallCallBackButton: '#E4E7EA',
-		conferenceCallCallBackText: '#FFFFFF',
-		conferenceCallDisabledIcon: '#6C727A',
-		conferenceCallEnabledIcon: '#FFFFFF',
-		conferenceCallEnabledIconBackground: '#156FF5',
-		conferenceCallPhotoBackground: '#E4E7EA',
-		textInputSecondaryBackground: '#000000',
-		dotBg: '#a9cbff',
-		dotActiveBg: '#1d74f5',
-		gray300: '#5f656e',
-		gray100: '#CBCED1',
-		n900: '#FFFFFF',
-		statusBackgroundWarning: '#FFECAD',
-		overlayColor: '#1F2329CC',
-		taskBoxColor: '#9297a2',
-		...mentions,
-		...callButtons
+		attachmentLoadingOpacity: 0.3
 	}
 };
 
diff --git a/app/lib/encryption/encryption.ts b/app/lib/encryption/encryption.ts
index 927c3b9d0..14f32afbe 100644
--- a/app/lib/encryption/encryption.ts
+++ b/app/lib/encryption/encryption.ts
@@ -11,7 +11,15 @@ import log from '../methods/helpers/log';
 import { store } from '../store/auxStore';
 import { joinVectorData, randomPassword, splitVectorData, toString, utf8ToBuffer } from './utils';
 import { EncryptionRoom } from './index';
-import { IMessage, ISubscription, TMessageModel, TSubscriptionModel, TThreadMessageModel, TThreadModel } from '../../definitions';
+import {
+	IMessage,
+	ISubscription,
+	IUpload,
+	TMessageModel,
+	TSubscriptionModel,
+	TThreadMessageModel,
+	TThreadModel
+} from '../../definitions';
 import {
 	E2E_BANNER_TYPE,
 	E2E_MESSAGE_TYPE,
@@ -21,6 +29,7 @@ import {
 	E2E_STATUS
 } from '../constants';
 import { Services } from '../services';
+import { compareServerVersion } from '../methods/helpers';
 
 class Encryption {
 	ready: boolean;
@@ -34,6 +43,7 @@ class Encryption {
 			handshake: Function;
 			decrypt: Function;
 			encrypt: Function;
+			encryptUpload: Function;
 			importRoomKey: Function;
 		};
 	};
@@ -275,7 +285,7 @@ class Encryption {
 			];
 			toDecrypt = (await Promise.all(
 				toDecrypt.map(async message => {
-					const { t, msg, tmsg } = message;
+					const { t, msg, tmsg, attachments } = message;
 					let newMessage: TMessageModel = {} as TMessageModel;
 					if (message.subscription) {
 						const { id: rid } = message.subscription;
@@ -284,7 +294,8 @@ class Encryption {
 							t,
 							rid,
 							msg: msg as string,
-							tmsg
+							tmsg,
+							attachments
 						});
 					}
 
@@ -434,7 +445,7 @@ class Encryption {
 	};
 
 	// Encrypt a message
-	encryptMessage = async (message: IMessage) => {
+	encryptMessage = async (message: IMessage | IUpload) => {
 		const { rid } = message;
 		const db = database.active;
 		const subCollection = db.get('subscriptions');
@@ -456,6 +467,11 @@ class Encryption {
 			}
 
 			const roomE2E = await this.getRoomInstance(rid);
+
+			const { version: serverVersion } = store.getState().server;
+			if ('path' in message && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.8.0')) {
+				return roomE2E.encryptUpload(message);
+			}
 			return roomE2E.encrypt(message);
 		} catch {
 			// Subscription not found
@@ -467,7 +483,7 @@ class Encryption {
 	};
 
 	// Decrypt a message
-	decryptMessage = async (message: Pick<IMessage, 't' | 'e2e' | 'rid' | 'msg' | 'tmsg'>) => {
+	decryptMessage = async (message: Pick<IMessage, 't' | 'e2e' | 'rid' | 'msg' | 'tmsg' | 'attachments'>) => {
 		const { t, e2e } = message;
 
 		// Prevent create a new instance if this room was encrypted sometime ago
diff --git a/app/lib/encryption/room.ts b/app/lib/encryption/room.ts
index 090582a81..55f90e349 100644
--- a/app/lib/encryption/room.ts
+++ b/app/lib/encryption/room.ts
@@ -5,7 +5,7 @@ import ByteBuffer from 'bytebuffer';
 import parse from 'url-parse';
 
 import getSingleMessage from '../methods/getSingleMessage';
-import { IMessage, IUser } from '../../definitions';
+import { IMessage, IUpload, IUser } from '../../definitions';
 import Deferred from './helpers/deferred';
 import { debounce } from '../methods/helpers';
 import database from '../database';
@@ -243,8 +243,38 @@ export default class EncryptionRoom {
 		return message;
 	};
 
+	// Encrypt upload
+	encryptUpload = async (message: IUpload) => {
+		if (!this.ready) {
+			return message;
+		}
+
+		try {
+			let description = '';
+
+			if (message.description) {
+				description = await this.encryptText(EJSON.stringify({ text: message.description }));
+			}
+
+			return {
+				...message,
+				t: E2E_MESSAGE_TYPE,
+				e2e: E2E_STATUS.PENDING,
+				description
+			};
+		} catch {
+			// Do nothing
+		}
+
+		return message;
+	};
+
 	// Decrypt text
 	decryptText = async (msg: string | ArrayBuffer) => {
+		if (!msg) {
+			return null;
+		}
+
 		msg = b64ToBuffer(msg.slice(12) as string);
 		const [vector, cipherText] = splitVectorData(msg);
 
@@ -275,6 +305,10 @@ export default class EncryptionRoom {
 					tmsg = await this.decryptText(tmsg);
 				}
 
+				if (message.attachments?.length) {
+					message.attachments[0].description = await this.decryptText(message.attachments[0].description as string);
+				}
+
 				const decryptedMessage: IMessage = {
 					...message,
 					tmsg,
diff --git a/app/lib/hooks/useUserStatusColor.ts b/app/lib/hooks/useUserStatusColor.ts
new file mode 100644
index 000000000..882a44977
--- /dev/null
+++ b/app/lib/hooks/useUserStatusColor.ts
@@ -0,0 +1,11 @@
+import { capitalize } from 'lodash';
+
+import { useTheme } from '../../theme';
+import type { TColors } from '../../theme';
+import type { TUserStatus } from '../../definitions';
+
+export const useUserStatusColor = (status: TUserStatus): keyof TColors => {
+	const { colors } = useTheme();
+	const key = `userPresence${capitalize(status)}` as keyof TColors;
+	return colors[key] as keyof TColors;
+};
diff --git a/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx b/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
index d394e58a0..e2445d1c8 100644
--- a/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
+++ b/app/lib/hooks/useVideoConf/StartACallActionSheet.tsx
@@ -47,7 +47,8 @@ export default function StartACallActionSheet({
 	return (
 		<View
 			style={[style.actionSheetContainer, { paddingBottom: bottom }]}
-			onLayout={e => setContainerWidth(e.nativeEvent.layout.width / 2)}>
+			onLayout={e => setContainerWidth(e.nativeEvent.layout.width / 2)}
+		>
 			{calling && roomType === SubscriptionType.DIRECT ? <Ringer ringer={ERingerSounds.DIALTONE} /> : null}
 			<CallHeader
 				title={calling && user.direct ? i18n.t('Calling') : i18n.t('Start_a_call')}
@@ -63,8 +64,9 @@ export default function StartACallActionSheet({
 			<View
 				style={[
 					style.actionSheetPhotoContainer,
-					{ backgroundColor: cam ? undefined : colors.conferenceCallPhotoBackground, width: containerWidth }
-				]}>
+					{ backgroundColor: cam ? undefined : colors.surfaceNeutral, width: containerWidth }
+				]}
+			>
 				{cam ? (
 					<Camera style={[style.cameraContainer, { width: containerWidth }]} type={CameraType.front} />
 				) : (
@@ -72,8 +74,8 @@ export default function StartACallActionSheet({
 				)}
 			</View>
 			<Button
-				backgroundColor={calling ? colors.conferenceCallCallBackButton : colors.actionTintColor}
-				color={calling ? colors.gray300 : colors.conferenceCallEnabledIcon}
+				backgroundColor={calling ? colors.buttonBackgroundPrimaryDisabled : colors.buttonBackgroundPrimaryDefault}
+				color={calling ? colors.strokeDark : colors.surfaceLight}
 				onPress={() => {
 					if (calling) {
 						dispatch(cancelCall({}));
diff --git a/app/lib/methods/helpers/navigation/index.ts b/app/lib/methods/helpers/navigation/index.ts
index 98b934842..676b4fb4f 100644
--- a/app/lib/methods/helpers/navigation/index.ts
+++ b/app/lib/methods/helpers/navigation/index.ts
@@ -21,7 +21,7 @@ export const cardStyle = {
 
 export const borderBottom: any = (theme: TSupportedThemes) => ({
 	borderBottomWidth: StyleSheet.hairlineWidth,
-	borderBottomColor: themes[theme].headerBorder,
+	borderBottomColor: themes[theme].strokeDark,
 	elevation: 0
 });
 
@@ -35,10 +35,10 @@ export const headerHeight = isIOS ? 50 : 56;
 export const themedHeader = (theme: TSupportedThemes) => ({
 	headerStyle: {
 		...borderBottom(theme),
-		backgroundColor: themes[theme].headerBackground
+		backgroundColor: themes[theme].surfaceNeutral
 	},
-	headerTintColor: themes[theme].headerTintColor,
-	headerTitleStyle: { ...sharedStyles.textSemibold, color: themes[theme].headerTitleColor, fontSize: 18 }
+	headerTintColor: themes[theme].fontDefault,
+	headerTitleStyle: { ...sharedStyles.textSemibold, color: themes[theme].fontTitlesLabels, fontSize: 18 }
 });
 
 export const navigationTheme = (theme: TSupportedThemes) => {
@@ -48,8 +48,8 @@ export const navigationTheme = (theme: TSupportedThemes) => {
 		...defaultNavTheme,
 		colors: {
 			...defaultNavTheme.colors,
-			background: themes[theme].backgroundColor,
-			border: themes[theme].borderColor
+			background: themes[theme].surfaceRoom,
+			border: themes[theme].strokeLight
 		}
 	};
 };
diff --git a/app/lib/methods/helpers/openLink.ts b/app/lib/methods/helpers/openLink.ts
index e4ade0a30..d571c6f8f 100644
--- a/app/lib/methods/helpers/openLink.ts
+++ b/app/lib/methods/helpers/openLink.ts
@@ -54,8 +54,8 @@ const openLink = async (url: string, theme: TSupportedThemes = 'light'): Promise
 		const browser = UserPreferences.getString(DEFAULT_BROWSER_KEY);
 		if (browser === 'inApp') {
 			await WebBrowser.openBrowserAsync(url, {
-				toolbarColor: themes[theme].headerBackground,
-				controlsColor: themes[theme].headerTintColor,
+				toolbarColor: themes[theme].surfaceNeutral,
+				controlsColor: themes[theme].fontSecondaryInfo,
 				// https://github.com/expo/expo/pull/4923
 				enableBarCollapsing: true,
 				showTitle: true
diff --git a/app/lib/methods/helpers/room.ts b/app/lib/methods/helpers/room.ts
index a50b502c3..715b72982 100644
--- a/app/lib/methods/helpers/room.ts
+++ b/app/lib/methods/helpers/room.ts
@@ -49,13 +49,13 @@ export const getBadgeColor = ({
 	theme: TSupportedThemes;
 }): string | undefined => {
 	if (subscription?.tunreadUser?.includes(messageId)) {
-		return themes[theme].mentionMeColor;
+		return themes[theme].badgeBackgroundLevel4;
 	}
 	if (subscription?.tunreadGroup?.includes(messageId)) {
-		return themes[theme].mentionGroupColor;
+		return themes[theme].badgeBackgroundLevel3;
 	}
 	if (subscription?.tunread?.includes(messageId)) {
-		return themes[theme].tunreadColor;
+		return themes[theme].fontInfo;
 	}
 };
 
diff --git a/app/lib/methods/helpers/theme.ts b/app/lib/methods/helpers/theme.ts
index e12dd9717..50f0ec4e2 100644
--- a/app/lib/methods/helpers/theme.ts
+++ b/app/lib/methods/helpers/theme.ts
@@ -53,12 +53,12 @@ export const setNativeTheme = async (themePreferences: IThemePreference): Promis
 		const iconsLight = theme === 'light';
 		try {
 			// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
-			await changeNavigationBarColor(themes[theme].navbarBackground, iconsLight, true);
+			await changeNavigationBarColor(themes[theme].surfaceLight, iconsLight, true);
 		} catch (error) {
 			// Do nothing
 		}
 	}
-	setRootViewColor(themes[theme].backgroundColor);
+	setRootViewColor(themes[theme].surfaceRoom);
 };
 
 export const unsubscribeTheme = () => {
diff --git a/app/lib/methods/sendFileMessage.ts b/app/lib/methods/sendFileMessage.ts
index 8886f6064..0a9fd9d0c 100644
--- a/app/lib/methods/sendFileMessage.ts
+++ b/app/lib/methods/sendFileMessage.ts
@@ -4,12 +4,16 @@ import isEmpty from 'lodash/isEmpty';
 import { FetchBlobResponse, StatefulPromise } from 'rn-fetch-blob';
 import { Alert } from 'react-native';
 
+import { Encryption } from '../encryption';
 import { IUpload, IUser, TUploadModel } from '../../definitions';
 import i18n from '../../i18n';
 import database from '../database';
 import FileUpload from './helpers/fileUpload';
 import { IFileUpload } from './helpers/fileUpload/interfaces';
 import log from './helpers/log';
+import { E2E_MESSAGE_TYPE } from '../constants';
+import { store } from '../store/auxStore';
+import { compareServerVersion } from './helpers';
 
 const uploadQueue: { [index: string]: StatefulPromise<FetchBlobResponse> } = {};
 
@@ -85,6 +89,8 @@ export function sendFileMessage(
 				}
 			}
 
+			const encryptedFileInfo = await Encryption.encryptMessage(fileInfo);
+
 			const formData: IFileUpload[] = [];
 			formData.push({
 				name: 'file',
@@ -96,7 +102,7 @@ export function sendFileMessage(
 			if (fileInfo.description) {
 				formData.push({
 					name: 'description',
-					data: fileInfo.description
+					data: encryptedFileInfo.description
 				});
 			}
 
@@ -114,6 +120,18 @@ export function sendFileMessage(
 				});
 			}
 
+			const { version: serverVersion } = store.getState().server;
+			if (encryptedFileInfo.t === E2E_MESSAGE_TYPE && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.8.0')) {
+				formData.push({
+					name: 't',
+					data: encryptedFileInfo.t
+				});
+				formData.push({
+					name: 'e2e',
+					data: encryptedFileInfo.e2e
+				});
+			}
+
 			const headers = {
 				...RocketChatSettings.customHeaders,
 				'Content-Type': 'multipart/form-data',
diff --git a/app/lib/notifications/videoConf/backgroundNotificationHandler.ts b/app/lib/notifications/videoConf/backgroundNotificationHandler.ts
index ab98808b3..25ddf9e60 100644
--- a/app/lib/notifications/videoConf/backgroundNotificationHandler.ts
+++ b/app/lib/notifications/videoConf/backgroundNotificationHandler.ts
@@ -5,7 +5,7 @@ import ejson from 'ejson';
 
 import { deepLinkingClickCallPush } from '../../../actions/deepLinking';
 import i18n from '../../../i18n';
-import { BACKGROUND_PUSH_COLOR } from '../../constants';
+import { colors } from '../../constants';
 import { store } from '../../store/auxStore';
 
 const VIDEO_CONF_CHANNEL = 'video-conf-call';
@@ -86,7 +86,7 @@ const displayVideoConferenceNotification = async (notification: NotificationData
 			visibility: AndroidVisibility.PUBLIC,
 			importance: AndroidImportance.HIGH,
 			smallIcon: 'ic_notification',
-			color: BACKGROUND_PUSH_COLOR,
+			color: colors.light.badgeBackgroundLevel4,
 			actions,
 			lightUpScreen: true,
 			loopSound: true,
diff --git a/app/stacks/types.ts b/app/stacks/types.ts
index 691c54cff..0356c01c6 100644
--- a/app/stacks/types.ts
+++ b/app/stacks/types.ts
@@ -66,6 +66,7 @@ export type ChatsStackParamList = {
 		isSearch?: boolean;
 		onSearch?: (text: string) => Promise<TDataSelect[] | any>;
 		isRadio?: boolean;
+		fontHint?: string;
 	};
 	RoomInfoView: {
 		room?: ISubscription;
diff --git a/app/views/AddExistingChannelView/index.tsx b/app/views/AddExistingChannelView/index.tsx
index c42751f61..c5499eacb 100644
--- a/app/views/AddExistingChannelView/index.tsx
+++ b/app/views/AddExistingChannelView/index.tsx
@@ -162,12 +162,12 @@ const AddExistingChannelView = () => {
 							onPress={() => toggleChannel(item.rid)}
 							testID={`add-existing-channel-view-item-${item.name}`}
 							left={() => <List.Icon name={icon} />}
-							right={() => (isChecked(item.rid) ? <List.Icon name='check' /> : null)}
+							right={() => (isChecked(item.rid) ? <List.Icon name='check' color={colors.fontHint} /> : null)}
 						/>
 					);
 				}}
 				ItemSeparatorComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+				contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
index 89fd71f15..8ca4c803b 100644
--- a/app/views/AttachmentView.tsx
+++ b/app/views/AttachmentView.tsx
@@ -121,20 +121,20 @@ const AttachmentView = (): React.ReactElement => {
 		const options: StackNavigationOptions = {
 			title: title || '',
 			headerTitleAlign: 'center',
-			headerTitleStyle: { color: colors.previewTintColor },
-			headerTintColor: colors.previewTintColor,
+			headerTitleStyle: { color: colors.surfaceTint },
+			headerTintColor: colors.surfaceTint,
 			headerTitleContainerStyle: { flex: 1, maxWidth: undefined },
 			headerLeftContainerStyle: { flexGrow: undefined, flexBasis: undefined },
 			headerRightContainerStyle: { flexGrow: undefined, flexBasis: undefined },
 			headerLeft: () => (
-				<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.previewTintColor} />
+				<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={colors.surfaceTint} />
 			),
 			headerRight: () =>
 				Allow_Save_Media_to_Gallery && !isImageBase64(attachment.image_url) ? (
-					<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.previewTintColor} />
+					<HeaderButton.Download testID='save-image' onPress={handleSave} color={colors.surfaceTint} />
 				) : null,
 			headerBackground: () => (
-				<HeaderBackground style={{ backgroundColor: colors.previewBackground, shadowOpacity: 0, elevation: 0 }} />
+				<HeaderBackground style={{ backgroundColor: colors.surfaceDark, shadowOpacity: 0, elevation: 0 }} />
 			)
 		};
 		navigation.setOptions(options);
@@ -191,8 +191,8 @@ const AttachmentView = (): React.ReactElement => {
 	};
 
 	return (
-		<View style={{ backgroundColor: colors.backgroundColor, flex: 1 }}>
-			<StatusBar barStyle='light-content' backgroundColor={colors.previewBackground} />
+		<View style={{ backgroundColor: colors.surfaceRoom, flex: 1 }}>
+			<StatusBar barStyle='light-content' backgroundColor={colors.surfaceDark} />
 			<RenderContent attachment={attachment} setLoading={setLoading} />
 			{loading ? <RCActivityIndicator absolute size='large' /> : null}
 		</View>
diff --git a/app/views/AuthLoadingView.tsx b/app/views/AuthLoadingView.tsx
index 075ff7cd1..efe473e3f 100644
--- a/app/views/AuthLoadingView.tsx
+++ b/app/views/AuthLoadingView.tsx
@@ -25,12 +25,12 @@ const AuthLoadingView = React.memo((): React.ReactElement => {
 	const text = useAppSelector(state => state.app.text);
 	const { colors } = useTheme();
 	return (
-		<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 			<StatusBar />
 			{text ? (
 				<>
-					<ActivityIndicator color={colors.auxiliaryText} size='large' />
-					<Text style={[styles.text, { color: colors.bodyText }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
+					<ActivityIndicator color={colors.fontSecondaryInfo} size='large' />
+					<Text style={[styles.text, { color: colors.fontDefault }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
 				</>
 			) : null}
 		</View>
diff --git a/app/views/AutoTranslateView/index.tsx b/app/views/AutoTranslateView/index.tsx
index 9bcdffde9..4525d80ab 100644
--- a/app/views/AutoTranslateView/index.tsx
+++ b/app/views/AutoTranslateView/index.tsx
@@ -8,7 +8,6 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import StatusBar from '../../containers/StatusBar';
 import { ISubscription } from '../../definitions';
 import I18n from '../../i18n';
-import { SWITCH_TRACK_COLOR } from '../../lib/constants';
 import { events, logEvent } from '../../lib/methods/helpers/log';
 import { Services } from '../../lib/services';
 import { ChatsStackParamList } from '../../stacks/types';
@@ -102,7 +101,7 @@ const AutoTranslateView = (): React.ReactElement => {
 			testID={`auto-translate-view-${language}`}
 			right={() =>
 				selectedLanguage === language ? (
-					<List.Icon testID={`auto-translate-view-${language}-check`} name='check' color={colors.tintColor} />
+					<List.Icon testID={`auto-translate-view-${language}-check`} name='check' color={colors.badgeBackgroundLevel2} />
 				) : null
 			}
 			translateTitle={false}
@@ -126,7 +125,6 @@ const AutoTranslateView = (): React.ReactElement => {
 								<Switch
 									testID='auto-translate-view-switch'
 									value={enableAutoTranslate}
-									trackColor={SWITCH_TRACK_COLOR}
 									onValueChange={toggleAutoTranslate}
 								/>
 							)}
diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx
index d9a3977bd..66f0ab7b7 100644
--- a/app/views/CannedResponseDetail.tsx
+++ b/app/views/CannedResponseDetail.tsx
@@ -79,10 +79,10 @@ interface IItem {
 const Item = ({ label, content, theme, testID }: IItem) =>
 	content ? (
 		<View style={styles.item} testID={testID}>
-			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].titleText }]}>
+			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].fontTitlesLabels }]}>
 				{label}
 			</Text>
-			<Markdown style={[styles.itemContent, { color: themes[theme].auxiliaryText }]} msg={content} theme={theme} />
+			<Markdown style={[styles.itemContent, { color: themes[theme].fontSecondaryInfo }]} msg={content} theme={theme} />
 		</View>
 	) : null;
 
@@ -112,7 +112,7 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
 
 	return (
 		<SafeAreaView>
-			<ScrollView contentContainerStyle={[styles.scroll, { backgroundColor: themes[theme].surfaceLight }]}>
+			<ScrollView contentContainerStyle={[styles.scroll, { backgroundColor: themes[theme].surfaceTint }]}>
 				<StatusBar />
 				<View style={styles.container}>
 					<Item label={I18n.t('Shortcut')} content={`!${cannedResponse?.shortcut}`} theme={theme} />
@@ -120,16 +120,16 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
 					<Item label={I18n.t('Sharing')} content={cannedResponse?.scopeName} theme={theme} />
 
 					<View style={styles.item}>
-						<Text style={[styles.itemLabel, { color: themes[theme].titleText }]}>{I18n.t('Tags')}</Text>
+						<Text style={[styles.itemLabel, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Tags')}</Text>
 						<View style={styles.cannedTagContainer}>
 							{cannedResponse?.tags?.length > 0 ? (
 								cannedResponse.tags.map(t => (
-									<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
-										<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
+									<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
+										<Text style={[styles.cannedTag, { color: themes[theme].fontHint }]}>{t}</Text>
 									</View>
 								))
 							) : (
-								<Text style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>-</Text>
+								<Text style={[styles.cannedText, { color: themes[theme].fontHint }]}>-</Text>
 							)}
 						</View>
 					</View>
diff --git a/app/views/CannedResponsesListView/CannedResponseItem.tsx b/app/views/CannedResponsesListView/CannedResponseItem.tsx
index cc00a8972..532cf0576 100644
--- a/app/views/CannedResponsesListView/CannedResponseItem.tsx
+++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx
@@ -31,27 +31,27 @@ const CannedResponseItem = ({
 		<>
 			<View style={styles.cannedRow}>
 				<View style={styles.cannedWrapShortcutScope}>
-					<Text style={[styles.cannedShortcut, { color: themes[theme].titleText }]}>!{shortcut}</Text>
-					<Text style={[styles.cannedScope, { color: themes[theme].auxiliaryTintColor }]}>{scope}</Text>
+					<Text style={[styles.cannedShortcut, { color: themes[theme].fontTitlesLabels }]}>!{shortcut}</Text>
+					<Text style={[styles.cannedScope, { color: themes[theme].fontHint }]}>{scope}</Text>
 				</View>
 
 				<Button
 					title={I18n.t('Use')}
 					fontSize={12}
-					color={themes[theme].titleText}
-					style={[styles.cannedUseButton, { backgroundColor: themes[theme].chatComponentBackground }]}
+					color={themes[theme].fontTitlesLabels}
+					style={[styles.cannedUseButton, { backgroundColor: themes[theme].surfaceTint }]}
 					onPress={onPressUse}
 				/>
 			</View>
 
-			<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>
+			<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].fontHint }]}>
 				“{text}”
 			</Text>
 			<View style={styles.cannedTagContainer}>
 				{tags?.length > 0
 					? tags.map(t => (
-							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
-								<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
+							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
+								<Text style={[styles.cannedTag, { color: themes[theme].fontHint }]}>{t}</Text>
 							</View>
 					  ))
 					: null}
diff --git a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx
index 5ecdae1aa..840bd07ea 100644
--- a/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx
+++ b/app/views/CannedResponsesListView/Dropdown/DropdownItem.tsx
@@ -34,10 +34,10 @@ const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) =>
 	const { theme } = useTheme();
 
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }}>
 			<View style={styles.container}>
-				<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text>
-				{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].auxiliaryText} /> : null}
+				<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }]}>{text}</Text>
+				{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].fontSecondaryInfo} /> : null}
 			</View>
 		</Touch>
 	);
diff --git a/app/views/CannedResponsesListView/Dropdown/index.tsx b/app/views/CannedResponsesListView/Dropdown/index.tsx
index cdffbbb16..b50c394ed 100644
--- a/app/views/CannedResponsesListView/Dropdown/index.tsx
+++ b/app/views/CannedResponsesListView/Dropdown/index.tsx
@@ -71,8 +71,8 @@ const Dropdown = ({ currentDepartment, onClose, onDepartmentSelected, department
 					styles.dropdownContainer,
 					{
 						transform: [{ translateY }],
-						backgroundColor: colors.backgroundColor,
-						borderColor: colors.separatorColor
+						backgroundColor: colors.surfaceRoom,
+						borderColor: colors.strokeLight
 					}
 				]}>
 				<DropdownItemHeader department={currentDepartment} onPress={close} />
diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx
index 100e64569..7815a25e6 100644
--- a/app/views/CannedResponsesListView/index.tsx
+++ b/app/views/CannedResponsesListView/index.tsx
@@ -243,7 +243,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme].fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),
@@ -303,7 +303,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 			<FlatList
 				data={cannedResponsesScopeName}
 				extraData={cannedResponsesScopeName}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				renderItem={({ item }) => (
 					<CannedResponseItem
 						theme={theme}
diff --git a/app/views/ChangeAvatarView/AvatarSuggestion.tsx b/app/views/ChangeAvatarView/AvatarSuggestion.tsx
index e68c3d2e0..3c3545a49 100644
--- a/app/views/ChangeAvatarView/AvatarSuggestion.tsx
+++ b/app/views/ChangeAvatarView/AvatarSuggestion.tsx
@@ -40,13 +40,13 @@ const AvatarSuggestion = ({
 
 	return (
 		<View style={styles.containerImagesUploaded}>
-			<Text style={[styles.itemLabel, { color: colors.titleText }]}>{I18n.t('Images_uploaded')}</Text>
+			<Text style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Images_uploaded')}</Text>
 			<View style={styles.containerAvatarSuggestion}>
 				{username && resetAvatar ? (
 					<AvatarSuggestionItem text={`@${username}`} testID={`reset-avatar-suggestion`} onPress={resetAvatar} />
 				) : null}
 				{avatarSuggestions.slice(0, 7).map(item => (
-					<AvatarSuggestionItem item={item} testID={`${item?.service}-avatar-suggestion`} onPress={onPress} />
+					<AvatarSuggestionItem item={item} key={item?.url} testID={`${item?.service}-avatar-suggestion`} onPress={onPress} />
 				))}
 			</View>
 		</View>
diff --git a/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx b/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx
index 2e0d02bb8..1336eb5c4 100644
--- a/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx
+++ b/app/views/ChangeAvatarView/AvatarSuggestionItem.tsx
@@ -31,7 +31,7 @@ const AvatarSuggestionItem = ({
 	const { colors } = useTheme();
 
 	return (
-		<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.borderColor }]}>
+		<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.strokeLight }]}>
 			<Avatar avatar={item?.url} text={text} size={64} onPress={() => onPress(item)} />
 		</View>
 	);
diff --git a/app/views/ChangeAvatarView/index.tsx b/app/views/ChangeAvatarView/index.tsx
index 7d1a803df..fdfe013cf 100644
--- a/app/views/ChangeAvatarView/index.tsx
+++ b/app/views/ChangeAvatarView/index.tsx
@@ -159,16 +159,14 @@ const ChangeAvatarView = () => {
 	const deletingRoomAvatar = context === 'room' && state.data === null;
 
 	return (
-		<KeyboardView
-			style={{ backgroundColor: colors.auxiliaryBackground }}
-			contentContainerStyle={sharedStyles.container}
-			keyboardVerticalOffset={128}>
+		<KeyboardView contentContainerStyle={sharedStyles.container} keyboardVerticalOffset={128}>
 			<StatusBar />
 			<SafeAreaView testID='change-avatar-view'>
 				<ScrollView
 					contentContainerStyle={sharedStyles.containerScrollView}
 					testID='change-avatar-view-list'
-					{...scrollPersistTaps}>
+					{...scrollPersistTaps}
+				>
 					<View style={styles.avatarContainer} testID='change-avatar-view-avatar'>
 						{deletingRoomAvatar ? (
 							<AvatarPresentational
@@ -222,7 +220,7 @@ const ChangeAvatarView = () => {
 						title={I18n.t('Take_a_photo')}
 						type='secondary'
 						disabled={saving}
-						backgroundColor={colors.editAndUploadButtonAvatar}
+						backgroundColor={colors.buttonBackgroundSecondaryDefault}
 						onPress={() => pickImage(true)}
 						testID='change-avatar-view-take-a-photo'
 					/>
@@ -230,7 +228,7 @@ const ChangeAvatarView = () => {
 						title={I18n.t('Upload_image')}
 						type='secondary'
 						disabled={saving}
-						backgroundColor={colors.editAndUploadButtonAvatar}
+						backgroundColor={colors.buttonBackgroundSecondaryDefault}
 						onPress={pickImage}
 						testID='change-avatar-view-upload-image'
 					/>
@@ -239,7 +237,7 @@ const ChangeAvatarView = () => {
 							title={I18n.t('Delete_image')}
 							type='primary'
 							disabled={saving}
-							backgroundColor={colors.dangerColor}
+							backgroundColor={colors.buttonBackgroundDangerDefault}
 							onPress={() => dispatchAvatar({ type: AvatarStateActions.RESET_ROOM_AVATAR, payload: { data: null } })}
 							testID='change-avatar-view-delete-my-account'
 						/>
diff --git a/app/views/ChangePasscodeView.tsx b/app/views/ChangePasscodeView.tsx
index e6199ee9a..0cb63db5c 100644
--- a/app/views/ChangePasscodeView.tsx
+++ b/app/views/ChangePasscodeView.tsx
@@ -5,12 +5,11 @@ import isEmpty from 'lodash/isEmpty';
 import Modal from 'react-native-modal';
 import Touchable from 'react-native-platform-touchable';
 
-import { useTheme } from '../theme';
 import { hasNotch } from '../lib/methods/helpers';
 import { PasscodeChoose } from '../containers/Passcode';
 import EventEmitter from '../lib/methods/helpers/events';
 import { CustomIcon } from '../containers/CustomIcon';
-import { CHANGE_PASSCODE_EMITTER, themes } from '../lib/constants';
+import { CHANGE_PASSCODE_EMITTER } from '../lib/constants';
 
 const styles = StyleSheet.create({
 	modal: {
@@ -33,7 +32,6 @@ const ChangePasscodeView = React.memo(() => {
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<Partial<IArgs>>({});
 
-	const { theme } = useTheme();
 
 	useDeepCompareEffect(() => {
 		if (!isEmpty(data)) {
@@ -75,7 +73,7 @@ const ChangePasscodeView = React.memo(() => {
 			<PasscodeChoose finishProcess={onSubmit} force={data?.force} />
 			{!data?.force ? (
 				<Touchable onPress={onCancel} style={styles.close}>
-					<CustomIcon name='close' color={themes[theme].passcodePrimary} size={30} />
+					<CustomIcon name='close' size={30} />
 				</Touchable>
 			) : null}
 		</Modal>
diff --git a/app/views/CloseLivechatView.tsx b/app/views/CloseLivechatView.tsx
index 399d0c6db..bc19dd38d 100644
--- a/app/views/CloseLivechatView.tsx
+++ b/app/views/CloseLivechatView.tsx
@@ -73,7 +73,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.auxiliaryBackground }}
+			style={{ backgroundColor: colors.surfaceHover }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}>
 			<ScrollView {...scrollPersistTaps} style={styles.container}>
@@ -91,7 +91,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
 
 					{requestTags ? (
 						<>
-							<Text style={[styles.subtitleText, { color: colors.titleText }]}>{I18n.t('Tags')}</Text>
+							<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{I18n.t('Tags')}</Text>
 							<MultiSelect
 								options={tagsList?.map(({ name }) => ({ text: { text: name }, value: name }))}
 								onChange={({ value }: { value: string[] }) => {
@@ -101,7 +101,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
 								value={tagParamSelected}
 								context={BlockContext.FORM}
 								multiselect
-								inputStyle={{ borderColor: colors.separatorColor }}
+								inputStyle={{ borderColor: colors.strokeLight }}
 							/>
 						</>
 					) : null}
@@ -109,7 +109,7 @@ const CloseLivechatView = ({ navigation, route }: IBaseScreen<ChatsStackParamLis
 						title={I18n.t('Close')}
 						onPress={submit}
 						disabled={!canSubmit()}
-						backgroundColor={colors.dangerColor}
+						backgroundColor={colors.buttonBackgroundDangerDefault}
 						type='primary'
 						style={styles.buttonMarginVertical}
 					/>
diff --git a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
index 4e8b548e3..567cf5dd6 100644
--- a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
+++ b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { StyleSheet, Switch, Text, View, SwitchProps } from 'react-native';
+import { StyleSheet, Text, View, SwitchProps } from 'react-native';
 
 import I18n from '../../../i18n';
-import { SWITCH_TRACK_COLOR } from '../../../lib/constants';
 import { useTheme } from '../../../theme';
 import sharedStyles from '../../Styles';
+import Switch from '../../../containers/Switch';
 
 const styles = StyleSheet.create({
 	switchContainer: {
@@ -40,10 +40,10 @@ export const SwitchItem = ({ id, value, label, hint, onValueChange, disabled = f
 	const { colors } = useTheme();
 
 	return (
-		<View style={[styles.switchContainer, { backgroundColor: colors.backgroundColor }]}>
+		<View style={[styles.switchContainer, { backgroundColor: colors.surfaceRoom }]}>
 			<View style={styles.switchTextContainer}>
-				<Text style={[styles.label, { color: colors.titleText }]}>{I18n.t(label)}</Text>
-				<Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.auxiliaryText }]}>
+				<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</Text>
+				<Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo }]}>
 					{I18n.t(hint)}
 				</Text>
 			</View>
@@ -51,7 +51,6 @@ export const SwitchItem = ({ id, value, label, hint, onValueChange, disabled = f
 				value={value}
 				onValueChange={onValueChange}
 				testID={`create-channel-${id}`}
-				trackColor={SWITCH_TRACK_COLOR}
 				disabled={disabled}
 			/>
 		</View>
diff --git a/app/views/CreateChannelView/index.tsx b/app/views/CreateChannelView/index.tsx
index 39579f827..653a43710 100644
--- a/app/views/CreateChannelView/index.tsx
+++ b/app/views/CreateChannelView/index.tsx
@@ -140,13 +140,13 @@ const CreateChannelView = () => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.backgroundColor }}
+			style={{ backgroundColor: colors.surfaceRoom }}
 			contentContainerStyle={[sharedStyles.container, styles.container]}
 			keyboardVerticalOffset={128}>
 			<StatusBar />
-			<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='create-channel-view'>
+			<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='create-channel-view'>
 				<ScrollView {...scrollPersistTaps}>
-					<View style={[styles.containerTextInput, { borderColor: colors.separatorColor }]}>
+					<View style={[styles.containerTextInput, { borderColor: colors.strokeLight }]}>
 						<ControlledFormTextInput
 							label={isTeam ? I18n.t('Team_Name') : I18n.t('Channel_Name')}
 							testID='create-channel-name'
@@ -166,7 +166,7 @@ const CreateChannelView = () => {
 					{users.length > 0 ? (
 						<>
 							<View style={styles.invitedHeader}>
-								<Text style={[styles.invitedCount, { color: colors.auxiliaryText }]}>
+								<Text style={[styles.invitedCount, { color: colors.fontSecondaryInfo }]}>
 									{I18n.t('N_Selected_members', { n: users.length })}
 								</Text>
 							</View>
@@ -177,8 +177,8 @@ const CreateChannelView = () => {
 								style={[
 									styles.list,
 									{
-										backgroundColor: colors.backgroundColor,
-										borderColor: colors.separatorColor
+										backgroundColor: colors.surfaceRoom,
+										borderColor: colors.strokeLight
 									}
 								]}
 								contentContainerStyle={styles.invitedList}
diff --git a/app/views/CreateDiscussionView/SelectChannel.tsx b/app/views/CreateDiscussionView/SelectChannel.tsx
index 2a4c01332..2c87491ae 100644
--- a/app/views/CreateDiscussionView/SelectChannel.tsx
+++ b/app/views/CreateDiscussionView/SelectChannel.tsx
@@ -56,7 +56,7 @@ const SelectChannel = ({
 
 	return (
 		<>
-			<Text style={[styles.label, { color: colors.titleText }]}>{I18n.t('Parent_channel_or_group')}</Text>
+			<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t('Parent_channel_or_group')}</Text>
 			<MultiSelect
 				inputStyle={styles.inputStyle}
 				onChange={onChannelSelect}
diff --git a/app/views/CreateDiscussionView/SelectUsers.tsx b/app/views/CreateDiscussionView/SelectUsers.tsx
index 5f9c9e0bc..82d1c37bc 100644
--- a/app/views/CreateDiscussionView/SelectUsers.tsx
+++ b/app/views/CreateDiscussionView/SelectUsers.tsx
@@ -59,7 +59,7 @@ const SelectUsers = ({
 
 	return (
 		<>
-			<Text style={[styles.label, { color: colors.titleText }]}>{I18n.t('Invite_users')}</Text>
+			<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t('Invite_users')}</Text>
 			<MultiSelect
 				inputStyle={styles.inputStyle}
 				onSearch={getUsers}
diff --git a/app/views/CreateDiscussionView/index.tsx b/app/views/CreateDiscussionView/index.tsx
index 68a8dc568..b337dc6fd 100644
--- a/app/views/CreateDiscussionView/index.tsx
+++ b/app/views/CreateDiscussionView/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { ScrollView, Switch, Text } from 'react-native';
+import { ScrollView, Text } from 'react-native';
 import { StackNavigationOptions } from '@react-navigation/stack';
 
 import { sendLoadingEvent } from '../../containers/Loading';
@@ -21,9 +21,10 @@ import SelectUsers from './SelectUsers';
 import SelectChannel from './SelectChannel';
 import { ICreateChannelViewProps, IResult, IError, ICreateChannelViewState } from './interfaces';
 import { IApplicationState, ISearchLocal, ISubscription } from '../../definitions';
-import { E2E_ROOM_TYPES, SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
+import { E2E_ROOM_TYPES, themes } from '../../lib/constants';
 import { getRoomTitle, showErrorAlert } from '../../lib/methods/helpers';
 import * as List from '../../containers/List';
+import Switch from '../../containers/Switch';
 
 class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreateChannelViewState> {
 	private channel: ISubscription;
@@ -145,13 +146,13 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 		const { server, user, blockUnauthenticatedAccess, theme, serverVersion } = this.props;
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+				style={{ backgroundColor: themes[theme].surfaceHover }}
 				contentContainerStyle={styles.container}
 				keyboardVerticalOffset={128}>
 				<StatusBar />
 				<SafeAreaView testID='create-discussion-view' style={styles.container}>
 					<ScrollView {...scrollPersistTaps}>
-						<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Discussion_Desc')}</Text>
+						<Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Discussion_Desc')}</Text>
 						<SelectChannel
 							server={server}
 							userId={user.id}
@@ -183,9 +184,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 								<List.Item
 									title='Encrypted'
 									testID='room-actions-encrypt'
-									right={() => (
-										<Switch value={encrypted} onValueChange={this.onEncryptedChange} trackColor={SWITCH_TRACK_COLOR} />
-									)}
+									right={() => <Switch value={encrypted} onValueChange={this.onEncryptedChange} />}
 								/>
 							</>
 						) : null}
diff --git a/app/views/DefaultBrowserView/Item.tsx b/app/views/DefaultBrowserView/Item.tsx
index fc5e221cc..2cc0e3bd6 100644
--- a/app/views/DefaultBrowserView/Item.tsx
+++ b/app/views/DefaultBrowserView/Item.tsx
@@ -25,7 +25,7 @@ const Item = ({ title, value, browser, changeDefaultBrowser }: IRenderItem) => {
 			title={I18n.t(title, { defaultValue: title })}
 			onPress={() => changeDefaultBrowser(value)}
 			testID={`default-browser-view-${title}`}
-			right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			right={() => (isSelected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			translateTitle={false}
 		/>
 	);
diff --git a/app/views/DefaultBrowserView/index.tsx b/app/views/DefaultBrowserView/index.tsx
index 60b10f16b..0e83791fa 100644
--- a/app/views/DefaultBrowserView/index.tsx
+++ b/app/views/DefaultBrowserView/index.tsx
@@ -25,7 +25,7 @@ const DEFAULT_BROWSERS: IBrowsersValues[] = [
 		value: 'inApp'
 	},
 	{
-		title: isIOS ? 'Safari' : 'Browser',
+		title: 'System_default',
 		value: 'systemDefault:'
 	}
 ];
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index 4003dc13f..f09f8c92a 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Switch, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { Animated, Easing, Text, TouchableWithoutFeedback, View } from 'react-native';
 
 import Touch from '../../containers/Touch';
 import { CustomIcon, TIconsName } from '../../containers/CustomIcon';
 import Check from '../../containers/Check';
 import I18n from '../../i18n';
-import { SWITCH_TRACK_COLOR } from '../../lib/constants';
 import styles from './styles';
+import Switch from '../../containers/Switch';
 import { useTheme } from '../../theme';
 
 const ANIMATION_DURATION = 200;
@@ -66,8 +66,8 @@ const DirectoryOptions = ({
 		return (
 			<Touch onPress={() => changeType(itemType)} style={styles.dropdownItemButton} accessibilityLabel={I18n.t(text)}>
 				<View style={styles.dropdownItemContainer}>
-					<CustomIcon name={icon} size={22} color={colors.bodyText} style={styles.dropdownItemIcon} />
-					<Text style={[styles.dropdownItemText, { color: colors.bodyText }]}>{I18n.t(text)}</Text>
+					<CustomIcon name={icon} size={22} color={colors.fontDefault} style={styles.dropdownItemIcon} />
+					<Text style={[styles.dropdownItemText, { color: colors.fontDefault }]}>{I18n.t(text)}</Text>
 					{propType === itemType ? <Check /> : null}
 				</View>
 			</Touch>
@@ -89,15 +89,15 @@ const DirectoryOptions = ({
 			<TouchableWithoutFeedback onPress={close}>
 				<Animated.View style={[styles.backdrop, { backgroundColor: colors.backdropColor, opacity: backdropOpacity }]} />
 			</TouchableWithoutFeedback>
-			<Animated.View style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: colors.backgroundColor }]}>
+			<Animated.View style={[styles.dropdownContainer, { transform: [{ translateY }], backgroundColor: colors.surfaceRoom }]}>
 				<Touch onPress={close} accessibilityLabel={I18n.t('Search_by')}>
-					<View style={[styles.dropdownContainerHeader, styles.dropdownItemContainer, { borderColor: colors.separatorColor }]}>
-						<Text style={[styles.dropdownToggleText, { color: colors.auxiliaryText }]}>{I18n.t('Search_by')}</Text>
+					<View style={[styles.dropdownContainerHeader, styles.dropdownItemContainer, { borderColor: colors.strokeLight }]}>
+						<Text style={[styles.dropdownToggleText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Search_by')}</Text>
 						<CustomIcon
 							style={[styles.dropdownItemIcon, styles.inverted]}
 							size={22}
 							name='chevron-down'
-							color={colors.auxiliaryTintColor}
+							color={colors.fontHint}
 						/>
 					</View>
 				</Touch>
@@ -106,15 +106,15 @@ const DirectoryOptions = ({
 				{renderItem('teams')}
 				{isFederationEnabled ? (
 					<>
-						<View style={[styles.dropdownSeparator, { backgroundColor: colors.separatorColor }]} />
+						<View style={[styles.dropdownSeparator, { backgroundColor: colors.strokeLight }]} />
 						<View style={[styles.dropdownItemContainer, styles.globalUsersContainer]}>
 							<View style={styles.globalUsersTextContainer}>
-								<Text style={[styles.dropdownItemText, { color: colors.infoText }]}>{I18n.t('Search_global_users')}</Text>
-								<Text style={[styles.dropdownItemDescription, { color: colors.infoText }]}>
+								<Text style={[styles.dropdownItemText, { color: colors.fontHint }]}>{I18n.t('Search_global_users')}</Text>
+								<Text style={[styles.dropdownItemDescription, { color: colors.fontHint }]}>
 									{I18n.t('Search_global_users_description')}
 								</Text>
 							</View>
-							<Switch value={globalUsers} onValueChange={toggleWorkspace} trackColor={SWITCH_TRACK_COLOR} />
+							<Switch value={globalUsers} onValueChange={toggleWorkspace} />
 						</View>
 					</>
 				) : null}
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 4fe6d7a0c..4902a990c 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -216,19 +216,11 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 				<SearchBox onChangeText={this.onSearchChangeText} onSubmitEditing={this.search} testID='directory-view-search' />
 				<Touch onPress={this.toggleDropdown} style={styles.dropdownItemButton} testID='directory-view-dropdown'>
 					<View
-						style={[
-							sharedStyles.separatorVertical,
-							styles.toggleDropdownContainer,
-							{ borderColor: themes[theme].separatorColor }
-						]}>
-						<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
-						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{I18n.t(text)}</Text>
-						<CustomIcon
-							name='chevron-down'
-							size={20}
-							color={themes[theme].auxiliaryTintColor}
-							style={styles.toggleDropdownArrow}
-						/>
+						style={[sharedStyles.separatorVertical, styles.toggleDropdownContainer, { borderColor: themes[theme].strokeLight }]}
+					>
+						<CustomIcon name={icon} size={20} color={themes[theme].badgeBackgroundLevel2} style={styles.toggleDropdownIcon} />
+						<Text style={[styles.toggleDropdownText, { color: themes[theme].badgeBackgroundLevel2 }]}>{I18n.t(text)}</Text>
+						<CustomIcon name='chevron-down' size={20} color={themes[theme].fontHint} style={styles.toggleDropdownArrow} />
 					</View>
 				</Touch>
 			</>
@@ -243,7 +235,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		if (index === data.length - 1) {
 			style = {
 				...sharedStyles.separatorBottom,
-				borderColor: themes[theme].separatorColor
+				borderColor: themes[theme].strokeLight
 			};
 		}
 
@@ -297,7 +289,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		const { data, loading, showOptionsDropdown, type, globalUsers } = this.state;
 		const { isFederationEnabled, theme } = this.props;
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='directory-view'>
 				<StatusBar />
 				<FlatList
 					data={data}
diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx
index f599c7414..d3ab8053c 100644
--- a/app/views/DiscussionsView/DiscussionDetails.tsx
+++ b/app/views/DiscussionsView/DiscussionDetails.tsx
@@ -45,15 +45,15 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): React.ReactEleme
 		<View style={[styles.container]}>
 			<View style={styles.detailsContainer}>
 				<View style={styles.detailContainer}>
-					<CustomIcon name={'discussions'} size={24} color={colors.auxiliaryText} />
-					<Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name={'discussions'} size={24} color={colors.fontSecondaryInfo} />
+					<Text style={[styles.detailText, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 						{count}
 					</Text>
 				</View>
 
 				<View style={styles.detailContainer}>
-					<CustomIcon name={'clock'} size={24} color={colors.auxiliaryText} />
-					<Text style={[styles.detailText, { color: colors.auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name={'clock'} size={24} color={colors.fontSecondaryInfo} />
+					<Text style={[styles.detailText, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 						{date}
 					</Text>
 				</View>
diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx
index 63bf92428..2cac3ddf5 100644
--- a/app/views/DiscussionsView/Item.tsx
+++ b/app/views/DiscussionsView/Item.tsx
@@ -66,15 +66,16 @@ const Item = ({ item, onPress }: IItem): React.ReactElement => {
 		<Touchable
 			onPress={() => onPress(item)}
 			testID={`discussions-view-${item.msg}`}
-			style={{ backgroundColor: colors.backgroundColor }}>
+			style={{ backgroundColor: colors.surfaceRoom }}
+		>
 			<View style={styles.container}>
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
-						<Text style={[styles.title, { color: colors.titleText }]} numberOfLines={1}>
+						<Text style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 							{username}
 						</Text>
-						{messageTime ? <Text style={[styles.time, { color: colors.auxiliaryText }]}>{messageTime}</Text> : null}
+						{messageTime ? <Text style={[styles.time, { color: colors.fontSecondaryInfo }]}>{messageTime}</Text> : null}
 					</View>
 					<View style={styles.messageContainer}>
 						{username ? <MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={[styles.markdown]} /> : null}
diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
index 5fe697c72..31d81be6e 100644
--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@@ -130,7 +130,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={colors.headerTintColor}
+					tintColor={colors.fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),
@@ -188,7 +188,7 @@ const DiscussionsView = ({ navigation, route }: IDiscussionsViewProps): React.Re
 				data={isSearching ? search : discussions}
 				renderItem={renderItem}
 				keyExtractor={(item: any) => item._id}
-				style={{ backgroundColor: colors.backgroundColor }}
+				style={{ backgroundColor: colors.surfaceRoom }}
 				contentContainerStyle={styles.contentContainer}
 				onEndReachedThreshold={0.5}
 				removeClippedSubviews={isIOS}
diff --git a/app/views/DisplayPrefsView.tsx b/app/views/DisplayPrefsView.tsx
index f07bcc97a..9e2e1970a 100644
--- a/app/views/DisplayPrefsView.tsx
+++ b/app/views/DisplayPrefsView.tsx
@@ -87,7 +87,7 @@ const DisplayPrefsView = (): React.ReactElement => {
 	};
 
 	const renderCheckBox = (value: boolean) => (
-		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.actionTintColor : null} />
+		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.strokeHighlight : ''} />
 	);
 
 	const renderAvatarSwitch = (value: boolean) => (
@@ -95,7 +95,7 @@ const DisplayPrefsView = (): React.ReactElement => {
 	);
 
 	const renderRadio = (value: boolean) => (
-		<RadioButton selected={!!value} color={value ? colors.actionTintColor : colors.auxiliaryText} size={ICON_SIZE} />
+		<RadioButton selected={!!value} color={value ? colors.fontHint : colors.fontSecondaryInfo} size={ICON_SIZE} />
 	);
 
 	return (
diff --git a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
index f55f4d216..ec61b066d 100644
--- a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
+++ b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
@@ -74,8 +74,8 @@ const ChangePassword = () => {
 	return (
 		<>
 			<List.Section>
-				<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
-				<Text style={[styles.description, { color: colors.bodyText }]}>
+				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
+				<Text style={[styles.description, { color: colors.fontDefault }]}>
 					{I18n.t('E2E_encryption_change_password_description')}
 				</Text>
 				<FormTextInput
diff --git a/app/views/E2EEncryptionSecurityView/index.tsx b/app/views/E2EEncryptionSecurityView/index.tsx
index eb739144e..5c1f03c4b 100644
--- a/app/views/E2EEncryptionSecurityView/index.tsx
+++ b/app/views/E2EEncryptionSecurityView/index.tsx
@@ -70,20 +70,19 @@ const E2EEncryptionSecurityView = () => {
 	};
 
 	return (
-		<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: colors.backgroundColor }}>
+		<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: colors.surfaceRoom }}>
 			<StatusBar />
 			<List.Container>
 				<View style={styles.container}>
 					<ChangePassword />
 
 					<List.Section>
-						<Text style={[styles.title, { color: colors.headerTitleColor }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
-						<Text style={[styles.description, { color: colors.bodyText }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
+						<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
+						<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('E2E_encryption_reset_description')}</Text>
 						<Button
 							onPress={resetOwnKey}
 							title={I18n.t('E2E_encryption_reset_button')}
 							type='secondary'
-							backgroundColor={colors.chatComponentBackground}
 							testID='e2e-encryption-security-view-reset-key'
 						/>
 					</List.Section>
diff --git a/app/views/E2EEnterYourPasswordView.tsx b/app/views/E2EEnterYourPasswordView.tsx
index b14dcf2c0..2c2d242f9 100644
--- a/app/views/E2EEnterYourPasswordView.tsx
+++ b/app/views/E2EEnterYourPasswordView.tsx
@@ -44,12 +44,12 @@ const E2EEnterYourPasswordView = (): React.ReactElement => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.backgroundColor }}
+			style={{ backgroundColor: colors.surfaceRoom }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}>
 			<StatusBar />
 			<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
-				<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-enter-your-password-view'>
+				<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='e2e-enter-your-password-view'>
 					<FormTextInput
 						placeholder={I18n.t('Password')}
 						returnKeyType='send'
@@ -60,8 +60,8 @@ const E2EEnterYourPasswordView = (): React.ReactElement => {
 						textContentType='password'
 					/>
 					<Button onPress={submit} title={I18n.t('Confirm')} disabled={!password} testID='e2e-enter-your-password-view-confirm' />
-					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
-					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
+					<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
+					<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
 				</SafeAreaView>
 			</ScrollView>
 		</KeyboardView>
diff --git a/app/views/E2EHowItWorksView.tsx b/app/views/E2EHowItWorksView.tsx
index 279b1c76b..6ad40fb20 100644
--- a/app/views/E2EHowItWorksView.tsx
+++ b/app/views/E2EHowItWorksView.tsx
@@ -32,10 +32,10 @@ const E2EHowItWorksView = (): React.ReactElement => {
 		});
 	}, []);
 
-	const infoStyle = [styles.info, { color: colors.bodyText }];
+	const infoStyle = [styles.info, { color: colors.fontDefault }];
 
 	return (
-		<SafeAreaView style={[styles.container, { backgroundColor: colors.backgroundColor }]} testID='e2e-how-it-works-view'>
+		<SafeAreaView style={[styles.container, { backgroundColor: colors.surfaceRoom }]} testID='e2e-how-it-works-view'>
 			<Markdown msg={I18n.t('E2E_How_It_Works_info1')} style={infoStyle} />
 			<Markdown msg={I18n.t('E2E_How_It_Works_info2')} style={infoStyle} />
 			<Markdown msg={I18n.t('E2E_How_It_Works_info3')} style={infoStyle} />
diff --git a/app/views/E2ESaveYourPasswordView.tsx b/app/views/E2ESaveYourPasswordView.tsx
index 683d67095..81fb5e32c 100644
--- a/app/views/E2ESaveYourPasswordView.tsx
+++ b/app/views/E2ESaveYourPasswordView.tsx
@@ -101,26 +101,26 @@ const E2ESaveYourPasswordView = () => {
 	};
 
 	return (
-		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-save-password-view'>
+		<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='e2e-save-password-view'>
 			<StatusBar />
 			<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
-				<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
-					<Text style={[styles.warning, { color: colors.dangerColor }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
+				<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
+					<Text style={[styles.warning, { color: colors.fontDanger }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
 					<View style={styles.content}>
-						<Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</Text>
-						<Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text>
+						<Text style={[styles.passwordText, { color: colors.fontDefault }]}>{I18n.t('Your_password_is')}</Text>
+						<Text style={[styles.password, { color: colors.fontDefault }]}>{password}</Text>
 						<Button
 							onPress={onCopy}
-							style={[styles.copyButton, { backgroundColor: colors.auxiliaryBackground }]}
+							style={[styles.copyButton, { backgroundColor: colors.surfaceHover }]}
 							title={I18n.t('Copy')}
 							type='secondary'
 							fontSize={14}
 						/>
 					</View>
-					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
+					<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
 					<Button
 						onPress={onHowItWorks}
-						style={{ backgroundColor: colors.auxiliaryBackground }}
+						style={{ backgroundColor: colors.surfaceHover }}
 						title={I18n.t('How_It_Works')}
 						type='secondary'
 						testID='e2e-save-password-view-how-it-works'
diff --git a/app/views/ForgotPasswordView.tsx b/app/views/ForgotPasswordView.tsx
index ab7b94f76..8acc69b84 100644
--- a/app/views/ForgotPasswordView.tsx
+++ b/app/views/ForgotPasswordView.tsx
@@ -67,7 +67,7 @@ const ForgotPasswordView = (): React.ReactElement => {
 	return (
 		<FormContainer testID='forgot-password-view'>
 			<FormContainerInner>
-				<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.titleText }]}>
+				<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.fontTitlesLabels }]}>
 					{I18n.t('Forgot_password')}
 				</Text>
 				<ControlledFormTextInput
diff --git a/app/views/ForwardLivechatView.tsx b/app/views/ForwardLivechatView.tsx
index 7d781f3b8..0ae27c16a 100644
--- a/app/views/ForwardLivechatView.tsx
+++ b/app/views/ForwardLivechatView.tsx
@@ -145,7 +145,7 @@ const ForwardLivechatView = (): React.ReactElement => {
 	};
 
 	return (
-		<View style={[styles.container, { backgroundColor: colors.auxiliaryBackground }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceHover }]}>
 			<Input onPress={onPressDepartment} placeholder={I18n.t('Select_a_Department')} />
 			<OrSeparator theme={theme} />
 			<Input onPress={onPressUser} placeholder={I18n.t('Select_a_User')} />
diff --git a/app/views/ForwardMessageView/SelectPersonOrChannel.tsx b/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
index eb1e97042..e4b355276 100644
--- a/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
+++ b/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
@@ -56,7 +56,7 @@ const SelectPersonOrChannel = ({
 
 	return (
 		<View style={styles.inputContainer}>
-			<Text style={[styles.label, { color: colors.bodyText }]}>{I18n.t('Person_or_channel')}</Text>
+			<Text style={[styles.label, { color: colors.fontDefault }]}>{I18n.t('Person_or_channel')}</Text>
 			<MultiSelect
 				onSearch={getRooms}
 				onChange={onRoomSelect}
diff --git a/app/views/ForwardMessageView/index.tsx b/app/views/ForwardMessageView/index.tsx
index c9fd97ec1..8b3d721df 100644
--- a/app/views/ForwardMessageView/index.tsx
+++ b/app/views/ForwardMessageView/index.tsx
@@ -46,7 +46,7 @@ const ForwardMessageView = () => {
 				<HeaderButton.Container>
 					<HeaderButton.Item
 						title={I18n.t('Send')}
-						color={isSendButtonEnabled ? colors.actionTintColor : colors.headerTintColor}
+						color={isSendButtonEnabled ? colors.fontHint : colors.fontSecondaryInfo}
 						disabled={!isSendButtonEnabled}
 						onPress={handlePostMessage}
 						testID='forward-message-view-send'
@@ -77,7 +77,7 @@ const ForwardMessageView = () => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.auxiliaryBackground }}
+			style={{ backgroundColor: colors.surfaceHover }}
 			contentContainerStyle={styles.container}
 			keyboardVerticalOffset={128}>
 			<StatusBar />
@@ -91,7 +91,7 @@ const ForwardMessageView = () => {
 						blockUnauthenticatedAccess={blockUnauthenticatedAccess}
 						serverVersion={serverVersion}
 					/>
-					<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.backgroundColor }]}>
+					<View pointerEvents='none' style={[styles.messageContainer, { backgroundColor: colors.surfaceRoom }]}>
 						<MessagePreview message={message} />
 					</View>
 				</ScrollView>
diff --git a/app/views/InviteUsersEditView/Picker.tsx b/app/views/InviteUsersEditView/Picker.tsx
index f8c5ac288..d703131b6 100644
--- a/app/views/InviteUsersEditView/Picker.tsx
+++ b/app/views/InviteUsersEditView/Picker.tsx
@@ -70,7 +70,7 @@ const Picker = ({ param, first }: { param: 'days' | 'maxUses'; first: string }):
 		dispatch(inviteLinksSetParams(params));
 	};
 
-	const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.actionTintColor } };
+	const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: colors.fontHint } };
 	const firstEl = [
 		{
 			label: I18n.t(first),
diff --git a/app/views/InviteUsersView/index.tsx b/app/views/InviteUsersView/index.tsx
index 6c094d7a0..60ed8b3dd 100644
--- a/app/views/InviteUsersView/index.tsx
+++ b/app/views/InviteUsersView/index.tsx
@@ -85,16 +85,13 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
 	};
 
 	return (
-		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }}>
-			<ScrollView
-				{...scrollPersistTaps}
-				style={{ backgroundColor: colors.auxiliaryBackground }}
-				showsVerticalScrollIndicator={false}>
+		<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }}>
+			<ScrollView {...scrollPersistTaps} style={{ backgroundColor: colors.surfaceHover }} showsVerticalScrollIndicator={false}>
 				<StatusBar />
 				<View style={styles.innerContainer}>
 					<FormTextInput label={I18n.t('Invite_Link')} value={invite && invite.url} editable={false} />
 					{renderExpiration()}
-					<View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
+					<View style={[styles.divider, { backgroundColor: colors.strokeLight }]} />
 					<Button title={I18n.t('Share_Link')} type='primary' onPress={share} />
 					<Button title={I18n.t('Edit_Invite')} type='secondary' onPress={edit} />
 				</View>
diff --git a/app/views/JitsiMeetView/JitsiAuthModal.tsx b/app/views/JitsiMeetView/JitsiAuthModal.tsx
index f6c8a2de0..91d860b3c 100644
--- a/app/views/JitsiMeetView/JitsiAuthModal.tsx
+++ b/app/views/JitsiMeetView/JitsiAuthModal.tsx
@@ -48,17 +48,17 @@ const JitsiAuthModal = ({
 
 	return (
 		<Modal isVisible>
-			<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
-				<Text style={[styles.title, { color: colors.titleText }]}>{i18n.t('Jitsi_may_require_authentication')}</Text>
+			<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
+				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{i18n.t('Jitsi_may_require_authentication')}</Text>
 				{isAdmin ? (
-					<Text style={[styles.regular, { color: colors.titleText }]}>
+					<Text style={[styles.regular, { color: colors.fontTitlesLabels }]}>
 						{i18n.t('Jitsi_authentication_before_making_calls_admin')}
 					</Text>
 				) : (
-					<Text style={[styles.regular, { color: colors.titleText }]}>{i18n.t('Jitsi_authentication_before_making_calls')}</Text>
+					<Text style={[styles.regular, { color: colors.fontTitlesLabels }]}>{i18n.t('Jitsi_authentication_before_making_calls')}</Text>
 				)}
 				{!isAdmin ? (
-					<Text style={[styles.min, { color: colors.auxiliaryText }]}>
+					<Text style={[styles.min, { color: colors.fontSecondaryInfo }]}>
 						{i18n.t('Jitsi_authentication_before_making_calls_ask_admin')}
 					</Text>
 				) : null}
diff --git a/app/views/LanguageView/LanguageItem.tsx b/app/views/LanguageView/LanguageItem.tsx
index 95143eafa..637b4dc8f 100644
--- a/app/views/LanguageView/LanguageItem.tsx
+++ b/app/views/LanguageView/LanguageItem.tsx
@@ -22,7 +22,7 @@ const LanguageItem = ({
 			title={label}
 			onPress={() => submit(value)}
 			testID={`language-view-${value}`}
-			right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			right={() => (isSelected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			translateTitle={false}
 		/>
 	);
diff --git a/app/views/LivechatEditView.tsx b/app/views/LivechatEditView.tsx
index 80c9b70d4..c731618c4 100644
--- a/app/views/LivechatEditView.tsx
+++ b/app/views/LivechatEditView.tsx
@@ -53,7 +53,7 @@ interface ILivechatEditViewProps {
 }
 
 const Title = ({ title, theme }: ITitle) =>
-	title ? <Text style={[styles.title, { color: themes[theme].titleText }]}>{title}</Text> : null;
+	title ? <Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{title}</Text> : null;
 
 const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewProps) => {
 	const [customFields, setCustomFields] = useState<ICustomFields>({});
@@ -183,7 +183,7 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+			style={{ backgroundColor: themes[theme].surfaceHover }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}>
 			<ScrollView {...scrollPersistTaps} style={styles.container}>
@@ -256,7 +256,7 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 						editable={!!editLivechatRoomCustomFieldsPermission}
 					/>
 
-					<Text style={[styles.label, { color: themes[theme].titleText }]}>{I18n.t('Tags')}</Text>
+					<Text style={[styles.label, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Tags')}</Text>
 					<MultiSelect
 						options={tagOptions}
 						onChange={({ value }: { value: string[] }) => {
diff --git a/app/views/LoginView/UserForm.tsx b/app/views/LoginView/UserForm.tsx
index 5bcaba0ec..5f114569e 100644
--- a/app/views/LoginView/UserForm.tsx
+++ b/app/views/LoginView/UserForm.tsx
@@ -102,7 +102,7 @@ const UserForm = () => {
 
 	return (
 		<>
-			<Text style={[styles.title, sharedStyles.textBold, { color: colors.titleText }]}>{I18n.t('Login')}</Text>
+			<Text style={[styles.title, sharedStyles.textBold, { color: colors.fontTitlesLabels }]}>{I18n.t('Login')}</Text>
 			<ControlledFormTextInput
 				name='user'
 				control={control}
@@ -131,7 +131,6 @@ const UserForm = () => {
 			/>
 			<Button
 				title={I18n.t('Login')}
-				type='primary'
 				onPress={handleSubmit(submit)}
 				testID='login-view-submit'
 				loading={isFetching}
@@ -144,22 +143,23 @@ const UserForm = () => {
 					type='secondary'
 					onPress={forgotPassword}
 					testID='login-view-forgot-password'
-					color={colors.auxiliaryText}
+					color={colors.fontInfo}
 					fontSize={14}
+					backgroundColor='transparent'
 				/>
 			) : null}
 			{showRegistrationButton ? (
 				<View style={styles.bottomContainer}>
-					<Text style={[styles.bottomContainerText, { color: colors.auxiliaryText }]}>{I18n.t('Dont_Have_An_Account')}</Text>
+					<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Dont_Have_An_Account')}</Text>
 					<Text
-						style={[styles.bottomContainerTextBold, { color: colors.actionTintColor }]}
+						style={[styles.bottomContainerTextBold, { color: colors.fontHint }]}
 						onPress={register}
 						testID='login-view-register'>
 						{I18n.t('Create_account')}
 					</Text>
 				</View>
 			) : (
-				<Text style={[styles.registerDisabled, { color: colors.auxiliaryText }]}>
+				<Text style={[styles.registerDisabled, { color: colors.fontSecondaryInfo }]}>
 					{Accounts_RegistrationForm_LinkReplacementText}
 				</Text>
 			)}
diff --git a/app/views/MarkdownTableView.tsx b/app/views/MarkdownTableView.tsx
index f78509171..972feefe9 100644
--- a/app/views/MarkdownTableView.tsx
+++ b/app/views/MarkdownTableView.tsx
@@ -22,14 +22,14 @@ const MarkdownTableView = ({ navigation, route }: IMarkdownTableViewProps): Reac
 
 	if (isIOS) {
 		return (
-			<ScrollView style={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ width: tableWidth }}>
+			<ScrollView style={{ backgroundColor: colors.surfaceRoom }} contentContainerStyle={{ width: tableWidth }}>
 				{renderRows()}
 			</ScrollView>
 		);
 	}
 
 	return (
-		<ScrollView style={{ backgroundColor: colors.backgroundColor }}>
+		<ScrollView style={{ backgroundColor: colors.surfaceRoom }}>
 			<ScrollView horizontal>{renderRows()}</ScrollView>
 		</ScrollView>
 	);
diff --git a/app/views/MediaAutoDownloadView/ListPicker.tsx b/app/views/MediaAutoDownloadView/ListPicker.tsx
index e087c0827..327fd0f31 100644
--- a/app/views/MediaAutoDownloadView/ListPicker.tsx
+++ b/app/views/MediaAutoDownloadView/ListPicker.tsx
@@ -53,7 +53,7 @@ const ListPicker = ({
 				hideActionSheet();
 				onChangeValue(i.value);
 			},
-			right: option.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
+			right: option.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.strokeHighlight} /> : undefined
 		}));
 
 	return (
@@ -61,7 +61,7 @@ const ListPicker = ({
 			title={title}
 			onPress={() => showActionSheet({ options: getOptions() })}
 			right={() => (
-				<Text style={[styles.title, { color: colors.actionTintColor }]}>
+				<Text style={[styles.title, { color: colors.fontHint }]}>
 					{/* when picking an option the label should be Never 
 					but when showing among the other settings the label should be Off */}
 					{option.label === 'Never' ? I18n.t('Off') : I18n.t(option.label)}
diff --git a/app/views/MessagesView/index.tsx b/app/views/MessagesView/index.tsx
index 82db1d1bf..e080c61b4 100644
--- a/app/views/MessagesView/index.tsx
+++ b/app/views/MessagesView/index.tsx
@@ -348,8 +348,8 @@ class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewStat
 	renderEmpty = () => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]} testID={this.content.testID}>
-				<Text style={[styles.noDataFound, { color: themes[theme].titleText }]}>{this.content.noDataMsg}</Text>
+			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]} testID={this.content.testID}>
+				<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{this.content.noDataMsg}</Text>
 			</View>
 		);
 	};
@@ -365,12 +365,12 @@ class MessagesView extends React.Component<IMessagesViewProps, IMessagesViewStat
 		}
 
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID={this.content.testID}>
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID={this.content.testID}>
 				<StatusBar />
 				<FlatList
 					data={messages}
 					renderItem={this.renderItem}
-					style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+					style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 					keyExtractor={item => item._id}
 					onEndReached={this.load}
 					ListFooterComponent={loading ? <ActivityIndicator /> : null}
diff --git a/app/views/ModalBlockView.tsx b/app/views/ModalBlockView.tsx
index d74578ecc..385a03651 100644
--- a/app/views/ModalBlockView.tsx
+++ b/app/views/ModalBlockView.tsx
@@ -256,8 +256,9 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
 
 		return (
 			<KeyboardAwareScrollView
-				style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
-				keyboardShouldPersistTaps='always'>
+				style={[styles.container, { backgroundColor: themes[theme].surfaceHover }]}
+				keyboardShouldPersistTaps='always'
+			>
 				<View style={styles.content}>
 					{React.createElement(
 						modalBlockWithContext({
diff --git a/app/views/NewMessageView/ButtonCreate.tsx b/app/views/NewMessageView/ButtonCreate.tsx
index f3dc7d2d2..1b44662e4 100644
--- a/app/views/NewMessageView/ButtonCreate.tsx
+++ b/app/views/NewMessageView/ButtonCreate.tsx
@@ -20,8 +20,8 @@ const ButtonCreate = ({ onPress, testID, title, icon }: IButton) => {
 			<List.Item
 				onPress={onPress}
 				testID={testID}
-				left={() => <CustomIcon name={icon} size={24} color={themes[theme].bodyText} />}
-				right={() => <CustomIcon name={'chevron-right'} size={24} color={themes[theme].bodyText} />}
+				left={() => <CustomIcon name={icon} size={24} color={themes[theme].fontDefault} />}
+				right={() => <CustomIcon name={'chevron-right'} size={24} color={themes[theme].fontDefault} />}
 				title={title}
 			/>
 			<List.Separator />
diff --git a/app/views/NewMessageView/HeaderNewMessage.tsx b/app/views/NewMessageView/HeaderNewMessage.tsx
index 458c745dc..d95cbe601 100644
--- a/app/views/NewMessageView/HeaderNewMessage.tsx
+++ b/app/views/NewMessageView/HeaderNewMessage.tsx
@@ -68,7 +68,7 @@ const HeaderNewMessage = ({ maxUsers, onChangeText }: { maxUsers: number; onChan
 
 	return (
 		<>
-			<View style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+			<View style={[styles.container, { backgroundColor: themes[theme].surfaceHover }]}>
 				<View style={styles.buttonContainer}>
 					{createPublicChannelPermission || createPrivateChannelPermission ? (
 						<ButtonCreate
diff --git a/app/views/NewMessageView/index.tsx b/app/views/NewMessageView/index.tsx
index 1d3427f4f..f44760fb6 100644
--- a/app/views/NewMessageView/index.tsx
+++ b/app/views/NewMessageView/index.tsx
@@ -102,7 +102,7 @@ const NewMessageView = () => {
 				}}
 				ItemSeparatorComponent={List.Separator}
 				ListFooterComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+				contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/NewServerView/ServerInput/Item.tsx b/app/views/NewServerView/ServerInput/Item.tsx
index 0352d7ad3..32b7305e0 100644
--- a/app/views/NewServerView/ServerInput/Item.tsx
+++ b/app/views/NewServerView/ServerInput/Item.tsx
@@ -38,15 +38,15 @@ interface IItem {
 const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => (
 	<Touch style={styles.container} onPress={() => onPress(item.url)} testID={`server-history-${item.url}`}>
 		<View style={styles.content}>
-			<Text numberOfLines={1} style={[styles.server, { color: themes[theme].bodyText }]}>
+			<Text numberOfLines={1} style={[styles.server, { color: themes[theme].fontDefault }]}>
 				{item.url}
 			</Text>
-			<Text numberOfLines={1} style={{ color: themes[theme].auxiliaryText }}>
+			<Text numberOfLines={1} style={{ color: themes[theme].fontSecondaryInfo }}>
 				{item.username}
 			</Text>
 		</View>
 		<BorderlessButton onPress={() => onDelete(item)} testID={`server-history-delete-${item.url}`}>
-			<CustomIcon name='delete' size={24} color={themes[theme].auxiliaryText} />
+			<CustomIcon name='delete' size={24} color={themes[theme].fontSecondaryInfo} />
 		</BorderlessButton>
 	</Touch>
 );
diff --git a/app/views/NewServerView/ServerInput/index.tsx b/app/views/NewServerView/ServerInput/index.tsx
index 1e12cf7d7..101447b02 100644
--- a/app/views/NewServerView/ServerInput/index.tsx
+++ b/app/views/NewServerView/ServerInput/index.tsx
@@ -67,10 +67,8 @@ const ServerInput = ({
 			/>
 			{focused && serversHistory?.length ? (
 				<View
-					style={[
-						styles.serverHistory,
-						{ backgroundColor: themes[theme].backgroundColor, borderColor: themes[theme].separatorColor }
-					]}>
+					style={[styles.serverHistory, { backgroundColor: themes[theme].surfaceRoom, borderColor: themes[theme].strokeLight }]}
+				>
 					<FlatList
 						data={serversHistory}
 						renderItem={({ item }) => (
diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx
index 6454ce0a2..23711be99 100644
--- a/app/views/NewServerView/index.tsx
+++ b/app/views/NewServerView/index.tsx
@@ -301,19 +301,23 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 					{
 						marginBottom: verticalScale({ size: previousServer && !isTablet ? 10 : 30, height })
 					}
-				]}>
+				]}
+			>
 				<Text
 					style={[
 						styles.chooseCertificateTitle,
-						{ color: themes[theme].auxiliaryText, fontSize: moderateScale({ size: 13, width }) }
-					]}>
+						{ color: themes[theme].fontSecondaryInfo, fontSize: moderateScale({ size: 13, width }) }
+					]}
+				>
 					{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
 				</Text>
 				<TouchableOpacity
 					onPress={certificate ? this.handleRemove : this.chooseCertificate}
-					testID='new-server-choose-certificate'>
+					testID='new-server-choose-certificate'
+				>
 					<Text
-						style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale({ size: 13, width }) }]}>
+						style={[styles.chooseCertificate, { color: themes[theme].fontInfo, fontSize: moderateScale({ size: 13, width }) }]}
+					>
 						{certificate ?? I18n.t('Apply_Your_Certificate')}
 					</Text>
 				</TouchableOpacity>
@@ -346,22 +350,24 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						style={[
 							styles.title,
 							{
-								color: themes[theme].titleText,
+								color: themes[theme].fontTitlesLabels,
 								fontSize: moderateScale({ size: 22, width }),
 								marginBottom: verticalScale({ size: 8, height })
 							}
-						]}>
+						]}
+					>
 						Rocket.Chat
 					</Text>
 					<Text
 						style={[
 							styles.subtitle,
 							{
-								color: themes[theme].controlText,
+								color: themes[theme].fontHint,
 								fontSize: moderateScale({ size: 16, width }),
 								marginBottom: verticalScale({ size: 30, height })
 							}
-						]}>
+						]}
+					>
 						{I18n.t('Onboarding_subtitle')}
 					</Text>
 					<ServerInput
@@ -389,17 +395,17 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 								style={[
 									styles.description,
 									{
-										color: themes[theme].auxiliaryText,
+										color: themes[theme].fontSecondaryInfo,
 										fontSize: moderateScale({ size: 14, width }),
 										marginBottom: verticalScale({ size: 16, height })
 									}
-								]}>
+								]}
+							>
 								{I18n.t('Onboarding_join_open_description')}
 							</Text>
 							<Button
 								title={I18n.t('Join_our_open_workspace')}
 								type='secondary'
-								backgroundColor={themes[theme].chatComponentBackground}
 								onPress={this.connectOpen}
 								disabled={connecting}
 								loading={connectingOpen && connecting}
diff --git a/app/views/NotificationPreferencesView/index.tsx b/app/views/NotificationPreferencesView/index.tsx
index 708f0943a..a3680d04a 100644
--- a/app/views/NotificationPreferencesView/index.tsx
+++ b/app/views/NotificationPreferencesView/index.tsx
@@ -1,6 +1,6 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/core';
 import React, { useEffect, useState } from 'react';
-import { Switch, Text } from 'react-native';
+import { Text } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 
 import { TActionSheetOptionsItem, useActionSheet } from '../../containers/ActionSheet';
@@ -10,7 +10,6 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import StatusBar from '../../containers/StatusBar';
 import { IRoomNotifications, TRoomNotificationsModel } from '../../definitions';
 import I18n from '../../i18n';
-import { SWITCH_TRACK_COLOR } from '../../lib/constants';
 import { useAppSelector } from '../../lib/hooks';
 import { showErrorAlertWithEMessage } from '../../lib/methods/helpers';
 import { compareServerVersion } from '../../lib/methods/helpers/compareServerVersion';
@@ -20,6 +19,7 @@ import { ChatsStackParamList } from '../../stacks/types';
 import { useTheme } from '../../theme';
 import sharedStyles from '../Styles';
 import { OPTIONS } from './options';
+import Switch from '../../containers/Switch';
 
 type TOptions = keyof typeof OPTIONS;
 type TRoomNotifications = keyof IRoomNotifications;
@@ -57,7 +57,7 @@ const RenderListPicker = ({
 			onChangeValue(preference, { [preference]: i.value.toString() }, () => setOption(option));
 			setOption(i);
 		},
-		right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
+		right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.strokeHighlight} /> : undefined
 	}));
 
 	return (
@@ -66,7 +66,7 @@ const RenderListPicker = ({
 			testID={testID}
 			onPress={() => showActionSheet({ options })}
 			right={() => (
-				<Text style={[{ ...sharedStyles.textRegular, fontSize: 16 }, { color: colors.actionTintColor }]}>
+				<Text style={[{ ...sharedStyles.textRegular, fontSize: 16 }, { color: colors.fontHint }]}>
 					{option?.label ? I18n.t(option?.label, { defaultValue: option?.label, second: option?.second }) : option?.label}
 				</Text>
 			)}
@@ -80,7 +80,6 @@ const RenderSwitch = ({ preference, room, onChangeValue }: IBaseParams) => {
 		<Switch
 			value={switchValue}
 			testID={preference as string}
-			trackColor={SWITCH_TRACK_COLOR}
 			onValueChange={value => {
 				onChangeValue(preference, { [preference]: switchValue ? '1' : '0' }, () => setSwitchValue(switchValue));
 				setSwitchValue(value);
diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx
index 53e085c91..18170cb23 100644
--- a/app/views/PickerView.tsx
+++ b/app/views/PickerView.tsx
@@ -32,7 +32,7 @@ const Item = ({ item, selected, onItemPress }: IItem) => {
 	return (
 		<List.Item
 			title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
-			right={() => (selected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+			right={() => (selected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			onPress={onItemPress}
 			translateTitle={false}
 		/>
@@ -105,7 +105,7 @@ const PickerView = (): React.ReactElement => {
 				ListHeaderComponent={<RenderSearch onChangeText={onChangeText} />}
 				ListFooterComponent={List.Separator}
 				ListEmptyComponent={() => (
-					<Text style={[styles.noResult, { color: colors.titleText }]}>{I18n.t('No_results_found')}</Text>
+					<Text style={[styles.noResult, { color: colors.fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
 				)}
 			/>
 		</SafeAreaView>
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
index cdbecc9fb..d6fa7bb4a 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
@@ -63,14 +63,14 @@ export function DeleteAccountActionSheetContent(): React.ReactElement {
 			testID='profile-view-delete-account-sheet'
 			iconName='warning'
 			confirmTitle={i18n.t('Delete_Account')}
-			confirmBackgroundColor={colors.dangerColor}
+			confirmBackgroundColor={colors.buttonBackgroundDangerDefault}
 		/>
 	);
 }
 
 const AlertText = ({ text = '' }) => {
 	const { colors } = useTheme();
-	return <Text style={{ fontSize: 14, ...sharedStyles.textRegular, marginBottom: 10, color: colors.dangerColor }}>{text}</Text>;
+	return <Text style={{ fontSize: 14, ...sharedStyles.textRegular, marginBottom: 10, color: colors.fontDanger }}>{text}</Text>;
 };
 
 function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removedRooms = '', password = '' }) {
@@ -93,7 +93,7 @@ function ConfirmDeleteAccountActionSheetContent({ changeOwnerRooms = '', removed
 			placeholder={i18n.t('Password')}
 			testID='room-info-edit-view-name'
 			confirmTitle={i18n.t('Delete_Account_confirm')}
-			confirmBackgroundColor={colors.dangerColor}
+			confirmBackgroundColor={colors.buttonBackgroundDangerDefault}
 			showInput={false}
 			customText={
 				<>
diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx
index adb40b3df..e9e4e30c8 100644
--- a/app/views/ProfileView/index.tsx
+++ b/app/views/ProfileView/index.tsx
@@ -320,8 +320,9 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 				key={key}
 				testID={key}
 				onPress={onPress}
-				style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].borderColor }]}
-				enabled={!disabled}>
+				style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].strokeLight }]}
+				enabled={!disabled}
+			>
 				{child}
 			</Touch>
 		);
@@ -348,7 +349,8 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 								newValue[key] = value;
 								this.setState({ customFields: { ...customFields, ...newValue } });
 							}}
-							value={customFields[key]}>
+							value={customFields[key]}
+						>
 							<FormTextInput
 								inputRef={e => {
 									// @ts-ignore
@@ -433,13 +435,14 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 		} = this.props;
 
 		return (
-			<KeyboardView
-				style={{ backgroundColor: themes[theme].auxiliaryBackground }}
-				contentContainerStyle={sharedStyles.container}
-				keyboardVerticalOffset={128}>
+			<KeyboardView contentContainerStyle={sharedStyles.container} keyboardVerticalOffset={128}>
 				<StatusBar />
 				<SafeAreaView testID='profile-view'>
-					<ScrollView contentContainerStyle={sharedStyles.containerScrollView} testID='profile-view-list' {...scrollPersistTaps}>
+					<ScrollView
+						contentContainerStyle={[sharedStyles.containerScrollView, { backgroundColor: themes[theme].surfaceTint }]}
+						testID='profile-view-list'
+						{...scrollPersistTaps}
+					>
 						<View style={styles.avatarContainer} testID='profile-view-avatar'>
 							<AvatarWithEdit
 								text={user.username}
@@ -543,7 +546,6 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 						<Button
 							title={I18n.t('Logout_from_other_logged_in_locations')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
 							onPress={this.logoutOtherLocations}
 							testID='profile-view-logout-other-locations'
 						/>
@@ -551,7 +553,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 							<Button
 								title={I18n.t('Delete_my_account')}
 								type='primary'
-								backgroundColor={themes[theme].dangerColor}
+								backgroundColor={themes[theme].buttonBackgroundDangerDefault}
 								onPress={this.deleteOwnAccount}
 								testID='profile-view-delete-my-account'
 							/>
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
index a6838c82c..db1e6b53c 100644
--- a/app/views/ReadReceiptView/index.tsx
+++ b/app/views/ReadReceiptView/index.tsx
@@ -105,10 +105,8 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 			return null;
 		}
 		return (
-			<View
-				style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
-				testID='read-receipt-view'>
-				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
+			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceTint }]} testID='read-receipt-view'>
+				<Text style={[styles.emptyText, { color: themes[theme].fontHint }]}>{I18n.t('No_Read_Receipts')}</Text>
 			</View>
 		);
 	};
@@ -120,20 +118,21 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 			return null;
 		}
 		return (
-			<View style={[styles.itemContainer, { backgroundColor: themes[theme].backgroundColor }]}>
+			<View style={[styles.itemContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
 				<Avatar text={item.user.username} size={40} />
 				<View style={styles.infoContainer}>
 					<View style={styles.item}>
-						<Text style={[styles.name, { color: themes[theme].titleText }]}>{item?.user?.name}</Text>
-						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
+						<Text style={[styles.name, { color: themes[theme].fontTitlesLabels }]}>{item?.user?.name}</Text>
+						<Text style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text>
 					</View>
 					<Text
 						style={[
 							styles.username,
 							{
-								color: themes[theme].auxiliaryText
+								color: themes[theme].fontSecondaryInfo
 							}
-						]}>{`@${item.user.username}`}</Text>
+						]}
+					>{`@${item.user.username}`}</Text>
 				</View>
 			</View>
 		);
@@ -155,11 +154,13 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 					style={[
 						styles.list,
 						{
-							backgroundColor: themes[theme].chatComponentBackground,
-							borderColor: themes[theme].separatorColor
+							backgroundColor: themes[theme].surfaceTint,
+							borderColor: themes[theme].strokeLight
 						}
 					]}
-					refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].auxiliaryText} />}
+					refreshControl={
+						<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].fontSecondaryInfo} />
+					}
 					keyExtractor={item => item._id}
 				/>
 			</SafeAreaView>
diff --git a/app/views/RegisterView.tsx b/app/views/RegisterView.tsx
index a9920ace9..046334c31 100644
--- a/app/views/RegisterView.tsx
+++ b/app/views/RegisterView.tsx
@@ -230,7 +230,7 @@ class RegisterView extends React.Component<IProps, any> {
 			<FormContainer testID='register-view'>
 				<FormContainerInner>
 					<LoginServices separator />
-					<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>
+					<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Sign_Up')}</Text>
 					<FormTextInput
 						label={I18n.t('Name')}
 						containerStyle={styles.inputContainer}
@@ -309,10 +309,10 @@ class RegisterView extends React.Component<IProps, any> {
 
 					{showLoginButton ? (
 						<View style={styles.bottomContainer}>
-							<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
+							<Text style={[styles.bottomContainerText, { color: themes[theme].fontSecondaryInfo }]}>
 								{I18n.t('Do_you_have_an_account')}
 							</Text>
-							<Text style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]} onPress={this.login}>
+							<Text style={[styles.bottomContainerTextBold, { color: themes[theme].fontHint }]} onPress={this.login}>
 								{I18n.t('Login')}
 							</Text>
 						</View>
diff --git a/app/views/ReportUserView/index.tsx b/app/views/ReportUserView/index.tsx
index e31324a91..3a187c2b3 100644
--- a/app/views/ReportUserView/index.tsx
+++ b/app/views/ReportUserView/index.tsx
@@ -78,11 +78,12 @@ const ReportUserView = () => {
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: colors.auxiliaryBackground }}
+			style={{ backgroundColor: colors.surfaceHover }}
 			contentContainerStyle={styles.container}
-			keyboardVerticalOffset={128}>
-			<SafeAreaView style={[styles.containerView, { backgroundColor: colors.auxiliaryBackground }]} testID='report-user-view'>
-				<ScrollView contentContainerStyle={[styles.scroll, { backgroundColor: colors.auxiliaryBackground }]}>
+			keyboardVerticalOffset={128}
+		>
+			<SafeAreaView style={[styles.containerView, { backgroundColor: colors.strokeExtraDark }]} testID='report-user-view'>
+				<ScrollView contentContainerStyle={[styles.scroll, { backgroundColor: colors.surfaceHover }]}>
 					<StatusBar />
 					<UserInfo username={username} name={name} />
 					<ControlledFormTextInput
@@ -97,7 +98,7 @@ const ReportUserView = () => {
 					<Button
 						title={I18n.t('Report')}
 						type='primary'
-						backgroundColor={colors.dangerColor}
+						backgroundColor={colors.buttonBackgroundDangerDefault}
 						disabled={!isValid}
 						onPress={handleSubmit(submit)}
 						testID='report-user-view-submit'
diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx
index e098be844..278aa8230 100644
--- a/app/views/RoomActionsView/index.tsx
+++ b/app/views/RoomActionsView/index.tsx
@@ -3,7 +3,7 @@ import { Q } from '@nozbe/watermelondb';
 import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
-import { Share, Switch, Text, View } from 'react-native';
+import { Share, Text, View } from 'react-native';
 import { connect } from 'react-redux';
 import { Observable, Subscription } from 'rxjs';
 import { CompositeNavigationProp } from '@react-navigation/native';
@@ -32,7 +32,7 @@ import Touch from '../../containers/Touch';
 import sharedStyles from '../Styles';
 import styles from './styles';
 import { ERoomType } from '../../definitions/ERoomType';
-import { E2E_ROOM_TYPES, SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
+import { E2E_ROOM_TYPES, themes } from '../../lib/constants';
 import { getPermalinkChannel } from '../../lib/methods';
 import {
 	canAutoTranslate as canAutoTranslateMethod,
@@ -53,6 +53,7 @@ import { ILivechatDepartment } from '../../definitions/ILivechatDepartment';
 import { ILivechatTag } from '../../definitions/ILivechatTag';
 import CallSection from './components/CallSection';
 import { TNavigation } from '../../stacks/stackType';
+import Switch from '../../containers/Switch';
 
 type StackType = ChatsStackParamList & TNavigation;
 
@@ -354,7 +355,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 			hasPermission = canToggleEncryption;
 		}
 		return (
-			<Switch value={encrypted} trackColor={SWITCH_TRACK_COLOR} onValueChange={this.toggleEncrypted} disabled={!hasPermission} />
+			<Switch value={encrypted} onValueChange={this.toggleEncrypted} disabled={!hasPermission} />
 		);
 	};
 
@@ -794,21 +795,21 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							}
 						})
 					}
-					style={{ backgroundColor: themes[theme].backgroundColor }}
+					style={{ backgroundColor: themes[theme].surfaceRoom }}
 					accessibilityLabel={I18n.t('Room_Info')}
 					enabled={!isGroupChatHandler}
 					testID='room-actions-info'>
 					<View style={[styles.roomInfoContainer, { height: 72 * fontScale }]}>
 						<Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid}>
 							{t === 'd' && member._id ? (
-								<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}>
+								<View style={[sharedStyles.status, { backgroundColor: themes[theme].surfaceRoom }]}>
 									<Status size={16} id={member._id} />
 								</View>
 							) : undefined}
 						</Avatar>
 						<View style={styles.roomTitleContainer}>
 							{room.t === 'd' ? (
-								<Text style={[styles.roomTitle, { color: themes[theme].titleText }]} numberOfLines={1}>
+								<Text style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 									{room.fname}
 								</Text>
 							) : (
@@ -819,19 +820,19 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 										status={room.visitor?.status}
 										sourceType={source}
 									/>
-									<Text style={[styles.roomTitle, { color: themes[theme].titleText }]} numberOfLines={1}>
+									<Text style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 										{getRoomTitle(room)}
 									</Text>
 								</View>
 							)}
 							<MarkdownPreview
 								msg={t === 'd' ? `@${name}` : topic}
-								style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]}
+								style={[styles.roomDescription, { color: themes[theme].fontSecondaryInfo }]}
 							/>
 							{room.t === 'd' && (
 								<MarkdownPreview
 									msg={member.statusText}
-									style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]}
+									style={[styles.roomDescription, { color: themes[theme].fontSecondaryInfo }]}
 								/>
 							)}
 						</View>
@@ -903,9 +904,9 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 								})
 							}
 							testID='room-actions-block-user'
-							left={() => <List.Icon name='warning' color={themes[theme].dangerColor} />}
+							left={() => <List.Icon name='warning' color={themes[theme].buttonBackgroundDangerDefault} />}
 							showActionIndicator
-							color={themes[theme].dangerColor}
+							color={themes[theme].buttonBackgroundDangerDefault}
 						/>
 						<List.Separator />
 					</List.Section>
@@ -926,9 +927,9 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							})
 						}
 						testID='room-actions-leave-channel'
-						left={() => <List.Icon name='logout' color={themes[theme].dangerColor} />}
+						left={() => <List.Icon name='logout' color={themes[theme].buttonBackgroundDangerDefault} />}
 						showActionIndicator
-						color={themes[theme].dangerColor}
+						color={themes[theme].buttonBackgroundDangerDefault}
 					/>
 					<List.Separator />
 				</List.Section>
@@ -1029,7 +1030,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 									params: { rid }
 								})
 							}
-							left={() => <List.Icon name='chat-forward' color={themes[theme].titleText} />}
+							left={() => <List.Icon name='chat-forward' color={themes[theme].fontTitlesLabels} />}
 							showActionIndicator
 						/>
 						<List.Separator />
@@ -1045,7 +1046,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 									event: this.placeOnHoldLivechat
 								})
 							}
-							left={() => <List.Icon name='pause' color={themes[theme].titleText} />}
+							left={() => <List.Icon name='pause' color={themes[theme].fontTitlesLabels} />}
 							showActionIndicator
 						/>
 						<List.Separator />
@@ -1061,7 +1062,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 									event: this.returnLivechat
 								})
 							}
-							left={() => <List.Icon name='move-to-the-queue' color={themes[theme].titleText} />}
+							left={() => <List.Icon name='move-to-the-queue' color={themes[theme].fontTitlesLabels} />}
 							showActionIndicator
 						/>
 						<List.Separator />
@@ -1071,13 +1072,13 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 				<>
 					<List.Item
 						title='Close'
-						color={themes[theme].dangerColor}
+						color={themes[theme].buttonBackgroundDangerDefault}
 						onPress={() =>
 							this.onPressTouchable({
 								event: this.closeLivechat
 							})
 						}
-						left={() => <List.Icon name='chat-close' color={themes[theme].dangerColor} />}
+						left={() => <List.Icon name='chat-close' color={themes[theme].buttonBackgroundDangerDefault} />}
 						showActionIndicator
 					/>
 					<List.Separator />
diff --git a/app/views/RoomInfoEditView/SwitchContainer.tsx b/app/views/RoomInfoEditView/SwitchContainer.tsx
index 7d4cb26c4..21ada460a 100644
--- a/app/views/RoomInfoEditView/SwitchContainer.tsx
+++ b/app/views/RoomInfoEditView/SwitchContainer.tsx
@@ -1,9 +1,10 @@
-import React, { ReactElement } from 'react';
-import { Switch, Text, TextStyle, View, ViewStyle } from 'react-native';
+import React from 'react';
+import { Text, TextStyle, View, ViewStyle } from 'react-native';
 
 import { TSupportedThemes } from '../../theme';
-import { SWITCH_TRACK_COLOR, themes } from '../../lib/constants';
+import { themes } from '../../lib/constants';
 import styles from './styles';
+import Switch from '../../containers/Switch';
 
 interface ISwitchContainer {
 	children?: ReactElement | null;
@@ -39,35 +40,28 @@ const SwitchContainer: React.FC<ISwitchContainer> = React.memo(
 			<View key='switch-container' style={[styles.switchContainer, !!children && styles.switchMargin]}>
 				{leftLabelPrimary && (
 					<View style={[styles.switchLabelContainer, labelContainerStyle]}>
-						<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>
+						<Text style={[styles.switchLabelPrimary, { color: themes[theme].fontTitlesLabels }, leftLabelStyle]}>
 							{leftLabelPrimary}
 						</Text>
-						<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>
+						<Text style={[styles.switchLabelSecondary, { color: themes[theme].fontTitlesLabels }, leftLabelStyle]}>
 							{leftLabelSecondary}
 						</Text>
 					</View>
 				)}
-				<Switch
-					style={styles.switch}
-					onValueChange={onValueChange}
-					value={value}
-					disabled={disabled}
-					trackColor={SWITCH_TRACK_COLOR}
-					testID={testID}
-				/>
+				<Switch style={styles.switch} onValueChange={onValueChange} value={value} disabled={disabled} testID={testID} />
 				{rightLabelPrimary && (
 					<View style={[styles.switchLabelContainer, labelContainerStyle]}>
-						<Text style={[styles.switchLabelPrimary, { color: themes[theme].titleText }, leftLabelStyle]}>
+						<Text style={[styles.switchLabelPrimary, { color: themes[theme].fontTitlesLabels }, leftLabelStyle]}>
 							{rightLabelPrimary}
 						</Text>
-						<Text style={[styles.switchLabelSecondary, { color: themes[theme].titleText }, leftLabelStyle]}>
+						<Text style={[styles.switchLabelSecondary, { color: themes[theme].fontTitlesLabels }, leftLabelStyle]}>
 							{rightLabelSecondary}
 						</Text>
 					</View>
 				)}
 			</View>
 			{children}
-			<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+			<View key='switch-divider' style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
 		</>
 	)
 );
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index e26cab415..4361da529 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -517,19 +517,21 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 			encrypted
 		} = this.state;
 		const { serverVersion, encryptionEnabled, theme } = this.props;
-		const { dangerColor } = themes[theme];
+		const { buttonBackgroundDangerDefault, fontDanger } = themes[theme];
 
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].backgroundColor }}
+				style={{ backgroundColor: themes[theme].surfaceRoom }}
 				contentContainerStyle={sharedStyles.container}
-				keyboardVerticalOffset={128}>
+				keyboardVerticalOffset={128}
+			>
 				<StatusBar />
-				<SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+				<SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
 					<ScrollView
 						contentContainerStyle={sharedStyles.containerScrollView}
 						testID='room-info-edit-view-list'
-						{...scrollPersistTaps}>
+						{...scrollPersistTaps}
+					>
 						<View style={styles.avatarContainer}>
 							<AvatarWithEdit type={room.t} text={room.name} rid={room.rid} handleEdit={this.handleEditAvatar} />
 						</View>
@@ -647,7 +649,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 						{room.broadcast
 							? [
 									<Text style={styles.broadcast}>{I18n.t('Broadcast')}</Text>,
-									<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+									<View style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
 							  ]
 							: null}
 						{serverVersion && !compareServerVersion(serverVersion, 'lowerThan', '3.0.0') ? (
@@ -663,7 +665,8 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								testID='room-info-edit-switch-system-messages'
 								onValueChange={this.toggleHideSystemMessages}
 								labelContainerStyle={styles.hideSystemMessages}
-								leftLabelStyle={styles.systemMessagesLabel}>
+								leftLabelStyle={styles.systemMessagesLabel}
+							>
 								{this.renderSystemMessages()}
 							</SwitchContainer>
 						) : null}
@@ -683,13 +686,14 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 						<TouchableOpacity
 							style={[
 								styles.buttonContainer,
-								{ backgroundColor: themes[theme].buttonBackground },
+								{ backgroundColor: themes[theme].buttonBackgroundSecondaryDefault },
 								!this.formIsChanged() && styles.buttonContainerDisabled
 							]}
 							onPress={this.submit}
 							disabled={!this.formIsChanged()}
-							testID='room-info-edit-view-submit'>
-							<Text style={[styles.button, { color: themes[theme].buttonText }]} accessibilityRole='button'>
+							testID='room-info-edit-view-submit'
+						>
+							<Text style={[styles.button, { color: themes[theme].fontWhite }]} accessibilityRole='button'>
 								{I18n.t('SAVE')}
 							</Text>
 						</TouchableOpacity>
@@ -698,15 +702,17 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								style={[
 									styles.buttonContainer_inverted,
 									styles.buttonInverted,
-									{ flex: 1, borderColor: themes[theme].auxiliaryText },
+									{ flex: 1, borderColor: themes[theme].fontSecondaryInfo },
 									!this.formIsChanged() && styles.buttonContainerDisabled
 								]}
 								onPress={this.reset}
 								disabled={!this.formIsChanged()}
-								testID='room-info-edit-view-reset'>
+								testID='room-info-edit-view-reset'
+							>
 								<Text
-									style={[styles.button, styles.button_inverted, { color: themes[theme].bodyText }]}
-									accessibilityRole='button'>
+									style={[styles.button, styles.button_inverted, { color: themes[theme].fontDefault }]}
+									accessibilityRole='button'
+								>
 									{I18n.t('RESET')}
 								</Text>
 							</TouchableOpacity>
@@ -717,29 +723,31 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 									archived
 										? !permissions['unarchive-room'] && sharedStyles.opacity5
 										: !permissions['archive-room'] && sharedStyles.opacity5,
-									{ flex: 1, marginLeft: 10, borderColor: dangerColor }
+									{ flex: 1, marginLeft: 10, borderColor: buttonBackgroundDangerDefault }
 								]}
 								onPress={this.toggleArchive}
 								disabled={archived ? !permissions['unarchive-room'] : !permissions['archive-room']}
-								testID={archived ? 'room-info-edit-view-unarchive' : 'room-info-edit-view-archive'}>
-								<Text style={[styles.button, styles.button_inverted, { color: dangerColor }]}>
+								testID={archived ? 'room-info-edit-view-unarchive' : 'room-info-edit-view-archive'}
+							>
+								<Text style={[styles.button, styles.button_inverted, { color: fontDanger }]}>
 									{archived ? I18n.t('UNARCHIVE') : I18n.t('ARCHIVE')}
 								</Text>
 							</TouchableOpacity>
 						</View>
-						<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+						<View style={[styles.divider, { borderColor: themes[theme].strokeLight }]} />
 						<TouchableOpacity
 							style={[
 								styles.buttonContainer_inverted,
 								styles.buttonContainerLastChild,
 								styles.buttonDanger,
-								{ borderColor: dangerColor },
+								{ borderColor: buttonBackgroundDangerDefault },
 								!this.hasDeletePermission() && sharedStyles.opacity5
 							]}
 							onPress={room.teamMain ? this.deleteTeam : this.delete}
 							disabled={!this.hasDeletePermission()}
-							testID='room-info-edit-view-delete'>
-							<Text style={[styles.button, styles.button_inverted, { color: dangerColor }]} accessibilityRole='button'>
+							testID='room-info-edit-view-delete'
+						>
+							<Text style={[styles.button, styles.button_inverted, { color: fontDanger }]} accessibilityRole='button'>
 								{I18n.t('DELETE')}
 							</Text>
 						</TouchableOpacity>
diff --git a/app/views/RoomInfoView/Direct.tsx b/app/views/RoomInfoView/Direct.tsx
index d54c2af98..6655ab671 100644
--- a/app/views/RoomInfoView/Direct.tsx
+++ b/app/views/RoomInfoView/Direct.tsx
@@ -14,15 +14,16 @@ const Roles = ({ roles }: { roles?: string[] }) => {
 	if (roles?.length) {
 		return (
 			<View style={styles.item} testID='user-roles'>
-				<Text style={[styles.itemLabel, { color: colors.titleText }]}>{I18n.t('Roles')}</Text>
+				<Text style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Roles')}</Text>
 				<View style={styles.rolesContainer}>
 					{roles.map(role =>
 						role ? (
 							<View
-								style={[styles.roleBadge, { backgroundColor: colors.chatComponentBackground }]}
+								style={[styles.roleBadge, { backgroundColor: colors.surfaceSelected }]}
 								key={role}
-								testID={`user-role-${role.replace(/ /g, '-')}`}>
-								<Text style={[styles.role, { color: colors.titleText }]}>{role}</Text>
+								testID={`user-role-${role.replace(/ /g, '-')}`}
+							>
+								<Text style={[styles.role, { color: colors.fontTitlesLabels }]}>{role}</Text>
 							</View>
 						) : null
 					)}
diff --git a/app/views/RoomInfoView/Item.tsx b/app/views/RoomInfoView/Item.tsx
index 260005f1f..8dd8e9b60 100644
--- a/app/views/RoomInfoView/Item.tsx
+++ b/app/views/RoomInfoView/Item.tsx
@@ -18,10 +18,10 @@ const Item = ({ label, content, testID }: IItem): React.ReactElement | null => {
 
 	return (
 		<View style={styles.item} testID={testID}>
-			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: colors.titleText }]}>
+			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>
 				{label}
 			</Text>
-			<Markdown style={[styles.itemContent, { color: colors.auxiliaryText }]} msg={content} />
+			<Markdown style={[styles.itemContent, { color: colors.fontSecondaryInfo }]} msg={content} />
 		</View>
 	);
 };
diff --git a/app/views/RoomInfoView/Livechat.tsx b/app/views/RoomInfoView/Livechat.tsx
index 409332ec8..5c3d8a6fc 100644
--- a/app/views/RoomInfoView/Livechat.tsx
+++ b/app/views/RoomInfoView/Livechat.tsx
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
 
 const Title = ({ title }: { title: string }) => {
 	const { colors } = useTheme();
-	return <Text style={[styles.title, { color: colors.titleText }]}>{title}</Text>;
+	return <Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</Text>;
 };
 
 const Livechat = ({ room, roomUser }: { room: ISubscription; roomUser: ILivechatVisitorModified }): React.ReactElement => {
diff --git a/app/views/RoomInfoView/components/RoomInfoButtons.tsx b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
index 74be791c4..2f5009cef 100644
--- a/app/views/RoomInfoView/components/RoomInfoButtons.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
@@ -26,7 +26,7 @@ function BaseButton({
 	enabled?: boolean;
 }): React.ReactElement | null {
 	const { colors } = useTheme();
-	const color = danger ? colors.dangerColor : colors.actionTintColor;
+	const color = danger ? colors.buttonBackgroundDangerDefault : colors.fontHint;
 
 	if (showIcon)
 		return (
diff --git a/app/views/RoomInfoView/components/RoomInfoViewAvatar.tsx b/app/views/RoomInfoView/components/RoomInfoViewAvatar.tsx
index dcb079c36..701b443ee 100644
--- a/app/views/RoomInfoView/components/RoomInfoViewAvatar.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoViewAvatar.tsx
@@ -35,7 +35,7 @@ const RoomInfoViewAvatar = ({
 			rid={rid}
 			handleEdit={showAvatarEdit ? handleEditAvatar : undefined}>
 			{type === SubscriptionType.DIRECT && userId ? (
-				<View style={[sharedStyles.status, { backgroundColor: colors.auxiliaryBackground }]}>
+				<View style={[sharedStyles.status, { backgroundColor: colors.surfaceHover }]}>
 					<Status size={20} id={userId} />
 				</View>
 			) : null}
diff --git a/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx b/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
index 31d4a7a49..bcc0907b6 100644
--- a/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 import { ISubscription, SubscriptionType } from '../../../definitions';
 import styles from '../styles';
@@ -7,6 +8,9 @@ import { useTheme } from '../../../theme';
 import RoomTypeIcon from '../../../containers/RoomTypeIcon';
 import { getRoomTitle } from '../../../lib/methods/helpers';
 import CollapsibleText from '../../../containers/CollapsibleText';
+import EventEmitter from '../../../lib/methods/helpers/events';
+import { LISTENER } from '../../../containers/Toast';
+import I18n from '../../../i18n';
 
 interface IRoomInfoViewTitle {
 	room?: ISubscription;
@@ -18,23 +22,35 @@ interface IRoomInfoViewTitle {
 
 const RoomInfoViewTitle = ({ room, name, username, statusText, type }: IRoomInfoViewTitle): React.ReactElement => {
 	const { colors } = useTheme();
+
+	const copyInfoToClipboard = (data: string) => {
+		Clipboard.setString(data);
+		EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
+	};
+
 	if (type === SubscriptionType.DIRECT) {
 		return (
 			<View style={styles.roomInfoViewTitleContainer}>
-				<Text testID='room-info-view-name' style={[styles.roomTitle, { color: colors.titleText }]}>
+				<Text
+					onLongPress={() => (name ? copyInfoToClipboard(name) : {})}
+					testID='room-info-view-name'
+					style={[styles.roomTitle, { color: colors.fontTitlesLabels }]}
+				>
 					{name}
 				</Text>
 				{username && (
 					<Text
+						onLongPress={() => copyInfoToClipboard(username)}
 						testID='room-info-view-username'
-						style={[styles.roomUsername, { color: colors.auxiliaryText }]}>{`@${username}`}</Text>
+						style={[styles.roomUsername, { color: colors.fontSecondaryInfo }]}
+					>{`@${username}`}</Text>
 				)}
 				{!!statusText && (
 					<View testID='room-info-view-custom-status'>
 						<CollapsibleText
 							linesToTruncate={2}
 							msg={statusText}
-							style={[styles.roomUsername, { color: colors.auxiliaryText }]}
+							style={[styles.roomUsername, { color: colors.fontSecondaryInfo }]}
 						/>
 					</View>
 				)}
@@ -50,7 +66,7 @@ const RoomInfoViewTitle = ({ room, name, username, statusText, type }: IRoomInfo
 				status={room?.visitor?.status}
 				sourceType={room?.source}
 			/>
-			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: colors.titleText }]} key='room-info-name'>
+			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: colors.fontTitlesLabels }]} key='room-info-name'>
 				{getRoomTitle(room)}
 			</Text>
 		</View>
diff --git a/app/views/RoomInfoView/index.tsx b/app/views/RoomInfoView/index.tsx
index 111c37224..1dbf530ba 100644
--- a/app/views/RoomInfoView/index.tsx
+++ b/app/views/RoomInfoView/index.tsx
@@ -283,10 +283,10 @@ const RoomInfoView = (): React.ReactElement => {
 	};
 
 	return (
-		<ScrollView style={[styles.scroll, { backgroundColor: colors.backgroundColor }]}>
+		<ScrollView style={[styles.scroll, { backgroundColor: colors.surfaceRoom }]}>
 			<StatusBar />
-			<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='room-info-view'>
-				<View style={[styles.avatarContainer, { backgroundColor: colors.auxiliaryBackground }]}>
+			<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='room-info-view'>
+				<View style={[styles.avatarContainer, { backgroundColor: colors.surfaceHover }]}>
 					<RoomInfoViewAvatar
 						username={room?.name || roomUser.username}
 						rid={room?.rid}
diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx
index 599a53235..8142f0cf9 100644
--- a/app/views/RoomMembersView/index.tsx
+++ b/app/views/RoomMembersView/index.tsx
@@ -62,7 +62,7 @@ const RightIcon = ({ check, label }: { check: boolean; label: string }) => {
 			testID={check ? `action-sheet-set-${label}-checked` : `action-sheet-set-${label}-unchecked`}
 			name={check ? 'checkbox-checked' : 'checkbox-unchecked'}
 			size={20}
-			color={check ? colors.tintActive : colors.auxiliaryTintColor}
+			color={check ? colors.fontHint : undefined}
 		/>
 	);
 };
@@ -379,7 +379,7 @@ const RoomMembersView = (): React.ReactElement => {
 			<FlatList
 				data={filteredMembers || state.members}
 				renderItem={({ item }) => (
-					<View style={{ backgroundColor: colors.backgroundColor }}>
+					<View style={{ backgroundColor: colors.surfaceRoom }}>
 						<UserItem
 							name={item.name as string}
 							username={item.username}
@@ -401,7 +401,7 @@ const RoomMembersView = (): React.ReactElement => {
 				onEndReachedThreshold={0.1}
 				onEndReached={() => fetchMembers(state.allUsers)}
 				ListEmptyComponent={() =>
-					state.end ? <Text style={[styles.noResult, { color: colors.titleText }]}>{I18n.t('No_members_found')}</Text> : null
+					state.end ? <Text style={[styles.noResult, { color: colors.fontTitlesLabels }]}>{I18n.t('No_members_found')}</Text> : null
 				}
 				{...scrollPersistTaps}
 			/>
diff --git a/app/views/RoomView/Banner.tsx b/app/views/RoomView/Banner.tsx
index e458e9a18..d03f60525 100644
--- a/app/views/RoomView/Banner.tsx
+++ b/app/views/RoomView/Banner.tsx
@@ -27,12 +27,13 @@ const Banner = React.memo(
 			return (
 				<>
 					<BorderlessButton
-						style={[styles.bannerContainer, { backgroundColor: themes[theme].bannerBackground }]}
+						style={[styles.bannerContainer, { backgroundColor: themes[theme].surfaceNeutral }]}
 						testID='room-view-banner'
-						onPress={toggleModal}>
+						onPress={toggleModal}
+					>
 						<MarkdownPreview msg={text} style={[styles.bannerText]} />
 						<BorderlessButton onPress={closeBanner}>
-							<CustomIcon color={themes[theme].auxiliaryText} name='close' size={20} />
+							<CustomIcon color={themes[theme].fontSecondaryInfo} name='close' size={20} />
 						</BorderlessButton>
 					</BorderlessButton>
 					<Modal
@@ -41,9 +42,10 @@ const Banner = React.memo(
 						useNativeDriver
 						isVisible={showModal}
 						animationIn='fadeIn'
-						animationOut='fadeOut'>
-						<View style={[styles.modalView, { backgroundColor: themes[theme].bannerBackground }]}>
-							<Text style={[styles.bannerModalTitle, { color: themes[theme].auxiliaryText }]}>{title}</Text>
+						animationOut='fadeOut'
+					>
+						<View style={[styles.modalView, { backgroundColor: themes[theme].surfaceNeutral }]}>
+							<Text style={[styles.bannerModalTitle, { color: themes[theme].fontSecondaryInfo }]}>{title}</Text>
 							<ScrollView style={styles.modalScrollView}>
 								<Markdown msg={text} theme={theme} />
 							</ScrollView>
diff --git a/app/views/RoomView/JoinCode.tsx b/app/views/RoomView/JoinCode.tsx
index 6a51d920f..05d578423 100644
--- a/app/views/RoomView/JoinCode.tsx
+++ b/app/views/RoomView/JoinCode.tsx
@@ -83,9 +83,10 @@ const JoinCode = React.memo(
 						style={[
 							styles.content,
 							isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
-							{ backgroundColor: themes[theme].backgroundColor }
-						]}>
-						<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Insert_Join_Code')}</Text>
+							{ backgroundColor: themes[theme].surfaceRoom }
+						]}
+					>
+						<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Insert_Join_Code')}</Text>
 						<FormTextInput
 							value={code}
 							// TODO: find a way to type this ref
@@ -104,7 +105,7 @@ const JoinCode = React.memo(
 								title={I18n.t('Cancel')}
 								type='secondary'
 								style={styles.button}
-								backgroundColor={themes[theme].chatComponentBackground}
+								backgroundColor={themes[theme].surfaceTint}
 								testID='join-code-cancel'
 								onPress={hide}
 							/>
diff --git a/app/views/RoomView/LeftButtons.tsx b/app/views/RoomView/LeftButtons.tsx
index 66aba42ad..6bf083075 100644
--- a/app/views/RoomView/LeftButtons.tsx
+++ b/app/views/RoomView/LeftButtons.tsx
@@ -68,7 +68,7 @@ const LeftButtons = ({
 				label={label}
 				labelVisible={isIOS}
 				onPress={goBack}
-				tintColor={themes[theme].headerTintColor}
+				tintColor={themes[theme].fontDefault}
 				labelStyle={{ fontSize, marginLeft }}
 				style={styles.container}
 				testID='header-back'
diff --git a/app/views/RoomView/List/components/NavBottomFAB.tsx b/app/views/RoomView/List/components/NavBottomFAB.tsx
index 7673b697c..44ee98d0b 100644
--- a/app/views/RoomView/List/components/NavBottomFAB.tsx
+++ b/app/views/RoomView/List/components/NavBottomFAB.tsx
@@ -36,9 +36,9 @@ const NavBottomFAB = memo(
 
 		return (
 			<View style={[styles.container, positionStyle]} testID='nav-jump-to-bottom'>
-				<Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.backgroundColor }]}>
-					<View style={[styles.content, { borderColor: colors.borderColor }]}>
-						<CustomIcon name='chevron-down' color={colors.auxiliaryTintColor} size={36} />
+				<Touch onPress={() => onPress()} style={[styles.button, { backgroundColor: colors.surfaceRoom }]}>
+					<View style={[styles.content, { borderColor: colors.strokeLight }]}>
+						<CustomIcon name='chevron-down' size={36} />
 					</View>
 				</Touch>
 			</View>
diff --git a/app/views/RoomView/LoadMore/LoadMore.stories.tsx b/app/views/RoomView/LoadMore/LoadMore.stories.tsx
index c95475823..3fe35c83e 100644
--- a/app/views/RoomView/LoadMore/LoadMore.stories.tsx
+++ b/app/views/RoomView/LoadMore/LoadMore.stories.tsx
@@ -26,7 +26,7 @@ export const Basic = () => (
 
 const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
 	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
-		<ScrollView style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<ScrollView style={{ backgroundColor: themes[theme].surfaceRoom }}>
 			<LoadMore loaderId='5' type={MessageTypeLoad.PREVIOUS_CHUNK} />
 			<Message msg='Hey!' theme={theme} />
 			<Message msg={longText} theme={theme} isHeader={false} />
diff --git a/app/views/RoomView/LoadMore/index.tsx b/app/views/RoomView/LoadMore/index.tsx
index 78689923e..99d8297eb 100644
--- a/app/views/RoomView/LoadMore/index.tsx
+++ b/app/views/RoomView/LoadMore/index.tsx
@@ -60,9 +60,9 @@ const LoadMore = React.memo(
 		return (
 			<Touch onPress={handleLoad} style={styles.button} enabled={!loading}>
 				{loading ? (
-					<ActivityIndicator color={colors.auxiliaryText} />
+					<ActivityIndicator color={colors.fontSecondaryInfo} />
 				) : (
-					<Text style={[styles.text, { color: colors.titleText }]}>{I18n.t(text)}</Text>
+					<Text style={[styles.text, { color: colors.fontTitlesLabels }]}>{I18n.t(text)}</Text>
 				)}
 			</Touch>
 		);
diff --git a/app/views/RoomView/RightButtons.tsx b/app/views/RoomView/RightButtons.tsx
index 50bec628e..0c6c34335 100644
--- a/app/views/RoomView/RightButtons.tsx
+++ b/app/views/RoomView/RightButtons.tsx
@@ -388,7 +388,7 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 			<HeaderButton.Container>
 				{issuesWithNotifications || notificationsDisabled ? (
 					<HeaderButton.Item
-						color={issuesWithNotifications ? colors!.fontDanger : colors!.headerTintColor}
+						color={issuesWithNotifications ? colors!.fontDanger : ''}
 						iconName='notification-disabled'
 						onPress={this.navigateToNotificationOrPushTroubleshoot}
 						testID='room-view-push-troubleshoot'
diff --git a/app/views/RoomView/Separator.tsx b/app/views/RoomView/Separator.tsx
index f8119f359..a4605a1ec 100644
--- a/app/views/RoomView/Separator.tsx
+++ b/app/views/RoomView/Separator.tsx
@@ -34,8 +34,8 @@ const styles = StyleSheet.create({
 const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boolean }): React.ReactElement => {
 	const { theme } = useTheme();
 	const date = ts ? moment(ts).format('LL') : null;
-	const unreadLine = { backgroundColor: themes[theme].dangerColor };
-	const unreadText = { color: themes[theme].dangerColor };
+	const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault };
+	const unreadText = { color: themes[theme].fontDanger };
 	if (ts && unread) {
 		return (
 			<View style={styles.container}>
@@ -48,9 +48,9 @@ const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boole
 	if (ts) {
 		return (
 			<View style={styles.container}>
-				<View style={[styles.line, { backgroundColor: themes[theme].borderColor }]} />
-				<Text style={[styles.text, { color: themes[theme].auxiliaryText }, styles.marginHorizontal]}>{date}</Text>
-				<View style={[styles.line, { backgroundColor: themes[theme].borderColor }]} />
+				<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
+				<Text style={[styles.text, { color: themes[theme].fontSecondaryInfo }, styles.marginHorizontal]}>{date}</Text>
+				<View style={[styles.line, { backgroundColor: themes[theme].strokeLight }]} />
 			</View>
 		);
 	}
diff --git a/app/views/RoomView/UploadProgress.tsx b/app/views/RoomView/UploadProgress.tsx
index dbdbc02ae..8bd9370d8 100644
--- a/app/views/RoomView/UploadProgress.tsx
+++ b/app/views/RoomView/UploadProgress.tsx
@@ -172,32 +172,43 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 		if (!item.error) {
 			return [
 				<View key='row' style={styles.row}>
-					<CustomIcon name='attach' size={20} color={themes[theme!].auxiliaryText} />
+					<CustomIcon name='attach' size={20} color={themes[theme!].fontSecondaryInfo} />
 					<Text
-						style={[styles.descriptionContainer, styles.descriptionText, { color: themes[theme!].auxiliaryText }]}
-						numberOfLines={1}>
+						style={[styles.descriptionContainer, styles.descriptionText, { color: themes[theme!].fontSecondaryInfo }]}
+						numberOfLines={1}
+					>
 						{I18n.t('Uploading')} {item.name}
 					</Text>
-					<CustomIcon name='close' size={20} color={themes[theme!].auxiliaryText} onPress={() => this.handleCancelUpload(item)} />
+					<CustomIcon
+						name='close'
+						size={20}
+						color={themes[theme!].fontSecondaryInfo}
+						onPress={() => this.handleCancelUpload(item)}
+					/>
 				</View>,
 				<View
 					key='progress'
-					style={[styles.progress, { width: (width * (item.progress ?? 0)) / 100, backgroundColor: themes[theme!].tintColor }]}
+					style={[
+						styles.progress,
+						{ width: (width * (item.progress ?? 0)) / 100, backgroundColor: themes[theme!].badgeBackgroundLevel2 }
+					]}
 				/>
 			];
 		}
 		return (
 			<View style={styles.row}>
-				<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />
+				<CustomIcon name='warning' size={20} color={themes[theme!].buttonBackgroundDangerDefault} />
 				<View style={styles.descriptionContainer}>
-					<Text style={[styles.descriptionText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.descriptionText, { color: themes[theme!].fontSecondaryInfo }]} numberOfLines={1}>
 						{I18n.t('Error_uploading')} {item.name}
 					</Text>
 					<TouchableOpacity onPress={() => this.tryAgain(item)}>
-						<Text style={[styles.tryAgainButtonText, { color: themes[theme!].tintColor }]}>{I18n.t('Try_again')}</Text>
+						<Text style={[styles.tryAgainButtonText, { color: themes[theme!].badgeBackgroundLevel2 }]}>
+							{I18n.t('Try_again')}
+						</Text>
 					</TouchableOpacity>
 				</View>
-				<CustomIcon name='close' size={20} color={themes[theme!].auxiliaryText} onPress={() => this.deleteUpload(item)} />
+				<CustomIcon name='close' size={20} color={themes[theme!].fontSecondaryInfo} onPress={() => this.deleteUpload(item)} />
 			</View>
 		);
 	};
@@ -213,10 +224,11 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 					styles.item,
 					index !== 0 ? { marginTop: 4 } : {},
 					{
-						backgroundColor: themes[theme!].chatComponentBackground,
-						borderColor: themes[theme!].borderColor
+						backgroundColor: themes[theme!].surfaceTint,
+						borderColor: themes[theme!].strokeLight
 					}
-				]}>
+				]}
+			>
 				{this.renderItemContent(item)}
 			</View>
 		);
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index 83b98b840..b1999736e 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -1367,12 +1367,13 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if ('onHold' in room && room.onHold) {
 			return (
 				<View style={styles.joinRoomContainer} key='room-view-chat-on-hold' testID='room-view-chat-on-hold'>
-					<Text style={[styles.previewMode, { color: themes[theme].titleText }]}>{I18n.t('Chat_is_on_hold')}</Text>
+					<Text style={[styles.previewMode, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Chat_is_on_hold')}</Text>
 					<Touch
 						onPress={this.resumeRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
-						enabled={!loading}>
-						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-chat-on-hold-button'>
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme].fontHint }]}
+						enabled={!loading}
+					>
+						<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-chat-on-hold-button'>
 							{I18n.t('Resume')}
 						</Text>
 					</Touch>
@@ -1382,12 +1383,13 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (!joined) {
 			return (
 				<View style={styles.joinRoomContainer} key='room-view-join' testID='room-view-join'>
-					<Text style={[styles.previewMode, { color: themes[theme].titleText }]}>{I18n.t('You_are_in_preview_mode')}</Text>
+					<Text style={[styles.previewMode, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('You_are_in_preview_mode')}</Text>
 					<Touch
 						onPress={this.joinRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
-						enabled={!loading}>
-						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-join-button'>
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme].fontHint }]}
+						enabled={!loading}
+					>
+						<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-join-button'>
 							{I18n.t(this.isOmnichannel ? 'Take_it' : 'Join')}
 						</Text>
 					</Touch>
@@ -1397,14 +1399,14 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if (readOnly) {
 			return (
 				<View style={styles.readOnly}>
-					<Text style={[styles.previewMode, { color: themes[theme].titleText }]}>{I18n.t('This_room_is_read_only')}</Text>
+					<Text style={[styles.previewMode, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('This_room_is_read_only')}</Text>
 				</View>
 			);
 		}
 		if ('id' in room && isBlocked(room)) {
 			return (
 				<View style={styles.readOnly}>
-					<Text style={[styles.previewMode, { color: themes[theme].titleText }]}>{I18n.t('This_room_is_blocked')}</Text>
+					<Text style={[styles.previewMode, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('This_room_is_blocked')}</Text>
 				</View>
 			);
 		}
@@ -1463,8 +1465,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					onSendMessage: this.handleSendMessage,
 					setQuotesAndText: this.setQuotesAndText,
 					getText: this.getText
-				}}>
-				<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-view'>
+				}}
+			>
+				<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='room-view'>
 					<StatusBar />
 					<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
 					<List
diff --git a/app/views/RoomsListView/Header/Header.tsx b/app/views/RoomsListView/Header/Header.tsx
index 9d39736ee..e518a635d 100644
--- a/app/views/RoomsListView/Header/Header.tsx
+++ b/app/views/RoomsListView/Header/Header.tsx
@@ -77,12 +77,12 @@ const Header = React.memo(
 			<View style={styles.container}>
 				<TouchableOpacity onPress={onPress} testID='rooms-list-header-server-dropdown-button'>
 					<View style={styles.button}>
-						<Text style={[styles.title, { color: colors.headerTitleColor }]} numberOfLines={1}>
+						<Text style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 							{serverName}
 						</Text>
 						<CustomIcon
 							name='chevron-down'
-							color={colors.headerTintColor}
+							color={colors.fontSecondaryInfo}
 							style={[showServerDropdown && styles.upsideDown]}
 							size={18}
 						/>
@@ -90,8 +90,9 @@ const Header = React.memo(
 					{subtitle ? (
 						<Text
 							testID='rooms-list-header-server-subtitle'
-							style={[styles.subtitle, { color: colors.auxiliaryText }]}
-							numberOfLines={1}>
+							style={[styles.subtitle, { color: colors.fontSecondaryInfo }]}
+							numberOfLines={1}
+						>
 							{subtitle}
 						</Text>
 					) : null}
diff --git a/app/views/RoomsListView/ListHeader/index.tsx b/app/views/RoomsListView/ListHeader/index.tsx
index ae1c6f135..9fea70e86 100644
--- a/app/views/RoomsListView/ListHeader/index.tsx
+++ b/app/views/RoomsListView/ListHeader/index.tsx
@@ -36,10 +36,10 @@ const ListHeader = React.memo(
 									? 'Enter_Your_E2E_Password'
 									: 'Save_Your_Encryption_Password'
 							}
-							left={() => <List.Icon name='encrypted' color={themes[theme].buttonText} />}
-							underlayColor={themes[theme].tintActive}
-							backgroundColor={themes[theme].actionTintColor}
-							color={themes[theme].buttonText}
+							left={() => <List.Icon name='encrypted' color={themes[theme].fontWhite} />}
+							underlayColor={themes[theme].strokeHighlight}
+							backgroundColor={themes[theme].strokeHighlight}
+							color={themes[theme].fontWhite}
 							onPress={goEncryption}
 							testID='listheader-encryption'
 						/>
diff --git a/app/views/RoomsListView/ServerDropdown.tsx b/app/views/RoomsListView/ServerDropdown.tsx
index 6e3207c0d..0527d84a9 100644
--- a/app/views/RoomsListView/ServerDropdown.tsx
+++ b/app/views/RoomsListView/ServerDropdown.tsx
@@ -189,15 +189,16 @@ const ServerDropdown = () => {
 					styles.dropdownContainer,
 					{
 						transform: [{ translateY }],
-						backgroundColor: colors.backgroundColor,
-						borderColor: colors.separatorColor
+						backgroundColor: colors.surfaceRoom,
+						borderColor: colors.strokeLight
 					}
 				]}
-				testID='rooms-list-header-server-dropdown'>
-				<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: colors.separatorColor }]}>
-					<Text style={[styles.serverHeaderText, { color: colors.auxiliaryText }]}>{I18n.t('Server')}</Text>
+				testID='rooms-list-header-server-dropdown'
+			>
+				<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: colors.strokeLight }]}>
+					<Text style={[styles.serverHeaderText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Server')}</Text>
 					<TouchableOpacity onPress={addServer} testID='rooms-list-header-server-add'>
-						<Text style={[styles.serverHeaderAdd, { color: colors.tintColor }]}>{I18n.t('Add_Server')}</Text>
+						<Text style={[styles.serverHeaderAdd, { color: colors.badgeBackgroundLevel2 }]}>{I18n.t('Add_Server')}</Text>
 					</TouchableOpacity>
 				</View>
 				<FlatList
@@ -215,7 +216,8 @@ const ServerDropdown = () => {
 					onPress={createWorkspace}
 					testID='rooms-list-header-create-workspace-button'
 					style={styles.buttonCreateWorkspace}
-					color={colors.tintColor}
+					color={colors.badgeBackgroundLevel2}
+					backgroundColor={colors.surfaceRoom}
 					styleText={[styles.serverHeaderAdd, { textAlign: 'center' }]}
 				/>
 			</Animated.View>
diff --git a/app/views/RoomsListView/index.tsx b/app/views/RoomsListView/index.tsx
index 533624bf5..5335e28d8 100644
--- a/app/views/RoomsListView/index.tsx
+++ b/app/views/RoomsListView/index.tsx
@@ -44,7 +44,7 @@ import {
 	isTablet,
 	compareServerVersion
 } from '../../lib/methods/helpers';
-import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes, STATUS_COLORS, colors } from '../../lib/constants';
+import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes, colors } from '../../lib/constants';
 import { Services } from '../../lib/services';
 import { SupportedVersionsExpired } from '../../containers/SupportedVersions';
 
@@ -433,10 +433,10 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 		const getBadge = () => {
 			if (supportedVersionsStatus === 'warn') {
-				return <HeaderButton.BadgeWarn color={colors[theme].dangerColor} />;
+				return <HeaderButton.BadgeWarn color={colors[theme].buttonBackgroundDangerDefault} />;
 			}
 			if (notificationPresenceCap) {
-				return <HeaderButton.BadgeWarn color={STATUS_COLORS.disabled} />;
+				return <HeaderButton.BadgeWarn color={colors[theme].userPresenceDisabled} />;
 			}
 			return null;
 		};
@@ -941,8 +941,8 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 	renderSectionHeader = (header: string) => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].backgroundColor }]}>
-				<Text style={[styles.groupTitle, { color: themes[theme].controlText }]}>{I18n.t(header)}</Text>
+			<View style={[styles.groupTitleContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
+				<Text style={[styles.groupTitle, { color: themes[theme].fontHint }]}>{I18n.t(header)}</Text>
 			</View>
 		);
 	};
@@ -967,7 +967,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				data={searching ? search : chats}
 				extraData={searching ? search : chats}
 				keyExtractor={item => keyExtractor(item, searching)}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				renderItem={this.renderItem}
 				ListHeaderComponent={this.renderListHeader}
 				getItemLayout={(data, index) => getItemLayout(data, index, height)}
@@ -975,7 +975,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				keyboardShouldPersistTaps='always'
 				initialNumToRender={INITIAL_NUM_TO_RENDER}
 				refreshControl={
-					<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].auxiliaryText} />
+					<RefreshControl refreshing={refreshing} onRefresh={this.onRefresh} tintColor={themes[theme].fontSecondaryInfo} />
 				}
 				windowSize={9}
 				onEndReached={this.onEndReached}
@@ -990,7 +990,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		const { showServerDropdown, theme } = this.props;
 
 		return (
-			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].surfaceRoom }}>
 				<StatusBar />
 				{this.renderHeader()}
 				{this.renderScroll()}
diff --git a/app/views/ScreenLockConfigView.tsx b/app/views/ScreenLockConfigView.tsx
index 08ce03a45..92a15eb72 100644
--- a/app/views/ScreenLockConfigView.tsx
+++ b/app/views/ScreenLockConfigView.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Switch } from 'react-native';
 import { connect } from 'react-redux';
 import { StackNavigationOptions } from '@react-navigation/stack';
 import { Subscription } from 'rxjs';
@@ -10,11 +9,12 @@ import StatusBar from '../containers/StatusBar';
 import * as List from '../containers/List';
 import database from '../lib/database';
 import { changePasscode, checkHasPasscode, supportedBiometryLabel } from '../lib/methods/helpers/localAuthentication';
-import { BIOMETRY_ENABLED_KEY, DEFAULT_AUTO_LOCK, themes, SWITCH_TRACK_COLOR } from '../lib/constants';
+import { BIOMETRY_ENABLED_KEY, DEFAULT_AUTO_LOCK, themes } from '../lib/constants';
 import SafeAreaView from '../containers/SafeAreaView';
 import { events, logEvent } from '../lib/methods/helpers/log';
 import userPreferences from '../lib/methods/userPreferences';
 import { IApplicationState, TServerModel } from '../definitions';
+import Switch from '../containers/Switch';
 
 const DEFAULT_BIOMETRY = false;
 
@@ -172,7 +172,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 
 	renderIcon = () => {
 		const { theme } = this.props;
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
+		return <List.Icon name='check' color={themes[theme].badgeBackgroundLevel2} />;
 	};
 
 	renderItem = ({ item }: { item: IItem }) => {
@@ -194,14 +194,12 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 	renderAutoLockSwitch = () => {
 		const { autoLock } = this.state;
 		const { Force_Screen_Lock } = this.props;
-		return (
-			<Switch value={autoLock} trackColor={SWITCH_TRACK_COLOR} onValueChange={this.toggleAutoLock} disabled={Force_Screen_Lock} />
-		);
+		return <Switch value={autoLock} onValueChange={this.toggleAutoLock} disabled={Force_Screen_Lock} />;
 	};
 
 	renderBiometrySwitch = () => {
 		const { biometry } = this.state;
-		return <Switch value={biometry} trackColor={SWITCH_TRACK_COLOR} onValueChange={this.toggleBiometry} />;
+		return <Switch value={biometry} onValueChange={this.toggleBiometry} />;
 	};
 
 	renderAutoLockItems = () => {
diff --git a/app/views/ScreenLockedView.tsx b/app/views/ScreenLockedView.tsx
index bd968e744..6de50ec54 100644
--- a/app/views/ScreenLockedView.tsx
+++ b/app/views/ScreenLockedView.tsx
@@ -8,7 +8,6 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { PasscodeEnter } from '../containers/Passcode';
 import { LOCAL_AUTHENTICATE_EMITTER } from '../lib/constants';
 import { CustomIcon } from '../containers/CustomIcon';
-import { useTheme } from '../theme';
 import { hasNotch } from '../lib/methods/helpers';
 import EventEmitter from '../lib/methods/helpers/events';
 
@@ -30,7 +29,6 @@ const styles = StyleSheet.create({
 const ScreenLockedView = (): JSX.Element => {
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<IData>({});
-	const { colors } = useTheme();
 
 	useDeepCompareEffect(() => {
 		if (!isEmpty(data)) {
@@ -78,7 +76,7 @@ const ScreenLockedView = (): JSX.Element => {
 			<PasscodeEnter hasBiometry={!!data?.hasBiometry} finishProcess={onSubmit} />
 			{data?.force ? (
 				<Touchable onPress={onCancel} style={styles.close}>
-					<CustomIcon name='close' color={colors.passcodePrimary} size={30} />
+					<CustomIcon name='close' size={30} />
 				</Touchable>
 			) : null}
 		</Modal>
diff --git a/app/views/SearchMessagesView/index.tsx b/app/views/SearchMessagesView/index.tsx
index 556048e0e..918cdc9af 100644
--- a/app/views/SearchMessagesView/index.tsx
+++ b/app/views/SearchMessagesView/index.tsx
@@ -273,8 +273,8 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 	renderEmpty = () => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]}>
-				<Text style={[styles.noDataFound, { color: themes[theme].titleText }]}>{I18n.t('No_results_found')}</Text>
+			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
+				<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
 			</View>
 		);
 	};
@@ -313,7 +313,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 			<FlatList
 				data={messages}
 				renderItem={this.renderItem}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				keyExtractor={item => item._id}
 				onEndReached={this.onEndReached}
 				ListFooterComponent={loading ? <ActivityIndicator /> : null}
@@ -327,7 +327,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'>
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }} testID='search-messages-view'>
 				<StatusBar />
 				<View style={styles.searchContainer}>
 					<FormTextInput
@@ -338,7 +338,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 						testID='search-message-view-input'
 					/>
 					<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
-					<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
+					<View style={[styles.divider, { backgroundColor: themes[theme].strokeLight }]} />
 				</View>
 				{this.renderList()}
 			</SafeAreaView>
diff --git a/app/views/SecurityPrivacyView.tsx b/app/views/SecurityPrivacyView.tsx
index 4ec34b66c..f254e1fc7 100644
--- a/app/views/SecurityPrivacyView.tsx
+++ b/app/views/SecurityPrivacyView.tsx
@@ -1,13 +1,12 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useEffect, useState } from 'react';
-import { Switch } from 'react-native';
 
 import * as List from '../containers/List';
 import SafeAreaView from '../containers/SafeAreaView';
 import StatusBar from '../containers/StatusBar';
 import I18n from '../i18n';
-import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY, isFDroidBuild, SWITCH_TRACK_COLOR } from '../lib/constants';
+import { ANALYTICS_EVENTS_KEY, CRASH_REPORT_KEY, isFDroidBuild } from '../lib/constants';
 import { useAppSelector } from '../lib/hooks';
 import useServer from '../lib/methods/useServer';
 import { SettingsStackParamList } from '../stacks/types';
@@ -20,6 +19,7 @@ import {
 	toggleAnalyticsEventsReport,
 	toggleCrashErrorsReport
 } from '../lib/methods/helpers/log';
+import Switch from '../containers/Switch';
 
 interface ISecurityPrivacyViewProps {
 	navigation: StackNavigationProp<SettingsStackParamList, 'SecurityPrivacyView'>;
@@ -99,7 +99,7 @@ const SecurityPrivacyView = ({ navigation }: ISecurityPrivacyViewProps): JSX.Ele
 								title='Log_analytics_events'
 								testID='security-privacy-view-analytics-events'
 								right={() => (
-									<Switch value={analyticsEventsState} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleAnalyticsEvents} />
+									<Switch value={analyticsEventsState} onValueChange={toggleAnalyticsEvents} />
 								)}
 							/>
 							<List.Separator />
@@ -107,7 +107,7 @@ const SecurityPrivacyView = ({ navigation }: ISecurityPrivacyViewProps): JSX.Ele
 								title='Send_crash_report'
 								testID='security-privacy-view-crash-report'
 								right={() => (
-									<Switch value={crashReportState} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleCrashReport} />
+									<Switch value={crashReportState} onValueChange={toggleCrashReport} />
 								)}
 							/>
 							<List.Separator />
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx
index 1a8d2fb98..31a819947 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView.tsx
@@ -46,7 +46,7 @@ interface ISelectListViewProps {
 class SelectListView extends React.Component<ISelectListViewProps, ISelectListViewState> {
 	private title: string;
 
-	private infoText: string;
+	private fontHint: string;
 
 	private nextAction: (selected: string[]) => void;
 
@@ -62,7 +62,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		super(props);
 		const data = props.route?.params?.data;
 		this.title = props.route?.params?.title;
-		this.infoText = props.route?.params?.infoText ?? '';
+		this.fontHint = props.route?.params?.fontHint ?? '';
 		this.nextAction = props.route?.params?.nextAction;
 		this.showAlert = props.route?.params?.showAlert ?? (() => {});
 		this.isSearch = props.route?.params?.isSearch ?? false;
@@ -101,8 +101,8 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 	renderInfoText = () => {
 		const { theme } = this.props;
 		return (
-			<View style={{ backgroundColor: themes[theme].backgroundColor }}>
-				<Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.infoText)}</Text>
+			<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
+				<Text style={[styles.buttonText, { color: themes[theme].fontDefault }]}>{I18n.t(this.fontHint)}</Text>
 			</View>
 		);
 	};
@@ -153,7 +153,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 			<RadioButton
 				testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`}
 				selected={selected.includes(item.rid)}
-				color={themes[theme].actionTintColor}
+				color={themes[theme].fontHint}
 				size={ICON_SIZE}
 			/>
 		);
@@ -162,7 +162,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 				<List.Icon
 					testID={checked ? `${item.name}-checked` : `${item.name}-unchecked`}
 					name={checked}
-					color={themes[theme].actionTintColor}
+					color={themes[theme].fontHint}
 				/>
 			) : null;
 
@@ -175,7 +175,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					testID={`select-list-view-item-${item.name}`}
 					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
 					alert={item.alert}
-					left={() => <List.Icon name={icon} color={themes[theme].controlText} />}
+					left={() => <List.Icon name={icon} color={themes[theme].fontHint} />}
 					right={() => (this.isRadio ? showRadio() : showCheck())}
 				/>
 			</>
@@ -194,7 +194,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					keyExtractor={item => item.rid}
 					renderItem={this.renderItem}
 					ListHeaderComponent={this.isSearch ? this.renderSearch : this.renderInfoText}
-					contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
+					contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
 					keyboardShouldPersistTaps='always'
 				/>
 			</SafeAreaView>
diff --git a/app/views/SelectedUsersView/Header.tsx b/app/views/SelectedUsersView/Header.tsx
index 6d2824a35..f4b5e9fca 100644
--- a/app/views/SelectedUsersView/Header.tsx
+++ b/app/views/SelectedUsersView/Header.tsx
@@ -41,11 +41,11 @@ const Header = ({
 	const onContentSizeChange = () => flatlist?.current?.scrollToEnd({ animated: true });
 
 	return (
-		<View style={{ backgroundColor: themes[theme].backgroundColor }}>
+		<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
 			<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
 			{users.length === 0 ? null : (
 				<View>
-					<Text style={[styles.selectedText, { color: themes[theme].auxiliaryTintColor }]}>
+					<Text style={[styles.selectedText, { color: themes[theme].fontHint }]}>
 						{I18n.t('N_Selected_members', { n: users.length })}
 					</Text>
 					<FlatList
diff --git a/app/views/SelectedUsersView/index.tsx b/app/views/SelectedUsersView/index.tsx
index 0d4d696e9..622b8fa00 100644
--- a/app/views/SelectedUsersView/index.tsx
+++ b/app/views/SelectedUsersView/index.tsx
@@ -165,14 +165,14 @@ const SelectedUsersView = () => {
 							onPress={() => _onPressItem(item)}
 							testID={`select-users-view-item-${item.name}`}
 							icon={isChecked(username) ? 'checkbox-checked' : 'checkbox-unchecked'}
-							iconColor={isChecked(username) ? colors.actionTintColor : colors.separatorColor}
+							iconColor={isChecked(username) ? colors.fontHint : colors.strokeLight}
 						/>
 					);
 				}}
 				ItemSeparatorComponent={List.Separator}
 				ListFooterComponent={<List.Separator />}
 				ListHeaderComponent={<Header useRealName={useRealName} onChangeText={handleSearch} onPressItem={toggleUser} />}
-				contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
+				contentContainerStyle={{ backgroundColor: colors.surfaceRoom }}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/SetUsernameView.tsx b/app/views/SetUsernameView.tsx
index 207b7fcd2..11b6f761b 100644
--- a/app/views/SetUsernameView.tsx
+++ b/app/views/SetUsernameView.tsx
@@ -82,14 +82,14 @@ const SetUsernameView = () => {
 	};
 
 	return (
-		<KeyboardView style={{ backgroundColor: colors.auxiliaryBackground }} contentContainerStyle={sharedStyles.container}>
+		<KeyboardView style={{ backgroundColor: colors.surfaceHover }} contentContainerStyle={sharedStyles.container}>
 			<StatusBar />
 			<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
 				<SafeAreaView testID='set-username-view'>
-					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.titleText }]}>
+					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.fontTitlesLabels }]}>
 						{I18n.t('Username')}
 					</Text>
-					<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.titleText }]}>
+					<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.fontTitlesLabels }]}>
 						{I18n.t('Set_username_subtitle')}
 					</Text>
 					<ControlledFormTextInput
diff --git a/app/views/SettingsView/index.tsx b/app/views/SettingsView/index.tsx
index adb1210cb..708db42c0 100644
--- a/app/views/SettingsView/index.tsx
+++ b/app/views/SettingsView/index.tsx
@@ -269,7 +269,7 @@ const SettingsView = (): React.ReactElement => {
 						testID='settings-view-clear-cache'
 						onPress={handleClearCache}
 						showActionIndicator
-						color={colors.dangerColor}
+						color={colors.buttonBackgroundDangerDefault}
 					/>
 					<List.Separator />
 					<List.Item
@@ -277,7 +277,7 @@ const SettingsView = (): React.ReactElement => {
 						testID='settings-logout'
 						onPress={handleLogout}
 						showActionIndicator
-						color={colors.dangerColor}
+						color={colors.buttonBackgroundDangerDefault}
 					/>
 					<List.Separator />
 				</List.Section>
diff --git a/app/views/ShareListView/Header/Header.ios.tsx b/app/views/ShareListView/Header/Header.ios.tsx
index 59058fbda..ddd61acd9 100644
--- a/app/views/ShareListView/Header/Header.ios.tsx
+++ b/app/views/ShareListView/Header/Header.ios.tsx
@@ -41,8 +41,8 @@ const Header = React.memo(({ searching, onChangeSearchText, initSearch, cancelSe
 			style={[
 				styles.container,
 				{
-					borderColor: themes[theme].separatorColor,
-					backgroundColor: themes[theme].headerBackground
+					borderColor: themes[theme].strokeLight,
+					backgroundColor: themes[theme].surfaceNeutral
 				}
 			]}>
 			{!searching ? <HeaderButton.CancelModal onPress={ShareExtension.close} testID='share-extension-close' /> : null}
diff --git a/app/views/ShareListView/Header/Header.tsx b/app/views/ShareListView/Header/Header.tsx
index 731aa6ff0..f835aa3e8 100644
--- a/app/views/ShareListView/Header/Header.tsx
+++ b/app/views/ShareListView/Header/Header.tsx
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
 });
 
 const Header = React.memo(({ searching, onChangeSearchText, theme }: IShareListHeader) => {
-	const titleColorStyle = { color: themes[theme].headerTintColor };
+	const titleColorStyle = { color: themes[theme].fontSecondaryInfo };
 	const isLight = theme === 'light';
 	if (searching) {
 		return (
diff --git a/app/views/ShareListView/Header/SearchBox.tsx b/app/views/ShareListView/Header/SearchBox.tsx
index 68fff6cd0..92296fcf1 100644
--- a/app/views/ShareListView/Header/SearchBox.tsx
+++ b/app/views/ShareListView/Header/SearchBox.tsx
@@ -55,7 +55,7 @@ const CancelButton = ({ onCancelPress }: { onCancelPress?: () => void }) => {
 	const { theme } = useTheme();
 	return (
 		<Touchable onPress={onCancelPress} style={styles.cancel}>
-			<Text style={[styles.cancelText, { color: themes[theme].headerTintColor }]}>{I18n.t('Cancel')}</Text>
+			<Text style={[styles.cancelText, { color: themes[theme].fontSecondaryInfo }]}>{I18n.t('Cancel')}</Text>
 		</Touchable>
 	);
 };
@@ -63,13 +63,9 @@ const CancelButton = ({ onCancelPress }: { onCancelPress?: () => void }) => {
 const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<View
-			style={[
-				styles.container,
-				{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
-			]}>
-			<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
-				<CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
+		<View style={[styles.container, { backgroundColor: isIOS ? themes[theme].surfaceNeutral : themes[theme].surfaceLight }]}>
+			<View style={[styles.searchBox, { backgroundColor: themes[theme].strokeExtraLight }]}>
+				<CustomIcon name='search' size={14} color={themes[theme].fontSecondaryInfo} />
 				<TextInput
 					ref={inputRef}
 					autoCapitalize='none'
diff --git a/app/views/ShareListView/index.tsx b/app/views/ShareListView/index.tsx
index 5af971191..d57cf9c76 100644
--- a/app/views/ShareListView/index.tsx
+++ b/app/views/ShareListView/index.tsx
@@ -348,8 +348,8 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 
 		return (
 			<>
-				<View style={[styles.headerContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-					<Text style={[styles.headerText, { color: themes[theme].titleText }]}>{I18n.t(header)}</Text>
+				<View style={[styles.headerContainer, { backgroundColor: themes[theme].surfaceHover }]}>
+					<Text style={[styles.headerText, { color: themes[theme].fontTitlesLabels }]}>{I18n.t(header)}</Text>
 				</View>
 				<List.Separator />
 			</>
@@ -401,8 +401,8 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 	renderEmptyComponent = () => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.container, styles.emptyContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-				<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('No_results_found')}</Text>
+			<View style={[styles.container, styles.emptyContainer, { backgroundColor: themes[theme].surfaceHover }]}>
+				<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
 			</View>
 		);
 	};
@@ -438,10 +438,13 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 			return (
 				<SafeAreaView>
 					<ScrollView
-						style={{ backgroundColor: themes[theme].backgroundColor }}
-						contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].backgroundColor }]}>
-						<Text style={[styles.permissionTitle, { color: themes[theme].titleText }]}>{I18n.t('Read_External_Permission')}</Text>
-						<Text style={[styles.permissionMessage, { color: themes[theme].bodyText }]}>
+						style={{ backgroundColor: themes[theme].surfaceRoom }}
+						contentContainerStyle={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceRoom }]}
+					>
+						<Text style={[styles.permissionTitle, { color: themes[theme].fontTitlesLabels }]}>
+							{I18n.t('Read_External_Permission')}
+						</Text>
+						<Text style={[styles.permissionMessage, { color: themes[theme].fontDefault }]}>
 							{I18n.t('Read_External_Permission_Message')}
 						</Text>
 					</ScrollView>
@@ -454,8 +457,8 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 				<FlatList
 					data={searching ? searchResults : chats}
 					keyExtractor={keyExtractor}
-					style={[styles.flatlist, { backgroundColor: themes[theme].auxiliaryBackground }]}
-					contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
+					style={[styles.flatlist, { backgroundColor: themes[theme].surfaceHover }]}
+					contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom }}
 					renderItem={this.renderItem}
 					getItemLayout={getItemLayout}
 					ItemSeparatorComponent={List.Separator}
diff --git a/app/views/ShareView/Header.tsx b/app/views/ShareView/Header.tsx
index e0b51c888..14ad49fd5 100644
--- a/app/views/ShareView/Header.tsx
+++ b/app/views/ShareView/Header.tsx
@@ -68,7 +68,7 @@ const Header = React.memo(({ room, thread }: IHeader) => {
 		icon = 'channel-private';
 	}
 
-	const textColor = themes[theme].previewTintColor;
+	const textColor = themes[theme].surfaceTint;
 
 	let title;
 	if (thread?.id) {
diff --git a/app/views/ShareView/Preview.tsx b/app/views/ShareView/Preview.tsx
index 0b8b7e36d..b9c379606 100644
--- a/app/views/ShareView/Preview.tsx
+++ b/app/views/ShareView/Preview.tsx
@@ -48,11 +48,16 @@ interface IIconPreview {
 
 const IconPreview = React.memo(({ iconName, title, description, theme, width, height, danger }: IIconPreview) => (
 	<ScrollView
-		style={{ backgroundColor: themes[theme].auxiliaryBackground }}
-		contentContainerStyle={[styles.fileContainer, { width, height }]}>
-		<CustomIcon name={iconName} size={56} color={danger ? themes[theme].dangerColor : themes[theme].tintColor} />
-		<Text style={[styles.fileName, { color: themes[theme].titleText }]}>{title}</Text>
-		{description ? <Text style={[styles.fileSize, { color: themes[theme].bodyText }]}>{description}</Text> : null}
+		style={{ backgroundColor: themes[theme].surfaceRoom }}
+		contentContainerStyle={[styles.fileContainer, { width, height }]}
+	>
+		<CustomIcon
+			name={iconName}
+			size={56}
+			color={danger ? themes[theme].buttonBackgroundDangerDefault : themes[theme].badgeBackgroundLevel2}
+		/>
+		<Text style={[styles.fileName, { color: themes[theme].fontTitlesLabels }]}>{title}</Text>
+		{description ? <Text style={[styles.fileSize, { color: themes[theme].fontDefault }]}>{description}</Text> : null}
 	</ScrollView>
 ));
 
diff --git a/app/views/ShareView/Thumbs.tsx b/app/views/ShareView/Thumbs.tsx
index f38e9c06d..320f547b6 100644
--- a/app/views/ShareView/Thumbs.tsx
+++ b/app/views/ShareView/Thumbs.tsx
@@ -82,11 +82,11 @@ const ThumbContent = React.memo(({ item, theme, isShareExtension }: IThumbConten
 	if (type?.match(/image/)) {
 		// Disallow preview of images too big in order to prevent memory issues on iOS share extension
 		if (allowPreview(isShareExtension, item?.size)) {
-			return <Image source={{ uri: item.path }} style={[styles.thumb, { borderColor: themes[theme].borderColor }]} />;
+			return <Image source={{ uri: item.path }} style={[styles.thumb, { borderColor: themes[theme].strokeLight }]} />;
 		}
 		return (
-			<View style={[styles.thumb, { borderColor: themes[theme].borderColor }]}>
-				<CustomIcon name='image' size={30} color={themes[theme].tintColor} />
+			<View style={[styles.thumb, { borderColor: themes[theme].strokeLight }]}>
+				<CustomIcon name='image' size={30} color={themes[theme].badgeBackgroundLevel2} />
 			</View>
 		);
 	}
@@ -94,8 +94,8 @@ const ThumbContent = React.memo(({ item, theme, isShareExtension }: IThumbConten
 	if (type?.match(/video/)) {
 		if (isIOS) {
 			return (
-				<View style={[styles.thumb, { borderColor: themes[theme].borderColor }]}>
-					<CustomIcon name='camera' size={30} color={themes[theme].tintColor} />
+				<View style={[styles.thumb, { borderColor: themes[theme].strokeLight }]}>
+					<CustomIcon name='camera' size={30} color={themes[theme].badgeBackgroundLevel2} />
 				</View>
 			);
 		}
@@ -103,7 +103,7 @@ const ThumbContent = React.memo(({ item, theme, isShareExtension }: IThumbConten
 		return (
 			<>
 				<Image source={{ uri }} style={styles.thumb} />
-				<CustomIcon name='camera-filled' size={20} color={themes[theme].buttonText} style={styles.videoThumbIcon} />
+				<CustomIcon name='camera-filled' size={20} color={themes[theme].fontWhite} style={styles.videoThumbIcon} />
 			</>
 		);
 	}
@@ -120,16 +120,17 @@ const Thumb = ({ item, theme, isShareExtension, onPress, onRemove }: IThumb) =>
 			<ThumbContent item={item} theme={theme} isShareExtension={isShareExtension} />
 			<RectButton
 				hitSlop={BUTTON_HIT_SLOP}
-				style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].auxiliaryBackground }]}
+				style={[styles.removeButton, { backgroundColor: themes[theme].fontDefault, borderColor: themes[theme].surfaceHover }]}
 				activeOpacity={1}
-				rippleColor={themes[theme].bannerBackground}
-				onPress={() => onRemove(item)}>
-				<View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}>
-					<CustomIcon name='close' color={themes[theme].backgroundColor} size={14} />
+				rippleColor={themes[theme].surfaceNeutral}
+				onPress={() => onRemove(item)}
+			>
+				<View style={[styles.removeView, { borderColor: themes[theme].surfaceHover }]}>
+					<CustomIcon name='close' color={themes[theme].surfaceRoom} size={14} />
 				</View>
 			</RectButton>
 			{!item?.canUpload ? (
-				<CustomIcon name='warning' size={20} color={themes[theme].dangerColor} style={styles.dangerIcon} />
+				<CustomIcon name='warning' size={20} color={themes[theme].buttonBackgroundDangerDefault} style={styles.dangerIcon} />
 			) : null}
 		</>
 	</ThumbButton>
diff --git a/app/views/ShareView/index.tsx b/app/views/ShareView/index.tsx
index 60ced6d46..be7b8af50 100644
--- a/app/views/ShareView/index.tsx
+++ b/app/views/ShareView/index.tsx
@@ -121,25 +121,25 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		const options: StackNavigationOptions = {
 			headerTitle: () => <Header room={room} thread={thread} />,
 			headerTitleAlign: 'left',
-			headerTintColor: themes[theme].previewTintColor
+			headerTintColor: themes[theme].surfaceTint
 		};
 
 		// if is share extension show default back button
 		if (!this.isShareExtension) {
 			options.headerLeft = () => (
-				<HeaderButton.CloseModal navigation={navigation} color={themes[theme].previewTintColor} testID='share-view-close' />
+				<HeaderButton.CloseModal navigation={navigation} color={themes[theme].surfaceTint} testID='share-view-close' />
 			);
 		}
 
 		if (!attachments.length && !readOnly) {
 			options.headerRight = () => (
 				<HeaderButton.Container>
-					<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].previewTintColor} />
+					<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} color={themes[theme].surfaceTint} />
 				</HeaderButton.Container>
 			);
 		}
 
-		options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].previewBackground }]} />;
+		options.headerBackground = () => <View style={[styles.container, { backgroundColor: themes[theme].surfaceDark }]} />;
 
 		navigation.setOptions(options);
 	};
@@ -257,6 +257,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 							return sendFileMessage(
 								room.rid,
 								{
+									rid: room.rid,
 									name,
 									description,
 									size,
@@ -350,7 +351,8 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 						selectedMessages,
 						onSendMessage: this.send,
 						onRemoveQuoteMessage: this.onRemoveQuoteMessage
-					}}>
+					}}
+				>
 					<View style={styles.container}>
 						<Preview
 							// using key just to reset zoom/move after change selected
@@ -377,7 +379,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		return (
 			<FormTextInput
 				containerStyle={styles.inputContainer}
-				inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].focusedBackground }]}
+				inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].surfaceLight }]}
 				placeholder=''
 				onChangeText={this.onChangeText}
 				defaultValue=''
@@ -395,16 +397,16 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		const { theme } = this.props;
 		if (readOnly || isBlocked(room)) {
 			return (
-				<View style={[styles.container, styles.centered, { backgroundColor: themes[theme].backgroundColor }]}>
-					<Text style={[styles.title, { color: themes[theme].titleText }]}>
+				<View style={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceRoom }]}>
+					<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>
 						{isBlocked(room) ? I18n.t('This_room_is_blocked') : I18n.t('This_room_is_read_only')}
 					</Text>
 				</View>
 			);
 		}
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
-				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
+			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }}>
+				<StatusBar barStyle='light-content' backgroundColor={themes[theme].surfaceDark} />
 				{this.renderContent()}
 			</SafeAreaView>
 		);
diff --git a/app/views/SidebarView/SidebarItem.tsx b/app/views/SidebarView/SidebarItem.tsx
index 66dd545fa..849d3b6fb 100644
--- a/app/views/SidebarView/SidebarItem.tsx
+++ b/app/views/SidebarView/SidebarItem.tsx
@@ -22,13 +22,15 @@ const Item = React.memo(({ left, right, text, onPress, testID, current, theme, t
 		key={testID}
 		testID={testID}
 		onPress={onPress}
-		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}>
+		style={[styles.item, current && { backgroundColor: themes[theme].strokeLight }]}
+	>
 		<View style={styles.itemHorizontal}>{left}</View>
 		<View style={styles.itemCenter}>
 			<Text
-				style={[styles.itemText, { color: textColor || themes[theme].titleText }]}
+				style={[styles.itemText, { color: textColor || themes[theme].fontTitlesLabels }]}
 				numberOfLines={1}
-				accessibilityLabel={text}>
+				accessibilityLabel={text}
+			>
 				{text}
 			</Text>
 		</View>
diff --git a/app/views/SidebarView/index.tsx b/app/views/SidebarView/index.tsx
index 96d2f8c3e..80feac513 100644
--- a/app/views/SidebarView/index.tsx
+++ b/app/views/SidebarView/index.tsx
@@ -13,7 +13,7 @@ import I18n from '../../i18n';
 import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps';
 import userPreferences from '../../lib/methods/userPreferences';
 import { CustomIcon } from '../../containers/CustomIcon';
-import { NOTIFICATION_PRESENCE_CAP, STATUS_COLORS, themes } from '../../lib/constants';
+import { NOTIFICATION_PRESENCE_CAP, themes } from '../../lib/constants';
 import { TSupportedThemes, withTheme } from '../../theme';
 import { getUserSelector } from '../../selectors/login';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -225,7 +225,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 				<List.Separator />
 				<SidebarItem
 					text={I18n.t('Admin_Panel')}
-					left={<CustomIcon name='settings' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='settings' size={20} color={themes[theme!].fontTitlesLabels} />}
 					onPress={() => this.sidebarNavigate(routeName)}
 					testID='sidebar-admin'
 					theme={theme!}
@@ -241,7 +241,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			<>
 				<SidebarItem
 					text={I18n.t('Chats')}
-					left={<CustomIcon name='message' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='message' size={20} color={themes[theme!].fontTitlesLabels} />}
 					onPress={() => this.sidebarNavigate('ChatsStackNavigator')}
 					testID='sidebar-chats'
 					theme={theme!}
@@ -249,7 +249,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 				/>
 				<SidebarItem
 					text={I18n.t('Profile')}
-					left={<CustomIcon name='user' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='user' size={20} color={themes[theme!].fontTitlesLabels} />}
 					onPress={() => this.sidebarNavigate('ProfileStackNavigator')}
 					testID='sidebar-profile'
 					theme={theme!}
@@ -257,7 +257,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 				/>
 				<SidebarItem
 					text={I18n.t('Display')}
-					left={<CustomIcon name='sort' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='sort' size={20} color={themes[theme!].fontTitlesLabels} />}
 					onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')}
 					testID='sidebar-display'
 					theme={theme!}
@@ -265,7 +265,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 				/>
 				<SidebarItem
 					text={I18n.t('Settings')}
-					left={<CustomIcon name='administration' size={20} color={themes[theme!].titleText} />}
+					left={<CustomIcon name='administration' size={20} color={themes[theme!].fontTitlesLabels} />}
 					onPress={() => this.sidebarNavigate('SettingsStackNavigator')}
 					testID='sidebar-settings'
 					theme={theme!}
@@ -284,9 +284,9 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			status = 'disabled';
 		}
 
-		let right: React.ReactElement | undefined = <CustomIcon name='edit' size={20} color={themes[theme!].titleText} />;
+		let right: React.ReactElement | undefined = <CustomIcon name='edit' size={20} color={themes[theme!].fontTitlesLabels} />;
 		if (notificationPresenceCap) {
-			right = <View style={[styles.customStatusDisabled, { backgroundColor: STATUS_COLORS.disabled }]} />;
+			right = <View style={[styles.customStatusDisabled, { backgroundColor: themes[theme!].userPresenceDisabled }]} />;
 		} else if (Presence_broadcast_disabled) {
 			right = undefined;
 		}
@@ -309,8 +309,8 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			return (
 				<SidebarItem
 					text={I18n.t('Supported_versions_warning_update_required')}
-					textColor={themes[theme!].dangerColor}
-					left={<CustomIcon name='warning' size={20} color={themes[theme!].dangerColor} />}
+					textColor={themes[theme!].fontDanger}
+					left={<CustomIcon name='warning' size={20} color={themes[theme!].buttonBackgroundDangerDefault} />}
 					theme={theme!}
 					onPress={() => this.onPressSupportedVersionsWarning()}
 					testID={`sidebar-supported-versions-warn`}
@@ -327,12 +327,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}>
+			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].surfaceLight }} vertical={isMasterDetail}>
 				<ScrollView
 					style={[
 						styles.container,
 						{
-							backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground
+							backgroundColor: isMasterDetail ? themes[theme!].surfaceRoom : themes[theme!].surfaceLight
 						}
 					]}
 					{...scrollPersistTaps}>
@@ -341,12 +341,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 							<Avatar text={user.username} style={styles.avatar} size={30} />
 							<View style={styles.headerTextContainer}>
 								<View style={styles.headerUsername}>
-									<Text numberOfLines={1} style={[styles.username, { color: themes[theme!].titleText }]}>
+									<Text numberOfLines={1} style={[styles.username, { color: themes[theme!].fontTitlesLabels }]}>
 										{useRealName ? user.name : user.username}
 									</Text>
 								</View>
 								<Text
-									style={[styles.currentServerText, { color: themes[theme!].titleText }]}
+									style={[styles.currentServerText, { color: themes[theme!].fontTitlesLabels }]}
 									numberOfLines={1}
 									accessibilityLabel={`Connected to ${baseUrl}`}>
 									{Site_Name}
@@ -360,7 +360,7 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 
 					<List.Separator />
 
-					{allowStatusMessage ? this.renderCustomStatus() : null}
+					{allowStatusMessage !== false ? this.renderCustomStatus() : null}
 					{!isMasterDetail ? (
 						<>
 							<List.Separator />
diff --git a/app/views/StatusView/index.tsx b/app/views/StatusView/index.tsx
index 3866bbc88..3d4f4f27f 100644
--- a/app/views/StatusView/index.tsx
+++ b/app/views/StatusView/index.tsx
@@ -17,6 +17,7 @@ import { Services } from '../../lib/services';
 import { getUserSelector } from '../../selectors/login';
 import { showErrorAlert } from '../../lib/methods/helpers';
 import log, { events, logEvent } from '../../lib/methods/helpers/log';
+import { useTheme } from '../../theme';
 
 interface IStatus {
 	id: TUserStatus;
@@ -53,7 +54,9 @@ const styles = StyleSheet.create({
 	},
 	inputStyle: {
 		paddingLeft: 48,
-		borderRadius: 0
+		borderRadius: 0,
+		borderTopWidth: 1,
+		borderBottomWidth: 1
 	}
 });
 
@@ -96,6 +99,8 @@ const StatusView = (): React.ReactElement => {
 	const dispatch = useDispatch();
 	const { setOptions, goBack } = useNavigation();
 
+	const { colors } = useTheme();
+
 	useEffect(() => {
 		const submit = async () => {
 			logEvent(events.STATUS_DONE);
@@ -161,6 +166,7 @@ const StatusView = (): React.ReactElement => {
 				}
 				ListFooterComponent={List.Separator}
 				ItemSeparatorComponent={List.Separator}
+				style={{ backgroundColor: colors.surfaceTint }}
 			/>
 		</SafeAreaView>
 	);
diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx
index dfb435329..9b5329444 100644
--- a/app/views/TeamChannelsView.tsx
+++ b/app/views/TeamChannelsView.tsx
@@ -221,7 +221,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme].fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),
@@ -436,7 +436,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 		} = this.props;
 		const isAutoJoinChecked = item.teamDefault;
 		const autoJoinIcon = isAutoJoinChecked ? 'checkbox-checked' : 'checkbox-unchecked';
-		const autoJoinIconColor = isAutoJoinChecked ? themes[theme].tintActive : themes[theme].auxiliaryTintColor;
+		const autoJoinIconColor = isAutoJoinChecked ? themes[theme].fontHint : themes[theme].fontDefault;
 
 		const options: TActionSheetOptionsItem[] = [];
 
diff --git a/app/views/ThemeView.tsx b/app/views/ThemeView.tsx
index 1dcdf4af3..7f72e4fd8 100644
--- a/app/views/ThemeView.tsx
+++ b/app/views/ThemeView.tsx
@@ -75,7 +75,7 @@ const Item = ({
 				title={label}
 				onPress={onPress}
 				testID={`theme-view-${value}`}
-				right={() => (isSelected ? <List.Icon name='check' color={colors.tintColor} /> : null)}
+				right={() => (isSelected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
 			/>
 			<List.Separator />
 		</>
diff --git a/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
index 95b2a819b..4e1338079 100644
--- a/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
+++ b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
@@ -30,10 +30,10 @@ interface IDropdownItem {
 const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => {
 	const { colors } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: colors.backgroundColor }}>
+		<Touch onPress={onPress} style={{ backgroundColor: colors.surfaceRoom }}>
 			<View style={styles.container}>
-				<Text style={[styles.text, { color: colors.auxiliaryText }]}>{text}</Text>
-				{iconName ? <CustomIcon name={iconName} size={22} color={colors.auxiliaryText} /> : null}
+				<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{text}</Text>
+				{iconName ? <CustomIcon name={iconName} size={22} color={colors.fontSecondaryInfo} /> : null}
 			</View>
 		</Touch>
 	);
diff --git a/app/views/ThreadMessagesView/Dropdown/index.tsx b/app/views/ThreadMessagesView/Dropdown/index.tsx
index 5b14bcc87..f7d56c952 100644
--- a/app/views/ThreadMessagesView/Dropdown/index.tsx
+++ b/app/views/ThreadMessagesView/Dropdown/index.tsx
@@ -61,7 +61,9 @@ const Dropdown = ({ isMasterDetail, currentFilter, onClose, onFilterSelected }:
 					style={[
 						styles.backdrop,
 						{
-							backgroundColor: colors.backdropColor,
+							transform: [{ translateY }],
+							backgroundColor: colors.surfaceRoom,
+							borderColor: colors.strokeLight,
 							opacity: backdropOpacity,
 							top: heightDestination
 						}
@@ -73,8 +75,8 @@ const Dropdown = ({ isMasterDetail, currentFilter, onClose, onFilterSelected }:
 					styles.dropdownContainer,
 					{
 						transform: [{ translateY }],
-						backgroundColor: colors.backgroundColor,
-						borderColor: colors.separatorColor
+						backgroundColor: colors.surfaceRoom,
+						borderColor: colors.surfaceSelected
 					}
 				]}>
 				<DropdownItemHeader currentFilter={currentFilter} onPress={close} />
diff --git a/app/views/ThreadMessagesView/Item.stories.tsx b/app/views/ThreadMessagesView/Item.stories.tsx
index d4a16311d..05c1251a1 100644
--- a/app/views/ThreadMessagesView/Item.stories.tsx
+++ b/app/views/ThreadMessagesView/Item.stories.tsx
@@ -89,23 +89,23 @@ export const Content = () => (
 
 export const Badge = () => (
 	<>
-		<BaseItem badgeColor={themes.light.mentionMeColor} />
+		<BaseItem badgeColor={themes.light.badgeBackgroundLevel4} />
 		<List.Separator />
-		<BaseItem badgeColor={themes.light.mentionGroupColor} />
+		<BaseItem badgeColor={themes.light.badgeBackgroundLevel3} />
 		<List.Separator />
-		<BaseItem badgeColor={themes.light.tunreadColor} />
+		<BaseItem badgeColor={themes.light.fontInfo} />
 		<BaseItem
 			item={{
 				msg: longText
 			}}
-			badgeColor={themes.light.tunreadColor}
+			badgeColor={themes.light.fontInfo}
 		/>
 	</>
 );
 
 const ThemeStory = ({ theme }: { theme: TSupportedThemes }) => (
 	<ThemeContext.Provider value={{ theme, colors: themes[theme] }}>
-		<BaseItem badgeColor={themes[theme].mentionMeColor} />
+		<BaseItem badgeColor={themes[theme].badgeBackgroundLevel4} />
 	</ThemeContext.Provider>
 );
 
diff --git a/app/views/ThreadMessagesView/Item.tsx b/app/views/ThreadMessagesView/Item.tsx
index ebccc6ed5..be0771340 100644
--- a/app/views/ThreadMessagesView/Item.tsx
+++ b/app/views/ThreadMessagesView/Item.tsx
@@ -77,15 +77,16 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 		<Touchable
 			onPress={() => onPress(item)}
 			testID={`thread-messages-view-${item.msg}`}
-			style={{ backgroundColor: themes[theme].backgroundColor }}>
+			style={{ backgroundColor: themes[theme].surfaceRoom }}
+		>
 			<View style={styles.container}>
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
-						<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{username}
 						</Text>
-						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
+						<Text style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text>
 					</View>
 					<View style={styles.messageContainer}>
 						<MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={[styles.markdown]} />
diff --git a/app/views/ThreadMessagesView/index.tsx b/app/views/ThreadMessagesView/index.tsx
index 20ee87416..268758589 100644
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@@ -35,8 +35,10 @@ import styles from './styles';
 import { IApplicationState, IBaseScreen, IMessage, SubscriptionType, TSubscriptionModel, TThreadModel } from '../../definitions';
 import { getUidDirectMessage, debounce, isIOS } from '../../lib/methods/helpers';
 import { Services } from '../../lib/services';
+import UserPreferences from '../../lib/methods/userPreferences';
 
 const API_FETCH_COUNT = 50;
+const THREADS_FILTER = 'threadsFilter';
 
 interface IThreadMessagesViewState {
 	loading: boolean;
@@ -139,7 +141,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme].fontSecondaryInfo}
 					testID='header-back'
 				/>
 			),
@@ -216,8 +218,18 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 		}
 	};
 
-	init = () => {
+	initFilter = () =>
+		new Promise<void>(resolve => {
+			const savedFilter = UserPreferences.getString(THREADS_FILTER);
+			if (savedFilter) {
+				this.setState({ currentFilter: savedFilter as Filter }, () => resolve());
+			}
+			resolve();
+		});
+
+	init = async () => {
 		const { subscription } = this.state;
+		await this.initFilter();
 		if (!subscription) {
 			return this.load();
 		}
@@ -414,13 +426,6 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 		return messages;
 	};
 
-	// method to update state with filtered threads
-	filterThreads = () => {
-		const { messages, subscription } = this.state;
-		const displayingThreads = this.getFilteredThreads(messages, subscription);
-		this.setState({ displayingThreads });
-	};
-
 	showFilterDropdown = () => this.setState({ showFilterDropdown: true });
 
 	closeFilterDropdown = () => this.setState({ showFilterDropdown: false });
@@ -429,6 +434,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 		const { messages, subscription } = this.state;
 		const displayingThreads = this.getFilteredThreads(messages, subscription, filter);
 		this.setState({ currentFilter: filter, displayingThreads, showFilterDropdown: false });
+		UserPreferences.setString(THREADS_FILTER, filter);
 	};
 
 	toggleFollowThread = async (isFollowingThread: boolean, tmid: string) => {
@@ -497,7 +503,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 				data={displayingThreads}
 				extraData={this.state}
 				renderItem={this.renderItem}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
 				contentContainerStyle={styles.contentContainer}
 				onEndReached={this.load}
 				onEndReachedThreshold={0.5}
diff --git a/app/views/UserNotificationPreferencesView/ListPicker.tsx b/app/views/UserNotificationPreferencesView/ListPicker.tsx
index f43bcf98d..27ae16b22 100644
--- a/app/views/UserNotificationPreferencesView/ListPicker.tsx
+++ b/app/views/UserNotificationPreferencesView/ListPicker.tsx
@@ -45,7 +45,7 @@ const ListPicker = ({
 				hideActionSheet();
 				onChangeValue({ [preference]: i.value.toString() });
 			},
-			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
+			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.fontHint} /> : undefined
 		}));
 
 	return (
@@ -54,7 +54,7 @@ const ListPicker = ({
 			testID={testID}
 			onPress={() => showActionSheet({ options: getOptions() })}
 			right={() => (
-				<Text style={[styles.pickerText, { color: colors.actionTintColor }]}>
+				<Text style={[styles.pickerText, { color: colors.fontHint }]}>
 					{option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label}
 				</Text>
 			)}
diff --git a/app/views/UserNotificationPreferencesView/index.tsx b/app/views/UserNotificationPreferencesView/index.tsx
index 9d7a66600..8b4758692 100644
--- a/app/views/UserNotificationPreferencesView/index.tsx
+++ b/app/views/UserNotificationPreferencesView/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useLayoutEffect, useState } from 'react';
-import { Switch } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { CompositeNavigationProp, useNavigation } from '@react-navigation/native';
 
@@ -17,7 +16,8 @@ import ListPicker from './ListPicker';
 import log from '../../lib/methods/helpers/log';
 import { MasterDetailInsideStackParamList } from '../../stacks/MasterDetailStack/types';
 import { useUserPreferences } from '../../lib/methods';
-import { NOTIFICATION_IN_APP_VIBRATION, SWITCH_TRACK_COLOR } from '../../lib/constants';
+import { NOTIFICATION_IN_APP_VIBRATION } from '../../lib/constants';
+import Switch from '../../containers/Switch';
 
 type TNavigation = CompositeNavigationProp<
 	StackNavigationProp<ProfileStackParamList, 'UserNotificationPrefView'>,
@@ -129,9 +129,7 @@ const UserNotificationPreferencesView = () => {
 							<List.Item
 								title='Vibrate'
 								testID='user-notification-preference-view-in-app-vibration'
-								right={() => (
-									<Switch value={inAppVibration} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleInAppVibration} />
-								)}
+								right={() => <Switch value={inAppVibration} onValueChange={toggleInAppVibration} />}
 							/>
 							<List.Separator />
 						</List.Section>
diff --git a/app/views/UserPreferencesView/ListPicker.tsx b/app/views/UserPreferencesView/ListPicker.tsx
index 1bd557d27..3190d29f5 100644
--- a/app/views/UserPreferencesView/ListPicker.tsx
+++ b/app/views/UserPreferencesView/ListPicker.tsx
@@ -61,7 +61,7 @@ const ListPicker = ({
 				onChangeValue({ [preference]: i.value.toString() }, () => setOption(option));
 				setOption(i);
 			},
-			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.tintActive} /> : undefined
+			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.fontHint} /> : undefined
 		}));
 
 	return (
@@ -70,7 +70,7 @@ const ListPicker = ({
 			testID={testID}
 			onPress={() => showActionSheet({ options: getOptions() })}
 			right={() => (
-				<Text style={[styles.title, { color: colors.actionTintColor }]}>
+				<Text style={[styles.title, { color: colors.fontHint }]}>
 					{option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label}
 				</Text>
 			)}
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index d021282a5..9c557a680 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -1,6 +1,5 @@
 import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useEffect } from 'react';
-import { Switch } from 'react-native';
 import { useDispatch } from 'react-redux';
 
 import { setUser } from '../../actions/login';
@@ -10,12 +9,12 @@ import { compareServerVersion } from '../../lib/methods/helpers';
 import SafeAreaView from '../../containers/SafeAreaView';
 import StatusBar from '../../containers/StatusBar';
 import * as List from '../../containers/List';
-import { SWITCH_TRACK_COLOR } from '../../lib/constants';
 import { getUserSelector } from '../../selectors/login';
 import { ProfileStackParamList } from '../../stacks/types';
 import { Services } from '../../lib/services';
 import { useAppSelector } from '../../lib/hooks';
 import ListPicker from './ListPicker';
+import Switch from '../../containers/Switch';
 
 interface IUserPreferencesViewProps {
 	navigation: StackNavigationProp<ProfileStackParamList, 'UserPreferencesView'>;
@@ -57,10 +56,6 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 		}
 	};
 
-	const renderMessageParserSwitch = (value: boolean) => (
-		<Switch value={value} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleMessageParser} />
-	);
-
 	return (
 		<SafeAreaView testID='preferences-view'>
 			<StatusBar />
@@ -81,7 +76,7 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 						<List.Item
 							title='Enable_Message_Parser'
 							testID='preferences-view-enable-message-parser'
-							right={() => renderMessageParserSwitch(enableMessageParserEarlyAdoption)}
+							right={() => <Switch value={enableMessageParserEarlyAdoption} onValueChange={toggleMessageParser} />}
 						/>
 						<List.Separator />
 					</List.Section>
diff --git a/app/views/WithoutServersView.tsx b/app/views/WithoutServersView.tsx
index 362229765..7a4989bef 100644
--- a/app/views/WithoutServersView.tsx
+++ b/app/views/WithoutServersView.tsx
@@ -38,9 +38,9 @@ const WithoutServerView = (): React.ReactElement => {
 	}, [navigation]);
 
 	return (
-		<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
-			<Text style={[styles.title, { color: colors.titleText }]}>{I18n.t('Without_Servers')}</Text>
-			<Text style={[styles.content, { color: colors.titleText }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('Without_Servers')}</Text>
+			<Text style={[styles.content, { color: colors.fontTitlesLabels }]}>
 				{I18n.t('You_need_to_access_at_least_one_RocketChat_server_to_share_something')}
 			</Text>
 		</View>
diff --git a/app/views/WorkspaceView/RegisterDisabledComponent.tsx b/app/views/WorkspaceView/RegisterDisabledComponent.tsx
index c1f927209..171169778 100644
--- a/app/views/WorkspaceView/RegisterDisabledComponent.tsx
+++ b/app/views/WorkspaceView/RegisterDisabledComponent.tsx
@@ -17,7 +17,7 @@ const RegisterDisabledComponent = () => {
 		return null;
 	}
 
-	return <Text style={[styles.registrationText, { color: colors.auxiliaryText }]}>{registrationText}</Text>;
+	return <Text style={[styles.registrationText, { color: colors.fontSecondaryInfo }]}>{registrationText}</Text>;
 };
 
 export default RegisterDisabledComponent;
diff --git a/app/views/WorkspaceView/ServerAvatar.tsx b/app/views/WorkspaceView/ServerAvatar.tsx
index df5f5d8bf..f5e1b6343 100644
--- a/app/views/WorkspaceView/ServerAvatar.tsx
+++ b/app/views/WorkspaceView/ServerAvatar.tsx
@@ -35,7 +35,7 @@ const ServerAvatar = React.memo(({ url, image }: IServerAvatar) => {
 
 	return (
 		<View style={styles.container}>
-			{image && <FastImage style={[styles.image, { borderColor: colors.borderColor }]} source={{ uri: `${url}/${image}` }} />}
+			{image && <FastImage style={[styles.image, { borderColor: colors.strokeLight }]} source={{ uri: `${url}/${image}` }} />}
 		</View>
 	);
 });
diff --git a/app/views/WorkspaceView/index.tsx b/app/views/WorkspaceView/index.tsx
index 84491840f..02cae0740 100644
--- a/app/views/WorkspaceView/index.tsx
+++ b/app/views/WorkspaceView/index.tsx
@@ -77,18 +77,12 @@ const WorkspaceView = () => {
 			<FormContainerInner>
 				<View style={styles.alignItemsCenter}>
 					<ServerAvatar url={server} image={Assets_favicon_512?.url ?? Assets_favicon_512?.defaultUrl} />
-					<Text style={[styles.serverName, { color: colors.titleText }]}>{Site_Name}</Text>
-					<Text style={[styles.serverUrl, { color: colors.auxiliaryText }]}>{Site_Url}</Text>
+					<Text style={[styles.serverName, { color: colors.fontTitlesLabels }]}>{Site_Name}</Text>
+					<Text style={[styles.serverUrl, { color: colors.fontSecondaryInfo }]}>{Site_Url}</Text>
 				</View>
 				{showLoginButton ? <Button title={I18n.t('Login')} type='primary' onPress={login} testID='workspace-view-login' /> : null}
 				{showRegistrationButton ? (
-					<Button
-						title={I18n.t('Create_account')}
-						type='secondary'
-						backgroundColor={colors.chatComponentBackground}
-						onPress={register}
-						testID='workspace-view-register'
-					/>
+					<Button title={I18n.t('Create_account')} type='secondary' onPress={register} testID='workspace-view-register' />
 				) : (
 					<RegisterDisabledComponent />
 				)}