diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index b291eda984d..45b9a8c68bb 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -106,6 +106,9 @@ const ONYXKEYS = {
     /** Object containing contact method that's going to be added */
     PENDING_CONTACT_ACTION: 'pendingContactAction',
 
+    /** Store the information of magic code */
+    VALIDATE_ACTION_CODE: 'validate_action_code',
+
     /** Information about the current session (authToken, accountID, email, loading, error) */
     SESSION: 'session',
     STASHED_SESSION: 'stashedSession',
@@ -840,6 +843,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.USER_LOCATION]: OnyxTypes.UserLocation;
     [ONYXKEYS.LOGIN_LIST]: OnyxTypes.LoginList;
     [ONYXKEYS.PENDING_CONTACT_ACTION]: OnyxTypes.PendingContactAction;
+    [ONYXKEYS.VALIDATE_ACTION_CODE]: OnyxTypes.ValidateMagicCodeAction;
     [ONYXKEYS.SESSION]: OnyxTypes.Session;
     [ONYXKEYS.USER_METADATA]: OnyxTypes.UserMetadata;
     [ONYXKEYS.STASHED_SESSION]: OnyxTypes.Session;
diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
new file mode 100644
index 00000000000..247c0c60690
--- /dev/null
+++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -0,0 +1,257 @@
+import {useFocusEffect} from '@react-navigation/native';
+import type {ForwardedRef} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import DotIndicatorMessage from '@components/DotIndicatorMessage';
+import MagicCodeInput from '@components/MagicCodeInput';
+import type {AutoCompleteVariant, MagicCodeInputHandle} from '@components/MagicCodeInput';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import * as User from '@userActions/User';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Account, ValidateMagicCodeAction} from '@src/types/onyx';
+import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+
+type ValidateCodeFormHandle = {
+    focus: () => void;
+    focusLastSelected: () => void;
+};
+
+type ValidateCodeFormError = {
+    validateCode?: TranslationPaths;
+};
+
+type BaseValidateCodeFormOnyxProps = {
+    /** The details about the account that the user is signing in with */
+    account: OnyxEntry<Account>;
+};
+
+type ValidateCodeFormProps = {
+    /** If the magic code has been resent previously */
+    hasMagicCodeBeenSent?: boolean;
+
+    /** Specifies autocomplete hints for the system, so it can provide autofill */
+    autoComplete?: AutoCompleteVariant;
+
+    /** Forwarded inner ref */
+    innerRef?: ForwardedRef<ValidateCodeFormHandle>;
+
+    /** The state of magic code that being sent */
+    validateCodeAction?: ValidateMagicCodeAction;
+
+    /** The pending action for submitting form */
+    validatePendingAction?: PendingAction | null;
+
+    /** The error of submitting  */
+    validateError?: Errors;
+
+    /** Function is called when submitting form  */
+    handleSubmitForm: (validateCode: string) => void;
+
+    /** Function to clear error of the form */
+    clearError: () => void;
+};
+
+type BaseValidateCodeFormProps = BaseValidateCodeFormOnyxProps & ValidateCodeFormProps;
+
+function BaseValidateCodeForm({
+    account = {},
+    hasMagicCodeBeenSent,
+    autoComplete = 'one-time-code',
+    innerRef = () => {},
+    validateCodeAction,
+    validatePendingAction,
+    validateError,
+    handleSubmitForm,
+    clearError,
+}: BaseValidateCodeFormProps) {
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const [formError, setFormError] = useState<ValidateCodeFormError>({});
+    const [validateCode, setValidateCode] = useState('');
+    const inputValidateCodeRef = useRef<MagicCodeInputHandle>(null);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case
+    const shouldDisableResendValidateCode = !!isOffline || account?.isLoading;
+    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    useImperativeHandle(innerRef, () => ({
+        focus() {
+            inputValidateCodeRef.current?.focus();
+        },
+        focusLastSelected() {
+            if (!inputValidateCodeRef.current) {
+                return;
+            }
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+            focusTimeoutRef.current = setTimeout(() => {
+                inputValidateCodeRef.current?.focusLastSelected();
+            }, CONST.ANIMATED_TRANSITION);
+        },
+    }));
+
+    useFocusEffect(
+        useCallback(() => {
+            if (!inputValidateCodeRef.current) {
+                return;
+            }
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+            focusTimeoutRef.current = setTimeout(() => {
+                inputValidateCodeRef.current?.focusLastSelected();
+            }, CONST.ANIMATED_TRANSITION);
+            return () => {
+                if (!focusTimeoutRef.current) {
+                    return;
+                }
+                clearTimeout(focusTimeoutRef.current);
+            };
+        }, []),
+    );
+
+    useEffect(() => {
+        if (!validateError) {
+            return;
+        }
+        clearError();
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [clearError, validateError]);
+
+    useEffect(() => {
+        if (!hasMagicCodeBeenSent) {
+            return;
+        }
+        inputValidateCodeRef.current?.clear();
+    }, [hasMagicCodeBeenSent]);
+
+    /**
+     * Request a validate code / magic code be sent to verify this contact method
+     */
+    const resendValidateCode = () => {
+        User.requestValidateCodeAction();
+        inputValidateCodeRef.current?.clear();
+    };
+
+    /**
+     * Handle text input and clear formError upon text change
+     */
+    const onTextInput = useCallback(
+        (text: string) => {
+            setValidateCode(text);
+            setFormError({});
+
+            if (validateError) {
+                clearError();
+                User.clearValidateCodeActionError('actionVerified');
+            }
+        },
+        [validateError, clearError],
+    );
+
+    /**
+     * Check that all the form fields are valid, then trigger the submit callback
+     */
+    const validateAndSubmitForm = useCallback(() => {
+        if (!validateCode.trim()) {
+            setFormError({validateCode: 'validateCodeForm.error.pleaseFillMagicCode'});
+            return;
+        }
+
+        if (!ValidationUtils.isValidValidateCode(validateCode)) {
+            setFormError({validateCode: 'validateCodeForm.error.incorrectMagicCode'});
+            return;
+        }
+
+        setFormError({});
+        handleSubmitForm(validateCode);
+    }, [validateCode, handleSubmitForm]);
+
+    return (
+        <>
+            <MagicCodeInput
+                autoComplete={autoComplete}
+                ref={inputValidateCodeRef}
+                name="validateCode"
+                value={validateCode}
+                onChangeText={onTextInput}
+                errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})}
+                hasError={!isEmptyObject(validateError)}
+                onFulfill={validateAndSubmitForm}
+                autoFocus={false}
+            />
+            <OfflineWithFeedback
+                pendingAction={validateCodeAction?.pendingFields?.validateCodeSent}
+                errors={ErrorUtils.getLatestErrorField(validateCodeAction, 'actionVerified')}
+                errorRowStyles={[styles.mt2]}
+                onClose={() => User.clearValidateCodeActionError('actionVerified')}
+            >
+                <View style={[styles.mt2, styles.dFlex, styles.flexColumn, styles.alignItemsStart]}>
+                    <PressableWithFeedback
+                        disabled={shouldDisableResendValidateCode}
+                        style={[styles.mr1]}
+                        onPress={resendValidateCode}
+                        underlayColor={theme.componentBG}
+                        hoverDimmingValue={1}
+                        pressDimmingValue={0.2}
+                        role={CONST.ROLE.BUTTON}
+                        accessibilityLabel={translate('validateCodeForm.magicCodeNotReceived')}
+                    >
+                        <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>{translate('validateCodeForm.magicCodeNotReceived')}</Text>
+                    </PressableWithFeedback>
+                    {hasMagicCodeBeenSent && (
+                        <DotIndicatorMessage
+                            type="success"
+                            style={[styles.mt6, styles.flex0]}
+                            // eslint-disable-next-line @typescript-eslint/naming-convention
+                            messages={{0: translate('validateCodeModal.successfulNewCodeRequest')}}
+                        />
+                    )}
+                </View>
+            </OfflineWithFeedback>
+            <OfflineWithFeedback
+                pendingAction={validatePendingAction}
+                errors={validateError}
+                errorRowStyles={[styles.mt2]}
+                onClose={() => clearError()}
+            >
+                <Button
+                    isDisabled={isOffline}
+                    text={translate('common.verify')}
+                    onPress={validateAndSubmitForm}
+                    style={[styles.mt4]}
+                    success
+                    pressOnEnter
+                    large
+                    isLoading={account?.isLoading}
+                />
+            </OfflineWithFeedback>
+        </>
+    );
+}
+
+BaseValidateCodeForm.displayName = 'BaseValidateCodeForm';
+
+export type {ValidateCodeFormProps, ValidateCodeFormHandle};
+
+export default withOnyx<BaseValidateCodeFormProps, BaseValidateCodeFormOnyxProps>({
+    account: {key: ONYXKEYS.ACCOUNT},
+})(BaseValidateCodeForm);
diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/index.android.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/index.android.tsx
new file mode 100644
index 00000000000..704405f93a2
--- /dev/null
+++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/index.android.tsx
@@ -0,0 +1,14 @@
+import React, {forwardRef} from 'react';
+import BaseValidateCodeForm from './BaseValidateCodeForm';
+import type {ValidateCodeFormHandle, ValidateCodeFormProps} from './BaseValidateCodeForm';
+
+const ValidateCodeForm = forwardRef<ValidateCodeFormHandle, ValidateCodeFormProps>((props, ref) => (
+    <BaseValidateCodeForm
+        autoComplete="sms-otp"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+export default ValidateCodeForm;
diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/index.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/index.tsx
new file mode 100644
index 00000000000..453fc9c3f37
--- /dev/null
+++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/index.tsx
@@ -0,0 +1,14 @@
+import React, {forwardRef} from 'react';
+import BaseValidateCodeForm from './BaseValidateCodeForm';
+import type {ValidateCodeFormHandle, ValidateCodeFormProps} from './BaseValidateCodeForm';
+
+const ValidateCodeForm = forwardRef<ValidateCodeFormHandle, ValidateCodeFormProps>((props, ref) => (
+    <BaseValidateCodeForm
+        autoComplete="one-time-code"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));
+
+export default ValidateCodeForm;
diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx
new file mode 100644
index 00000000000..63528f1d5cf
--- /dev/null
+++ b/src/components/ValidateCodeActionModal/index.tsx
@@ -0,0 +1,75 @@
+import React, {useCallback, useEffect, useRef} from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Modal from '@components/Modal';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as User from '@libs/actions/User';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {ValidateCodeActionModalProps} from './type';
+import ValidateCodeForm from './ValidateCodeForm';
+import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm';
+
+function ValidateCodeActionModal({isVisible, title, description, onClose, validatePendingAction, validateError, handleSubmitForm, clearError}: ValidateCodeActionModalProps) {
+    const themeStyles = useThemeStyles();
+    const firstRenderRef = useRef(true);
+    const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);
+
+    const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
+
+    const hide = useCallback(() => {
+        clearError();
+        onClose();
+    }, [onClose, clearError]);
+
+    useEffect(() => {
+        if (!firstRenderRef.current || !isVisible) {
+            return;
+        }
+        firstRenderRef.current = false;
+        User.requestValidateCodeAction();
+    }, [isVisible]);
+
+    return (
+        <Modal
+            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
+            isVisible={isVisible}
+            onClose={hide}
+            onModalHide={hide}
+            hideModalContentWhileAnimating
+            useNativeDriver
+            shouldUseModalPaddingStyle={false}
+        >
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                shouldEnableMaxHeight
+                testID={ValidateCodeActionModal.displayName}
+                offlineIndicatorStyle={themeStyles.mtAuto}
+            >
+                <HeaderWithBackButton
+                    title={title}
+                    onBackButtonPress={hide}
+                />
+
+                <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb7]}>
+                    <Text style={[themeStyles.mb3]}>{description}</Text>
+                    <ValidateCodeForm
+                        validateCodeAction={validateCodeAction}
+                        validatePendingAction={validatePendingAction}
+                        validateError={validateError}
+                        handleSubmitForm={handleSubmitForm}
+                        clearError={clearError}
+                        ref={validateCodeFormRef}
+                    />
+                </View>
+            </ScreenWrapper>
+        </Modal>
+    );
+}
+
+ValidateCodeActionModal.displayName = 'ValidateCodeActionModal';
+
+export default ValidateCodeActionModal;
diff --git a/src/components/ValidateCodeActionModal/type.ts b/src/components/ValidateCodeActionModal/type.ts
new file mode 100644
index 00000000000..3cbfe62513d
--- /dev/null
+++ b/src/components/ValidateCodeActionModal/type.ts
@@ -0,0 +1,30 @@
+import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';
+
+type ValidateCodeActionModalProps = {
+    /** Whether the modal is visible */
+    isVisible: boolean;
+
+    /** Title of the modal */
+    title: string;
+
+    /** Description of the modal */
+    description: string;
+
+    /** Function to call when the user closes the modal */
+    onClose: () => void;
+
+    /** The pending action for submitting form */
+    validatePendingAction?: PendingAction | null;
+
+    /** The error of submitting  */
+    validateError?: Errors;
+
+    /** Function is called when submitting form  */
+    handleSubmitForm: (validateCode: string) => void;
+
+    /** Function to clear error of the form */
+    clearError: () => void;
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export type {ValidateCodeActionModalProps};
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 065c406e52e..6ef5390d4dc 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1334,6 +1334,8 @@ export default {
             updateAddress: 'Update address',
         },
         cardDetailsLoadingFailure: 'An error occurred while loading the card details. Please check your internet connection and try again.',
+        validateCardTitle: "Let's make sure it's you",
+        enterMagicCode: ({contactMethod}: EnterMagicCodeParams) => `Please enter the magic code sent to ${contactMethod} to view your card details`,
     },
     workflowsPage: {
         workflowTitle: 'Spend',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index bb19d878754..e4ebf709baf 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1340,6 +1340,8 @@ export default {
             updateAddress: 'Actualizar dirección',
         },
         cardDetailsLoadingFailure: 'Se ha producido un error al cargar los datos de la tarjeta. Comprueba tu conexión a Internet e inténtalo de nuevo.',
+        validateCardTitle: 'Asegurémonos de que eres tú',
+        enterMagicCode: ({contactMethod}: EnterMagicCodeParams) => `Introduzca el código mágico enviado a ${contactMethod} para ver los datos de su tarjeta`,
     },
     workflowsPage: {
         workflowTitle: 'Gasto',
diff --git a/src/libs/API/parameters/RevealExpensifyCardDetailsParams.ts b/src/libs/API/parameters/RevealExpensifyCardDetailsParams.ts
index ec698fc8526..352875cf17d 100644
--- a/src/libs/API/parameters/RevealExpensifyCardDetailsParams.ts
+++ b/src/libs/API/parameters/RevealExpensifyCardDetailsParams.ts
@@ -1,3 +1,3 @@
-type RevealExpensifyCardDetailsParams = {cardID: number};
+type RevealExpensifyCardDetailsParams = {cardID: number; validateCode: string};
 
 export default RevealExpensifyCardDetailsParams;
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
index a09baf7109b..c647e5594f5 100644
--- a/src/libs/actions/Card.ts
+++ b/src/libs/actions/Card.ts
@@ -194,9 +194,9 @@ function clearCardListErrors(cardID: number) {
  *
  * @returns promise with card details object
  */
-function revealVirtualCardDetails(cardID: number): Promise<ExpensifyCardDetails> {
+function revealVirtualCardDetails(cardID: number, validateCode: string): Promise<ExpensifyCardDetails> {
     return new Promise((resolve, reject) => {
-        const parameters: RevealExpensifyCardDetailsParams = {cardID};
+        const parameters: RevealExpensifyCardDetailsParams = {cardID, validateCode};
 
         // eslint-disable-next-line rulesdir/no-api-side-effects-method
         API.makeRequestWithSideEffects(SIDE_EFFECT_REQUEST_COMMANDS.REVEAL_EXPENSIFY_CARD_DETAILS, parameters)
diff --git a/src/libs/actions/User.ts b/src/libs/actions/User.ts
index c87721728a3..355dcf93338 100644
--- a/src/libs/actions/User.ts
+++ b/src/libs/actions/User.ts
@@ -269,6 +269,17 @@ function clearContactMethod(contactMethod: string) {
     });
 }
 
+/**
+ * Clears error for a sepcific field on validate action code.
+ */
+function clearValidateCodeActionError(fieldName: string) {
+    Onyx.merge(ONYXKEYS.VALIDATE_ACTION_CODE, {
+        errorFields: {
+            [fieldName]: null,
+        },
+    });
+}
+
 /**
  * Clears any possible stored errors for a specific field on a contact method
  */
@@ -309,6 +320,16 @@ function clearUnvalidatedNewContactMethodAction() {
     });
 }
 
+/**
+ * When user adds a new contact method, they need to verify the magic code first
+ * So we add the temporary contact method to Onyx to use it later, after user verified magic code.
+ */
+function addPendingContactMethod(contactMethod: string) {
+    Onyx.merge(ONYXKEYS.PENDING_CONTACT_ACTION, {
+        contactMethod,
+    });
+}
+
 /**
  * Validates the action to add secondary contact method
  */
@@ -469,6 +490,63 @@ function addNewContactMethod(contactMethod: string, validateCode = '') {
     API.write(WRITE_COMMANDS.ADD_NEW_CONTACT_METHOD, parameters, {optimisticData, successData, failureData});
 }
 
+/**
+ * Requests a magic code to verify current user
+ */
+function requestValidateCodeAction() {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.VALIDATE_ACTION_CODE,
+            value: {
+                isLoading: true,
+                pendingFields: {
+                    actionVerified: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+                },
+                errorFields: {
+                    actionVerified: null,
+                },
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.VALIDATE_ACTION_CODE,
+            value: {
+                validateCodeSent: true,
+                isLoading: false,
+                errorFields: {
+                    actionVerified: null,
+                },
+                pendingFields: {
+                    actionVerified: null,
+                },
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.VALIDATE_ACTION_CODE,
+            value: {
+                validateCodeSent: null,
+                isLoading: false,
+                errorFields: {
+                    actionVerified: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('contacts.genericFailureMessages.requestContactMethodValidateCode'),
+                },
+                pendingFields: {
+                    actionVerified: null,
+                },
+            },
+        },
+    ];
+
+    API.write(WRITE_COMMANDS.RESEND_VALIDATE_CODE, null, {optimisticData, successData, failureData});
+}
+
 /**
  * Validates a login given an accountID and validation code
  */
@@ -1268,4 +1346,7 @@ export {
     requestRefund,
     saveNewContactMethodAndRequestValidationCode,
     clearUnvalidatedNewContactMethodAction,
+    requestValidateCodeAction,
+    addPendingContactMethod,
+    clearValidateCodeActionError,
 };
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx
index 10c1bd1fd3e..4ea878e8298 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx
@@ -1,6 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import {Str} from 'expensify-common';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx, withOnyx} from 'react-native-onyx';
@@ -13,6 +13,7 @@ import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
+import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -36,30 +37,35 @@ type NewContactMethodPageOnyxProps = {
 type NewContactMethodPageProps = NewContactMethodPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD>;
 
 function NewContactMethodPage({loginList, route}: NewContactMethodPageProps) {
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const contactMethod = account?.primaryLogin ?? '';
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const loginInputRef = useRef<AnimatedTextInputRef>(null);
+    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
     const [pendingContactAction] = useOnyx(ONYXKEYS.PENDING_CONTACT_ACTION);
+    const loginData = loginList?.[pendingContactAction?.contactMethod ?? contactMethod];
+    const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
 
     const navigateBackTo = route?.params?.backTo ?? ROUTES.SETTINGS_PROFILE;
 
     const hasFailedToSendVerificationCode = !!pendingContactAction?.errorFields?.actionVerified;
 
-    const addNewContactMethod = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM>) => {
+    const handleValidateMagicCode = useCallback((values: FormOnyxValues<typeof ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM>) => {
         const phoneLogin = LoginUtils.getPhoneLogin(values.phoneOrEmail);
         const validateIfnumber = LoginUtils.validateNumber(phoneLogin);
         const submitDetail = (validateIfnumber || values.phoneOrEmail).trim().toLowerCase();
-
-        User.saveNewContactMethodAndRequestValidationCode(submitDetail);
+        User.addPendingContactMethod(submitDetail);
+        setIsValidateCodeActionModalVisible(true);
     }, []);
 
-    useEffect(() => {
-        if (!pendingContactAction?.validateCodeSent) {
-            return;
-        }
-
-        Navigation.navigate(ROUTES.SETINGS_CONTACT_METHOD_VALIDATE_ACTION);
-    }, [pendingContactAction]);
+    const addNewContactMethod = useCallback(
+        (magicCode: string) => {
+            User.addNewContactMethod(pendingContactAction?.contactMethod ?? '', magicCode);
+            Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS.route);
+        },
+        [pendingContactAction?.contactMethod],
+    );
 
     useEffect(() => () => User.clearUnvalidatedNewContactMethodAction(), []);
 
@@ -113,7 +119,7 @@ function NewContactMethodPage({loginList, route}: NewContactMethodPageProps) {
             <FormProvider
                 formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
                 validate={validate}
-                onSubmit={addNewContactMethod}
+                onSubmit={handleValidateMagicCode}
                 submitButtonText={translate('common.add')}
                 style={[styles.flexGrow1, styles.mh5]}
             >
@@ -139,6 +145,16 @@ function NewContactMethodPage({loginList, route}: NewContactMethodPageProps) {
                     />
                 )}
             </FormProvider>
+            <ValidateCodeActionModal
+                validatePendingAction={pendingContactAction?.pendingFields?.actionVerified}
+                validateError={validateLoginError}
+                handleSubmitForm={addNewContactMethod}
+                clearError={() => User.clearContactMethodErrors(contactMethod, 'validateLogin')}
+                onClose={() => setIsValidateCodeActionModalVisible(false)}
+                isVisible={isValidateCodeActionModalVisible}
+                title={contactMethod}
+                description={translate('contacts.enterMagicCode', {contactMethod})}
+            />
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.tsx b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
index 4fec05f51e1..2de186e4dfc 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.tsx
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
@@ -2,7 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
 import CardPreview from '@components/CardPreview';
@@ -13,6 +13,7 @@ import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -81,9 +82,12 @@ function ExpensifyCardPage({
         params: {cardID = ''},
     },
 }: ExpensifyCardPageProps) {
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
+    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
+    const [currentCardID, setCurrentCardID] = useState<number>(-1);
     const shouldDisplayCardDomain = !cardList?.[cardID]?.nameValuePairs?.issuedBy || !cardList?.[cardID]?.nameValuePairs?.isVirtual;
     const domain = cardList?.[cardID]?.domainName ?? '';
     const pageTitle = shouldDisplayCardDomain ? translate('cardPage.expensifyCard') : cardList?.[cardID]?.nameValuePairs?.cardTitle ?? translate('cardPage.expensifyCard');
@@ -105,30 +109,38 @@ function ExpensifyCardPage({
     const [isCardDetailsLoading, setIsCardDetailsLoading] = useState<Record<number, boolean>>({});
     const [cardsDetailsErrors, setCardsDetailsErrors] = useState<Record<number, string>>({});
 
-    const handleRevealDetails = (revealedCardID: number) => {
+    const openValidateCodeModal = (revealedCardID: number) => {
+        setCurrentCardID(revealedCardID);
+        setIsValidateCodeActionModalVisible(true);
+    };
+
+    const handleRevealDetails = (validateCode: string) => {
         setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({
             ...prevState,
-            [revealedCardID]: true,
+            [currentCardID]: true,
         }));
         // We can't store the response in Onyx for security reasons.
         // That is why this action is handled manually and the response is stored in a local state
         // Hence eslint disable here.
         // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
-        Card.revealVirtualCardDetails(revealedCardID)
+        Card.revealVirtualCardDetails(currentCardID, validateCode)
             .then((value) => {
-                setCardsDetails((prevState: Record<number, ExpensifyCardDetails | null>) => ({...prevState, [revealedCardID]: value}));
+                setCardsDetails((prevState: Record<number, ExpensifyCardDetails | null>) => ({...prevState, [currentCardID]: value}));
                 setCardsDetailsErrors((prevState) => ({
                     ...prevState,
-                    [revealedCardID]: '',
+                    [currentCardID]: '',
                 }));
             })
             .catch((error: string) => {
                 setCardsDetailsErrors((prevState) => ({
                     ...prevState,
-                    [revealedCardID]: error,
+                    [currentCardID]: error,
                 }));
             })
-            .finally(() => setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({...prevState, [revealedCardID]: false})));
+            .finally(() => {
+                setIsCardDetailsLoading((prevState: Record<number, boolean>) => ({...prevState, [currentCardID]: false}));
+                setIsValidateCodeActionModalVisible(false);
+            });
     };
 
     const hasDetectedDomainFraud = cardsToShow?.some((card) => card?.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN);
@@ -232,7 +244,7 @@ function ExpensifyCardPage({
                                                         <Button
                                                             medium
                                                             text={translate('cardPage.cardDetails.revealDetails')}
-                                                            onPress={() => handleRevealDetails(card.cardID)}
+                                                            onPress={() => openValidateCodeModal(card.cardID)}
                                                             isDisabled={isCardDetailsLoading[card.cardID] || isOffline}
                                                             isLoading={isCardDetailsLoading[card.cardID]}
                                                         />
@@ -301,6 +313,14 @@ function ExpensifyCardPage({
                             style={[styles.mh5, styles.mb5]}
                         />
                     )}
+                    <ValidateCodeActionModal
+                        handleSubmitForm={handleRevealDetails}
+                        clearError={() => {}}
+                        onClose={() => setIsValidateCodeActionModalVisible(false)}
+                        isVisible={isValidateCodeActionModalVisible}
+                        title={translate('cardPage.validateCardTitle')}
+                        description={translate('cardPage.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}
+                    />
                 </>
             )}
         </ScreenWrapper>
diff --git a/src/types/onyx/ValidateMagicCodeAction.ts b/src/types/onyx/ValidateMagicCodeAction.ts
new file mode 100644
index 00000000000..a1780b471fc
--- /dev/null
+++ b/src/types/onyx/ValidateMagicCodeAction.ts
@@ -0,0 +1,18 @@
+import type * as OnyxCommon from './OnyxCommon';
+
+/** Model of action to receive magic code */
+type ValidateMagicCodeAction = OnyxCommon.OnyxValueWithOfflineFeedback<
+    {
+        /** Whether the user validation code was sent */
+        validateCodeSent?: boolean;
+
+        /** Field-specific server side errors keyed by microtime */
+        errorFields?: OnyxCommon.ErrorFields;
+
+        /** Whether the magic code is sending */
+        isLoading?: boolean;
+    },
+    'actionVerified'
+>;
+
+export default ValidateMagicCodeAction;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 0073e47bb65..c651d53b9cf 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -96,6 +96,7 @@ import type User from './User';
 import type UserLocation from './UserLocation';
 import type UserMetadata from './UserMetadata';
 import type UserWallet from './UserWallet';
+import type ValidateMagicCodeAction from './ValidateMagicCodeAction';
 import type WalletAdditionalDetails from './WalletAdditionalDetails';
 import type {WalletAdditionalQuestionDetails} from './WalletAdditionalDetails';
 import type WalletOnfido from './WalletOnfido';
@@ -228,4 +229,5 @@ export type {
     WorkspaceTooltip,
     CardFeeds,
     ImportedSpreadsheet,
+    ValidateMagicCodeAction,
 };