diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
index aea4d4fac..b7382389b 100644
--- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
+++ b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -101,7 +101,7 @@ const ActionSheetContentWithInputAndSubmit = ({
 			<>
 				<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 }]}>
+					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 16 : 0 }]}>
 						{title}
 					</Text>
 				</View>
diff --git a/app/containers/CallHeader.tsx b/app/containers/CallHeader.tsx
index 713f27cbc..e7e02a92e 100644
--- a/app/containers/CallHeader.tsx
+++ b/app/containers/CallHeader.tsx
@@ -97,7 +97,7 @@ function useStyle() {
 		actionSheetUsername: {
 			fontSize: 16,
 			...sharedStyles.textBold,
-			color: colors.passcodePrimary,
+			color: colors.fontDefault,
 			flexShrink: 1
 		},
 		rowContainer: { flexDirection: 'row' },
diff --git a/app/containers/InAppNotification/IncomingCallNotification/index.tsx b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
index df2552abf..f5736f3cf 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/index.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
@@ -73,7 +73,7 @@ const IncomingCallHeader = React.memo(
 						}}
 						style={styles.closeButton}
 					>
-						<CustomIcon name='close' size={20} color={colors.gray300} />
+						<CustomIcon name='close' size={20} />
 					</Touchable>
 					<Touchable
 						hitSlop={BUTTON_HIT_SLOP}
diff --git a/app/containers/InAppNotification/IncomingCallNotification/style.tsx b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
index 81cfcead4..0b16cac28 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/style.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/style.tsx
@@ -26,7 +26,7 @@ export const useStyle = () => {
 			marginTop: 12
 		},
 		closeButton: {
-			backgroundColor: colors.passcodeButtonActive,
+			backgroundColor: colors.buttonBackgroundSecondaryDefault,
 			marginRight: 8,
 			alignItems: 'center',
 			justifyContent: 'center',
diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx
index 28e9a7234..9a8cbc0ac 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,23 +15,19 @@ 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}
 		>
-			{icon ? (
-				<CustomIcon name={icon} size={36} color={themes[theme].passcodePrimary} />
-			) : (
-				<Text style={[styles.buttonText, { color: themes[theme].passcodePrimary }]}>{text}</Text>
-			)}
+			{icon ? <CustomIcon name={icon} size={36} /> : <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..8a700b06d 100644
--- a/app/containers/Passcode/Base/Dots.tsx
+++ b/app/containers/Passcode/Base/Dots.tsx
@@ -15,7 +15,7 @@ interface IPasscodeDots {
 }
 
 const Dots = React.memo(({ passcode, length }: IPasscodeDots) => {
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	return (
 		<View style={styles.dotsContainer}>
@@ -25,9 +25,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..2ccde968f 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].dangerColor }]}>{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..280ca7c0c 100644
--- a/app/containers/Passcode/Base/index.tsx
+++ b/app/containers/Passcode/Base/index.tsx
@@ -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/UIKit/VideoConferenceBlock/components/styles.ts b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
index 1f5da3554..f350e13d8 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
+++ b/app/containers/UIKit/VideoConferenceBlock/components/styles.ts
@@ -51,7 +51,7 @@ export default function useStyle() {
 		joined: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary,
+			color: colors.strokeDark,
 			marginLeft: 8
 		},
 		plusUsers: {
@@ -71,7 +71,7 @@ export default function useStyle() {
 		callBack: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.strokeDark
 		},
 		callToActionCallBack: {
 			backgroundColor: colors.conferenceCallPlusUsersButton,
@@ -86,7 +86,7 @@ export default function useStyle() {
 		notAnswered: {
 			fontSize: 12,
 			...sharedStyles.textRegular,
-			color: colors.passcodeSecondary
+			color: colors.strokeDark
 		},
 		enabledBackground: {
 			backgroundColor: colors.conferenceCallEnabledIconBackground
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index f4449a755..791c67837 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -247,14 +247,7 @@ export const colors = {
 		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',
 		backdropOpacity: 0.3,
@@ -326,14 +319,7 @@ export const colors = {
 		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',
 		backdropOpacity: 0.9,
@@ -405,14 +391,7 @@ export const colors = {
 		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',
 		backdropOpacity: 0.9,
diff --git a/app/views/ChangePasscodeView.tsx b/app/views/ChangePasscodeView.tsx
index e6199ee9a..e4ce260f0 100644
--- a/app/views/ChangePasscodeView.tsx
+++ b/app/views/ChangePasscodeView.tsx
@@ -10,7 +10,7 @@ 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 +33,7 @@ const ChangePasscodeView = React.memo(() => {
 	const [visible, setVisible] = useState(false);
 	const [data, setData] = useState<Partial<IArgs>>({});
 
-	const { theme } = useTheme();
+	const { colors } = useTheme();
 
 	useDeepCompareEffect(() => {
 		if (!isEmpty(data)) {
@@ -75,7 +75,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' color={colors.fontDefault} size={30} />
 				</Touchable>
 			) : null}
 		</Modal>
diff --git a/app/views/ScreenLockedView.tsx b/app/views/ScreenLockedView.tsx
index 8cebb6f23..930e26099 100644
--- a/app/views/ScreenLockedView.tsx
+++ b/app/views/ScreenLockedView.tsx
@@ -79,7 +79,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' color={colors.fontDefault} size={30} />
 				</Touchable>
 			) : null}
 		</Modal>