diff --git a/app/containers/Avatar/AvatarWithEdit.tsx b/app/containers/Avatar/AvatarWithEdit.tsx
index 1e54c55c9..9c888bb81 100644
--- a/app/containers/Avatar/AvatarWithEdit.tsx
+++ b/app/containers/Avatar/AvatarWithEdit.tsx
@@ -69,7 +69,7 @@ const AvatarWithEdit = ({
 				<Button
 					title={I18n.t('Edit')}
 					type='secondary'
-					backgroundColor={colors.editAndUploadButtonAvatar}
+					backgroundColor={colors.buttonBackgroundSecondaryDefault}
 					onPress={handleEdit}
 					testID='avatar-edit-button'
 					style={styles.editAvatarButton}
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index 3357de676..3be8c990c 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -50,7 +50,7 @@ const Button = ({
 	const { colors } = useTheme();
 	const isPrimary = type === 'primary';
 
-	let textColor = isPrimary ? colors.buttonText : colors.bodyText;
+	let textColor = isPrimary ? colors.fontWhite : colors.bodyText;
 	if (color) {
 		textColor = color;
 	}
diff --git a/app/containers/ImageViewer/ImageViewer.tsx b/app/containers/ImageViewer/ImageViewer.tsx
index bb0141b3c..429f87068 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.surfaceDark }]}>
 			<GestureDetector gesture={gesture}>
 				<Animated.View onLayout={onLayout} style={[styles.flex, style]}>
 					<Component
diff --git a/app/containers/LoginServices/ButtonService.tsx b/app/containers/LoginServices/ButtonService.tsx
index 6c00d0ce2..ed86685b4 100644
--- a/app/containers/LoginServices/ButtonService.tsx
+++ b/app/containers/LoginServices/ButtonService.tsx
@@ -16,7 +16,7 @@ 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' ? (
diff --git a/app/containers/RoomItem/Actions.tsx b/app/containers/RoomItem/Actions.tsx
index ff46b7e64..79ab46ced 100644
--- a/app/containers/RoomItem/Actions.tsx
+++ b/app/containers/RoomItem/Actions.tsx
@@ -46,7 +46,7 @@ export const LeftActions = React.memo(({ transX, isRead, width, onToggleReadPres
 						<CustomIcon
 							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 							name={isRead ? 'flag' : 'check'}
-							color={colors.buttonText}
+							color={colors.fontWhite}
 						/>
 					</RectButton>
 				</View>
@@ -129,7 +129,7 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					<CustomIcon
 						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 						name={favorite ? 'star-filled' : 'star'}
-						color={colors.buttonText}
+						color={colors.fontWhite}
 					/>
 				</RectButton>
 			</Animated.View>
@@ -149,7 +149,7 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 					<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/Toast.tsx b/app/containers/Toast.tsx
index 0834ba3f6..508627430 100644
--- a/app/containers/Toast.tsx
+++ b/app/containers/Toast.tsx
@@ -47,7 +47,7 @@ const Toast = (): React.ReactElement => {
 			// @ts-ignore
 			position='center'
 			style={[styles.toast, { backgroundColor: colors.toastBackground }]}
-			textStyle={[styles.text, { color: colors.buttonText }]}
+			textStyle={[styles.text, { color: colors.fontWhite }]}
 			opacity={0.9}
 		/>
 	);
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
index 8a20ed79a..33ac1c2ad 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
+++ b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
@@ -31,7 +31,7 @@ export default function useStyle() {
 		callToActionButtonText: {
 			fontSize: 12,
 			...sharedStyles.textSemibold,
-			color: colors.buttonText
+			color: colors.fontWhite
 		},
 		callToActionCallBackText: {
 			fontSize: 12,
diff --git a/app/containers/UnreadBadge/getUnreadStyle.test.js b/app/containers/UnreadBadge/getUnreadStyle.test.js
index c63502b25..286823c44 100644
--- a/app/containers/UnreadBadge/getUnreadStyle.test.js
+++ b/app/containers/UnreadBadge/getUnreadStyle.test.js
@@ -16,7 +16,7 @@ const testsForTheme = theme => {
 			})
 		).toEqual({
 			backgroundColor: themes[theme].fontAnnotation,
-			color: themes[theme].buttonText
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -27,7 +27,7 @@ const testsForTheme = theme => {
 			})
 		).toEqual({
 			backgroundColor: themes[theme].fontInfo,
-			color: themes[theme].buttonText
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -39,7 +39,7 @@ const testsForTheme = theme => {
 			})
 		).toEqual({
 			backgroundColor: themes[theme].badgeBackgroundLevel4,
-			color: themes[theme].buttonText
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -51,7 +51,7 @@ const testsForTheme = theme => {
 			})
 		).toEqual({
 			backgroundColor: themes[theme].badgeBackgroundLevel3,
-			color: themes[theme].buttonText
+			color: themes[theme].fontWhite
 		});
 	});
 
@@ -65,7 +65,7 @@ const testsForTheme = theme => {
 			})
 		).toEqual({
 			backgroundColor: themes[theme].badgeBackgroundLevel4,
-			color: themes[theme].buttonText
+			color: themes[theme].fontWhite
 		});
 		expect(
 			getUnreadStyleUtil({
@@ -75,7 +75,7 @@ const testsForTheme = theme => {
 			})
 		).toEqual({
 			backgroundColor: themes[theme].badgeBackgroundLevel3,
-			color: themes[theme].buttonText
+			color: themes[theme].fontWhite
 		});
 		expect(
 			getUnreadStyleUtil({
@@ -84,7 +84,7 @@ const testsForTheme = theme => {
 			})
 		).toEqual({
 			backgroundColor: themes[theme].fontInfo,
-			color: themes[theme].buttonText
+			color: themes[theme].fontWhite
 		});
 	});
 };
diff --git a/app/containers/UnreadBadge/getUnreadStyle.ts b/app/containers/UnreadBadge/getUnreadStyle.ts
index f37d42c51..401a5ff6c 100644
--- a/app/containers/UnreadBadge/getUnreadStyle.ts
+++ b/app/containers/UnreadBadge/getUnreadStyle.ts
@@ -20,7 +20,7 @@ export const getUnreadStyle = ({
 	}
 
 	let backgroundColor = themes[theme].fontAnnotation;
-	const color = themes[theme].buttonText;
+	const color = themes[theme].fontWhite;
 	if ((userMentions && userMentions > 0) || tunreadUser?.length) {
 		backgroundColor = themes[theme].badgeBackgroundLevel4;
 	} else if ((groupMentions && groupMentions > 0) || tunreadGroup?.length) {
diff --git a/app/containers/message/Broadcast.tsx b/app/containers/message/Broadcast.tsx
index ce7dbacb4..da7c91871 100644
--- a/app/containers/message/Broadcast.tsx
+++ b/app/containers/message/Broadcast.tsx
@@ -27,8 +27,8 @@ const Broadcast = React.memo(({ author, broadcast }: IMessageBroadcast) => {
 					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 265ebb268..e703192df 100644
--- a/app/containers/message/CallButton.tsx
+++ b/app/containers/message/CallButton.tsx
@@ -21,8 +21,8 @@ const CallButton = React.memo(({ handleEnterCall }: IMessageCallButton) => {
 				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/OverlayComponent/index.tsx b/app/containers/message/Components/OverlayComponent/index.tsx
index 2c1314ba2..92994add2 100644
--- a/app/containers/message/Components/OverlayComponent/index.tsx
+++ b/app/containers/message/Components/OverlayComponent/index.tsx
@@ -19,7 +19,7 @@ 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 name={iconName} size={54} />}
 			</View>
diff --git a/app/containers/message/Discussion.tsx b/app/containers/message/Discussion.tsx
index 77b0dd7a4..4f4692672 100644
--- a/app/containers/message/Discussion.tsx
+++ b/app/containers/message/Discussion.tsx
@@ -34,8 +34,8 @@ const Discussion = React.memo(
 						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].fontSecondaryInfo }]}>{time}</Text>
diff --git a/app/containers/message/Thread.tsx b/app/containers/message/Thread.tsx
index 19fd2db98..5a234b4cc 100644
--- a/app/containers/message/Thread.tsx
+++ b/app/containers/message/Thread.tsx
@@ -21,7 +21,7 @@ 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>
+					<Text style={[styles.buttonText, { color: themes[theme].fontWhite }]}>{I18n.t('Reply')}</Text>
 				</View>
 				<ThreadDetails
 					item={{
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index 91987b4df..d3aa43319 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -1,5 +1,4 @@
 const fixedColors = {
-	overlayColor: '#1F2329CC',
 	backdropColor: '#000000'
 };
 
@@ -251,7 +250,7 @@ const newColorsBlack = {
 	buttonBackgroundPrimaryPress: '#245399',
 	buttonBackgroundPrimaryDisabled: '#1D3963',
 
-	buttonBackgroundSecondaryDefault: '#2F343D',
+	buttonBackgroundSecondaryDefault: '#0E0D0D',
 	buttonBackgroundSecondaryPress: '#454C59',
 	buttonBackgroundSecondaryDisabled: '#2F343D',
 
@@ -305,12 +304,7 @@ export const colors = {
 		videoBackground: '#1f2329',
 		favoriteBackground: '#ffbb00',
 		hideBackground: '#54585e',
-		searchboxBackground: '#E6E6E7',
 		buttonBackground: '#414852',
-		buttonText: '#ffffff',
-		editAndUploadButtonAvatar: '#E4E7EA',
-		previewBackground: '#1F2329',
-		previewTintColor: '#f9f9f9',
 		backdropOpacity: 0.3,
 		attachmentLoadingOpacity: 0.7,
 	},
@@ -339,12 +333,7 @@ export const colors = {
 		videoBackground: '#1f2329',
 		favoriteBackground: '#ffbb00',
 		hideBackground: '#54585e',
-		searchboxBackground: '#192d4d',
 		buttonBackground: '#414852',
-		buttonText: '#ffffff',
-		editAndUploadButtonAvatar: '#0B182C',
-		previewBackground: '#030b1b',
-		previewTintColor: '#f9f9f9',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
 	black: {
@@ -372,12 +361,7 @@ export const colors = {
 		videoBackground: '#1f2329',
 		favoriteBackground: '#ffbb00',
 		hideBackground: '#54585e',
-		searchboxBackground: '#1f1f1f',
 		buttonBackground: '#414852',
-		buttonText: '#ffffff',
-		editAndUploadButtonAvatar: '#0E0D0D',
-		previewBackground: '#000000',
-		previewTintColor: '#f9f9f9',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
 	},
diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
index 97d7c4a04..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);
@@ -192,7 +192,7 @@ const AttachmentView = (): React.ReactElement => {
 
 	return (
 		<View style={{ backgroundColor: colors.surfaceRoom, flex: 1 }}>
-			<StatusBar barStyle='light-content' backgroundColor={colors.previewBackground} />
+			<StatusBar barStyle='light-content' backgroundColor={colors.surfaceDark} />
 			<RenderContent attachment={attachment} setLoading={setLoading} />
 			{loading ? <RCActivityIndicator absolute size='large' /> : null}
 		</View>
diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx
index 268a1f316..a50a15a9b 100644
--- a/app/views/CannedResponseDetail.tsx
+++ b/app/views/CannedResponseDetail.tsx
@@ -124,7 +124,7 @@ 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 }]}>
+									<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
 										<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
 									</View>
 								))
diff --git a/app/views/CannedResponsesListView/CannedResponseItem.tsx b/app/views/CannedResponsesListView/CannedResponseItem.tsx
index 2b6827ad0..78ec45749 100644
--- a/app/views/CannedResponsesListView/CannedResponseItem.tsx
+++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx
@@ -50,7 +50,7 @@ const CannedResponseItem = ({
 			<View style={styles.cannedTagContainer}>
 				{tags?.length > 0
 					? tags.map(t => (
-							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].searchboxBackground }]}>
+							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
 								<Text style={[styles.cannedTag, { color: themes[theme].auxiliaryTintColor }]}>{t}</Text>
 							</View>
 					  ))
diff --git a/app/views/ChangeAvatarView/index.tsx b/app/views/ChangeAvatarView/index.tsx
index 84df20ba3..e5f62a90a 100644
--- a/app/views/ChangeAvatarView/index.tsx
+++ b/app/views/ChangeAvatarView/index.tsx
@@ -222,7 +222,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 +230,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'
 					/>
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index d3889bc9c..bd8e41200 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -693,7 +693,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 							disabled={!this.formIsChanged()}
 							testID='room-info-edit-view-submit'
 						>
-							<Text style={[styles.button, { color: themes[theme].buttonText }]} accessibilityRole='button'>
+							<Text style={[styles.button, { color: themes[theme].fontWhite }]} accessibilityRole='button'>
 								{I18n.t('SAVE')}
 							</Text>
 						</TouchableOpacity>
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index a1ceb22bd..fbf7fc8df 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -1373,7 +1373,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
 						enabled={!loading}
 					>
-						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-chat-on-hold-button'>
+						<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-chat-on-hold-button'>
 							{I18n.t('Resume')}
 						</Text>
 					</Touch>
@@ -1389,7 +1389,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
 						enabled={!loading}
 					>
-						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-join-button'>
+						<Text style={[styles.joinRoomText, { color: themes[theme].fontWhite }]} testID='room-view-join-button'>
 							{I18n.t(this.isOmnichannel ? 'Take_it' : 'Join')}
 						</Text>
 					</Touch>
diff --git a/app/views/RoomsListView/ListHeader/index.tsx b/app/views/RoomsListView/ListHeader/index.tsx
index d3ba3f55b..e460f9a5a 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} />}
+							left={() => <List.Icon name='encrypted' color={themes[theme].fontWhite} />}
 							underlayColor={themes[theme].strokeHighlight}
 							backgroundColor={themes[theme].actionTintColor}
-							color={themes[theme].buttonText}
+							color={themes[theme].fontWhite}
 							onPress={goEncryption}
 							testID='listheader-encryption'
 						/>
diff --git a/app/views/ShareListView/Header/SearchBox.tsx b/app/views/ShareListView/Header/SearchBox.tsx
index 9b408afc3..badfdaa51 100644
--- a/app/views/ShareListView/Header/SearchBox.tsx
+++ b/app/views/ShareListView/Header/SearchBox.tsx
@@ -69,7 +69,7 @@ const SearchBox = ({ hasCancel, onCancelPress, inputRef, ...props }: ISearchBox)
 				{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
 			]}
 		>
-			<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
+			<View style={[styles.searchBox, { backgroundColor: themes[theme].strokeExtraLight }]}>
 				<CustomIcon name='search' size={14} color={themes[theme].fontSecondaryInfo} />
 				<TextInput
 					ref={inputRef}
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/Thumbs.tsx b/app/views/ShareView/Thumbs.tsx
index dca813e66..ac2f2e6ea 100644
--- a/app/views/ShareView/Thumbs.tsx
+++ b/app/views/ShareView/Thumbs.tsx
@@ -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} />
 			</>
 		);
 	}
diff --git a/app/views/ShareView/index.tsx b/app/views/ShareView/index.tsx
index eaa283f2a..b76866a8c 100644
--- a/app/views/ShareView/index.tsx
+++ b/app/views/ShareView/index.tsx
@@ -121,23 +121,23 @@ 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' />;
+			options.headerLeft = () => <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);
 	};
@@ -403,7 +403,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		}
 		return (
 			<SafeAreaView style={{ backgroundColor: themes[theme].surfaceRoom }}>
-				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
+				<StatusBar barStyle='light-content' backgroundColor={themes[theme].surfaceDark} />
 				{this.renderContent()}
 			</SafeAreaView>
 		);