diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
index b3562c484..5d369a0be 100644
--- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
+++ b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -127,7 +127,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 				/>
 			) : null}
 			<FooterButtons
-				confirmBackgroundColor={confirmBackgroundColor || colors.actionTintColor}
+				confirmBackgroundColor={confirmBackgroundColor || colors.tintColor}
 				cancelAction={onCancel || hideActionSheet}
 				confirmAction={() => onSubmit(inputValue)}
 				cancelTitle={i18n.t('Cancel')}
diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
index 53636328c..2d4bc0d9c 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].auxiliaryText }]}>{text}</Text> : null}
+			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryText} /> : null}
 		</View>
 	);
 };
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index de53afd6e..34eecd53f 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -61,7 +61,7 @@ const Button = ({
 			disabled={disabled || loading}
 			style={[
 				styles.container,
-				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.actionTintColor : colors.backgroundColor },
+				backgroundColor ? { backgroundColor } : { backgroundColor: isPrimary ? colors.tintColor : colors.backgroundColor },
 				disabled && styles.disabled,
 				style
 			]}
diff --git a/app/containers/LoginServices/ServicesSeparator.tsx b/app/containers/LoginServices/ServicesSeparator.tsx
index 17727ff11..254dc7978 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.tintColor}
 				/>
 				<OrSeparator theme={theme} />
 			</>
diff --git a/app/containers/MessageBox/CommandsPreview/Item.tsx b/app/containers/MessageBox/CommandsPreview/Item.tsx
index 4e323ea81..a80abb758 100644
--- a/app/containers/MessageBox/CommandsPreview/Item.tsx
+++ b/app/containers/MessageBox/CommandsPreview/Item.tsx
@@ -38,7 +38,7 @@ const Item = ({ item }: IMessageBoxCommandsPreviewItem) => {
 					{loading ? <ActivityIndicator /> : null}
 				</FastImage>
 			) : (
-				<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
+				<CustomIcon name='attach' size={36} color={themes[theme].tintColor} />
 			)}
 		</TouchableOpacity>
 	);
diff --git a/app/containers/MessageBox/Mentions/MentionItem.tsx b/app/containers/MessageBox/Mentions/MentionItem.tsx
index 6923231b0..e941e75a6 100644
--- a/app/containers/MessageBox/Mentions/MentionItem.tsx
+++ b/app/containers/MessageBox/Mentions/MentionItem.tsx
@@ -45,7 +45,7 @@ const MentionItemContent = React.memo(({ trackingType, item }: IMessageBoxMentio
 			return (
 				<>
 					<Text style={[styles.cannedItem, { color: themes[theme].titleText }]}>!{item.shortcut}</Text>
-					<Text numberOfLines={1} style={[styles.cannedMentionText, { color: themes[theme].auxiliaryTintColor }]}>
+					<Text numberOfLines={1} style={[styles.cannedMentionText, { color: themes[theme].auxiliaryText }]}>
 						{item.text}
 					</Text>
 				</>
diff --git a/app/containers/MessageBox/RecordAudio.tsx b/app/containers/MessageBox/RecordAudio.tsx
index 4b550b62b..35409d742 100644
--- a/app/containers/MessageBox/RecordAudio.tsx
+++ b/app/containers/MessageBox/RecordAudio.tsx
@@ -197,7 +197,7 @@ export default class RecordAudio extends React.PureComponent<IMessageBoxRecordAu
 			return (
 				<BorderlessButton onPress={this.startRecordingAudio} style={styles.actionButton} testID='messagebox-send-audio'>
 					<View accessible accessibilityLabel={I18n.t('Send_audio_message')} accessibilityRole='button'>
-						<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryTintColor} />
+						<CustomIcon name='microphone' size={24} color={themes[theme].auxiliaryText} />
 					</View>
 				</BorderlessButton>
 			);
diff --git a/app/containers/MessageBox/buttons/BaseButton.tsx b/app/containers/MessageBox/buttons/BaseButton.tsx
index 707cb6ead..8b8c97794 100644
--- a/app/containers/MessageBox/buttons/BaseButton.tsx
+++ b/app/containers/MessageBox/buttons/BaseButton.tsx
@@ -24,7 +24,7 @@ const BaseButton = ({ accessibilityLabel, icon, color, ...props }: IBaseButton)
 				accessible
 				accessibilityLabel={accessibilityLabel ? i18n.t(accessibilityLabel) : accessibilityLabel}
 				accessibilityRole='button'>
-				<CustomIcon name={icon} size={24} color={color || themes[theme].auxiliaryTintColor} />
+				<CustomIcon name={icon} size={24} color={color || themes[theme].auxiliaryText} />
 			</View>
 		</BorderlessButton>
 	);
diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index 2c7e09a8d..d10cec1c2 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -135,7 +135,7 @@ export const FormTextInput = ({
 
 				{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.auxiliaryText} />
 					</Touchable>
 				) : null}
 
diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
index 714e8035c..b8fb64cbd 100644
--- a/app/containers/ThreadDetails.tsx
+++ b/app/containers/ThreadDetails.tsx
@@ -87,7 +87,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style }: IT
 					<CustomIcon
 						size={24}
 						name={isFollowing ? 'notification' : 'notification-disabled'}
-						color={themes[theme].auxiliaryTintColor}
+						color={themes[theme].auxiliaryText}
 					/>
 				</Touchable>
 			</View>
diff --git a/app/containers/UserItem.tsx b/app/containers/UserItem.tsx
index 00b6383f0..d56f2e352 100644
--- a/app/containers/UserItem.tsx
+++ b/app/containers/UserItem.tsx
@@ -71,7 +71,7 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, t
 					@{username}
 				</Text>
 			</View>
-			{icon ? <CustomIcon name={icon} size={22} color={themes[theme].actionTintColor} style={styles.icon} /> : null}
+			{icon ? <CustomIcon name={icon} size={22} color={themes[theme].tintColor} style={styles.icon} /> : null}
 		</View>
 	</Pressable>
 );
diff --git a/app/containers/markdown/Link.tsx b/app/containers/markdown/Link.tsx
index d3dce93db..31b0b5bad 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].tintColor }}>
 			{childLength !== 0 ? children : link}
 		</Text>
 	);
diff --git a/app/containers/markdown/new/Image.tsx b/app/containers/markdown/new/Image.tsx
index d21ed9215..fa957b4f6 100644
--- a/app/containers/markdown/new/Image.tsx
+++ b/app/containers/markdown/new/Image.tsx
@@ -26,7 +26,7 @@ const MessageImage = ({ img, theme }: TMessageImage) => (
 		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
-			color: themes[theme].actionTintColor
+			color: themes[theme].tintColor
 		}}
 	/>
 );
diff --git a/app/containers/markdown/new/Link.tsx b/app/containers/markdown/new/Link.tsx
index db6d23212..297f96318 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].tintColor }]}>
 			{(block => {
 				switch (block.type) {
 					case 'PLAIN_TEXT':
diff --git a/app/containers/message/Image.tsx b/app/containers/message/Image.tsx
index 9a1d160e7..deb6a4006 100644
--- a/app/containers/message/Image.tsx
+++ b/app/containers/message/Image.tsx
@@ -50,7 +50,7 @@ export const MessageImage = React.memo(({ imgUri, theme }: { imgUri: string; the
 		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
-			color: themes[theme].actionTintColor
+			color: themes[theme].tintColor
 		}}
 	/>
 ));
diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx
index 9aa2857ea..ee9f0216b 100644
--- a/app/containers/message/Reply.tsx
+++ b/app/containers/message/Reply.tsx
@@ -98,7 +98,7 @@ const Title = React.memo(
 		return (
 			<View style={styles.authorContainer}>
 				{attachment.author_name ? (
-					<Text style={[styles.author, { color: themes[theme].auxiliaryTintColor }]}>{attachment.author_name}</Text>
+					<Text style={[styles.author, { color: themes[theme].auxiliaryText }]}>{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}
@@ -127,7 +127,7 @@ const Description = React.memo(
 		return (
 			<Markdown
 				msg={text}
-				style={[{ color: themes[theme].auxiliaryTintColor, fontSize: 14 }]}
+				style={[{ color: themes[theme].auxiliaryText, fontSize: 14 }]}
 				baseUrl={baseUrl}
 				username={user.username}
 				getCustomEmoji={getCustomEmoji}
@@ -253,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].auxiliaryText, fontSize: 14, marginBottom: 8 }]}
 							isReply
 						/>
 						<UrlImage image={attachment.thumb_url} />
diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
index 7ce8b2320..501db2463 100644
--- a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
+++ b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
@@ -21,7 +21,7 @@ const OmnichannelQueue = ({ queueSize, onPress }: IOmnichannelQueue) => {
 			<List.Item
 				title='Omnichannel_queue'
 				heightContainer={50}
-				left={() => <List.Icon name='queue' size={24} color={themes[theme].auxiliaryTintColor} />}
+				left={() => <List.Icon name='queue' size={24} color={themes[theme].auxiliaryText} />}
 				color={themes[theme].bodyText}
 				onPress={queueSize ? onPress : undefined}
 				styleTitle={styles.titleOmnichannelQueue}
@@ -33,7 +33,7 @@ const OmnichannelQueue = ({ queueSize, onPress }: IOmnichannelQueue) => {
 								<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].bodyText} size={24} />
 							</>
 						) : (
-							<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{i18n.t('Empty')}</Text>
+							<Text style={[styles.emptyText, { color: themes[theme].auxiliaryText }]}>{i18n.t('Empty')}</Text>
 						)}
 					</View>
 				)}
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index 22d9dc4a4..b90e8196d 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -23,7 +23,7 @@ export const colors = {
 	light: {
 		backgroundColor: '#ffffff', // surface-light
 		// focusedBackground: '#ffffff', // removed in favor of backgroundColor
-		chatComponentBackground: 'red',
+		// chatComponentBackground: 'red',
 		surfaceTint: '#F7F8FA',
 		buttonBackgroundSecondaryDefault: '#E4E7EA',
 		buttonBackgroundSecondaryPress: '#9EA2A8',
@@ -38,42 +38,42 @@ export const colors = {
 		separatorColor: '#CBCED1', // strokeLight
 		tintColor: '#156FF5', // buttonBackgroundPrimaryDefault
 		// tintColor: '#549df9', // removed in favor of tintColor
-		tintDisabled: '#88B4F5',
-		auxiliaryTintColor: '#6C727A',
-		actionTintColor: '#1d74f5',
+		// actionTintColor: '#1d74f5', // removed in favor of tintColor
+		tintDisabled: '#D1EBFE', // buttonBackgroundDisabled
+		// auxiliaryTintColor: '#6C727A', // removed in favor of auxiliaryText
 		backdropColor: '#000000',
-		dangerColor: '#f5455c',
-		successColor: '#2de0a5',
+		backdropOpacity: 0.7,
+		dangerColor: '#EC0D2A', // buttonBackgroundDangerDefault
+		// successColor: '#2de0a5', not used
 		borderColor: '#9EA2A8', // strokeMedium
-		navbarBackground: '#ffffff',
-		headerBorder: '#B2B2B2',
-		headerBackground: '#EEEFF1',
-		headerSecondaryBackground: '#ffffff',
-		headerTintColor: '#6C727A',
-		headerTitleColor: '#0C0D0F',
-		headerSecondaryText: '#1d74f5',
-		toastBackground: '#0C0D0F',
-		videoBackground: '#1f2329',
-		favoriteBackground: '#ffbb00',
-		hideBackground: '#54585e',
-		messageboxBackground: '#ffffff',
-		searchboxBackground: '#E6E6E7',
-		buttonBackground: '#414852',
-		buttonText: '#ffffff',
-		passcodeBackground: '#EEEFF1',
-		passcodeButtonActive: '#E4E7EA',
-		passcodeLockIcon: '#6C727A',
-		passcodePrimary: '#2F343D',
-		passcodeSecondary: '#6C727A',
-		passcodeDotEmpty: '#CBCED1',
-		passcodeDotFull: '#6C727A',
-		previewBackground: '#1F2329',
-		previewTintColor: '#f9f9f9',
-		backdropOpacity: 0.3,
-		attachmentLoadingOpacity: 0.7,
-		collapsibleQuoteBorder: '#CBCED1',
-		collapsibleChevron: '#6C727A',
-		cancelButton: '#E4E7EA',
+		navbarBackground: '#F7F8FA', // surfaceTint
+		headerBorder: '#CBCED1', // strokeLight
+		headerBackground: '#F7F8FA', // surfaceTint
+		// headerSecondaryBackground: '#ffffff', removed in favor of headerBackground
+		headerTintColor: '#6C727A', // fontSecondaryInfo
+		headerTitleColor: '#1F2329', // fontTitleLabels
+		// headerSecondaryText: '#1d74f5', not used
+		toastBackground: '#0C0D0F', // strokeExtraDark
+		videoBackground: '#0C0D0F', // strokeExtraDark
+		favoriteBackground: '#ffbb00', // tbd
+		hideBackground: '#54585e', // tbd
+		messageboxBackground: '#F7F8FA', // surfaceTint
+		// searchboxBackground: '#E6E6E7', removed in favor of buttonBackgroundSecondaryDefault
+		// buttonBackground: '#414852', buttonBackgroundSecondaryDefault
+		buttonText: '#ffffff', // buttonFontOnPrimary
+		passcodeBackground: '#F7F8FA', // surfaceTint
+		passcodeButtonActive: '#9EA2A8', // buttonBackgroundSecondaryPress
+		passcodeLockIcon: '#1F2329', // fontTitleLabels
+		passcodePrimary: '#1F2329', // fontTitleLabels
+		passcodeSecondary: '#6C727A', // fontSecondaryInfo
+		passcodeDotEmpty: '#CBCED1', // surfaceLight
+		passcodeDotFull: '#9EA2A8', // surfaceMedium
+		previewBackground: '#0C0D0F', // strokeExtraDark
+		previewTintColor: '#ffffff', // buttonFontOnPrimary change later
+		attachmentLoadingOpacity: 0.7, // tbd
+		collapsibleQuoteBorder: '#CBCED1', // strokeLight
+		collapsibleChevron: '#6C727A', // fontSecondaryInfo
+		cancelButton: '#E4E7EA', // buttonBackgroundSecondaryDefault
 		...mentions
 	},
 	dark: {
@@ -92,7 +92,7 @@ export const colors = {
 		auxiliaryText: '#9297a2',
 		infoText: '#6D6D72',
 		tintColor: '#1d74f5',
-		tintColor: '#549df9',
+		// tintColor: '#549df9',
 		tintDisabled: '#88B4F5',
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1d74f5',
@@ -144,7 +144,7 @@ export const colors = {
 		auxiliaryText: '#b2b8c6',
 		infoText: '#6d6d72',
 		tintColor: '#1e9bfe',
-		tintColor: '#76b7fc',
+		// tintColor: '#76b7fc',
 		tintDisabled: '#88B4F5', // TODO: Evaluate this with design team
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1e9bfe',
diff --git a/app/lib/methods/helpers/navigation/index.ts b/app/lib/methods/helpers/navigation/index.ts
index 27b2dda3a..c1f44552a 100644
--- a/app/lib/methods/helpers/navigation/index.ts
+++ b/app/lib/methods/helpers/navigation/index.ts
@@ -13,9 +13,9 @@ export const defaultHeader = {
 	cardStyle: { backgroundColor: 'transparent' }
 };
 
-export const cardStyle = {
-	backgroundColor: 'rgba(0,0,0,0)'
-};
+// export const cardStyle = {
+// 	backgroundColor: 'rgba(0,0,0,0)'
+// };
 
 export const borderBottom: any = (theme: TSupportedThemes) => ({
 	borderBottomWidth: StyleSheet.hairlineWidth,
diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx
index fb84f2f83..f48efee83 100644
--- a/app/views/CannedResponseDetail.tsx
+++ b/app/views/CannedResponseDetail.tsx
@@ -149,12 +149,12 @@ const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps)
 						<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].buttonBackgroundSecondaryDefault }]}>
+										<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryText }]}>{t}</Text>
 									</View>
 								))
 							) : (
-								<Text style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>-</Text>
+								<Text style={[styles.cannedText, { color: themes[theme].auxiliaryText }]}>-</Text>
 							)}
 						</View>
 					</View>
diff --git a/app/views/CannedResponsesListView/CannedResponseItem.tsx b/app/views/CannedResponsesListView/CannedResponseItem.tsx
index 36bccdfd2..68078c25e 100644
--- a/app/views/CannedResponsesListView/CannedResponseItem.tsx
+++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx
@@ -32,7 +32,7 @@ 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.cannedScope, { color: themes[theme].auxiliaryText }]}>{scope}</Text>
 				</View>
 
 				<Button
@@ -44,14 +44,14 @@ const CannedResponseItem = ({
 				/>
 			</View>
 
-			<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].auxiliaryTintColor }]}>
+			<Text ellipsizeMode='tail' numberOfLines={2} style={[styles.cannedText, { color: themes[theme].auxiliaryText }]}>
 				“{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].buttonBackgroundSecondaryDefault }]}>
+								<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryText }]}>{t}</Text>
 							</View>
 					  ))
 					: null}
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index ab50d7f16..ea38dceba 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -107,7 +107,7 @@ export default class DirectoryOptions extends PureComponent<IDirectoryOptionsPro
 								style={[styles.dropdownItemIcon, styles.inverted]}
 								size={22}
 								name='chevron-down'
-								color={themes[theme].auxiliaryTintColor}
+								color={themes[theme].auxiliaryText}
 							/>
 						</View>
 					</Touch>
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 30e8cac6c..f2e3806c5 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -219,12 +219,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 						]}>
 						<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}
-						/>
+						<CustomIcon name='chevron-down' size={20} color={themes[theme].auxiliaryText} style={styles.toggleDropdownArrow} />
 					</View>
 				</Touch>
 			</>
diff --git a/app/views/DisplayPrefsView.tsx b/app/views/DisplayPrefsView.tsx
index f07bcc97a..46d4976e3 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.tintColor : null} />
 	);
 
 	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.tintColor : colors.auxiliaryText} size={ICON_SIZE} />
 	);
 
 	return (
diff --git a/app/views/InviteUsersEditView/index.tsx b/app/views/InviteUsersEditView/index.tsx
index 4ee14a9a3..6b783734b 100644
--- a/app/views/InviteUsersEditView/index.tsx
+++ b/app/views/InviteUsersEditView/index.tsx
@@ -100,7 +100,7 @@ class InviteUsersEditView extends React.Component<IInviteUsersEditViewProps, any
 	renderPicker = (key: 'days' | 'maxUses', first: string) => {
 		const { props } = this;
 		const { theme } = props;
-		const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: themes[theme].actionTintColor } };
+		const textInputStyle: TextInputProps = { style: { ...styles.pickerText, color: themes[theme].tintColor } };
 		const firstEl = [
 			{
 				label: I18n.t(first),
diff --git a/app/views/LoginView.tsx b/app/views/LoginView.tsx
index 512e7c43c..09c215880 100644
--- a/app/views/LoginView.tsx
+++ b/app/views/LoginView.tsx
@@ -212,7 +212,7 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 							{I18n.t('Dont_Have_An_Account')}
 						</Text>
 						<Text
-							style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
+							style={[styles.bottomContainerTextBold, { color: themes[theme].tintColor }]}
 							onPress={this.register}
 							testID='login-view-register'>
 							{I18n.t('Create_account')}
diff --git a/app/views/NotificationPreferencesView/index.tsx b/app/views/NotificationPreferencesView/index.tsx
index aa2931f0f..82275978e 100644
--- a/app/views/NotificationPreferencesView/index.tsx
+++ b/app/views/NotificationPreferencesView/index.tsx
@@ -139,7 +139,7 @@ class NotificationPreferencesView extends React.Component<INotificationPreferenc
 		const { theme } = this.props;
 		const text = room[key] ? OPTIONS[key].find(option => option.value === room[key]) : (OPTIONS[key][0] as IOptionsField);
 		return (
-			<Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>
+			<Text style={[styles.pickerText, { color: themes[theme].tintColor }]}>
 				{text?.label ? I18n.t(text?.label, { defaultValue: text?.label, second: text?.second }) : text?.label}
 			</Text>
 		);
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
index 9d7eddfbb..e506f3462 100644
--- a/app/views/ReadReceiptView/index.tsx
+++ b/app/views/ReadReceiptView/index.tsx
@@ -106,7 +106,7 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 		}
 		return (
 			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]} testID='read-receipt-view'>
-				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
+				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryText }]}>{I18n.t('No_Read_Receipts')}</Text>
 			</View>
 		);
 	};
diff --git a/app/views/RegisterView.tsx b/app/views/RegisterView.tsx
index 05ecc2396..6c2de0df1 100644
--- a/app/views/RegisterView.tsx
+++ b/app/views/RegisterView.tsx
@@ -310,13 +310,13 @@ class RegisterView extends React.Component<IProps, any> {
 						<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
 							{`${I18n.t('Onboarding_agree_terms')}\n`}
 							<Text
-								style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
+								style={[styles.bottomContainerTextBold, { color: themes[theme].tintColor }]}
 								onPress={() => this.openContract('terms-of-service')}>
 								{I18n.t('Terms_of_Service')}
 							</Text>{' '}
 							{I18n.t('and')}
 							<Text
-								style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
+								style={[styles.bottomContainerTextBold, { color: themes[theme].tintColor }]}
 								onPress={() => this.openContract('privacy-policy')}>
 								{' '}
 								{I18n.t('Privacy_Policy')}
@@ -329,7 +329,7 @@ class RegisterView extends React.Component<IProps, any> {
 							<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
 								{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].tintColor }]} onPress={this.login}>
 								{I18n.t('Login')}
 							</Text>
 						</View>
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index bdfd8cf6c..7c9866577 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -740,7 +740,7 @@ 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}
diff --git a/app/views/RoomInfoView/index.tsx b/app/views/RoomInfoView/index.tsx
index 29ae8190b..3495638fc 100644
--- a/app/views/RoomInfoView/index.tsx
+++ b/app/views/RoomInfoView/index.tsx
@@ -387,8 +387,8 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 
 		return (
 			<BorderlessButton onPress={onActionPress} style={styles.roomButton}>
-				<CustomIcon name={iconName} size={30} color={themes[theme].actionTintColor} />
-				<Text style={[styles.roomButtonText, { color: themes[theme].actionTintColor }]}>{text}</Text>
+				<CustomIcon name={iconName} size={30} color={themes[theme].tintColor} />
+				<Text style={[styles.roomButtonText, { color: themes[theme].tintColor }]}>{text}</Text>
 			</BorderlessButton>
 		);
 	};
diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx
index 99ef90792..f8a03d146 100644
--- a/app/views/RoomMembersView/index.tsx
+++ b/app/views/RoomMembersView/index.tsx
@@ -339,7 +339,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
 						testID={isOwner ? 'action-sheet-set-owner-checked' : 'action-sheet-set-owner-unchecked'}
 						name={isOwner ? 'checkbox-checked' : 'checkbox-unchecked'}
 						size={20}
-						color={isOwner ? themes[theme].tintColor : themes[theme].auxiliaryTintColor}
+						color={isOwner ? themes[theme].tintColor : themes[theme].auxiliaryText}
 					/>
 				),
 				testID: 'action-sheet-set-owner'
@@ -359,7 +359,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
 						testID={isLeader ? 'action-sheet-set-leader-checked' : 'action-sheet-set-leader-unchecked'}
 						name={isLeader ? 'checkbox-checked' : 'checkbox-unchecked'}
 						size={20}
-						color={isLeader ? themes[theme].tintColor : themes[theme].auxiliaryTintColor}
+						color={isLeader ? themes[theme].tintColor : themes[theme].auxiliaryText}
 					/>
 				),
 				testID: 'action-sheet-set-leader'
@@ -379,7 +379,7 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
 						testID={isModerator ? 'action-sheet-set-moderator-checked' : 'action-sheet-set-moderator-unchecked'}
 						name={isModerator ? 'checkbox-checked' : 'checkbox-unchecked'}
 						size={20}
-						color={isModerator ? themes[theme].tintColor : themes[theme].auxiliaryTintColor}
+						color={isModerator ? themes[theme].tintColor : themes[theme].auxiliaryText}
 					/>
 				),
 				testID: 'action-sheet-set-moderator'
diff --git a/app/views/RoomView/List/NavBottomFAB.tsx b/app/views/RoomView/List/NavBottomFAB.tsx
index 895c1278a..d21117398 100644
--- a/app/views/RoomView/List/NavBottomFAB.tsx
+++ b/app/views/RoomView/List/NavBottomFAB.tsx
@@ -65,7 +65,7 @@ const NavBottomFAB = ({
 		<Animated.View style={[styles.container, { bottom }]} testID='nav-jump-to-bottom'>
 			<Touch onPress={handleOnPress} theme={theme} style={[styles.button, { backgroundColor: themes[theme].backgroundColor }]}>
 				<View style={[styles.content, { borderColor: themes[theme].borderColor }]}>
-					<CustomIcon name='chevron-down' color={themes[theme].auxiliaryTintColor} size={36} />
+					<CustomIcon name='chevron-down' color={themes[theme].auxiliaryText} size={36} />
 				</View>
 			</Touch>
 		</Animated.View>
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index 0c79ddd41..3bb8d5eb2 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -1370,7 +1370,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					</Text>
 					<Touch
 						onPress={this.resumeRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme].tintColor }]}
 						enabled={!loading}
 						theme={theme}>
 						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-chat-on-hold-button'>
@@ -1390,7 +1390,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					</Text>
 					<Touch
 						onPress={this.joinRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme].tintColor }]}
 						enabled={!loading}
 						theme={theme}>
 						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-join-button'>
diff --git a/app/views/RoomsListView/ListHeader/index.tsx b/app/views/RoomsListView/ListHeader/index.tsx
index 5661dce34..414caa4cd 100644
--- a/app/views/RoomsListView/ListHeader/index.tsx
+++ b/app/views/RoomsListView/ListHeader/index.tsx
@@ -38,7 +38,7 @@ const ListHeader = React.memo(
 							}
 							left={() => <List.Icon name='encrypted' color={themes[theme].buttonText} />}
 							underlayColor={themes[theme].tintColor}
-							backgroundColor={themes[theme].actionTintColor}
+							backgroundColor={themes[theme].tintColor}
 							color={themes[theme].buttonText}
 							onPress={goEncryption}
 							testID='listheader-encryption'
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx
index 22b4da736..edb4b9016 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView.tsx
@@ -160,7 +160,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].tintColor}
 				size={ICON_SIZE}
 			/>
 		);
@@ -169,7 +169,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].tintColor}
 				/>
 			) : null;
 
diff --git a/app/views/ShareListView/Header/SearchBox.tsx b/app/views/ShareListView/Header/SearchBox.tsx
index 68fff6cd0..5ed0aebe0 100644
--- a/app/views/ShareListView/Header/SearchBox.tsx
+++ b/app/views/ShareListView/Header/SearchBox.tsx
@@ -63,12 +63,8 @@ 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 }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme].headerBackground }]}>
+			<View style={[styles.searchBox, { backgroundColor: themes[theme].buttonBackgroundSecondaryDefault }]}>
 				<CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
 				<TextInput
 					ref={inputRef}
diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx
index 12bea65c2..d1daf6c6b 100644
--- a/app/views/TeamChannelsView.tsx
+++ b/app/views/TeamChannelsView.tsx
@@ -434,7 +434,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].tintColor : themes[theme].auxiliaryTintColor;
+		const autoJoinIconColor = isAutoJoinChecked ? themes[theme].tintColor : themes[theme].auxiliaryText;
 
 		const options: TActionSheetOptionsItem[] = [];
 
diff --git a/app/views/UserNotificationPreferencesView/index.tsx b/app/views/UserNotificationPreferencesView/index.tsx
index 519297bd6..f1b9bf23c 100644
--- a/app/views/UserNotificationPreferencesView/index.tsx
+++ b/app/views/UserNotificationPreferencesView/index.tsx
@@ -73,7 +73,7 @@ class UserNotificationPreferencesView extends React.Component<
 		const { theme } = this.props;
 		const text = this.findDefaultOption(key);
 		return (
-			<Text style={[styles.pickerText, { color: themes[theme].actionTintColor }]}>
+			<Text style={[styles.pickerText, { color: themes[theme].tintColor }]}>
 				{text?.label ? I18n.t(text?.label) : text?.label}
 			</Text>
 		);
diff --git a/app/views/WorkspaceView/ServerAvatar.tsx b/app/views/WorkspaceView/ServerAvatar.tsx
index 7d3da01f6..8adedf1d7 100644
--- a/app/views/WorkspaceView/ServerAvatar.tsx
+++ b/app/views/WorkspaceView/ServerAvatar.tsx
@@ -67,7 +67,7 @@ const ServerAvatar = React.memo(({ theme, url, image }: IServerAvatar) => (
 				resizeMode={FastImage.resizeMode.cover}
 				indicator={Progress.Pie}
 				indicatorProps={{
-					color: themes[theme].actionTintColor
+					color: themes[theme].tintColor
 				}}
 				renderError={() => <Fallback theme={theme} initial={getInitial(url)} />}
 			/>