diff --git a/src/CONST.ts b/src/CONST.ts
index 4820bbb62b52..bbc92ddadbde 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1840,6 +1840,7 @@ const CONST = {
             DATE_OF_BIRTH: 1,
             ADDRESS: 2,
             PHONE_NUMBER: 3,
+            CONFIRM: 4,
         },
         INDEX_LIST: ['1', '2', '3', '4'],
     },
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index f70be8ff29e4..9c429dd3e909 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -1275,10 +1275,7 @@ const ROUTES = {
         route: 'restricted-action/workspace/:policyID',
         getRoute: (policyID: string) => `restricted-action/workspace/${policyID}` as const,
     },
-    MISSING_PERSONAL_DETAILS: {
-        route: 'missing-personal-details/workspace/:policyID',
-        getRoute: (policyID: string) => `missing-personal-details/workspace/${policyID}` as const,
-    },
+    MISSING_PERSONAL_DETAILS: 'missing-personal-details',
     POLICY_ACCOUNTING_NETSUITE_SUBSIDIARY_SELECTOR: {
         route: 'settings/workspaces/:policyID/accounting/netsuite/subsidiary-selector',
         getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/netsuite/subsidiary-selector` as const,
diff --git a/src/components/ReportActionItem/IssueCardMessage.tsx b/src/components/ReportActionItem/IssueCardMessage.tsx
index d12a20c4598d..c1f4e534a3c1 100644
--- a/src/components/ReportActionItem/IssueCardMessage.tsx
+++ b/src/components/ReportActionItem/IssueCardMessage.tsx
@@ -16,17 +16,15 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 type IssueCardMessageProps = {
     action: OnyxEntry<ReportAction>;
-
-    policyID: string | undefined;
 };
 
-function IssueCardMessage({action, policyID}: IssueCardMessageProps) {
+function IssueCardMessage({action}: IssueCardMessageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
     const [session] = useOnyx(ONYXKEYS.SESSION);
 
-    const assigneeAccountID = (action?.originalMessage as IssueNewCardOriginalMessage)?.assigneeAccountID;
+    const assigneeAccountID = (ReportActionsUtils.getOriginalMessage(action) as IssueNewCardOriginalMessage)?.assigneeAccountID;
 
     const missingDetails =
         !privatePersonalDetails?.legalFirstName ||
@@ -45,12 +43,7 @@ function IssueCardMessage({action, policyID}: IssueCardMessageProps) {
             <RenderHTML html={`<muted-text>${ReportActionsUtils.getCardIssuedMessage(action, true)}</muted-text>`} />
             {shouldShowAddMissingDetailsButton && (
                 <Button
-                    onPress={() => {
-                        if (!policyID) {
-                            return;
-                        }
-                        Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS.getRoute(policyID));
-                    }}
+                    onPress={() => Navigation.navigate(ROUTES.MISSING_PERSONAL_DETAILS)}
                     success
                     style={[styles.alignSelfStart, styles.mt3]}
                     text={translate('workspace.expensifyCard.addShippingDetails')}
diff --git a/src/hooks/usePersonalDetailsFormSubmit.ts b/src/hooks/usePersonalDetailsFormSubmit.ts
new file mode 100644
index 000000000000..4c86958d085f
--- /dev/null
+++ b/src/hooks/usePersonalDetailsFormSubmit.ts
@@ -0,0 +1,27 @@
+import type {FormOnyxKeys} from '@components/Form/types';
+import type {OnyxFormKey} from '@src/ONYXKEYS';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useStepFormSubmit from './useStepFormSubmit';
+import type {SubStepProps} from './useSubStep/types';
+
+type UsePersonalDetailsFormSubmitParams = Pick<SubStepProps, 'onNext'> & {
+    formId?: OnyxFormKey;
+    fieldIds: Array<FormOnyxKeys<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>>;
+    shouldSaveDraft: boolean;
+};
+
+/**
+ * Hook for handling submit method in Missing Personal Details substeps.
+ * When user is in editing mode, we should save values only when user confirms the change
+ * @param onNext - callback
+ * @param fieldIds - field IDs for particular step
+ * @param shouldSaveDraft - if we should save draft values
+ */
+export default function usePersonalDetailsFormSubmit({onNext, fieldIds, shouldSaveDraft}: UsePersonalDetailsFormSubmitParams) {
+    return useStepFormSubmit<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>({
+        formId: ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM,
+        onNext,
+        fieldIds,
+        shouldSaveDraft,
+    });
+}
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 5328fcc2c7c2..114e89ff2bf5 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -1182,7 +1182,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                 },
                 [SCREENS.RIGHT_MODAL.MISSING_PERSONAL_DETAILS]: {
                     screens: {
-                        [SCREENS.MISSING_PERSONAL_DETAILS_ROOT]: ROUTES.MISSING_PERSONAL_DETAILS.route,
+                        [SCREENS.MISSING_PERSONAL_DETAILS_ROOT]: ROUTES.MISSING_PERSONAL_DETAILS,
                     },
                 },
                 [SCREENS.RIGHT_MODAL.DEBUG]: {
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index a3a1092a54a0..b698681966e2 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -1496,9 +1496,7 @@ type RestrictedActionParamList = {
 };
 
 type MissingPersonalDetailsParamList = {
-    [SCREENS.MISSING_PERSONAL_DETAILS_ROOT]: {
-        policyID: string;
-    };
+    [SCREENS.MISSING_PERSONAL_DETAILS_ROOT]: undefined;
 };
 
 type DebugParamList = {
diff --git a/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx b/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx
new file mode 100644
index 000000000000..79fd039a5d2a
--- /dev/null
+++ b/src/pages/MissingPersonalDetails/MissingPersonalDetailsContent.tsx
@@ -0,0 +1,120 @@
+import React, {useCallback, useMemo, useRef} from 'react';
+import type {ForwardedRef} from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
+import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useSubStep from '@hooks/useSubStep';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as FormActions from '@libs/actions/FormActions';
+import Navigation from '@libs/Navigation/Navigation';
+import * as PersonalDetails from '@userActions/PersonalDetails';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {PersonalDetailsForm} from '@src/types/form';
+import type {CardList, PrivatePersonalDetails} from '@src/types/onyx';
+import Address from './substeps/Address';
+import Confirmation from './substeps/Confirmation';
+import DateOfBirth from './substeps/DateOfBirth';
+import LegalName from './substeps/LegalName';
+import PhoneNumber from './substeps/PhoneNumber';
+import type {CustomSubStepProps} from './types';
+import {getInitialSubstep, getSubstepValues} from './utils';
+
+type MissingPersonalDetailsContentProps = {
+    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
+    cardList: OnyxEntry<CardList>;
+    draftValues: OnyxEntry<PersonalDetailsForm>;
+};
+
+const formSteps = [LegalName, DateOfBirth, Address, PhoneNumber, Confirmation];
+
+function MissingPersonalDetailsContent({privatePersonalDetails, cardList, draftValues}: MissingPersonalDetailsContentProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
+
+    const values = useMemo(() => getSubstepValues(privatePersonalDetails, draftValues), [privatePersonalDetails, draftValues]);
+
+    const startFrom = useMemo(() => getInitialSubstep(values), [values]);
+
+    const firstUnissuedCard = useMemo(() => Object.values(cardList ?? {}).find((card) => card.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED), [cardList]);
+
+    const handleFinishStep = useCallback(() => {
+        if (!values) {
+            return;
+        }
+        PersonalDetails.updatePersonalDetailsAndShipExpensifyCard(values, firstUnissuedCard?.cardID ?? 0);
+        FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
+        Navigation.goBack();
+    }, [firstUnissuedCard?.cardID, values]);
+
+    const {
+        componentToRender: SubStep,
+        isEditing,
+        nextScreen,
+        prevScreen,
+        screenIndex,
+        moveTo,
+        goToTheLastStep,
+    } = useSubStep<CustomSubStepProps>({bodyContent: formSteps, startFrom, onFinished: handleFinishStep});
+
+    const handleBackButtonPress = () => {
+        if (isEditing) {
+            goToTheLastStep();
+            return;
+        }
+
+        // Clicking back on the first screen should dismiss the modal
+        if (screenIndex === CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.LEGAL_NAME) {
+            FormActions.clearDraftValues(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM);
+            Navigation.goBack();
+            return;
+        }
+        ref.current?.movePrevious();
+        prevScreen();
+    };
+
+    const handleNextScreen = useCallback(() => {
+        if (isEditing) {
+            goToTheLastStep();
+            return;
+        }
+        ref.current?.moveNext();
+        nextScreen();
+    }, [goToTheLastStep, isEditing, nextScreen]);
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            testID={MissingPersonalDetailsContent.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('workspace.expensifyCard.addShippingDetails')}
+                onBackButtonPress={handleBackButtonPress}
+            />
+            <View style={[styles.ph5, styles.mb3, styles.mt3, {height: CONST.NETSUITE_FORM_STEPS_HEADER_HEIGHT}]}>
+                <InteractiveStepSubHeader
+                    ref={ref}
+                    startStepIndex={startFrom}
+                    stepNames={CONST.MISSING_PERSONAL_DETAILS_INDEXES.INDEX_LIST}
+                />
+            </View>
+            <SubStep
+                isEditing={isEditing}
+                onNext={handleNextScreen}
+                onMove={moveTo}
+                screenIndex={screenIndex}
+                personalDetailsValues={values}
+            />
+        </ScreenWrapper>
+    );
+}
+
+MissingPersonalDetailsContent.displayName = 'MissingPersonalDetailsContent';
+
+export default MissingPersonalDetailsContent;
diff --git a/src/pages/MissingPersonalDetails/index.tsx b/src/pages/MissingPersonalDetails/index.tsx
index cb565de6a001..5c4f94b09b28 100644
--- a/src/pages/MissingPersonalDetails/index.tsx
+++ b/src/pages/MissingPersonalDetails/index.tsx
@@ -1,214 +1,27 @@
-/* eslint-disable no-case-declarations */
-import {Str} from 'expensify-common';
-import React, {useCallback, useMemo, useRef} from 'react';
-import type {ForwardedRef} from 'react';
-import {View} from 'react-native';
+import React from 'react';
 import {useOnyx} from 'react-native-onyx';
-import FormProvider from '@components/Form/FormProvider';
-import type {FormInputErrors, FormOnyxValues, FormRef} from '@components/Form/types';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import type {InteractiveStepSubHeaderHandle} from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
-import useLocalize from '@hooks/useLocalize';
-import useSubStep from '@hooks/useSubStep';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as ErrorUtils from '@libs/ErrorUtils';
-import * as LoginUtils from '@libs/LoginUtils';
-import Navigation from '@libs/Navigation/Navigation';
-import * as PhoneNumberUtils from '@libs/PhoneNumber';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import * as PersonalDetails from '@userActions/PersonalDetails';
-import CONST from '@src/CONST';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import ONYXKEYS from '@src/ONYXKEYS';
-import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
-import Address from './substeps/Address';
-import DateOfBirth from './substeps/DateOfBirth';
-import LegalName from './substeps/LegalName';
-import PhoneNumber from './substeps/PhoneNumber';
-import type {CountryZipRegex, CustomSubStepProps} from './types';
-
-const formSteps = [LegalName, DateOfBirth, Address, PhoneNumber];
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import MissingPersonalDetailsContent from './MissingPersonalDetailsContent';
 
 function MissingPersonalDetails() {
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-    const ref: ForwardedRef<InteractiveStepSubHeaderHandle> = useRef(null);
-    const formRef = useRef<FormRef | null>(null);
-    const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
-    const [cardList] = useOnyx(ONYXKEYS.CARD_LIST);
-
-    const firstUnissuedCard = useMemo(() => Object.values(cardList ?? {}).find((card) => card.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED), [cardList]);
-
-    const handleFinishStep = useCallback(() => {
-        Navigation.goBack();
-    }, []);
-
-    const {
-        componentToRender: SubStep,
-        isEditing,
-        nextScreen,
-        prevScreen,
-        screenIndex,
-        moveTo,
-        goToTheLastStep,
-    } = useSubStep<CustomSubStepProps>({bodyContent: formSteps, startFrom: CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.LEGAL_NAME, onFinished: handleFinishStep});
-
-    const handleBackButtonPress = () => {
-        if (isEditing) {
-            goToTheLastStep();
-            return;
-        }
-
-        // Clicking back on the first screen should dismiss the modal
-        if (screenIndex === CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.LEGAL_NAME) {
-            Navigation.goBack();
-            return;
-        }
-        ref.current?.movePrevious();
-        formRef.current?.resetErrors();
-        prevScreen();
-    };
+    const [privatePersonalDetails, privatePersonalDetailsMetadata] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
+    const [cardList, cardListMetadata] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [draftValues, draftValuesMetadata] = useOnyx(ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM_DRAFT);
 
-    const handleNextScreen = useCallback(() => {
-        if (isEditing) {
-            goToTheLastStep();
-            return;
-        }
-        ref.current?.moveNext();
-        nextScreen();
-    }, [goToTheLastStep, isEditing, nextScreen]);
+    const isLoading = isLoadingOnyxValue(privatePersonalDetailsMetadata, cardListMetadata, draftValuesMetadata);
 
-    const validate = useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
-            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
-            switch (screenIndex) {
-                case CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.LEGAL_NAME:
-                    if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.LEGAL_FIRST_NAME])) {
-                        errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('common.error.fieldRequired');
-                    } else if (!ValidationUtils.isValidLegalName(values[INPUT_IDS.LEGAL_FIRST_NAME])) {
-                        errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('privatePersonalDetails.error.hasInvalidCharacter');
-                    } else if (values[INPUT_IDS.LEGAL_FIRST_NAME].length > CONST.LEGAL_NAME.MAX_LENGTH) {
-                        errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('common.error.characterLimitExceedCounter', {
-                            length: values[INPUT_IDS.LEGAL_FIRST_NAME].length,
-                            limit: CONST.LEGAL_NAME.MAX_LENGTH,
-                        });
-                    }
-                    if (ValidationUtils.doesContainReservedWord(values[INPUT_IDS.LEGAL_FIRST_NAME], CONST.DISPLAY_NAME.RESERVED_NAMES)) {
-                        ErrorUtils.addErrorMessage(errors, INPUT_IDS.LEGAL_FIRST_NAME, translate('personalDetails.error.containsReservedWord'));
-                    }
-                    if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.LEGAL_LAST_NAME])) {
-                        errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('common.error.fieldRequired');
-                    } else if (!ValidationUtils.isValidLegalName(values[INPUT_IDS.LEGAL_LAST_NAME])) {
-                        errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('privatePersonalDetails.error.hasInvalidCharacter');
-                    } else if (values[INPUT_IDS.LEGAL_LAST_NAME].length > CONST.LEGAL_NAME.MAX_LENGTH) {
-                        errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('common.error.characterLimitExceedCounter', {
-                            length: values[INPUT_IDS.LEGAL_LAST_NAME].length,
-                            limit: CONST.LEGAL_NAME.MAX_LENGTH,
-                        });
-                    }
-                    if (ValidationUtils.doesContainReservedWord(values[INPUT_IDS.LEGAL_LAST_NAME], CONST.DISPLAY_NAME.RESERVED_NAMES)) {
-                        ErrorUtils.addErrorMessage(errors, INPUT_IDS.LEGAL_LAST_NAME, translate('personalDetails.error.containsReservedWord'));
-                    }
-                    return errors;
-                case CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.DATE_OF_BIRTH:
-                    if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.DATE_OF_BIRTH])) {
-                        errors[INPUT_IDS.DATE_OF_BIRTH] = translate('common.error.fieldRequired');
-                    } else if (!ValidationUtils.isValidPastDate(values[INPUT_IDS.DATE_OF_BIRTH]) || !ValidationUtils.meetsMaximumAgeRequirement(values[INPUT_IDS.DATE_OF_BIRTH])) {
-                        errors[INPUT_IDS.DATE_OF_BIRTH] = translate('bankAccount.error.dob');
-                    }
-                    return errors;
-                case CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.ADDRESS:
-                    const addressRequiredFields = [INPUT_IDS.ADDRESS_LINE_1, INPUT_IDS.CITY, INPUT_IDS.COUNTRY, INPUT_IDS.STATE] as const;
-                    addressRequiredFields.forEach((fieldKey) => {
-                        const fieldValue = values[fieldKey] ?? '';
-                        if (ValidationUtils.isRequiredFulfilled(fieldValue)) {
-                            return;
-                        }
-                        errors[fieldKey] = translate('common.error.fieldRequired');
-                    });
-
-                    // If no country is selected, default value is an empty string and there's no related regex data so we default to an empty object
-                    const countryRegexDetails = (values.country ? CONST.COUNTRY_ZIP_REGEX_DATA?.[values.country] : {}) as CountryZipRegex;
-
-                    // The postal code system might not exist for a country, so no regex either for them.
-                    const countrySpecificZipRegex = countryRegexDetails?.regex;
-                    const countryZipFormat = countryRegexDetails?.samples ?? '';
-                    if (countrySpecificZipRegex) {
-                        if (!countrySpecificZipRegex.test(values[INPUT_IDS.ZIP_POST_CODE]?.trim().toUpperCase())) {
-                            if (ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.ZIP_POST_CODE]?.trim())) {
-                                errors[INPUT_IDS.ZIP_POST_CODE] = translate('privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat});
-                            } else {
-                                errors[INPUT_IDS.ZIP_POST_CODE] = translate('common.error.fieldRequired');
-                            }
-                        }
-                    } else if (!CONST.GENERIC_ZIP_CODE_REGEX.test(values[INPUT_IDS.ZIP_POST_CODE]?.trim()?.toUpperCase() ?? '')) {
-                        errors[INPUT_IDS.ZIP_POST_CODE] = translate('privatePersonalDetails.error.incorrectZipFormat');
-                    }
-                    return errors;
-                case CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.PHONE_NUMBER:
-                    if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.PHONE_NUMBER])) {
-                        errors[INPUT_IDS.PHONE_NUMBER] = translate('common.error.fieldRequired');
-                    }
-                    const phoneNumber = LoginUtils.appendCountryCode(values[INPUT_IDS.PHONE_NUMBER]);
-                    const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumber);
-                    if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumber.slice(0))) {
-                        errors[INPUT_IDS.PHONE_NUMBER] = translate('bankAccount.error.phoneNumber');
-                    }
-                    return errors;
-                default:
-                    return errors;
-            }
-        },
-        [screenIndex, translate],
-    );
-
-    const updatePersonalDetails = useCallback(
-        (formValues: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>) => {
-            PersonalDetails.updatePersonalDetailsAndShipExpensifyCard(formValues, firstUnissuedCard?.cardID ?? 0);
-            nextScreen();
-        },
-        [nextScreen, firstUnissuedCard],
-    );
+    if (isLoading) {
+        return <FullScreenLoadingIndicator />;
+    }
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
-            testID={MissingPersonalDetails.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('workspace.expensifyCard.addShippingDetails')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb3, styles.mt3, {height: CONST.NETSUITE_FORM_STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    ref={ref}
-                    startStepIndex={CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.LEGAL_NAME}
-                    stepNames={CONST.MISSING_PERSONAL_DETAILS_INDEXES.INDEX_LIST}
-                />
-            </View>
-            <FormProvider
-                ref={formRef}
-                formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
-                submitButtonText={screenIndex === formSteps.length - 1 ? translate('common.confirm') : translate('common.next')}
-                onSubmit={screenIndex === formSteps.length - 1 ? updatePersonalDetails : handleNextScreen}
-                validate={validate}
-                style={[styles.flexGrow1, styles.mt3]}
-                submitButtonStyles={[styles.ph5, styles.mb0]}
-                enabledWhenOffline
-            >
-                <View style={styles.ph5}>
-                    <SubStep
-                        isEditing={isEditing}
-                        onNext={handleNextScreen}
-                        onMove={moveTo}
-                        screenIndex={screenIndex}
-                        privatePersonalDetails={privatePersonalDetails}
-                    />
-                </View>
-            </FormProvider>
-        </ScreenWrapper>
+        <MissingPersonalDetailsContent
+            privatePersonalDetails={privatePersonalDetails}
+            cardList={cardList}
+            draftValues={draftValues}
+        />
     );
 }
 
diff --git a/src/pages/MissingPersonalDetails/substeps/Address.tsx b/src/pages/MissingPersonalDetails/substeps/Address.tsx
index 4e12ffa86542..c61dc8b2dcbe 100644
--- a/src/pages/MissingPersonalDetails/substeps/Address.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/Address.tsx
@@ -1,43 +1,41 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
 import CountryPicker from '@components/CountryPicker';
+import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import StatePicker from '@components/StatePicker';
 import type {State} from '@components/StateSelector';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import usePersonalDetailsFormSubmit from '@hooks/usePersonalDetailsFormSubmit';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import type {CountryZipRegex, CustomSubStepProps} from '@pages/MissingPersonalDetails/types';
 import CONST from '@src/CONST';
 import type {Country} from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
 import type {Address} from '@src/types/onyx/PrivatePersonalDetails';
 
-function AddressStep({privatePersonalDetails}: CustomSubStepProps) {
+const STEP_FIELDS = [INPUT_IDS.ADDRESS_LINE_1, INPUT_IDS.ADDRESS_LINE_2, INPUT_IDS.CITY, INPUT_IDS.STATE, INPUT_IDS.ZIP_POST_CODE, INPUT_IDS.COUNTRY];
+
+function AddressStep({isEditing, onNext, personalDetailsValues}: CustomSubStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const address = useMemo(() => PersonalDetailsUtils.getCurrentAddress(privatePersonalDetails), [privatePersonalDetails]);
 
-    const {street} = address ?? {};
-    const [street1, street2] = street ? street.split('\n') : [undefined, undefined];
-    const [currentCountry, setCurrentCountry] = useState(address?.country);
-    const [state, setState] = useState(address?.state);
-    const [city, setCity] = useState(address?.city);
-    const [zipcode, setZipcode] = useState(address?.zip);
+    const [currentCountry, setCurrentCountry] = useState(personalDetailsValues[INPUT_IDS.COUNTRY]);
+    const [state, setState] = useState(personalDetailsValues[INPUT_IDS.STATE]);
+    const [city, setCity] = useState(personalDetailsValues[INPUT_IDS.CITY]);
+    const [zipcode, setZipcode] = useState(personalDetailsValues[INPUT_IDS.ZIP_POST_CODE]);
 
-    useEffect(() => {
-        if (!address) {
-            return;
-        }
-        setState(address.state);
-        setCurrentCountry(address.country);
-        setCity(address.city);
-        setZipcode(address.zip);
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [address?.state, address?.country, address?.city, address?.zip]);
+    const handleSubmit = usePersonalDetailsFormSubmit({
+        fieldIds: STEP_FIELDS,
+        onNext,
+        shouldSaveDraft: true,
+    });
 
     const handleAddressChange = useCallback((value: unknown, key: unknown) => {
         const addressPart = value as string;
@@ -73,98 +71,141 @@ function AddressStep({privatePersonalDetails}: CustomSubStepProps) {
 
     const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});
 
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
+            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
+            const addressRequiredFields = [INPUT_IDS.ADDRESS_LINE_1, INPUT_IDS.CITY, INPUT_IDS.COUNTRY, INPUT_IDS.STATE] as const;
+            addressRequiredFields.forEach((fieldKey) => {
+                const fieldValue = values[fieldKey] ?? '';
+                if (ValidationUtils.isRequiredFulfilled(fieldValue)) {
+                    return;
+                }
+                errors[fieldKey] = translate('common.error.fieldRequired');
+            });
+
+            // If no country is selected, default value is an empty string and there's no related regex data so we default to an empty object
+            const countryRegexDetails = (values.country ? CONST.COUNTRY_ZIP_REGEX_DATA?.[values.country] : {}) as CountryZipRegex;
+
+            // The postal code system might not exist for a country, so no regex either for them.
+            const countrySpecificZipRegex = countryRegexDetails?.regex;
+            const countryZipFormat = countryRegexDetails?.samples ?? '';
+            if (countrySpecificZipRegex) {
+                if (!countrySpecificZipRegex.test(values[INPUT_IDS.ZIP_POST_CODE]?.trim().toUpperCase())) {
+                    if (ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.ZIP_POST_CODE]?.trim())) {
+                        errors[INPUT_IDS.ZIP_POST_CODE] = translate('privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat});
+                    } else {
+                        errors[INPUT_IDS.ZIP_POST_CODE] = translate('common.error.fieldRequired');
+                    }
+                }
+            } else if (!CONST.GENERIC_ZIP_CODE_REGEX.test(values[INPUT_IDS.ZIP_POST_CODE]?.trim()?.toUpperCase() ?? '')) {
+                errors[INPUT_IDS.ZIP_POST_CODE] = translate('privatePersonalDetails.error.incorrectZipFormat');
+            }
+            return errors;
+        },
+        [translate],
+    );
+
     return (
-        <>
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('privatePersonalDetails.enterAddress')}</Text>
-            <View>
-                <InputWrapper
-                    InputComponent={AddressSearch}
-                    inputID={INPUT_IDS.ADDRESS_LINE_1}
-                    label={translate('common.addressLine', {lineNumber: 1})}
-                    onValueChange={(data: unknown, key: unknown) => {
-                        handleAddressChange(data, key);
-                    }}
-                    defaultValue={street1}
-                    containerStyles={styles.mt3}
-                    renamedInputKeys={{
-                        street: INPUT_IDS.ADDRESS_LINE_1,
-                        street2: INPUT_IDS.ADDRESS_LINE_2,
-                        city: INPUT_IDS.CITY,
-                        state: INPUT_IDS.STATE,
-                        zipCode: INPUT_IDS.ZIP_POST_CODE,
-                        country: INPUT_IDS.COUNTRY as Country,
-                    }}
-                    maxInputLength={CONST.FORM_CHARACTER_LIMIT}
-                />
-            </View>
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={INPUT_IDS.ADDRESS_LINE_2}
-                label={translate('common.addressLine', {lineNumber: 2})}
-                aria-label={translate('common.addressLine', {lineNumber: 2})}
-                role={CONST.ROLE.PRESENTATION}
-                defaultValue={street2}
-                maxLength={CONST.FORM_CHARACTER_LIMIT}
-                spellCheck={false}
-                containerStyles={styles.mt6}
-            />
-            <View style={[styles.mt3, styles.mhn5]}>
+        <FormProvider
+            formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            onSubmit={handleSubmit}
+            validate={validate}
+            style={[styles.flexGrow1, styles.mt3]}
+            submitButtonStyles={[styles.ph5, styles.mb0]}
+            enabledWhenOffline
+        >
+            <View style={styles.ph5}>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('privatePersonalDetails.enterAddress')}</Text>
+                <View>
+                    <InputWrapper
+                        InputComponent={AddressSearch}
+                        inputID={INPUT_IDS.ADDRESS_LINE_1}
+                        label={translate('common.addressLine', {lineNumber: 1})}
+                        onValueChange={(data: unknown, key: unknown) => {
+                            handleAddressChange(data, key);
+                        }}
+                        defaultValue={personalDetailsValues[INPUT_IDS.ADDRESS_LINE_1]}
+                        renamedInputKeys={{
+                            street: INPUT_IDS.ADDRESS_LINE_1,
+                            street2: INPUT_IDS.ADDRESS_LINE_2,
+                            city: INPUT_IDS.CITY,
+                            state: INPUT_IDS.STATE,
+                            zipCode: INPUT_IDS.ZIP_POST_CODE,
+                            country: INPUT_IDS.COUNTRY as Country,
+                        }}
+                        maxInputLength={CONST.FORM_CHARACTER_LIMIT}
+                    />
+                </View>
                 <InputWrapper
-                    InputComponent={CountryPicker}
-                    inputID={INPUT_IDS.COUNTRY}
-                    value={currentCountry}
-                    onValueChange={handleAddressChange}
+                    InputComponent={TextInput}
+                    inputID={INPUT_IDS.ADDRESS_LINE_2}
+                    label={translate('common.addressLine', {lineNumber: 2})}
+                    aria-label={translate('common.addressLine', {lineNumber: 2})}
+                    role={CONST.ROLE.PRESENTATION}
+                    defaultValue={personalDetailsValues[INPUT_IDS.ADDRESS_LINE_2]}
+                    maxLength={CONST.FORM_CHARACTER_LIMIT}
+                    spellCheck={false}
+                    containerStyles={styles.mt5}
                 />
-            </View>
-            {isUSAForm ? (
-                <View style={[styles.mt3, styles.mhn5]}>
+                <View style={[styles.mt2, styles.mhn5]}>
                     <InputWrapper
-                        InputComponent={StatePicker}
-                        inputID={INPUT_IDS.STATE}
-                        value={state as State}
+                        InputComponent={CountryPicker}
+                        inputID={INPUT_IDS.COUNTRY}
+                        value={currentCountry}
                         onValueChange={handleAddressChange}
                     />
                 </View>
-            ) : (
+                {isUSAForm ? (
+                    <View style={[styles.mt2, styles.mhn5]}>
+                        <InputWrapper
+                            InputComponent={StatePicker}
+                            inputID={INPUT_IDS.STATE}
+                            value={state as State}
+                            onValueChange={handleAddressChange}
+                        />
+                    </View>
+                ) : (
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={INPUT_IDS.STATE}
+                        label={translate('common.stateOrProvince')}
+                        aria-label={translate('common.stateOrProvince')}
+                        role={CONST.ROLE.PRESENTATION}
+                        value={state}
+                        maxLength={CONST.STATE_CHARACTER_LIMIT}
+                        spellCheck={false}
+                        onValueChange={handleAddressChange}
+                        containerStyles={styles.mt2}
+                    />
+                )}
                 <InputWrapper
                     InputComponent={TextInput}
-                    inputID={INPUT_IDS.STATE}
-                    label={translate('common.stateOrProvince')}
-                    aria-label={translate('common.stateOrProvince')}
+                    inputID={INPUT_IDS.CITY}
+                    label={translate('common.city')}
+                    aria-label={translate('common.city')}
                     role={CONST.ROLE.PRESENTATION}
-                    value={state}
-                    maxLength={CONST.STATE_CHARACTER_LIMIT}
+                    defaultValue={city}
+                    maxLength={CONST.FORM_CHARACTER_LIMIT}
                     spellCheck={false}
                     onValueChange={handleAddressChange}
-                    containerStyles={styles.mt3}
+                    containerStyles={isUSAForm ? styles.mt2 : styles.mt5}
                 />
-            )}
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={INPUT_IDS.CITY}
-                label={translate('common.city')}
-                aria-label={translate('common.city')}
-                role={CONST.ROLE.PRESENTATION}
-                defaultValue={city}
-                maxLength={CONST.FORM_CHARACTER_LIMIT}
-                spellCheck={false}
-                onValueChange={handleAddressChange}
-                containerStyles={isUSAForm ? styles.mt3 : styles.mt6}
-            />
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={INPUT_IDS.ZIP_POST_CODE}
-                label={translate('common.zipPostCode')}
-                aria-label={translate('common.zipPostCode')}
-                role={CONST.ROLE.PRESENTATION}
-                autoCapitalize="characters"
-                defaultValue={zipcode}
-                maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
-                hint={zipFormat}
-                onValueChange={handleAddressChange}
-                containerStyles={styles.mt6}
-            />
-        </>
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={INPUT_IDS.ZIP_POST_CODE}
+                    label={translate('common.zipPostCode')}
+                    aria-label={translate('common.zipPostCode')}
+                    role={CONST.ROLE.PRESENTATION}
+                    autoCapitalize="characters"
+                    defaultValue={zipcode}
+                    maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.ZIP_CODE}
+                    hint={zipFormat}
+                    onValueChange={handleAddressChange}
+                    containerStyles={styles.mt5}
+                />
+            </View>
+        </FormProvider>
     );
 }
 
diff --git a/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx b/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx
new file mode 100644
index 000000000000..b5c27912cd6a
--- /dev/null
+++ b/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type {CustomSubStepProps} from '@pages/MissingPersonalDetails/types';
+import CONST from '@src/CONST';
+import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
+
+const PERSONAL_DETAILS_STEP_INDEXES = CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING;
+
+function ConfirmationStep({personalDetailsValues: values, onNext, onMove}: CustomSubStepProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
+
+    return (
+        <SafeAreaConsumer>
+            {({safeAreaPaddingBottomStyle}) => (
+                <ScrollView
+                    style={styles.pt0}
+                    contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
+                >
+                    <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('personalInfoStep.letsDoubleCheck')}</Text>
+                    <MenuItemWithTopDescription
+                        description={translate('personalInfoStep.legalName')}
+                        title={`${values[INPUT_IDS.LEGAL_FIRST_NAME]} ${values[INPUT_IDS.LEGAL_LAST_NAME]}`}
+                        shouldShowRightIcon
+                        onPress={() => {
+                            onMove(PERSONAL_DETAILS_STEP_INDEXES.LEGAL_NAME);
+                        }}
+                    />
+                    <MenuItemWithTopDescription
+                        description={translate('common.dob')}
+                        title={values[INPUT_IDS.DATE_OF_BIRTH]}
+                        shouldShowRightIcon
+                        onPress={() => {
+                            onMove(PERSONAL_DETAILS_STEP_INDEXES.DATE_OF_BIRTH);
+                        }}
+                    />
+                    <MenuItemWithTopDescription
+                        description={translate('personalInfoStep.address')}
+                        title={`${values[INPUT_IDS.ADDRESS_LINE_1]}, ${values[INPUT_IDS.ADDRESS_LINE_2] ? `${values[INPUT_IDS.ADDRESS_LINE_2]}, ` : ''}${values[INPUT_IDS.CITY]}, ${
+                            values[INPUT_IDS.STATE]
+                        }, ${values[INPUT_IDS.ZIP_POST_CODE].toUpperCase()}, ${values[INPUT_IDS.COUNTRY]}`}
+                        shouldShowRightIcon
+                        onPress={() => {
+                            onMove(PERSONAL_DETAILS_STEP_INDEXES.ADDRESS);
+                        }}
+                    />
+                    <MenuItemWithTopDescription
+                        description={translate('common.phoneNumber')}
+                        title={values[INPUT_IDS.PHONE_NUMBER]}
+                        shouldShowRightIcon
+                        onPress={() => {
+                            onMove(PERSONAL_DETAILS_STEP_INDEXES.PHONE_NUMBER);
+                        }}
+                    />
+                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                        <Button
+                            isDisabled={isOffline}
+                            success
+                            large
+                            style={[styles.w100]}
+                            onPress={onNext}
+                            text={translate('common.confirm')}
+                        />
+                    </View>
+                </ScrollView>
+            )}
+        </SafeAreaConsumer>
+    );
+}
+
+ConfirmationStep.displayName = 'ConfirmationStep';
+
+export default ConfirmationStep;
diff --git a/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx b/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx
index 5aba7ed74ef8..f9b54c1b4758 100644
--- a/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx
@@ -1,34 +1,71 @@
 import {subYears} from 'date-fns';
-import React from 'react';
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
 import DatePicker from '@components/DatePicker';
+import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import usePersonalDetailsFormSubmit from '@hooks/usePersonalDetailsFormSubmit';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import type {CustomSubStepProps} from '@pages/MissingPersonalDetails/types';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
 
-function DateOfBirthStep({privatePersonalDetails}: CustomSubStepProps) {
+const STEP_FIELDS = [INPUT_IDS.DATE_OF_BIRTH];
+
+function DateOfBirthStep({isEditing, onNext, personalDetailsValues}: CustomSubStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
     const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
-    const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE);
+    const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
+
+    const handleSubmit = usePersonalDetailsFormSubmit({
+        fieldIds: STEP_FIELDS,
+        onNext,
+        shouldSaveDraft: true,
+    });
+
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
+            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
+            if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.DATE_OF_BIRTH])) {
+                errors[INPUT_IDS.DATE_OF_BIRTH] = translate('common.error.fieldRequired');
+            } else if (!ValidationUtils.isValidPastDate(values[INPUT_IDS.DATE_OF_BIRTH]) || !ValidationUtils.meetsMaximumAgeRequirement(values[INPUT_IDS.DATE_OF_BIRTH])) {
+                errors[INPUT_IDS.DATE_OF_BIRTH] = translate('bankAccount.error.dob');
+            }
+            return errors;
+        },
+        [translate],
+    );
 
     return (
-        <>
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('privatePersonalDetails.enterDateOfBirth')}</Text>
-            <InputWrapper
-                InputComponent={DatePicker}
-                inputID={INPUT_IDS.DATE_OF_BIRTH}
-                label={translate('common.dob')}
-                placeholder={translate('common.dateFormat')}
-                defaultValue={privatePersonalDetails?.dob}
-                minDate={minDate}
-                maxDate={maxDate}
-            />
-        </>
+        <FormProvider
+            formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            onSubmit={handleSubmit}
+            validate={validate}
+            style={[styles.flexGrow1, styles.mt3]}
+            submitButtonStyles={[styles.ph5, styles.mb0]}
+            enabledWhenOffline
+        >
+            <View style={styles.ph5}>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('privatePersonalDetails.enterDateOfBirth')}</Text>
+                <InputWrapper
+                    InputComponent={DatePicker}
+                    inputID={INPUT_IDS.DATE_OF_BIRTH}
+                    label={translate('common.dob')}
+                    placeholder={translate('common.dateFormat')}
+                    defaultValue={personalDetailsValues[INPUT_IDS.DATE_OF_BIRTH]}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                />
+            </View>
+        </FormProvider>
     );
 }
 
diff --git a/src/pages/MissingPersonalDetails/substeps/LegalName.tsx b/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
index 8b88bee4337d..01d4f52dee7d 100644
--- a/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
@@ -1,46 +1,104 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import usePersonalDetailsFormSubmit from '@hooks/usePersonalDetailsFormSubmit';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import type {CustomSubStepProps} from '@pages/MissingPersonalDetails/types';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
 
-function LegalNameStep({privatePersonalDetails}: CustomSubStepProps) {
+const STEP_FIELDS = [INPUT_IDS.LEGAL_FIRST_NAME, INPUT_IDS.LEGAL_LAST_NAME];
+
+function LegalNameStep({isEditing, onNext, personalDetailsValues}: CustomSubStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
+            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
+            if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.LEGAL_FIRST_NAME])) {
+                errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('common.error.fieldRequired');
+            } else if (!ValidationUtils.isValidLegalName(values[INPUT_IDS.LEGAL_FIRST_NAME])) {
+                errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('privatePersonalDetails.error.hasInvalidCharacter');
+            } else if (values[INPUT_IDS.LEGAL_FIRST_NAME].length > CONST.LEGAL_NAME.MAX_LENGTH) {
+                errors[INPUT_IDS.LEGAL_FIRST_NAME] = translate('common.error.characterLimitExceedCounter', {
+                    length: values[INPUT_IDS.LEGAL_FIRST_NAME].length,
+                    limit: CONST.LEGAL_NAME.MAX_LENGTH,
+                });
+            }
+            if (ValidationUtils.doesContainReservedWord(values[INPUT_IDS.LEGAL_FIRST_NAME], CONST.DISPLAY_NAME.RESERVED_NAMES)) {
+                ErrorUtils.addErrorMessage(errors, INPUT_IDS.LEGAL_FIRST_NAME, translate('personalDetails.error.containsReservedWord'));
+            }
+            if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.LEGAL_LAST_NAME])) {
+                errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('common.error.fieldRequired');
+            } else if (!ValidationUtils.isValidLegalName(values[INPUT_IDS.LEGAL_LAST_NAME])) {
+                errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('privatePersonalDetails.error.hasInvalidCharacter');
+            } else if (values[INPUT_IDS.LEGAL_LAST_NAME].length > CONST.LEGAL_NAME.MAX_LENGTH) {
+                errors[INPUT_IDS.LEGAL_LAST_NAME] = translate('common.error.characterLimitExceedCounter', {
+                    length: values[INPUT_IDS.LEGAL_LAST_NAME].length,
+                    limit: CONST.LEGAL_NAME.MAX_LENGTH,
+                });
+            }
+            if (ValidationUtils.doesContainReservedWord(values[INPUT_IDS.LEGAL_LAST_NAME], CONST.DISPLAY_NAME.RESERVED_NAMES)) {
+                ErrorUtils.addErrorMessage(errors, INPUT_IDS.LEGAL_LAST_NAME, translate('personalDetails.error.containsReservedWord'));
+            }
+            return errors;
+        },
+        [translate],
+    );
+
+    const handleSubmit = usePersonalDetailsFormSubmit({
+        fieldIds: STEP_FIELDS,
+        onNext,
+        shouldSaveDraft: true,
+    });
+
     return (
-        <>
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('privatePersonalDetails.enterLegalName')}</Text>
-            <View style={[styles.flex2, styles.mb6]}>
-                <InputWrapper
-                    InputComponent={TextInput}
-                    inputID={INPUT_IDS.LEGAL_FIRST_NAME}
-                    name="lfname"
-                    label={translate('privatePersonalDetails.legalFirstName')}
-                    aria-label={translate('privatePersonalDetails.legalFirstName')}
-                    role={CONST.ROLE.PRESENTATION}
-                    defaultValue={privatePersonalDetails?.legalFirstName}
-                    spellCheck={false}
-                />
-            </View>
-            <View style={[styles.flex2, styles.mb6]}>
-                <InputWrapper
-                    InputComponent={TextInput}
-                    inputID={INPUT_IDS.LEGAL_LAST_NAME}
-                    name="llname"
-                    label={translate('privatePersonalDetails.legalLastName')}
-                    aria-label={translate('privatePersonalDetails.legalLastName')}
-                    role={CONST.ROLE.PRESENTATION}
-                    defaultValue={privatePersonalDetails?.legalLastName}
-                    spellCheck={false}
-                />
+        <FormProvider
+            formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            onSubmit={handleSubmit}
+            validate={validate}
+            style={[styles.flexGrow1, styles.mt3]}
+            submitButtonStyles={[styles.ph5, styles.mb0]}
+            enabledWhenOffline
+        >
+            <View style={styles.ph5}>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('privatePersonalDetails.enterLegalName')}</Text>
+                <View style={[styles.flex2, styles.mb5]}>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={INPUT_IDS.LEGAL_FIRST_NAME}
+                        name="lfname"
+                        label={translate('privatePersonalDetails.legalFirstName')}
+                        aria-label={translate('privatePersonalDetails.legalFirstName')}
+                        role={CONST.ROLE.PRESENTATION}
+                        defaultValue={personalDetailsValues[INPUT_IDS.LEGAL_FIRST_NAME]}
+                        spellCheck={false}
+                    />
+                </View>
+                <View style={[styles.flex2, styles.mb5]}>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={INPUT_IDS.LEGAL_LAST_NAME}
+                        name="llname"
+                        label={translate('privatePersonalDetails.legalLastName')}
+                        aria-label={translate('privatePersonalDetails.legalLastName')}
+                        role={CONST.ROLE.PRESENTATION}
+                        defaultValue={personalDetailsValues[INPUT_IDS.LEGAL_LAST_NAME]}
+                        spellCheck={false}
+                    />
+                </View>
             </View>
-        </>
+        </FormProvider>
     );
 }
 
diff --git a/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx b/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx
index d336e15dd6c2..0ca220cf6e22 100644
--- a/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx
@@ -1,31 +1,73 @@
-import React from 'react';
+import {Str} from 'expensify-common';
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import usePersonalDetailsFormSubmit from '@hooks/usePersonalDetailsFormSubmit';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as LoginUtils from '@libs/LoginUtils';
+import * as PhoneNumberUtils from '@libs/PhoneNumber';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import type {CustomSubStepProps} from '@pages/MissingPersonalDetails/types';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
 
-function PhoneNumberStep({privatePersonalDetails}: CustomSubStepProps) {
+const STEP_FIELDS = [INPUT_IDS.PHONE_NUMBER];
+
+function PhoneNumberStep({isEditing, onNext, personalDetailsValues}: CustomSubStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const handleSubmit = usePersonalDetailsFormSubmit({
+        fieldIds: STEP_FIELDS,
+        onNext,
+        shouldSaveDraft: true,
+    });
+
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
+            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
+            if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.PHONE_NUMBER])) {
+                errors[INPUT_IDS.PHONE_NUMBER] = translate('common.error.fieldRequired');
+            }
+            const phoneNumber = LoginUtils.appendCountryCode(values[INPUT_IDS.PHONE_NUMBER]);
+            const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumber);
+            if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumber.slice(0))) {
+                errors[INPUT_IDS.PHONE_NUMBER] = translate('bankAccount.error.phoneNumber');
+            }
+            return errors;
+        },
+        [translate],
+    );
+
     return (
-        <>
-            <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('privatePersonalDetails.enterPhoneNumber')}</Text>
-            <InputWrapper
-                InputComponent={TextInput}
-                inputID={INPUT_IDS.PHONE_NUMBER}
-                label={translate('common.phoneNumber')}
-                aria-label={translate('common.phoneNumber')}
-                role={CONST.ROLE.PRESENTATION}
-                inputMode={CONST.INPUT_MODE.TEL}
-                defaultValue={privatePersonalDetails?.phoneNumber}
-                containerStyles={[styles.mt6]}
-            />
-        </>
+        <FormProvider
+            formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            onSubmit={handleSubmit}
+            validate={validate}
+            style={[styles.flexGrow1, styles.mt3]}
+            submitButtonStyles={[styles.ph5, styles.mb0]}
+            enabledWhenOffline
+        >
+            <View style={styles.ph5}>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('privatePersonalDetails.enterPhoneNumber')}</Text>
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={INPUT_IDS.PHONE_NUMBER}
+                    label={translate('common.phoneNumber')}
+                    aria-label={translate('common.phoneNumber')}
+                    role={CONST.ROLE.PRESENTATION}
+                    inputMode={CONST.INPUT_MODE.TEL}
+                    defaultValue={personalDetailsValues[INPUT_IDS.PHONE_NUMBER]}
+                />
+            </View>
+        </FormProvider>
     );
 }
 
diff --git a/src/pages/MissingPersonalDetails/types.ts b/src/pages/MissingPersonalDetails/types.ts
index 9a9963cc628a..dc0bd30692ef 100644
--- a/src/pages/MissingPersonalDetails/types.ts
+++ b/src/pages/MissingPersonalDetails/types.ts
@@ -1,10 +1,9 @@
-import type {OnyxEntry} from 'react-native-onyx';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import type {PrivatePersonalDetails} from '@src/types/onyx';
+import type {PersonalDetailsForm} from '@src/types/form';
 
 type CustomSubStepProps = SubStepProps & {
-    /** User's private personal details */
-    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
+    /** User's personal details values */
+    personalDetailsValues: PersonalDetailsForm;
 };
 
 type CountryZipRegex = {
diff --git a/src/pages/MissingPersonalDetails/utils.ts b/src/pages/MissingPersonalDetails/utils.ts
new file mode 100644
index 000000000000..9314d59c1683
--- /dev/null
+++ b/src/pages/MissingPersonalDetails/utils.ts
@@ -0,0 +1,48 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import CONST from '@src/CONST';
+import type {PersonalDetailsForm} from '@src/types/form';
+import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
+import type {PrivatePersonalDetails} from '@src/types/onyx';
+
+function getSubstepValues(privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>, personalDetailsDraft: OnyxEntry<PersonalDetailsForm>): PersonalDetailsForm {
+    const address = PersonalDetailsUtils.getCurrentAddress(privatePersonalDetails);
+    const {street} = address ?? {};
+    const [street1, street2] = street ? street.split('\n') : [undefined, undefined];
+    return {
+        [INPUT_IDS.LEGAL_FIRST_NAME]: personalDetailsDraft?.[INPUT_IDS.LEGAL_FIRST_NAME] ?? privatePersonalDetails?.legalFirstName ?? '',
+        [INPUT_IDS.LEGAL_LAST_NAME]: personalDetailsDraft?.[INPUT_IDS.LEGAL_LAST_NAME] ?? privatePersonalDetails?.legalLastName ?? '',
+        [INPUT_IDS.DATE_OF_BIRTH]: personalDetailsDraft?.[INPUT_IDS.DATE_OF_BIRTH] ?? privatePersonalDetails?.dob ?? '',
+        [INPUT_IDS.PHONE_NUMBER]: personalDetailsDraft?.[INPUT_IDS.PHONE_NUMBER] ?? privatePersonalDetails?.phoneNumber ?? '',
+        [INPUT_IDS.ADDRESS_LINE_1]: personalDetailsDraft?.[INPUT_IDS.ADDRESS_LINE_1] ?? street1 ?? '',
+        [INPUT_IDS.ADDRESS_LINE_2]: personalDetailsDraft?.[INPUT_IDS.ADDRESS_LINE_2] ?? street2 ?? '',
+        [INPUT_IDS.CITY]: personalDetailsDraft?.[INPUT_IDS.CITY] ?? address?.city ?? '',
+        [INPUT_IDS.STATE]: personalDetailsDraft?.[INPUT_IDS.STATE] ?? address?.state ?? '',
+        [INPUT_IDS.ZIP_POST_CODE]: personalDetailsDraft?.[INPUT_IDS.ZIP_POST_CODE] ?? address?.zip ?? '',
+        [INPUT_IDS.COUNTRY]: personalDetailsDraft?.[INPUT_IDS.COUNTRY] ?? address?.country ?? '',
+    };
+}
+
+function getInitialSubstep(values: PersonalDetailsForm) {
+    if (values[INPUT_IDS.LEGAL_FIRST_NAME] === '' || values[INPUT_IDS.LEGAL_LAST_NAME] === '') {
+        return CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.LEGAL_NAME;
+    }
+    if (values[INPUT_IDS.DATE_OF_BIRTH] === '') {
+        return CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.DATE_OF_BIRTH;
+    }
+    if (
+        values[INPUT_IDS.ADDRESS_LINE_1] === '' ||
+        values[INPUT_IDS.CITY] === '' ||
+        values[INPUT_IDS.STATE] === '' ||
+        values[INPUT_IDS.ZIP_POST_CODE] === '' ||
+        values[INPUT_IDS.COUNTRY] === ''
+    ) {
+        return CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.ADDRESS;
+    }
+    if (values[INPUT_IDS.PHONE_NUMBER] === '') {
+        return CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.PHONE_NUMBER;
+    }
+    return CONST.MISSING_PERSONAL_DETAILS_INDEXES.MAPPING.CONFIRM;
+}
+
+export {getSubstepValues, getInitialSubstep};
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index a04a3a4f7bc6..be77f2cd8575 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -673,12 +673,7 @@ function ReportActionItem({
         } else if (
             ReportActionsUtils.isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED, CONST.REPORT.ACTIONS.TYPE.CARD_ISSUED_VIRTUAL, CONST.REPORT.ACTIONS.TYPE.CARD_MISSING_ADDRESS)
         ) {
-            children = (
-                <IssueCardMessage
-                    action={action}
-                    policyID={report?.policyID}
-                />
-            );
+            children = <IssueCardMessage action={action} />;
         } else if (ReportActionsUtils.isActionOfType(action, CONST.REPORT.ACTIONS.TYPE.EXPORTED_TO_INTEGRATION)) {
             children = <ExportIntegration action={action} />;
         } else if (ReportActionsUtils.isRenamedAction(action)) {