diff --git a/src/components/InteractiveStepWrapper.tsx b/src/components/InteractiveStepWrapper.tsx
index 6ffe00b9bd5d2..5717acf87e7c1 100644
--- a/src/components/InteractiveStepWrapper.tsx
+++ b/src/components/InteractiveStepWrapper.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {forwardRef} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -24,21 +25,55 @@ type InteractiveStepWrapperProps = {
 
     // Array of step names
     stepNames?: readonly string[];
+
+    // Should enable max height
+    shouldEnableMaxHeight?: boolean;
+
+    // Should show offline indicator
+    shouldShowOfflineIndicator?: boolean;
+
+    // Should enable picker avoiding
+    shouldEnablePickerAvoiding?: boolean;
+
+    // Call task ID for the guides
+    guidesCallTaskID?: string;
+
+    // Offline indicator style
+    offlineIndicatorStyle?: StyleProp<ViewStyle>;
 };
 
-function InteractiveStepWrapper({children, wrapperID, handleBackButtonPress, headerTitle, startStepIndex, stepNames}: InteractiveStepWrapperProps) {
+function InteractiveStepWrapper(
+    {
+        children,
+        wrapperID,
+        handleBackButtonPress,
+        headerTitle,
+        startStepIndex,
+        stepNames,
+        shouldEnableMaxHeight,
+        shouldShowOfflineIndicator,
+        shouldEnablePickerAvoiding = false,
+        guidesCallTaskID,
+        offlineIndicatorStyle,
+    }: InteractiveStepWrapperProps,
+    ref: React.ForwardedRef<View>,
+) {
     const styles = useThemeStyles();
 
     return (
         <ScreenWrapper
+            ref={ref}
             testID={wrapperID}
             includeSafeAreaPaddingBottom={false}
-            shouldEnablePickerAvoiding={false}
-            shouldEnableMaxHeight
+            shouldEnablePickerAvoiding={shouldEnablePickerAvoiding}
+            shouldEnableMaxHeight={shouldEnableMaxHeight}
+            shouldShowOfflineIndicator={shouldShowOfflineIndicator}
+            offlineIndicatorStyle={offlineIndicatorStyle}
         >
             <HeaderWithBackButton
                 title={headerTitle}
                 onBackButtonPress={handleBackButtonPress}
+                guidesCallTaskID={guidesCallTaskID}
             />
             {stepNames && (
                 <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
@@ -55,4 +90,4 @@ function InteractiveStepWrapper({children, wrapperID, handleBackButtonPress, hea
 
 InteractiveStepWrapper.displayName = 'InteractiveStepWrapper';
 
-export default InteractiveStepWrapper;
+export default forwardRef(InteractiveStepWrapper);
diff --git a/src/components/SubStepForms/AddressStep.tsx b/src/components/SubStepForms/AddressStep.tsx
new file mode 100644
index 0000000000000..fa7b56630c0c6
--- /dev/null
+++ b/src/components/SubStepForms/AddressStep.tsx
@@ -0,0 +1,111 @@
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
+import type {FormInputErrors, FormOnyxKeys, FormOnyxValues, FormValue} from '@components/Form/types';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import type {SubStepProps} from '@hooks/useSubStep/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields';
+import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
+import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
+
+type AddressValues = {
+    street: string;
+    city: string;
+    state: string;
+    zipCode: string;
+};
+
+type AddressStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStepProps & {
+    /** The ID of the form */
+    formID: TFormID;
+
+    /** The title of the form */
+    formTitle: string;
+
+    /** The disclaimer informing that PO box is not allowed */
+    formPOBoxDisclaimer?: string;
+
+    /** The validation function to call when the form is submitted */
+    customValidate?: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID>;
+
+    /** A function to call when the form is submitted */
+    onSubmit: (values: FormOnyxValues<TFormID>) => void;
+
+    /** Fields list of the form */
+    stepFields: Array<FormOnyxKeys<TFormID>>;
+
+    /* The IDs of the input fields */
+    inputFieldsIDs: AddressValues;
+
+    /** The default values for the form */
+    defaultValues: AddressValues;
+
+    /** Should show help links */
+    shouldShowHelpLinks?: boolean;
+};
+
+function AddressStep<TFormID extends keyof OnyxFormValuesMapping>({
+    formID,
+    formTitle,
+    formPOBoxDisclaimer,
+    customValidate,
+    onSubmit,
+    stepFields,
+    inputFieldsIDs,
+    defaultValues,
+    shouldShowHelpLinks,
+    isEditing,
+}: AddressStepProps<TFormID>) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const validate = useCallback(
+        (values: FormOnyxValues<TFormID>): FormInputErrors<TFormID> => {
+            const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);
+
+            const street = values[inputFieldsIDs.street as keyof typeof values];
+            if (street && !ValidationUtils.isValidAddress(street as FormValue)) {
+                // @ts-expect-error type mismatch to be fixed
+                errors[inputFieldsIDs.street] = translate('bankAccount.error.addressStreet');
+            }
+
+            const zipCode = values[inputFieldsIDs.zipCode as keyof typeof values];
+            if (zipCode && !ValidationUtils.isValidZipCode(zipCode as string)) {
+                // @ts-expect-error type mismatch to be fixed
+                errors[inputFieldsIDs.zipCode] = translate('bankAccount.error.zipCode');
+            }
+
+            return errors;
+        },
+        [inputFieldsIDs.street, inputFieldsIDs.zipCode, stepFields, translate],
+    );
+
+    return (
+        <FormProvider
+            formID={formID}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            validate={customValidate ?? validate}
+            onSubmit={onSubmit}
+            style={[styles.mh5, styles.flexGrow1]}
+        >
+            <View>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{formTitle}</Text>
+                {formPOBoxDisclaimer && <Text style={[styles.textSupporting]}>{formPOBoxDisclaimer}</Text>}
+                <AddressFormFields
+                    inputKeys={inputFieldsIDs}
+                    streetTranslationKey="common.streetAddress"
+                    defaultValues={defaultValues}
+                    shouldSaveDraft={!isEditing}
+                />
+                {shouldShowHelpLinks && <HelpLinks containerStyles={[styles.mt6]} />}
+            </View>
+        </FormProvider>
+    );
+}
+
+AddressStep.displayName = 'AddressStep';
+
+export default AddressStep;
diff --git a/src/components/SubStepForms/ConfirmationStep.tsx b/src/components/SubStepForms/ConfirmationStep.tsx
new file mode 100644
index 0000000000000..7fbec82c4bbeb
--- /dev/null
+++ b/src/components/SubStepForms/ConfirmationStep.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import DotIndicatorMessage from '@components/DotIndicatorMessage';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import type {SubStepProps} from '@hooks/useSubStep/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type SummaryItem = {
+    description: string;
+    title: string;
+    shouldShowRightIcon: boolean;
+    onPress: () => void;
+};
+
+type ConfirmationStepProps = SubStepProps & {
+    /** The title of the step */
+    pageTitle: string;
+
+    /** The summary items to display */
+    summaryItems: SummaryItem[];
+
+    /** Whether show additional section with Onfido terms etc. */
+    showOnfidoLinks: boolean;
+
+    /** The title of the Onfido section */
+    onfidoLinksTitle?: string;
+
+    /** Whether the data is loading */
+    isLoading?: boolean;
+
+    /** The error message to display */
+    error?: string;
+};
+
+function ConfirmationStep({pageTitle, summaryItems, showOnfidoLinks, onfidoLinksTitle, isLoading, error, onNext}: ConfirmationStepProps) {
+    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]}>{pageTitle}</Text>
+                    {summaryItems.map(({description, title, shouldShowRightIcon, onPress}) => (
+                        <MenuItemWithTopDescription
+                            key={`${title}_${description}`}
+                            description={description}
+                            title={title}
+                            shouldShowRightIcon={shouldShowRightIcon}
+                            onPress={onPress}
+                        />
+                    ))}
+
+                    {showOnfidoLinks && (
+                        <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
+                            {onfidoLinksTitle}
+                            <TextLink
+                                href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
+                                style={[styles.textMicro]}
+                            >
+                                {translate('onfidoStep.facialScan')}
+                            </TextLink>
+                            {', '}
+                            <TextLink
+                                href={CONST.ONFIDO_PRIVACY_POLICY_URL}
+                                style={[styles.textMicro]}
+                            >
+                                {translate('common.privacy')}
+                            </TextLink>
+                            {` ${translate('common.and')} `}
+                            <TextLink
+                                href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
+                                style={[styles.textMicro]}
+                            >
+                                {translate('common.termsOfService')}
+                            </TextLink>
+                        </Text>
+                    )}
+
+                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                        {error && error.length > 0 && (
+                            <DotIndicatorMessage
+                                textStyles={[styles.formError]}
+                                type="error"
+                                messages={{error}}
+                            />
+                        )}
+                        <Button
+                            isDisabled={isOffline}
+                            success
+                            large
+                            isLoading={isLoading}
+                            style={[styles.w100]}
+                            onPress={onNext}
+                            text={translate('common.confirm')}
+                        />
+                    </View>
+                </ScrollView>
+            )}
+        </SafeAreaConsumer>
+    );
+}
+
+ConfirmationStep.displayName = 'ConfirmationStep';
+
+export default ConfirmationStep;
diff --git a/src/components/SubStepForms/DateOfBirthStep.tsx b/src/components/SubStepForms/DateOfBirthStep.tsx
new file mode 100644
index 0000000000000..42077cef2ba17
--- /dev/null
+++ b/src/components/SubStepForms/DateOfBirthStep.tsx
@@ -0,0 +1,106 @@
+import {subYears} from 'date-fns';
+import React, {useCallback} from 'react';
+import DatePicker from '@components/DatePicker';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxKeys, FormOnyxValues} from '@components/Form/types';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import type {SubStepProps} from '@hooks/useSubStep/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
+import CONST from '@src/CONST';
+import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
+
+type DateOfBirthStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStepProps & {
+    /** The ID of the form */
+    formID: TFormID;
+
+    /** The title of the form */
+    formTitle: string;
+
+    /** The validation function to call when the form is submitted */
+    customValidate?: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID>;
+
+    /** A function to call when the form is submitted */
+    onSubmit: (values: FormOnyxValues<TFormID>) => void;
+
+    /** Fields list of the form */
+    stepFields: Array<FormOnyxKeys<TFormID>>;
+
+    /** The ID of the date of birth input */
+    dobInputID: string;
+
+    /** The default value for the date of birth input */
+    dobDefaultValue: string;
+
+    /** Whether the component should show help links */
+    shouldShowHelpLinks?: boolean;
+};
+
+function DateOfBirthStep<TFormID extends keyof OnyxFormValuesMapping>({
+    formID,
+    formTitle,
+    customValidate,
+    onSubmit,
+    stepFields,
+    dobInputID,
+    dobDefaultValue,
+    isEditing,
+    shouldShowHelpLinks = true,
+}: DateOfBirthStepProps<TFormID>) {
+    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_FOR_PAYMENT);
+
+    const validate = useCallback(
+        (values: FormOnyxValues<TFormID>): FormInputErrors<TFormID> => {
+            const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);
+
+            const valuesToValidate = values[dobInputID as keyof FormOnyxValues<TFormID>] as string;
+            if (valuesToValidate) {
+                if (!ValidationUtils.isValidPastDate(valuesToValidate) || !ValidationUtils.meetsMaximumAgeRequirement(valuesToValidate)) {
+                    // @ts-expect-error type mismatch to be fixed
+                    errors[dobInputID] = translate('bankAccount.error.dob');
+                } else if (!ValidationUtils.meetsMinimumAgeRequirement(valuesToValidate)) {
+                    // @ts-expect-error type mismatch to be fixed
+                    errors[dobInputID] = translate('bankAccount.error.age');
+                }
+            }
+
+            return errors;
+        },
+        [dobInputID, stepFields, translate],
+    );
+
+    return (
+        <FormProvider
+            formID={formID}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            validate={customValidate ?? validate}
+            onSubmit={onSubmit}
+            style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
+            submitButtonStyles={[styles.mb0]}
+        >
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb5]}>{formTitle}</Text>
+            <InputWrapper
+                InputComponent={DatePicker}
+                inputID={dobInputID}
+                label={translate('common.dob')}
+                placeholder={translate('common.dateFormat')}
+                defaultValue={dobDefaultValue}
+                minDate={minDate}
+                maxDate={maxDate}
+                shouldSaveDraft={!isEditing}
+            />
+            {shouldShowHelpLinks && <HelpLinks containerStyles={[styles.mt5]} />}
+        </FormProvider>
+    );
+}
+
+DateOfBirthStep.displayName = 'DateOfBirthStep';
+
+export default DateOfBirthStep;
diff --git a/src/components/SubStepForms/FullNameStep.tsx b/src/components/SubStepForms/FullNameStep.tsx
new file mode 100644
index 0000000000000..f5c234650879b
--- /dev/null
+++ b/src/components/SubStepForms/FullNameStep.tsx
@@ -0,0 +1,120 @@
+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, FormOnyxKeys, FormOnyxValues} from '@components/Form/types';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
+import type {SubStepProps} from '@hooks/useSubStep/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
+import CONST from '@src/CONST';
+import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
+
+type FullNameStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStepProps & {
+    /** The ID of the form */
+    formID: TFormID;
+
+    /** The title of the form */
+    formTitle: string;
+
+    /** The validation function to call when the form is submitted */
+    customValidate?: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID>;
+
+    /** A function to call when the form is submitted */
+    onSubmit: (values: FormOnyxValues<TFormID>) => void;
+
+    /** Fields list of the form */
+    stepFields: Array<FormOnyxKeys<TFormID>>;
+
+    /** The ID of the first name input */
+    firstNameInputID: string;
+
+    /** The ID of the last name input */
+    lastNameInputID: string;
+
+    /** The default values for the form */
+    defaultValues: {
+        firstName: string;
+        lastName: string;
+    };
+
+    shouldShowHelpLinks?: boolean;
+};
+
+function FullNameStep<TFormID extends keyof OnyxFormValuesMapping>({
+    formID,
+    formTitle,
+    customValidate,
+    onSubmit,
+    stepFields,
+    firstNameInputID,
+    lastNameInputID,
+    defaultValues,
+    isEditing,
+    shouldShowHelpLinks = true,
+}: FullNameStepProps<TFormID>) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const validate = useCallback(
+        (values: FormOnyxValues<TFormID>): FormInputErrors<TFormID> => {
+            const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);
+
+            const firstName = values[firstNameInputID as keyof FormOnyxValues<TFormID>] as string;
+            if (firstName && !ValidationUtils.isValidLegalName(firstName)) {
+                // @ts-expect-error type mismatch to be fixed
+                errors[firstNameInputID] = translate('common.error.fieldRequired');
+            }
+
+            const lastName = values[lastNameInputID as keyof FormOnyxValues<TFormID>] as string;
+            if (lastName && !ValidationUtils.isValidLegalName(lastName)) {
+                // @ts-expect-error type mismatch to be fixed
+                errors[lastNameInputID] = translate('common.error.fieldRequired');
+            }
+            return errors;
+        },
+        [firstNameInputID, lastNameInputID, stepFields, translate],
+    );
+
+    return (
+        <FormProvider
+            formID={formID}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            validate={customValidate ?? validate}
+            onSubmit={onSubmit}
+            style={[styles.mh5, styles.flexGrow1]}
+        >
+            <View>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{formTitle}</Text>
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={firstNameInputID}
+                    label={translate('common.firstName')}
+                    aria-label={translate('common.firstName')}
+                    role={CONST.ROLE.PRESENTATION}
+                    defaultValue={defaultValues.firstName}
+                    shouldSaveDraft={!isEditing}
+                    containerStyles={[styles.mb6]}
+                />
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={lastNameInputID}
+                    label={translate('common.lastName')}
+                    aria-label={translate('common.lastName')}
+                    role={CONST.ROLE.PRESENTATION}
+                    defaultValue={defaultValues.lastName}
+                    shouldSaveDraft={!isEditing}
+                    containerStyles={[styles.mb6]}
+                />
+                {shouldShowHelpLinks && <HelpLinks />}
+            </View>
+        </FormProvider>
+    );
+}
+
+FullNameStep.displayName = 'FullNameStep';
+
+export default FullNameStep;
diff --git a/src/components/SubStepForms/SingleFieldStep.tsx b/src/components/SubStepForms/SingleFieldStep.tsx
new file mode 100644
index 0000000000000..cfd9f628da66c
--- /dev/null
+++ b/src/components/SubStepForms/SingleFieldStep.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import type {InputModeOptions} from 'react-native';
+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 type {SubStepProps} from '@hooks/useSubStep/types';
+import useThemeStyles from '@hooks/useThemeStyles';
+import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
+import CONST from '@src/CONST';
+import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
+
+type SingleFieldStepProps<TFormID extends keyof OnyxFormValuesMapping> = SubStepProps & {
+    /** The ID of the form */
+    formID: TFormID;
+
+    /** The title of the form */
+    formTitle: string;
+
+    /** The disclaimer to show below the form title */
+    formDisclaimer?: string;
+
+    /** The validation function to call when the form is submitted */
+    validate: (values: FormOnyxValues<TFormID>) => FormInputErrors<TFormID>;
+
+    /** A function to call when the form is submitted */
+    onSubmit: (values: FormOnyxValues<TFormID>) => void;
+
+    /** The ID of the form input */
+    inputId: string;
+
+    /** The label of the input */
+    inputLabel: string;
+
+    /** The mode of the input */
+    inputMode?: InputModeOptions;
+
+    /** The default values for the form */
+    defaultValue: string;
+
+    /** Whether to show help links */
+    shouldShowHelpLinks?: boolean;
+
+    /** Max length of the field */
+    maxLength?: number;
+};
+
+function SingleFieldStep<TFormID extends keyof OnyxFormValuesMapping>({
+    formID,
+    formTitle,
+    formDisclaimer,
+    validate,
+    onSubmit,
+    inputId,
+    inputLabel,
+    inputMode,
+    defaultValue,
+    isEditing,
+    shouldShowHelpLinks = true,
+    maxLength,
+}: SingleFieldStepProps<TFormID>) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <FormProvider
+            formID={formID}
+            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            validate={validate}
+            onSubmit={onSubmit}
+            style={[styles.mh5, styles.flexGrow1]}
+            submitButtonStyles={[styles.mb0]}
+        >
+            <View>
+                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{formTitle}</Text>
+                {formDisclaimer && <Text style={[styles.textSupporting]}>{formDisclaimer}</Text>}
+                <View style={[styles.flex1]}>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={inputId}
+                        label={inputLabel}
+                        aria-label={inputLabel}
+                        role={CONST.ROLE.PRESENTATION}
+                        containerStyles={[styles.mt6]}
+                        inputMode={inputMode}
+                        defaultValue={defaultValue}
+                        maxLength={maxLength}
+                        shouldSaveDraft={!isEditing}
+                    />
+                </View>
+                {shouldShowHelpLinks && <HelpLinks containerStyles={[styles.mt5]} />}
+            </View>
+        </FormProvider>
+    );
+}
+
+SingleFieldStep.displayName = 'SingleFieldStep';
+
+export default SingleFieldStep;
diff --git a/src/pages/EnablePayments/FeesAndTerms/FeesAndTerms.tsx b/src/pages/EnablePayments/FeesAndTerms/FeesAndTerms.tsx
index 512abc57a990f..e8db5d75cfd0b 100644
--- a/src/pages/EnablePayments/FeesAndTerms/FeesAndTerms.tsx
+++ b/src/pages/EnablePayments/FeesAndTerms/FeesAndTerms.tsx
@@ -1,13 +1,9 @@
 import React from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as Wallet from '@userActions/Wallet';
@@ -21,7 +17,6 @@ const termsAndFeesSubsteps: Array<React.ComponentType<SubStepProps>> = [FeesStep
 
 function FeesAndTerms() {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
 
     const submit = () => {
@@ -44,28 +39,21 @@ function FeesAndTerms() {
     };
 
     return (
-        <ScreenWrapper
-            testID={FeesAndTerms.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={FeesAndTerms.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('termsStep.headerTitleRefactor')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={3}
+            stepNames={CONST.WALLET.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('termsStep.headerTitleRefactor')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={3}
-                    stepNames={CONST.WALLET.STEP_NAMES}
-                />
-            </View>
             <SubStep
                 isEditing={isEditing}
                 onNext={nextScreen}
                 onMove={moveTo}
             />
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/EnablePayments/PersonalInfo/PersonalInfo.tsx b/src/pages/EnablePayments/PersonalInfo/PersonalInfo.tsx
index 55d369b4a2c5f..e892d8925a700 100644
--- a/src/pages/EnablePayments/PersonalInfo/PersonalInfo.tsx
+++ b/src/pages/EnablePayments/PersonalInfo/PersonalInfo.tsx
@@ -1,14 +1,9 @@
 import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import {useOnyx} from 'react-native-onyx';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
 import IdologyQuestions from '@pages/EnablePayments/IdologyQuestions';
 import getInitialSubstepForPersonalInfo from '@pages/EnablePayments/utils/getInitialSubstepForPersonalInfo';
@@ -16,32 +11,23 @@ import getSubstepValues from '@pages/EnablePayments/utils/getSubstepValues';
 import * as Wallet from '@userActions/Wallet';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {WalletAdditionalDetailsForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
-import type {WalletAdditionalDetailsRefactor} from '@src/types/onyx/WalletAdditionalDetails';
 import Address from './substeps/AddressStep';
 import Confirmation from './substeps/ConfirmationStep';
 import DateOfBirth from './substeps/DateOfBirthStep';
-import FullName from './substeps/FullNameStep';
+import LegalName from './substeps/LegalNameStep';
 import PhoneNumber from './substeps/PhoneNumberStep';
 import SocialSecurityNumber from './substeps/SocialSecurityNumberStep';
 
-type PersonalInfoPageOnyxProps = {
-    /** Reimbursement account from ONYX */
-    walletAdditionalDetails: OnyxEntry<WalletAdditionalDetailsRefactor>;
-
-    /** The draft values of the bank account being setup */
-    walletAdditionalDetailsDraft: OnyxEntry<WalletAdditionalDetailsForm>;
-};
-
-type PersonalInfoPageProps = PersonalInfoPageOnyxProps;
-
 const PERSONAL_INFO_STEP_KEYS = INPUT_IDS.PERSONAL_INFO_STEP;
-const bodyContent: Array<React.ComponentType<SubStepProps>> = [FullName, DateOfBirth, Address, PhoneNumber, SocialSecurityNumber, Confirmation];
+const bodyContent: Array<React.ComponentType<SubStepProps>> = [LegalName, DateOfBirth, Address, PhoneNumber, SocialSecurityNumber, Confirmation];
 
-function PersonalInfoPage({walletAdditionalDetails, walletAdditionalDetailsDraft}: PersonalInfoPageProps) {
+function PersonalInfoPage() {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
+    const [walletAdditionalDetailsDraft] = useOnyx(ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS_DRAFT);
+
     const showIdologyQuestions = walletAdditionalDetails?.questions && walletAdditionalDetails?.questions.length > 0;
 
     const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, walletAdditionalDetailsDraft, walletAdditionalDetails), [walletAdditionalDetails, walletAdditionalDetailsDraft]);
@@ -94,20 +80,13 @@ function PersonalInfoPage({walletAdditionalDetails, walletAdditionalDetailsDraft
     };
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            testID={PersonalInfoPage.displayName}
+        <InteractiveStepWrapper
+            wrapperID={PersonalInfoPage.displayName}
+            headerTitle={translate('personalInfoStep.personalInfo')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={1}
+            stepNames={CONST.WALLET.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('personalInfoStep.personalInfo')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={1}
-                    stepNames={CONST.WALLET.STEP_NAMES}
-                />
-            </View>
             {showIdologyQuestions ? (
                 <IdologyQuestions
                     questions={walletAdditionalDetails?.questions ?? []}
@@ -120,19 +99,10 @@ function PersonalInfoPage({walletAdditionalDetails, walletAdditionalDetailsDraft
                     onMove={moveTo}
                 />
             )}
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
 PersonalInfoPage.displayName = 'PersonalInfoPage';
 
-export default withOnyx<PersonalInfoPageProps, PersonalInfoPageOnyxProps>({
-    // @ts-expect-error ONYXKEYS.WALLET_ADDITIONAL_DETAILS is conflicting with ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS_FORM
-    walletAdditionalDetails: {
-        key: ONYXKEYS.WALLET_ADDITIONAL_DETAILS,
-    },
-    // @ts-expect-error ONYXKEYS.WALLET_ADDITIONAL_DETAILS is conflicting with ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS_FORM
-    walletAdditionalDetailsDraft: {
-        key: ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS_DRAFT,
-    },
-})(PersonalInfoPage);
+export default PersonalInfoPage;
diff --git a/src/pages/EnablePayments/PersonalInfo/substeps/AddressStep.tsx b/src/pages/EnablePayments/PersonalInfo/substeps/AddressStep.tsx
index 0f9819f31c669..342fb041a6c9a 100644
--- a/src/pages/EnablePayments/PersonalInfo/substeps/AddressStep.tsx
+++ b/src/pages/EnablePayments/PersonalInfo/substeps/AddressStep.tsx
@@ -1,16 +1,9 @@
-import React, {useCallback} 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} from '@components/Form/types';
-import Text from '@components/Text';
+import CommonAddressStep from '@components/SubStepForms/AddressStep';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useWalletAdditionalDetailsStepFormSubmit from '@hooks/useWalletAdditionalDetailsStepFormSubmit';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
 
@@ -25,9 +18,8 @@ const INPUT_KEYS = {
 
 const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.STREET, PERSONAL_INFO_STEP_KEY.CITY, PERSONAL_INFO_STEP_KEY.STATE, PERSONAL_INFO_STEP_KEY.ZIP_CODE];
 
-function AddressStep({onNext, isEditing}: SubStepProps) {
+function AddressStep({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
     const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
 
@@ -38,23 +30,6 @@ function AddressStep({onNext, isEditing}: SubStepProps) {
         zipCode: walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.ZIP_CODE] ?? '',
     };
 
-    const validate = useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>): FormInputErrors<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS> => {
-            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
-
-            if (values.addressStreet && !ValidationUtils.isValidAddress(values.addressStreet)) {
-                errors.addressStreet = translate('bankAccount.error.addressStreet');
-            }
-
-            if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
-                errors.addressZipCode = translate('bankAccount.error.zipCode');
-            }
-
-            return errors;
-        },
-        [translate],
-    );
-
     const handleSubmit = useWalletAdditionalDetailsStepFormSubmit({
         fieldIds: STEP_FIELDS,
         onNext,
@@ -62,25 +37,18 @@ function AddressStep({onNext, isEditing}: SubStepProps) {
     });
 
     return (
-        <FormProvider
+        <CommonAddressStep<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('personalInfoStep.whatsYourAddress')}
+            formPOBoxDisclaimer={translate('personalInfoStep.noPOBoxesPlease')}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('personalInfoStep.whatsYourAddress')}</Text>
-                <Text style={[styles.textSupporting]}>{translate('personalInfoStep.noPOBoxesPlease')}</Text>
-                <AddressFormFields
-                    inputKeys={INPUT_KEYS}
-                    streetTranslationKey="common.streetAddress"
-                    defaultValues={defaultValues}
-                    shouldSaveDraft={!isEditing}
-                />
-                <HelpLinks containerStyles={[styles.mt6]} />
-            </View>
-        </FormProvider>
+            stepFields={STEP_FIELDS}
+            inputFieldsIDs={INPUT_KEYS}
+            defaultValues={defaultValues}
+        />
     );
 }
 
diff --git a/src/pages/EnablePayments/PersonalInfo/substeps/ConfirmationStep.tsx b/src/pages/EnablePayments/PersonalInfo/substeps/ConfirmationStep.tsx
index 71450b7ebf24f..09105e8e3a4d8 100644
--- a/src/pages/EnablePayments/PersonalInfo/substeps/ConfirmationStep.tsx
+++ b/src/pages/EnablePayments/PersonalInfo/substeps/ConfirmationStep.tsx
@@ -1,17 +1,8 @@
 import React, {useMemo} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Button from '@components/Button';
-import DotIndicatorMessage from '@components/DotIndicatorMessage';
-import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import SafeAreaConsumer from '@components/SafeAreaConsumer';
-import ScrollView from '@components/ScrollView';
-import Text from '@components/Text';
-import TextLink from '@components/TextLink';
+import CommonConfirmationStep from '@components/SubStepForms/ConfirmationStep';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import getSubstepValues from '@pages/EnablePayments/utils/getSubstepValues';
 import CONST from '@src/CONST';
@@ -21,10 +12,8 @@ import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
 const PERSONAL_INFO_STEP_KEYS = INPUT_IDS.PERSONAL_INFO_STEP;
 const PERSONAL_INFO_STEP_INDEXES = CONST.WALLET.SUBSTEP_INDEXES.PERSONAL_INFO;
 
-function ConfirmationStep({onNext, onMove}: SubStepProps) {
+function ConfirmationStep({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const {isOffline} = useNetwork();
 
     const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
     const [walletAdditionalDetailsDraft] = useOnyx(ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS_DRAFT);
@@ -34,100 +23,61 @@ function ConfirmationStep({onNext, onMove}: SubStepProps) {
     const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, walletAdditionalDetailsDraft, walletAdditionalDetails), [walletAdditionalDetails, walletAdditionalDetailsDraft]);
     const shouldAskForFullSSN = walletAdditionalDetails?.errorCode === CONST.WALLET.ERROR.SSN;
 
+    const summaryItems = [
+        {
+            description: translate('personalInfoStep.legalName'),
+            title: `${values[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
+            },
+        },
+        {
+            description: translate('common.dob'),
+            title: values[PERSONAL_INFO_STEP_KEYS.DOB],
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
+            },
+        },
+        {
+            description: translate('personalInfoStep.address'),
+            title: `${values[PERSONAL_INFO_STEP_KEYS.STREET]}, ${values[PERSONAL_INFO_STEP_KEYS.CITY]}, ${values[PERSONAL_INFO_STEP_KEYS.STATE]} ${values[PERSONAL_INFO_STEP_KEYS.ZIP_CODE]}`,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
+            },
+        },
+        {
+            description: translate('common.phoneNumber'),
+            title: values[PERSONAL_INFO_STEP_KEYS.PHONE_NUMBER],
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.PHONE_NUMBER);
+            },
+        },
+        {
+            description: translate(shouldAskForFullSSN ? 'common.ssnFull9' : 'personalInfoStep.last4SSN'),
+            title: values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4],
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
+            },
+        },
+    ];
+
     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[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('common.dob')}
-                        title={values[PERSONAL_INFO_STEP_KEYS.DOB]}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('personalInfoStep.address')}
-                        title={`${values[PERSONAL_INFO_STEP_KEYS.STREET]}, ${values[PERSONAL_INFO_STEP_KEYS.CITY]}, ${values[PERSONAL_INFO_STEP_KEYS.STATE]} ${
-                            values[PERSONAL_INFO_STEP_KEYS.ZIP_CODE]
-                        }`}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('common.phoneNumber')}
-                        title={values[PERSONAL_INFO_STEP_KEYS.PHONE_NUMBER]}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.PHONE_NUMBER);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate(shouldAskForFullSSN ? 'common.ssnFull9' : 'personalInfoStep.last4SSN')}
-                        title={values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4]}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
-                        }}
-                    />
-                    <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
-                        {`${translate('personalInfoStep.byAddingThisBankAccount')} `}
-                        <TextLink
-                            href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('onfidoStep.facialScan')}
-                        </TextLink>
-                        {', '}
-                        <TextLink
-                            href={CONST.ONFIDO_PRIVACY_POLICY_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('common.privacy')}
-                        </TextLink>
-                        {` ${translate('common.and')} `}
-                        <TextLink
-                            href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('common.termsOfService')}
-                        </TextLink>
-                    </Text>
-                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
-                        {error && error.length > 0 && (
-                            <DotIndicatorMessage
-                                textStyles={[styles.formError]}
-                                type="error"
-                                messages={{error}}
-                            />
-                        )}
-                        <Button
-                            isDisabled={isOffline}
-                            success
-                            large
-                            isLoading={isLoading}
-                            style={[styles.w100]}
-                            onPress={onNext}
-                            text={translate('common.confirm')}
-                        />
-                    </View>
-                </ScrollView>
-            )}
-        </SafeAreaConsumer>
+        <CommonConfirmationStep
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
+            pageTitle={translate('personalInfoStep.letsDoubleCheck')}
+            summaryItems={summaryItems}
+            showOnfidoLinks
+            onfidoLinksTitle={`${translate('personalInfoStep.byAddingThisBankAccount')} `}
+            isLoading={isLoading}
+            error={error}
+        />
     );
 }
 
diff --git a/src/pages/EnablePayments/PersonalInfo/substeps/DateOfBirthStep.tsx b/src/pages/EnablePayments/PersonalInfo/substeps/DateOfBirthStep.tsx
index d476fdcc5c863..6cdc592946d16 100644
--- a/src/pages/EnablePayments/PersonalInfo/substeps/DateOfBirthStep.tsx
+++ b/src/pages/EnablePayments/PersonalInfo/substeps/DateOfBirthStep.tsx
@@ -1,79 +1,41 @@
-import {subYears} from 'date-fns';
-import React, {useCallback} from 'react';
+import React from 'react';
 import {useOnyx} from 'react-native-onyx';
-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 type {FormOnyxKeys, FormOnyxValues} from '@components/Form/types';
+import CommonDateOfBirthStep from '@components/SubStepForms/DateOfBirthStep';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useWalletAdditionalDetailsStepFormSubmit from '@hooks/useWalletAdditionalDetailsStepFormSubmit';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {OnyxFormValuesMapping} from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
 
 const PERSONAL_INFO_DOB_KEY = INPUT_IDS.PERSONAL_INFO_STEP.DOB;
-const STEP_FIELDS = [PERSONAL_INFO_DOB_KEY];
+const STEP_FIELDS = [PERSONAL_INFO_DOB_KEY] as Array<FormOnyxKeys<keyof OnyxFormValuesMapping>>;
 
-const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
-const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
-
-function DateOfBirthStep({onNext, isEditing}: SubStepProps) {
+function DateOfBirthStep({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    const validate = useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>): FormInputErrors<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS> => {
-            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
-
-            if (values.dob) {
-                if (!ValidationUtils.isValidPastDate(values.dob) || !ValidationUtils.meetsMaximumAgeRequirement(values.dob)) {
-                    errors.dob = translate('bankAccount.error.dob');
-                } else if (!ValidationUtils.meetsMinimumAgeRequirement(values.dob)) {
-                    errors.dob = translate('bankAccount.error.age');
-                }
-            }
-
-            return errors;
-        },
-        [translate],
-    );
 
     const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
-
     const dobDefaultValue = walletAdditionalDetails?.[PERSONAL_INFO_DOB_KEY] ?? walletAdditionalDetails?.[PERSONAL_INFO_DOB_KEY] ?? '';
 
     const handleSubmit = useWalletAdditionalDetailsStepFormSubmit({
         fieldIds: STEP_FIELDS,
         onNext,
         shouldSaveDraft: isEditing,
-    });
+    }) as (values: FormOnyxValues<keyof OnyxFormValuesMapping>) => void;
 
     return (
-        <FormProvider
+        <CommonDateOfBirthStep<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('personalInfoStep.whatsYourDOB')}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
-        >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb5]}>{translate('personalInfoStep.whatsYourDOB')}</Text>
-            <InputWrapper
-                InputComponent={DatePicker}
-                inputID={PERSONAL_INFO_DOB_KEY}
-                label={translate('common.dob')}
-                placeholder={translate('common.dateFormat')}
-                defaultValue={dobDefaultValue}
-                minDate={minDate}
-                maxDate={maxDate}
-                shouldSaveDraft={!isEditing}
-            />
-            <HelpLinks containerStyles={[styles.mt5]} />
-        </FormProvider>
+            stepFields={STEP_FIELDS}
+            dobInputID={PERSONAL_INFO_DOB_KEY as keyof FormOnyxValues}
+            dobDefaultValue={dobDefaultValue}
+        />
     );
 }
 
diff --git a/src/pages/EnablePayments/PersonalInfo/substeps/FullNameStep.tsx b/src/pages/EnablePayments/PersonalInfo/substeps/FullNameStep.tsx
deleted file mode 100644
index b40fb22029431..0000000000000
--- a/src/pages/EnablePayments/PersonalInfo/substeps/FullNameStep.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, {useCallback} from 'react';
-import {View} from 'react-native';
-import {useOnyx} from 'react-native-onyx';
-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 type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import useWalletAdditionalDetailsStepFormSubmit from '@hooks/useWalletAdditionalDetailsStepFormSubmit';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
-
-const PERSONAL_INFO_STEP_KEY = INPUT_IDS.PERSONAL_INFO_STEP;
-const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.FIRST_NAME, PERSONAL_INFO_STEP_KEY.LAST_NAME];
-
-function FullNameStep({onNext, isEditing}: SubStepProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
-
-    const defaultValues = {
-        firstName: walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.FIRST_NAME] ?? '',
-        lastName: walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.LAST_NAME] ?? '',
-    };
-
-    const validate = useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>): FormInputErrors<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS> => {
-            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
-            if (values.legalFirstName && !ValidationUtils.isValidLegalName(values.legalFirstName)) {
-                errors.legalFirstName = translate('bankAccount.error.firstName');
-            }
-
-            if (values.legalLastName && !ValidationUtils.isValidLegalName(values.legalLastName)) {
-                errors.legalLastName = translate('bankAccount.error.lastName');
-            }
-            return errors;
-        },
-        [translate],
-    );
-
-    const handleSubmit = useWalletAdditionalDetailsStepFormSubmit({
-        fieldIds: STEP_FIELDS,
-        onNext,
-        shouldSaveDraft: isEditing,
-    });
-
-    return (
-        <FormProvider
-            formID={ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
-            onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{translate('personalInfoStep.whatsYourLegalName')}</Text>
-                <InputWrapper
-                    InputComponent={TextInput}
-                    inputID={PERSONAL_INFO_STEP_KEY.FIRST_NAME}
-                    label={translate('common.firstName')}
-                    aria-label={translate('common.firstName')}
-                    role={CONST.ROLE.PRESENTATION}
-                    defaultValue={defaultValues.firstName}
-                    shouldSaveDraft={!isEditing}
-                    containerStyles={[styles.mb6]}
-                />
-                <InputWrapper
-                    InputComponent={TextInput}
-                    inputID={PERSONAL_INFO_STEP_KEY.LAST_NAME}
-                    label={translate('common.lastName')}
-                    aria-label={translate('common.lastName')}
-                    role={CONST.ROLE.PRESENTATION}
-                    defaultValue={defaultValues.lastName}
-                    shouldSaveDraft={!isEditing}
-                    containerStyles={[styles.mb6]}
-                />
-                <HelpLinks />
-            </View>
-        </FormProvider>
-    );
-}
-
-FullNameStep.displayName = 'FullNameStep';
-
-export default FullNameStep;
diff --git a/src/pages/EnablePayments/PersonalInfo/substeps/LegalNameStep.tsx b/src/pages/EnablePayments/PersonalInfo/substeps/LegalNameStep.tsx
new file mode 100644
index 0000000000000..41348ec5b9ef0
--- /dev/null
+++ b/src/pages/EnablePayments/PersonalInfo/substeps/LegalNameStep.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import FullNameStep from '@components/SubStepForms/FullNameStep';
+import useLocalize from '@hooks/useLocalize';
+import type {SubStepProps} from '@hooks/useSubStep/types';
+import useWalletAdditionalDetailsStepFormSubmit from '@hooks/useWalletAdditionalDetailsStepFormSubmit';
+import ONYXKEYS from '@src/ONYXKEYS';
+import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
+
+const PERSONAL_INFO_STEP_KEY = INPUT_IDS.PERSONAL_INFO_STEP;
+const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.FIRST_NAME, PERSONAL_INFO_STEP_KEY.LAST_NAME];
+
+function LegalNameStep({onNext, onMove, isEditing}: SubStepProps) {
+    const {translate} = useLocalize();
+    const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
+
+    const defaultValues = {
+        firstName: walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.FIRST_NAME] ?? '',
+        lastName: walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.LAST_NAME] ?? '',
+    };
+
+    const handleSubmit = useWalletAdditionalDetailsStepFormSubmit({
+        fieldIds: STEP_FIELDS,
+        onNext,
+        shouldSaveDraft: isEditing,
+    });
+
+    return (
+        <FullNameStep<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
+            formID={ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS}
+            formTitle={translate('personalInfoStep.whatsYourLegalName')}
+            onSubmit={handleSubmit}
+            stepFields={STEP_FIELDS}
+            firstNameInputID={PERSONAL_INFO_STEP_KEY.FIRST_NAME}
+            lastNameInputID={PERSONAL_INFO_STEP_KEY.LAST_NAME}
+            defaultValues={defaultValues}
+        />
+    );
+}
+
+LegalNameStep.displayName = 'LegalNameStep';
+
+export default LegalNameStep;
diff --git a/src/pages/EnablePayments/PersonalInfo/substeps/PhoneNumberStep.tsx b/src/pages/EnablePayments/PersonalInfo/substeps/PhoneNumberStep.tsx
index 60bfa431ca784..54843c2aaf4a3 100644
--- a/src/pages/EnablePayments/PersonalInfo/substeps/PhoneNumberStep.tsx
+++ b/src/pages/EnablePayments/PersonalInfo/substeps/PhoneNumberStep.tsx
@@ -1,17 +1,11 @@
 import React, {useCallback} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-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 SingleFieldStep from '@components/SubStepForms/SingleFieldStep';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useWalletAdditionalDetailsStepFormSubmit from '@hooks/useWalletAdditionalDetailsStepFormSubmit';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
@@ -19,12 +13,10 @@ import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
 const PERSONAL_INFO_STEP_KEY = INPUT_IDS.PERSONAL_INFO_STEP;
 const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.PHONE_NUMBER];
 
-function PhoneNumberStep({onNext, isEditing}: SubStepProps) {
+function PhoneNumberStep({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
     const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
-
     const defaultPhoneNumber = walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.PHONE_NUMBER] ?? '';
 
     const validate = useCallback(
@@ -46,33 +38,20 @@ function PhoneNumberStep({onNext, isEditing}: SubStepProps) {
     });
 
     return (
-        <FormProvider
+        <SingleFieldStep<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            formTitle={translate('personalInfoStep.whatsYourPhoneNumber')}
+            formDisclaimer={translate('personalInfoStep.weNeedThisToVerify')}
             validate={validate}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('personalInfoStep.whatsYourPhoneNumber')}</Text>
-                <Text style={[styles.textSupporting]}>{translate('personalInfoStep.weNeedThisToVerify')}</Text>
-                <View style={[styles.flex1]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={PERSONAL_INFO_STEP_KEY.PHONE_NUMBER}
-                        label={translate('common.phoneNumber')}
-                        aria-label={translate('common.phoneNumber')}
-                        role={CONST.ROLE.PRESENTATION}
-                        inputMode={CONST.INPUT_MODE.TEL}
-                        placeholder={translate('common.phoneNumberPlaceholder')}
-                        defaultValue={defaultPhoneNumber}
-                        shouldSaveDraft={!isEditing}
-                        containerStyles={[styles.mt6]}
-                    />
-                </View>
-                <HelpLinks containerStyles={[styles.mt5]} />
-            </View>
-        </FormProvider>
+            inputId={PERSONAL_INFO_STEP_KEY.PHONE_NUMBER}
+            inputLabel={translate('common.phoneNumber')}
+            inputMode={CONST.INPUT_MODE.TEL}
+            defaultValue={defaultPhoneNumber}
+        />
     );
 }
 
diff --git a/src/pages/EnablePayments/PersonalInfo/substeps/SocialSecurityNumberStep.tsx b/src/pages/EnablePayments/PersonalInfo/substeps/SocialSecurityNumberStep.tsx
index c12f90db072eb..27a1de3daa5d2 100644
--- a/src/pages/EnablePayments/PersonalInfo/substeps/SocialSecurityNumberStep.tsx
+++ b/src/pages/EnablePayments/PersonalInfo/substeps/SocialSecurityNumberStep.tsx
@@ -1,17 +1,11 @@
 import React, {useCallback} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-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 SingleFieldStep from '@components/SubStepForms/SingleFieldStep';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import useWalletAdditionalDetailsStepFormSubmit from '@hooks/useWalletAdditionalDetailsStepFormSubmit';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
@@ -19,12 +13,12 @@ import INPUT_IDS from '@src/types/form/WalletAdditionalDetailsForm';
 const PERSONAL_INFO_STEP_KEY = INPUT_IDS.PERSONAL_INFO_STEP;
 const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.SSN_LAST_4];
 
-function SocialSecurityNumberStep({onNext, isEditing}: SubStepProps) {
+function SocialSecurityNumberStep({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
     const [walletAdditionalDetails] = useOnyx(ONYXKEYS.WALLET_ADDITIONAL_DETAILS);
     const shouldAskForFullSSN = walletAdditionalDetails?.errorCode === CONST.WALLET.ERROR.SSN;
+    const defaultSsnLast4 = walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.SSN_LAST_4] ?? '';
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>): FormInputErrors<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS> => {
@@ -43,8 +37,6 @@ function SocialSecurityNumberStep({onNext, isEditing}: SubStepProps) {
         [translate, shouldAskForFullSSN],
     );
 
-    const defaultSsnLast4 = walletAdditionalDetails?.[PERSONAL_INFO_STEP_KEY.SSN_LAST_4] ?? '';
-
     const handleSubmit = useWalletAdditionalDetailsStepFormSubmit({
         fieldIds: STEP_FIELDS,
         onNext,
@@ -52,33 +44,21 @@ function SocialSecurityNumberStep({onNext, isEditing}: SubStepProps) {
     });
 
     return (
-        <FormProvider
+        <SingleFieldStep<typeof ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.WALLET_ADDITIONAL_DETAILS}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            formTitle={translate('personalInfoStep.whatsYourSSN')}
+            formDisclaimer={translate('personalInfoStep.noPersonalChecks')}
             validate={validate}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('personalInfoStep.whatsYourSSN')}</Text>
-                <Text style={[styles.textSupporting]}>{translate('personalInfoStep.noPersonalChecks')}</Text>
-                <View style={[styles.flex1]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={PERSONAL_INFO_STEP_KEY.SSN_LAST_4}
-                        label={translate(shouldAskForFullSSN ? 'common.ssnFull9' : 'personalInfoStep.last4SSN')}
-                        aria-label={translate(shouldAskForFullSSN ? 'common.ssnFull9' : 'personalInfoStep.last4SSN')}
-                        role={CONST.ROLE.PRESENTATION}
-                        containerStyles={[styles.mt6]}
-                        inputMode={CONST.INPUT_MODE.NUMERIC}
-                        defaultValue={defaultSsnLast4}
-                        maxLength={shouldAskForFullSSN ? CONST.BANK_ACCOUNT.MAX_LENGTH.FULL_SSN : CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
-                        shouldSaveDraft={!isEditing}
-                    />
-                </View>
-                <HelpLinks containerStyles={[styles.mt5]} />
-            </View>
-        </FormProvider>
+            inputId={PERSONAL_INFO_STEP_KEY.SSN_LAST_4}
+            inputLabel={translate(shouldAskForFullSSN ? 'common.ssnFull9' : 'personalInfoStep.last4SSN')}
+            inputMode={CONST.INPUT_MODE.NUMERIC}
+            defaultValue={defaultSsnLast4}
+            maxLength={shouldAskForFullSSN ? CONST.BANK_ACCOUNT.MAX_LENGTH.FULL_SSN : CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
+        />
     );
 }
 
diff --git a/src/pages/MissingPersonalDetails/substeps/Address.tsx b/src/pages/MissingPersonalDetails/substeps/Address.tsx
index c61dc8b2dcbe5..a9e74574d5f95 100644
--- a/src/pages/MissingPersonalDetails/substeps/Address.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/Address.tsx
@@ -37,6 +37,40 @@ function AddressStep({isEditing, onNext, personalDetailsValues}: CustomSubStepPr
         shouldSaveDraft: true,
     });
 
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
+            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
+            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],
+    );
+
     const handleAddressChange = useCallback((value: unknown, key: unknown) => {
         const addressPart = value as string;
         const addressPartKey = key as keyof Address;
@@ -71,40 +105,6 @@ function AddressStep({isEditing, onNext, personalDetailsValues}: CustomSubStepPr
 
     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 (
         <FormProvider
             formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
diff --git a/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx b/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx
index b5c27912cd6a9..c4bd07b0f4ae7 100644
--- a/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/Confirmation.tsx
@@ -1,82 +1,64 @@
 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 ConfirmationStep from '@components/SubStepForms/ConfirmationStep';
 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) {
+function Confirmation({personalDetailsValues: values, onNext, onMove, isEditing}: CustomSubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const {isOffline} = useNetwork();
+
+    const summaryItems = [
+        {
+            description: translate('personalInfoStep.legalName'),
+            title: `${values[INPUT_IDS.LEGAL_FIRST_NAME]} ${values[INPUT_IDS.LEGAL_LAST_NAME]}`,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_DETAILS_STEP_INDEXES.LEGAL_NAME);
+            },
+        },
+        {
+            description: translate('common.dob'),
+            title: values[INPUT_IDS.DATE_OF_BIRTH],
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_DETAILS_STEP_INDEXES.DATE_OF_BIRTH);
+            },
+        },
+        {
+            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: true,
+            onPress: () => {
+                onMove(PERSONAL_DETAILS_STEP_INDEXES.ADDRESS);
+            },
+        },
+        {
+            description: translate('common.phoneNumber'),
+            title: values[INPUT_IDS.PHONE_NUMBER],
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_DETAILS_STEP_INDEXES.PHONE_NUMBER);
+            },
+        },
+    ];
 
     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
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
+            pageTitle={translate('personalInfoStep.letsDoubleCheck')}
+            summaryItems={summaryItems}
+            showOnfidoLinks={false}
+        />
     );
 }
 
-ConfirmationStep.displayName = 'ConfirmationStep';
+Confirmation.displayName = 'Confirmation';
 
-export default ConfirmationStep;
+export default Confirmation;
diff --git a/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx b/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx
index f9b54c1b4758d..f00fb912cce56 100644
--- a/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/DateOfBirth.tsx
@@ -1,28 +1,15 @@
-import {subYears} from 'date-fns';
-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 React from 'react';
+import DateOfBirthStep from '@components/SubStepForms/DateOfBirthStep';
 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';
 
 const STEP_FIELDS = [INPUT_IDS.DATE_OF_BIRTH];
 
-function DateOfBirthStep({isEditing, onNext, personalDetailsValues}: CustomSubStepProps) {
+function DateOfBirth({isEditing, onNext, onMove, 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_FOR_PAYMENT);
 
     const handleSubmit = usePersonalDetailsFormSubmit({
         fieldIds: STEP_FIELDS,
@@ -30,45 +17,22 @@ function DateOfBirthStep({isEditing, onNext, personalDetailsValues}: CustomSubSt
         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 (
-        <FormProvider
+        <DateOfBirthStep<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            formTitle={translate('privatePersonalDetails.enterDateOfBirth')}
             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>
+            stepFields={STEP_FIELDS}
+            dobInputID={INPUT_IDS.DATE_OF_BIRTH}
+            dobDefaultValue={personalDetailsValues[INPUT_IDS.DATE_OF_BIRTH]}
+            shouldShowHelpLinks={false}
+        />
     );
 }
 
-DateOfBirthStep.displayName = 'DateOfBirthStep';
+DateOfBirth.displayName = 'DateOfBirth';
 
-export default DateOfBirthStep;
+export default DateOfBirth;
diff --git a/src/pages/MissingPersonalDetails/substeps/LegalName.tsx b/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
index 01d4f52dee7d4..7480cd95ab4cb 100644
--- a/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/LegalName.tsx
@@ -1,13 +1,8 @@
 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 FullNameStep from '@components/SubStepForms/FullNameStep';
 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';
@@ -17,9 +12,13 @@ import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
 
 const STEP_FIELDS = [INPUT_IDS.LEGAL_FIRST_NAME, INPUT_IDS.LEGAL_LAST_NAME];
 
-function LegalNameStep({isEditing, onNext, personalDetailsValues}: CustomSubStepProps) {
+function LegalName({isEditing, onNext, onMove, personalDetailsValues}: CustomSubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const defaultValues = {
+        firstName: personalDetailsValues[INPUT_IDS.LEGAL_FIRST_NAME],
+        lastName: personalDetailsValues[INPUT_IDS.LEGAL_LAST_NAME],
+    };
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
@@ -62,46 +61,23 @@ function LegalNameStep({isEditing, onNext, personalDetailsValues}: CustomSubStep
     });
 
     return (
-        <FormProvider
+        <FullNameStep<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            formTitle={translate('privatePersonalDetails.enterLegalName')}
             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>
+            customValidate={validate}
+            stepFields={STEP_FIELDS}
+            firstNameInputID={INPUT_IDS.LEGAL_FIRST_NAME}
+            lastNameInputID={INPUT_IDS.LEGAL_LAST_NAME}
+            defaultValues={defaultValues}
+            shouldShowHelpLinks={false}
+        />
     );
 }
 
-LegalNameStep.displayName = 'LegalNameStep';
+LegalName.displayName = 'LegalName';
 
-export default LegalNameStep;
+export default LegalName;
diff --git a/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx b/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx
index 0ca220cf6e22f..81f359f403d16 100644
--- a/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx
+++ b/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx
@@ -1,14 +1,9 @@
 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 SingleFieldStep from '@components/SubStepForms/SingleFieldStep';
 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';
@@ -19,15 +14,8 @@ import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
 
 const STEP_FIELDS = [INPUT_IDS.PHONE_NUMBER];
 
-function PhoneNumberStep({isEditing, onNext, personalDetailsValues}: CustomSubStepProps) {
+function PhoneNumberStep({isEditing, onNext, onMove, 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> => {
@@ -45,29 +33,27 @@ function PhoneNumberStep({isEditing, onNext, personalDetailsValues}: CustomSubSt
         [translate],
     );
 
+    const handleSubmit = usePersonalDetailsFormSubmit({
+        fieldIds: STEP_FIELDS,
+        onNext,
+        shouldSaveDraft: true,
+    });
+
     return (
-        <FormProvider
+        <SingleFieldStep<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            onSubmit={handleSubmit}
+            formTitle={translate('privatePersonalDetails.enterPhoneNumber')}
             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>
+            onSubmit={handleSubmit}
+            inputId={INPUT_IDS.PHONE_NUMBER}
+            inputLabel={translate('common.phoneNumber')}
+            inputMode={CONST.INPUT_MODE.TEL}
+            defaultValue={personalDetailsValues[INPUT_IDS.PHONE_NUMBER]}
+            shouldShowHelpLinks={false}
+        />
     );
 }
 
diff --git a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
index 888ad24ba2bef..8bb02fdda4d02 100644
--- a/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/BankInfo.tsx
@@ -1,13 +1,9 @@
 import React, {useCallback, useEffect, useMemo} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
 import * as BankAccounts from '@userActions/BankAccounts';
@@ -37,7 +33,6 @@ function BankInfo({onBackButtonPress, policyID}: BankInfoProps) {
     const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
     const [plaidLinkToken] = useOnyx(ONYXKEYS.PLAID_LINK_TOKEN);
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
     const [redirectedFromPlaidToManual, setRedirectedFromPlaidToManual] = React.useState(false);
     const values = useMemo(() => getSubstepValues(BANK_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount ?? {}), [reimbursementAccount, reimbursementAccountDraft]);
@@ -125,28 +120,20 @@ function BankInfo({onBackButtonPress, policyID}: BankInfoProps) {
     };
 
     return (
-        <ScreenWrapper
-            testID={BankInfo.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={BankInfo.displayName}
             shouldEnablePickerAvoiding={false}
+            handleBackButtonPress={handleBackButtonPress}
+            headerTitle={translate('bankAccount.bankInfo')}
+            startStepIndex={0}
+            stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                shouldShowBackButton
-                onBackButtonPress={handleBackButtonPress}
-                title={translate('bankAccount.bankInfo')}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={0}
-                    stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
-                />
-            </View>
             <SubStep
                 isEditing={isEditing}
                 onNext={nextScreen}
                 onMove={moveTo}
             />
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
index 1b03432b7f3e5..99191db675a94 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
@@ -1,31 +1,21 @@
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import FormProvider from '@components/Form/FormProvider';
-import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
-import Text from '@components/Text';
+import {useOnyx} from 'react-native-onyx';
+import AddressStep from '@components/SubStepForms/AddressStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 
 const BENEFICIAL_OWNER_INFO_KEY = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA;
 const BENEFICIAL_OWNER_PREFIX = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA.PREFIX;
 
-type AddressUBOOnyxProps = {
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-type AddressUBOProps = SubStepProps & AddressUBOOnyxProps & {beneficialOwnerBeingModifiedID: string};
+type AddressUBOProps = SubStepProps & {beneficialOwnerBeingModifiedID: string};
 
-function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwnerBeingModifiedID}: AddressUBOProps) {
+function AddressUBO({onNext, onMove, isEditing, beneficialOwnerBeingModifiedID}: AddressUBOProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const inputKeys = {
         street: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.STREET}`,
@@ -34,8 +24,6 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
         zipCode: `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${BENEFICIAL_OWNER_INFO_KEY.ZIP_CODE}`,
     } as const;
 
-    const stepFields = [inputKeys.street, inputKeys.city, inputKeys.state, inputKeys.zipCode];
-
     const defaultValues = {
         street: reimbursementAccountDraft?.[inputKeys.street] ?? '',
         city: reimbursementAccountDraft?.[inputKeys.city] ?? '',
@@ -43,19 +31,7 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
         zipCode: reimbursementAccountDraft?.[inputKeys.zipCode] ?? '',
     };
 
-    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
-        const errors = ValidationUtils.getFieldRequiredErrors(values, stepFields);
-
-        if (values[inputKeys.street] && !ValidationUtils.isValidAddress(values[inputKeys.street])) {
-            errors[inputKeys.street] = translate('bankAccount.error.addressStreet');
-        }
-
-        if (values[inputKeys.zipCode] && !ValidationUtils.isValidZipCode(values[inputKeys.zipCode])) {
-            errors[inputKeys.zipCode] = translate('bankAccount.error.zipCode');
-        }
-
-        return errors;
-    };
+    const stepFields = [inputKeys.street, inputKeys.city, inputKeys.state, inputKeys.zipCode];
 
     const handleSubmit = useReimbursementAccountStepFormSubmit({
         fieldIds: stepFields,
@@ -64,30 +40,22 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
     });
 
     return (
-        <FormProvider
+        <AddressStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}
+            formPOBoxDisclaimer={translate('common.noPO')}
             onSubmit={handleSubmit}
-            submitButtonStyles={[styles.mb0]}
-            style={[styles.mh5, styles.flexGrow1]}
-        >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheOwnersAddress')}</Text>
-            <Text style={[styles.textSupporting]}>{translate('common.noPO')}</Text>
-            <AddressFormFields
-                inputKeys={inputKeys}
-                shouldSaveDraft={!isEditing}
-                defaultValues={defaultValues}
-                streetTranslationKey="common.streetAddress"
-            />
-        </FormProvider>
+            stepFields={stepFields}
+            inputFieldsIDs={inputKeys}
+            defaultValues={defaultValues}
+            shouldShowHelpLinks={false}
+        />
     );
 }
 
 AddressUBO.displayName = 'AddressUBO';
 
-export default withOnyx<AddressUBOProps, AddressUBOOnyxProps>({
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(AddressUBO);
+export default AddressUBO;
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
index 13aa2b4056bce..47f3327648d4d 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
@@ -1,139 +1,75 @@
 import React 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 MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import SafeAreaConsumer from '@components/SafeAreaConsumer';
-import ScrollView from '@components/ScrollView';
-import Text from '@components/Text';
-import TextLink from '@components/TextLink';
+import {useOnyx} from 'react-native-onyx';
+import ConfirmationStep from '@components/SubStepForms/ConfirmationStep';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import getValuesForBeneficialOwner from '@pages/ReimbursementAccount/utils/getValuesForBeneficialOwner';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
-import type {ReimbursementAccount} from '@src/types/onyx';
 
-type ConfirmationUBOOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-type ConfirmationUBOProps = SubStepProps & ConfirmationUBOOnyxProps & {beneficialOwnerBeingModifiedID: string};
+type ConfirmationUBOProps = SubStepProps & {beneficialOwnerBeingModifiedID: string};
 
 const UBO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT.SUBSTEP_INDEX.UBO;
 
-function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNext, onMove, beneficialOwnerBeingModifiedID}: ConfirmationUBOProps) {
+function ConfirmationUBO({onNext, onMove, isEditing, beneficialOwnerBeingModifiedID}: ConfirmationUBOProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const {isOffline} = useNetwork();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const values = getValuesForBeneficialOwner(beneficialOwnerBeingModifiedID, reimbursementAccountDraft);
     const error = reimbursementAccount ? ErrorUtils.getLatestErrorMessage(reimbursementAccount) : '';
 
-    return (
-        <SafeAreaConsumer>
-            {({safeAreaPaddingBottomStyle}) => (
-                <ScrollView
-                    style={styles.pt0}
-                    contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
-                >
-                    <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
-                    <MenuItemWithTopDescription
-                        description={translate('beneficialOwnerInfoStep.legalName')}
-                        title={`${values.firstName} ${values.lastName}`}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(UBO_STEP_INDEXES.LEGAL_NAME);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('common.dob')}
-                        title={values.dob}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('beneficialOwnerInfoStep.last4SSN')}
-                        title={values.ssnLast4}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(UBO_STEP_INDEXES.SSN);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('beneficialOwnerInfoStep.address')}
-                        title={`${values.street}, ${values.city}, ${values.state} ${values.zipCode}`}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(UBO_STEP_INDEXES.ADDRESS);
-                        }}
-                    />
+    const summaryItems = [
+        {
+            description: translate('beneficialOwnerInfoStep.legalName'),
+            title: `${values.firstName} ${values.lastName}`,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(UBO_STEP_INDEXES.LEGAL_NAME);
+            },
+        },
+        {
+            description: translate('common.dob'),
+            title: values.dob,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
+            },
+        },
+        {
+            description: translate('beneficialOwnerInfoStep.last4SSN'),
+            title: values.ssnLast4,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(UBO_STEP_INDEXES.SSN);
+            },
+        },
+        {
+            description: translate('beneficialOwnerInfoStep.address'),
+            title: `${values.street}, ${values.city}, ${values.state} ${values.zipCode}`,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(UBO_STEP_INDEXES.ADDRESS);
+            },
+        },
+    ];
 
-                    <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
-                        {`${translate('beneficialOwnerInfoStep.byAddingThisBankAccount')} `}
-                        <TextLink
-                            href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('onfidoStep.facialScan')}
-                        </TextLink>
-                        {', '}
-                        <TextLink
-                            href={CONST.ONFIDO_PRIVACY_POLICY_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('common.privacy')}
-                        </TextLink>
-                        {` ${translate('common.and')} `}
-                        <TextLink
-                            href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('common.termsOfService')}
-                        </TextLink>
-                    </Text>
-                    <View style={[styles.ph5, styles.mtAuto]}>
-                        {error && error.length > 0 && (
-                            <DotIndicatorMessage
-                                textStyles={[styles.formError]}
-                                type="error"
-                                messages={{error}}
-                            />
-                        )}
-                        <Button
-                            isDisabled={isOffline}
-                            success
-                            large
-                            style={[styles.w100, styles.mt2, styles.pb5]}
-                            onPress={onNext}
-                            text={translate('common.confirm')}
-                        />
-                    </View>
-                </ScrollView>
-            )}
-        </SafeAreaConsumer>
+    return (
+        <ConfirmationStep
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
+            pageTitle={translate('beneficialOwnerInfoStep.letsDoubleCheck')}
+            summaryItems={summaryItems}
+            showOnfidoLinks
+            onfidoLinksTitle={`${translate('beneficialOwnerInfoStep.byAddingThisBankAccount')} `}
+            error={error}
+        />
     );
 }
 
 ConfirmationUBO.displayName = 'ConfirmationUBO';
 
-export default withOnyx<ConfirmationUBOProps, ConfirmationUBOOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(ConfirmationUBO);
+export default ConfirmationUBO;
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
index b5a4a6a94bed2..c2cd95784596f 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/DateOfBirthUBO.tsx
@@ -1,54 +1,25 @@
-import {subYears} from 'date-fns';
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-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 {useOnyx} from 'react-native-onyx';
+import DateOfBirthStep from '@components/SubStepForms/DateOfBirthStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 
 const DOB = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA.DOB;
 const BENEFICIAL_OWNER_PREFIX = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA.PREFIX;
 
-type DateOfBirthUBOOnyxProps = {
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-type DateOfBirthUBOProps = SubStepProps & DateOfBirthUBOOnyxProps & {beneficialOwnerBeingModifiedID: string};
+type DateOfBirthUBOProps = SubStepProps & {beneficialOwnerBeingModifiedID: string};
 
-function DateOfBirthUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwnerBeingModifiedID}: DateOfBirthUBOProps) {
+function DateOfBirthUBO({onNext, onMove, isEditing, beneficialOwnerBeingModifiedID}: DateOfBirthUBOProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const dobInputID = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${DOB}` as const;
     const dobDefaultValue = reimbursementAccountDraft?.[dobInputID] ?? '';
 
-    const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
-    const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
-
-    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
-        const errors = ValidationUtils.getFieldRequiredErrors(values, [dobInputID]);
-
-        if (values[dobInputID]) {
-            if (!ValidationUtils.isValidPastDate(values[dobInputID]) || !ValidationUtils.meetsMaximumAgeRequirement(values[dobInputID])) {
-                errors[dobInputID] = translate('bankAccount.error.dob');
-            } else if (!ValidationUtils.meetsMinimumAgeRequirement(values[dobInputID])) {
-                errors[dobInputID] = translate('bankAccount.error.age');
-            }
-        }
-
-        return errors;
-    };
-
     const handleSubmit = useReimbursementAccountStepFormSubmit({
         fieldIds: [dobInputID],
         onNext,
@@ -56,34 +27,21 @@ function DateOfBirthUBO({reimbursementAccountDraft, onNext, isEditing, beneficia
     });
 
     return (
-        <FormProvider
+        <DateOfBirthStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
-            submitButtonStyles={[styles.mb0]}
-        >
-            <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('beneficialOwnerInfoStep.enterTheDateOfBirthOfTheOwner')}</Text>
-            <InputWrapper
-                InputComponent={DatePicker}
-                inputID={dobInputID}
-                label={translate('common.dob')}
-                containerStyles={[styles.mt6]}
-                placeholder={translate('common.dateFormat')}
-                defaultValue={dobDefaultValue}
-                minDate={minDate}
-                maxDate={maxDate}
-                shouldSaveDraft={!isEditing}
-            />
-        </FormProvider>
+            stepFields={[dobInputID]}
+            dobInputID={dobInputID}
+            dobDefaultValue={dobDefaultValue}
+            shouldShowHelpLinks={false}
+        />
     );
 }
 
 DateOfBirthUBO.displayName = 'DateOfBirthUBO';
 
-export default withOnyx<DateOfBirthUBOProps, DateOfBirthUBOOnyxProps>({
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(DateOfBirthUBO);
+export default DateOfBirthUBO;
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
index b17bf641eca5b..074874795d5e3 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/LegalNameUBO.tsx
@@ -1,41 +1,30 @@
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-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 {useOnyx} from 'react-native-onyx';
+import type {FormOnyxValues} from '@components/Form/types';
+import FullNameStep from '@components/SubStepForms/FullNameStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 
 const {FIRST_NAME, LAST_NAME} = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA;
 const BENEFICIAL_OWNER_PREFIX = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA.PREFIX;
 
-type LegalNameUBOOnyxProps = {
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-type LegalNameUBOProps = SubStepProps & LegalNameUBOOnyxProps & {beneficialOwnerBeingModifiedID: string};
+type LegalNameUBOProps = SubStepProps & {beneficialOwnerBeingModifiedID: string};
 
-function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwnerBeingModifiedID}: LegalNameUBOProps) {
+function LegalNameUBO({onNext, onMove, isEditing, beneficialOwnerBeingModifiedID}: LegalNameUBOProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
 
-    const firstNameInputID = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${FIRST_NAME}` as const;
-    const lastNameInputID = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${LAST_NAME}` as const;
-    const stepFields = [firstNameInputID, lastNameInputID];
-    const defaultFirstName = reimbursementAccountDraft?.[firstNameInputID] ?? '';
-    const defaultLastName = reimbursementAccountDraft?.[lastNameInputID] ?? '';
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
-    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> =>
-        ValidationUtils.getFieldRequiredErrors(values, stepFields);
+    const firstNameInputID = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${FIRST_NAME}` as keyof FormOnyxValues;
+    const lastNameInputID = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${LAST_NAME}` as keyof FormOnyxValues;
+    const stepFields = [firstNameInputID, lastNameInputID];
+    const defaultValues = {
+        firstName: reimbursementAccountDraft?.[firstNameInputID] ?? '',
+        lastName: reimbursementAccountDraft?.[lastNameInputID] ?? '',
+    };
 
     const handleSubmit = useReimbursementAccountStepFormSubmit({
         fieldIds: stepFields,
@@ -44,43 +33,21 @@ function LegalNameUBO({reimbursementAccountDraft, onNext, isEditing, beneficialO
     });
 
     return (
-        <FormProvider
+        <FullNameStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-            submitButtonStyles={[styles.mb0]}
-        >
-            <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('beneficialOwnerInfoStep.enterLegalFirstAndLastName')}</Text>
-            <InputWrapper
-                InputComponent={TextInput}
-                label={translate('beneficialOwnerInfoStep.legalFirstName')}
-                aria-label={translate('beneficialOwnerInfoStep.legalFirstName')}
-                role={CONST.ROLE.PRESENTATION}
-                inputID={firstNameInputID}
-                containerStyles={[styles.mt6]}
-                defaultValue={defaultFirstName}
-                shouldSaveDraft={!isEditing}
-            />
-            <InputWrapper
-                InputComponent={TextInput}
-                label={translate('beneficialOwnerInfoStep.legalLastName')}
-                aria-label={translate('beneficialOwnerInfoStep.legalLastName')}
-                role={CONST.ROLE.PRESENTATION}
-                inputID={lastNameInputID}
-                containerStyles={[styles.mt6]}
-                defaultValue={defaultLastName}
-                shouldSaveDraft={!isEditing}
-            />
-        </FormProvider>
+            stepFields={stepFields}
+            firstNameInputID={firstNameInputID}
+            lastNameInputID={lastNameInputID}
+            defaultValues={defaultValues}
+        />
     );
 }
 
 LegalNameUBO.displayName = 'LegalNameUBO';
 
-export default withOnyx<LegalNameUBOProps, LegalNameUBOOnyxProps>({
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(LegalNameUBO);
+export default LegalNameUBO;
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
index 483d2750f3996..7646a51f6c5f3 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO.tsx
@@ -1,33 +1,23 @@
 import React from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
+import {useOnyx} from 'react-native-onyx';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
-import Text from '@components/Text';
-import TextInput from '@components/TextInput';
+import SingleFieldStep from '@components/SubStepForms/SingleFieldStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 
 const SSN_LAST_4 = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA.SSN_LAST_4;
 const BENEFICIAL_OWNER_PREFIX = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.BENEFICIAL_OWNER_DATA.PREFIX;
 
-type SocialSecurityNumberUBOOnyxProps = {
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-type SocialSecurityNumberUBOProps = SubStepProps & SocialSecurityNumberUBOOnyxProps & {beneficialOwnerBeingModifiedID: string};
+type SocialSecurityNumberUBOProps = SubStepProps & {beneficialOwnerBeingModifiedID: string};
 
-function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwnerBeingModifiedID}: SocialSecurityNumberUBOProps) {
+function SocialSecurityNumberUBO({onNext, onMove, isEditing, beneficialOwnerBeingModifiedID}: SocialSecurityNumberUBOProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const ssnLast4InputID = `${BENEFICIAL_OWNER_PREFIX}_${beneficialOwnerBeingModifiedID}_${SSN_LAST_4}` as const;
     const defaultSsnLast4 = reimbursementAccountDraft?.[ssnLast4InputID] ?? '';
@@ -48,40 +38,25 @@ function SocialSecurityNumberUBO({reimbursementAccountDraft, onNext, isEditing,
     });
 
     return (
-        <FormProvider
+        <SingleFieldStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            formTitle={translate('beneficialOwnerInfoStep.enterTheLast4')}
+            formDisclaimer={translate('beneficialOwnerInfoStep.dontWorry')}
             validate={validate}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-            submitButtonStyles={[styles.mb0]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('beneficialOwnerInfoStep.enterTheLast4')}</Text>
-                <Text style={[styles.textSupporting]}>{translate('beneficialOwnerInfoStep.dontWorry')}</Text>
-                <View style={[styles.flex1]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={ssnLast4InputID}
-                        label={translate('beneficialOwnerInfoStep.last4SSN')}
-                        aria-label={translate('beneficialOwnerInfoStep.last4SSN')}
-                        role={CONST.ROLE.PRESENTATION}
-                        containerStyles={[styles.mt6]}
-                        inputMode={CONST.INPUT_MODE.NUMERIC}
-                        defaultValue={defaultSsnLast4}
-                        maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
-                        shouldSaveDraft={!isEditing}
-                    />
-                </View>
-            </View>
-        </FormProvider>
+            inputId={ssnLast4InputID}
+            inputLabel={translate('beneficialOwnerInfoStep.last4SSN')}
+            inputMode={CONST.INPUT_MODE.NUMERIC}
+            defaultValue={defaultSsnLast4}
+            shouldShowHelpLinks={false}
+            maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
+        />
     );
 }
 
 SocialSecurityNumberUBO.displayName = 'SocialSecurityNumberUBO';
 
-export default withOnyx<SocialSecurityNumberUBOProps, SocialSecurityNumberUBOOnyxProps>({
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(SocialSecurityNumberUBO);
+export default SocialSecurityNumberUBO;
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx b/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx
index ae0fded74347d..6d70e966fa2d4 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnersStep.tsx
@@ -1,21 +1,14 @@
 import {Str} from 'expensify-common';
 import React, {useState} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import {useOnyx} from 'react-native-onyx';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
-import type {ReimbursementAccount} from '@src/types/onyx';
 import BeneficialOwnerCheckUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerCheckUBO';
 import AddressUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO';
 import ConfirmationUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO';
@@ -24,15 +17,7 @@ import LegalNameUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsF
 import SocialSecurityNumberUBO from './BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/SocialSecurityNumberUBO';
 import CompanyOwnersListUBO from './BeneficialOwnerInfo/substeps/CompanyOwnersListUBO';
 
-type BeneficialOwnerInfoOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-
-type BeneficialOwnersStepProps = BeneficialOwnerInfoOnyxProps & {
+type BeneficialOwnersStepProps = {
     /** Goes to the previous step */
     onBackButtonPress: () => void;
 };
@@ -43,9 +28,12 @@ const SUBSTEP = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.SUBSTEP;
 const MAX_NUMBER_OF_UBOS = 4;
 const bodyContent: Array<React.ComponentType<BeneficialOwnerSubStepProps>> = [LegalNameUBO, DateOfBirthUBO, SocialSecurityNumberUBO, AddressUBO, ConfirmationUBO];
 
-function BeneficialOwnersStep({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress}: BeneficialOwnersStepProps) {
+function BeneficialOwnersStep({onBackButtonPress}: BeneficialOwnersStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
+
     const companyName = reimbursementAccount?.achData?.companyName ?? '';
     const policyID = reimbursementAccount?.achData?.policyID ?? '-1';
     const defaultValues = {
@@ -216,23 +204,15 @@ function BeneficialOwnersStep({reimbursementAccount, reimbursementAccountDraft,
     };
 
     return (
-        <ScreenWrapper
-            testID={BeneficialOwnersStep.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={BeneficialOwnersStep.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('beneficialOwnerInfoStep.companyOwner')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={4}
+            stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('beneficialOwnerInfoStep.companyOwner')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={4}
-                    stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
-                />
-            </View>
-
             {currentUBOSubstep === SUBSTEP.IS_USER_UBO && (
                 <BeneficialOwnerCheckUBO
                     title={`${translate('beneficialOwnerInfoStep.doYouOwn25percent')} ${companyName}?`}
@@ -276,18 +256,10 @@ function BeneficialOwnersStep({reimbursementAccount, reimbursementAccountDraft,
                     isAnyoneElseUBO={isAnyoneElseUBO}
                 />
             )}
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
 BeneficialOwnersStep.displayName = 'BeneficialOwnersStep';
 
-export default withOnyx<BeneficialOwnersStepProps, BeneficialOwnerInfoOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(BeneficialOwnersStep);
+export default BeneficialOwnersStep;
diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
index 7aadcfc56b950..0a94e22cde1f1 100644
--- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
+++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx
@@ -1,14 +1,10 @@
 import lodashPick from 'lodash/pick';
 import React, {useCallback, useMemo} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import {parsePhoneNumber} from '@libs/PhoneNumber';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import getInitialSubstepForBusinessInfo from '@pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo';
@@ -48,7 +44,6 @@ const bodyContent: Array<React.ComponentType<SubStepProps>> = [
 
 function BusinessInfo({onBackButtonPress}: BusinessInfoProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
     const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
@@ -107,29 +102,22 @@ function BusinessInfo({onBackButtonPress}: BusinessInfoProps) {
     };
 
     return (
-        <ScreenWrapper
-            testID={BusinessInfo.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={BusinessInfo.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('businessInfoStep.businessInfo')}
+            guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={3}
+            stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('businessInfoStep.businessInfo')}
-                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={3}
-                    stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
-                />
-            </View>
             <SubStep
                 isEditing={isEditing}
                 onNext={nextScreen}
                 onMove={moveTo}
             />
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx b/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx
index 900ca7207f596..cbc9f8d7f4039 100644
--- a/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx
+++ b/src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.tsx
@@ -1,33 +1,18 @@
 import type {ComponentType} from 'react';
 import React, {useCallback, useMemo} from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import {useOnyx} from 'react-native-onyx';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
 import ConfirmAgreements from './substeps/ConfirmAgreements';
 
-type CompleteVerificationOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-
-type CompleteVerificationProps = CompleteVerificationOnyxProps & {
+type CompleteVerificationProps = {
     /** Handles back button press */
     onBackButtonPress: () => void;
 };
@@ -35,9 +20,11 @@ type CompleteVerificationProps = CompleteVerificationOnyxProps & {
 const COMPLETE_VERIFICATION_KEYS = INPUT_IDS.COMPLETE_VERIFICATION;
 const bodyContent: Array<ComponentType<SubStepProps>> = [ConfirmAgreements];
 
-function CompleteVerification({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress}: CompleteVerificationProps) {
+function CompleteVerification({onBackButtonPress}: CompleteVerificationProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const values = useMemo(() => getSubstepValues(COMPLETE_VERIFICATION_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
     const policyID = reimbursementAccount?.achData?.policyID ?? '-1';
@@ -70,39 +57,24 @@ function CompleteVerification({reimbursementAccount, reimbursementAccountDraft,
     };
 
     return (
-        <ScreenWrapper
-            testID={CompleteVerification.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={CompleteVerification.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('completeVerificationStep.completeVerification')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={5}
+            stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                onBackButtonPress={handleBackButtonPress}
-                title={translate('completeVerificationStep.completeVerification')}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={5}
-                    stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
-                />
-            </View>
             <SubStep
                 isEditing={isEditing}
                 onNext={nextScreen}
                 onMove={moveTo}
             />
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
 CompleteVerification.displayName = 'CompleteVerification';
 
-export default withOnyx<CompleteVerificationProps, CompleteVerificationOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(CompleteVerification);
+export default CompleteVerification;
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
index 1aa7e519416e7..1764bde198afd 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.tsx
@@ -1,38 +1,23 @@
-import type {RefAttributes} from 'react';
 import React, {forwardRef, useCallback, useMemo} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import type {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import getInitialSubstepForPersonalInfo from '@pages/ReimbursementAccount/utils/getInitialSubstepForPersonalInfo';
 import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
 import Address from './substeps/Address';
 import Confirmation from './substeps/Confirmation';
 import DateOfBirth from './substeps/DateOfBirth';
 import FullName from './substeps/FullName';
 import SocialSecurityNumber from './substeps/SocialSecurityNumber';
 
-type PersonalInfoOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-
-type PersonalInfoProps = PersonalInfoOnyxProps & {
+type PersonalInfoProps = {
     /** Goes to the previous step */
     onBackButtonPress: () => void;
 };
@@ -40,9 +25,11 @@ type PersonalInfoProps = PersonalInfoOnyxProps & {
 const PERSONAL_INFO_STEP_KEYS = INPUT_IDS.PERSONAL_INFO_STEP;
 const bodyContent: Array<React.ComponentType<SubStepProps>> = [FullName, DateOfBirth, SocialSecurityNumber, Address, Confirmation];
 
-function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress}: PersonalInfoProps, ref: React.ForwardedRef<View>) {
+function PersonalInfo({onBackButtonPress}: PersonalInfoProps, ref: React.ForwardedRef<View>) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const policyID = reimbursementAccount?.achData?.policyID ?? '-1';
     const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
@@ -79,40 +66,25 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackBu
     };
 
     return (
-        <ScreenWrapper
+        <InteractiveStepWrapper
             ref={ref}
-            testID={PersonalInfo.displayName}
-            includeSafeAreaPaddingBottom={false}
+            wrapperID={PersonalInfo.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('personalInfoStep.personalInfo')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={1}
+            stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('personalInfoStep.personalInfo')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={1}
-                    stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
-                />
-            </View>
             <SubStep
                 isEditing={isEditing}
                 onNext={nextScreen}
                 onMove={moveTo}
             />
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
 PersonalInfo.displayName = 'PersonalInfo';
 
-export default withOnyx<RefAttributes<View> & PersonalInfoProps, PersonalInfoOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(forwardRef(PersonalInfo));
+export default forwardRef(PersonalInfo);
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
index b37dd207ea37d..6477c57ac53af 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.tsx
@@ -1,27 +1,11 @@
-import React, {useCallback} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import FormProvider from '@components/Form/FormProvider';
-import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
-import Text from '@components/Text';
+import React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import AddressStep from '@components/SubStepForms/AddressStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
-
-type AddressOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-};
-
-type AddressProps = AddressOnyxProps & SubStepProps;
 
 const PERSONAL_INFO_STEP_KEY = INPUT_IDS.PERSONAL_INFO_STEP;
 
@@ -34,9 +18,10 @@ const INPUT_KEYS = {
 
 const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.STREET, PERSONAL_INFO_STEP_KEY.CITY, PERSONAL_INFO_STEP_KEY.STATE, PERSONAL_INFO_STEP_KEY.ZIP_CODE];
 
-function Address({reimbursementAccount, onNext, isEditing}: AddressProps) {
+function Address({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
 
     const defaultValues = {
         street: reimbursementAccount?.achData?.[PERSONAL_INFO_STEP_KEY.STREET] ?? '',
@@ -45,23 +30,6 @@ function Address({reimbursementAccount, onNext, isEditing}: AddressProps) {
         zipCode: reimbursementAccount?.achData?.[PERSONAL_INFO_STEP_KEY.ZIP_CODE] ?? '',
     };
 
-    const validate = useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
-            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
-
-            if (values.requestorAddressStreet && !ValidationUtils.isValidAddress(values.requestorAddressStreet)) {
-                errors.requestorAddressStreet = translate('bankAccount.error.addressStreet');
-            }
-
-            if (values.requestorAddressZipCode && !ValidationUtils.isValidZipCode(values.requestorAddressZipCode)) {
-                errors.requestorAddressZipCode = translate('bankAccount.error.zipCode');
-            }
-
-            return errors;
-        },
-        [translate],
-    );
-
     const handleSubmit = useReimbursementAccountStepFormSubmit({
         fieldIds: STEP_FIELDS,
         onNext,
@@ -69,34 +37,21 @@ function Address({reimbursementAccount, onNext, isEditing}: AddressProps) {
     });
 
     return (
-        <FormProvider
+        <AddressStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('personalInfoStep.enterYourAddress')}
+            formPOBoxDisclaimer={translate('common.noPO')}
             onSubmit={handleSubmit}
-            submitButtonStyles={[styles.mb0]}
-            style={[styles.mh5, styles.flexGrow1]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('personalInfoStep.enterYourAddress')}</Text>
-                <Text style={[styles.textSupporting]}>{translate('common.noPO')}</Text>
-                <AddressFormFields
-                    inputKeys={INPUT_KEYS}
-                    streetTranslationKey="common.streetAddress"
-                    defaultValues={defaultValues}
-                    shouldSaveDraft={!isEditing}
-                />
-                <HelpLinks containerStyles={[styles.mt6]} />
-            </View>
-        </FormProvider>
+            stepFields={STEP_FIELDS}
+            inputFieldsIDs={INPUT_KEYS}
+            defaultValues={defaultValues}
+        />
     );
 }
 
 Address.displayName = 'Address';
 
-export default withOnyx<AddressProps, AddressOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-})(Address);
+export default Address;
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
index af1f081cc3da7..d882adedd6fbc 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
@@ -1,146 +1,77 @@
 import React, {useMemo} 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 MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import SafeAreaConsumer from '@components/SafeAreaConsumer';
-import ScrollView from '@components/ScrollView';
-import Text from '@components/Text';
-import TextLink from '@components/TextLink';
+import {useOnyx} from 'react-native-onyx';
+import ConfirmationStep from '@components/SubStepForms/ConfirmationStep';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
-
-type ConfirmationOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-
-type ConfirmationProps = ConfirmationOnyxProps & SubStepProps;
 
 const PERSONAL_INFO_STEP_KEYS = INPUT_IDS.PERSONAL_INFO_STEP;
 const PERSONAL_INFO_STEP_INDEXES = CONST.REIMBURSEMENT_ACCOUNT.SUBSTEP_INDEX.PERSONAL_INFO;
 
-function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}: ConfirmationProps) {
+function Confirmation({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    const {isOffline} = useNetwork();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const isLoading = reimbursementAccount?.isLoading ?? false;
     const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
     const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {});
 
-    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[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('common.dob')}
-                        title={values[PERSONAL_INFO_STEP_KEYS.DOB]}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('personalInfoStep.last4SSN')}
-                        title={values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4]}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
-                        }}
-                    />
-                    <MenuItemWithTopDescription
-                        description={translate('personalInfoStep.address')}
-                        title={`${values[PERSONAL_INFO_STEP_KEYS.STREET]}, ${values[PERSONAL_INFO_STEP_KEYS.CITY]}, ${values[PERSONAL_INFO_STEP_KEYS.STATE]} ${
-                            values[PERSONAL_INFO_STEP_KEYS.ZIP_CODE]
-                        }`}
-                        shouldShowRightIcon
-                        onPress={() => {
-                            onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
-                        }}
-                    />
+    const summaryItems = [
+        {
+            description: translate('personalInfoStep.legalName'),
+            title: `${values[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
+            },
+        },
+        {
+            description: translate('common.dob'),
+            title: values[PERSONAL_INFO_STEP_KEYS.DOB],
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
+            },
+        },
+        {
+            description: translate('personalInfoStep.last4SSN'),
+            title: values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4],
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
+            },
+        },
+        {
+            description: translate('personalInfoStep.address'),
+            title: `${values[PERSONAL_INFO_STEP_KEYS.STREET]}, ${values[PERSONAL_INFO_STEP_KEYS.CITY]}, ${values[PERSONAL_INFO_STEP_KEYS.STATE]} ${values[PERSONAL_INFO_STEP_KEYS.ZIP_CODE]}`,
+            shouldShowRightIcon: true,
+            onPress: () => {
+                onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
+            },
+        },
+    ];
 
-                    <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
-                        {`${translate('personalInfoStep.byAddingThisBankAccount')} `}
-                        <TextLink
-                            href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('onfidoStep.facialScan')}
-                        </TextLink>
-                        {', '}
-                        <TextLink
-                            href={CONST.ONFIDO_PRIVACY_POLICY_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('common.privacy')}
-                        </TextLink>
-                        {` ${translate('common.and')} `}
-                        <TextLink
-                            href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
-                            style={[styles.textMicro]}
-                        >
-                            {translate('common.termsOfService')}
-                        </TextLink>
-                    </Text>
-                    <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
-                        {error && error.length > 0 && (
-                            <DotIndicatorMessage
-                                textStyles={[styles.formError]}
-                                type="error"
-                                messages={{error}}
-                            />
-                        )}
-                        <Button
-                            isDisabled={isOffline}
-                            success
-                            large
-                            isLoading={isLoading}
-                            style={[styles.w100]}
-                            onPress={onNext}
-                            text={translate('common.confirm')}
-                        />
-                    </View>
-                </ScrollView>
-            )}
-        </SafeAreaConsumer>
+    return (
+        <ConfirmationStep
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
+            pageTitle={translate('personalInfoStep.letsDoubleCheck')}
+            summaryItems={summaryItems}
+            showOnfidoLinks
+            onfidoLinksTitle={`${translate('personalInfoStep.byAddingThisBankAccount')} `}
+            isLoading={isLoading}
+            error={error}
+        />
     );
 }
 
 Confirmation.displayName = 'Confirmation';
 
-export default withOnyx<ConfirmationProps, ConfirmationOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(Confirmation);
+export default Confirmation;
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx
index 8c68380d6e55d..526181a6cb84a 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.tsx
@@ -1,63 +1,23 @@
-import {subYears} from 'date-fns';
-import React, {useCallback} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-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 React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import DateOfBirthStep from '@components/SubStepForms/DateOfBirthStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccountForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
-
-type DateOfBirthOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** The draft values of the bank account being setup */
-    reimbursementAccountDraft: OnyxEntry<ReimbursementAccountForm>;
-};
-
-type DateOfBirthProps = DateOfBirthOnyxProps & SubStepProps;
 
 const PERSONAL_INFO_DOB_KEY = INPUT_IDS.PERSONAL_INFO_STEP.DOB;
 const STEP_FIELDS = [PERSONAL_INFO_DOB_KEY];
 
-function DateOfBirth({reimbursementAccount, reimbursementAccountDraft, onNext, isEditing}: DateOfBirthProps) {
+function DateOfBirth({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    const validate = useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
-            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
 
-            if (values.dob) {
-                if (!ValidationUtils.isValidPastDate(values.dob) || !ValidationUtils.meetsMaximumAgeRequirement(values.dob)) {
-                    errors.dob = translate('bankAccount.error.dob');
-                } else if (!ValidationUtils.meetsMinimumAgeRequirement(values.dob)) {
-                    errors.dob = translate('bankAccount.error.age');
-                }
-            }
-
-            return errors;
-        },
-        [translate],
-    );
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
 
     const dobDefaultValue = reimbursementAccount?.achData?.[PERSONAL_INFO_DOB_KEY] ?? reimbursementAccountDraft?.[PERSONAL_INFO_DOB_KEY] ?? '';
 
-    const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE);
-    const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT);
-
     const handleSubmit = useReimbursementAccountStepFormSubmit({
         fieldIds: STEP_FIELDS,
         onNext,
@@ -65,38 +25,20 @@ function DateOfBirth({reimbursementAccount, reimbursementAccountDraft, onNext, i
     });
 
     return (
-        <FormProvider
+        <DateOfBirthStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('personalInfoStep.enterYourDateOfBirth')}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow2, styles.justifyContentBetween]}
-            submitButtonStyles={[styles.mb0]}
-        >
-            <Text style={[styles.textHeadlineLineHeightXXL, styles.mb5]}>{translate('personalInfoStep.enterYourDateOfBirth')}</Text>
-            <InputWrapper
-                InputComponent={DatePicker}
-                inputID={PERSONAL_INFO_DOB_KEY}
-                label={translate('common.dob')}
-                placeholder={translate('common.dateFormat')}
-                defaultValue={dobDefaultValue}
-                minDate={minDate}
-                maxDate={maxDate}
-                shouldSaveDraft={!isEditing}
-            />
-            <HelpLinks containerStyles={[styles.mt5]} />
-        </FormProvider>
+            stepFields={STEP_FIELDS}
+            dobInputID={PERSONAL_INFO_DOB_KEY}
+            dobDefaultValue={dobDefaultValue}
+        />
     );
 }
 
 DateOfBirth.displayName = 'DateOfBirth';
 
-export default withOnyx<DateOfBirthProps, DateOfBirthOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    reimbursementAccountDraft: {
-        key: ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT,
-    },
-})(DateOfBirth);
+export default DateOfBirth;
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
index 15c4114432da4..8d07b9af79942 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.tsx
@@ -1,56 +1,25 @@
-import React, {useCallback} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-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 React from 'react';
+import {useOnyx} from 'react-native-onyx';
+import FullNameStep from '@components/SubStepForms/FullNameStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
-import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
-
-type FullNameOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-};
-
-type FullNameProps = FullNameOnyxProps & SubStepProps;
 
 const PERSONAL_INFO_STEP_KEY = INPUT_IDS.PERSONAL_INFO_STEP;
 const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.FIRST_NAME, PERSONAL_INFO_STEP_KEY.LAST_NAME];
-function FullName({reimbursementAccount, onNext, isEditing}: FullNameProps) {
+
+function FullName({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
 
     const defaultValues = {
         firstName: reimbursementAccount?.achData?.[PERSONAL_INFO_STEP_KEY.FIRST_NAME] ?? '',
         lastName: reimbursementAccount?.achData?.[PERSONAL_INFO_STEP_KEY.LAST_NAME] ?? '',
     };
 
-    const validate = useCallback(
-        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
-            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
-            if (values.firstName && !ValidationUtils.isValidPersonName(values.firstName)) {
-                errors.firstName = translate('bankAccount.error.firstName');
-            }
-
-            if (values.lastName && !ValidationUtils.isValidPersonName(values.lastName)) {
-                errors.lastName = translate('bankAccount.error.lastName');
-            }
-            return errors;
-        },
-        [translate],
-    );
-
     const handleSubmit = useReimbursementAccountStepFormSubmit({
         fieldIds: STEP_FIELDS,
         onNext,
@@ -58,49 +27,21 @@ function FullName({reimbursementAccount, onNext, isEditing}: FullNameProps) {
     });
 
     return (
-        <FormProvider
+        <FullNameStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
-            validate={validate}
+            formTitle={translate('personalInfoStep.enterYourLegalFirstAndLast')}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-            submitButtonStyles={[styles.mb0]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{translate('personalInfoStep.enterYourLegalFirstAndLast')}</Text>
-                <View style={[styles.flex2, styles.mb6]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={PERSONAL_INFO_STEP_KEY.FIRST_NAME}
-                        label={translate('personalInfoStep.legalFirstName')}
-                        aria-label={translate('personalInfoStep.legalFirstName')}
-                        role={CONST.ROLE.PRESENTATION}
-                        defaultValue={defaultValues.firstName}
-                        shouldSaveDraft={!isEditing}
-                    />
-                </View>
-                <View style={[styles.flex2, styles.mb6]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={PERSONAL_INFO_STEP_KEY.LAST_NAME}
-                        label={translate('personalInfoStep.legalLastName')}
-                        aria-label={translate('personalInfoStep.legalLastName')}
-                        role={CONST.ROLE.PRESENTATION}
-                        defaultValue={defaultValues.lastName}
-                        shouldSaveDraft={!isEditing}
-                    />
-                </View>
-                <HelpLinks />
-            </View>
-        </FormProvider>
+            stepFields={STEP_FIELDS}
+            firstNameInputID={PERSONAL_INFO_STEP_KEY.FIRST_NAME}
+            lastNameInputID={PERSONAL_INFO_STEP_KEY.LAST_NAME}
+            defaultValues={defaultValues}
+        />
     );
 }
 
 FullName.displayName = 'FullName';
 
-export default withOnyx<FullNameProps, FullNameOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-})(FullName);
+export default FullName;
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx
index 2f08980f2bd03..f94ceef07d2f1 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.tsx
@@ -1,36 +1,22 @@
 import React, {useCallback} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
+import {useOnyx} from 'react-native-onyx';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
-import Text from '@components/Text';
-import TextInput from '@components/TextInput';
+import SingleFieldStep from '@components/SubStepForms/SingleFieldStep';
 import useLocalize from '@hooks/useLocalize';
 import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit';
 import type {SubStepProps} from '@hooks/useSubStep/types';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import HelpLinks from '@pages/ReimbursementAccount/PersonalInfo/HelpLinks';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
-import type {ReimbursementAccount} from '@src/types/onyx';
-
-type SocialSecurityNumberOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-};
-
-type SocialSecurityNumberProps = SocialSecurityNumberOnyxProps & SubStepProps;
 
 const PERSONAL_INFO_STEP_KEY = INPUT_IDS.PERSONAL_INFO_STEP;
 const STEP_FIELDS = [PERSONAL_INFO_STEP_KEY.SSN_LAST_4];
 
-function SocialSecurityNumber({reimbursementAccount, onNext, isEditing}: SocialSecurityNumberProps) {
+function SocialSecurityNumber({onNext, onMove, isEditing}: SubStepProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
 
     const defaultSsnLast4 = reimbursementAccount?.achData?.[PERSONAL_INFO_STEP_KEY.SSN_LAST_4] ?? '';
 
@@ -54,42 +40,24 @@ function SocialSecurityNumber({reimbursementAccount, onNext, isEditing}: SocialS
     });
 
     return (
-        <FormProvider
+        <SingleFieldStep<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>
+            isEditing={isEditing}
+            onNext={onNext}
+            onMove={onMove}
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
-            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
+            formTitle={translate('personalInfoStep.enterTheLast4')}
+            formDisclaimer={translate('personalInfoStep.dontWorry')}
             validate={validate}
             onSubmit={handleSubmit}
-            style={[styles.mh5, styles.flexGrow1]}
-            submitButtonStyles={[styles.mb0]}
-        >
-            <View>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb3]}>{translate('personalInfoStep.enterTheLast4')}</Text>
-                <Text style={[styles.textSupporting]}>{translate('personalInfoStep.dontWorry')}</Text>
-                <View style={[styles.flex1]}>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={PERSONAL_INFO_STEP_KEY.SSN_LAST_4}
-                        label={translate('personalInfoStep.last4SSN')}
-                        aria-label={translate('personalInfoStep.last4SSN')}
-                        role={CONST.ROLE.PRESENTATION}
-                        containerStyles={[styles.mt6]}
-                        inputMode={CONST.INPUT_MODE.NUMERIC}
-                        defaultValue={defaultSsnLast4}
-                        maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
-                        shouldSaveDraft={!isEditing}
-                    />
-                </View>
-                <HelpLinks containerStyles={[styles.mt5]} />
-            </View>
-        </FormProvider>
+            inputId={PERSONAL_INFO_STEP_KEY.SSN_LAST_4}
+            inputLabel={translate('personalInfoStep.last4SSN')}
+            inputMode={CONST.INPUT_MODE.NUMERIC}
+            defaultValue={defaultSsnLast4}
+            maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.SSN}
+        />
     );
 }
 
 SocialSecurityNumber.displayName = 'SocialSecurityNumber';
 
-export default withOnyx<SocialSecurityNumberProps, SocialSecurityNumberOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-})(SocialSecurityNumber);
+export default SocialSecurityNumber;
diff --git a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx
index cabaf543a7564..943f04d668405 100644
--- a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx
+++ b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.tsx
@@ -1,13 +1,9 @@
 import React, {useCallback} from 'react';
-import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import Onfido from '@components/Onfido';
 import type {OnfidoData} from '@components/Onfido/types';
-import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,30 +11,22 @@ import Growl from '@libs/Growl';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReimbursementAccount} from '@src/types/onyx';
 
-type VerifyIdentityOnyxProps = {
-    /** Reimbursement account from ONYX */
-    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
-
-    /** Onfido applicant ID from ONYX */
-    onfidoApplicantID: OnyxEntry<string>;
-
-    /** The token required to initialize the Onfido SDK */
-    onfidoToken: OnyxEntry<string>;
-};
-
-type VerifyIdentityProps = VerifyIdentityOnyxProps & {
+type VerifyIdentityProps = {
     /** Goes to the previous step */
     onBackButtonPress: () => void;
 };
 
 const ONFIDO_ERROR_DISPLAY_DURATION = 10000;
 
-function VerifyIdentity({reimbursementAccount, onBackButtonPress, onfidoApplicantID, onfidoToken}: VerifyIdentityProps) {
+function VerifyIdentity({onBackButtonPress}: VerifyIdentityProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [onfidoApplicantID] = useOnyx(ONYXKEYS.ONFIDO_APPLICANT_ID);
+    const [onfidoToken] = useOnyx(ONYXKEYS.ONFIDO_TOKEN);
+
     const policyID = reimbursementAccount?.achData?.policyID ?? '-1';
     const handleOnfidoSuccess = useCallback(
         (onfidoData: OnfidoData) => {
@@ -61,17 +49,13 @@ function VerifyIdentity({reimbursementAccount, onBackButtonPress, onfidoApplican
     };
 
     return (
-        <ScreenWrapper testID={VerifyIdentity.displayName}>
-            <HeaderWithBackButton
-                title={translate('onfidoStep.verifyIdentity')}
-                onBackButtonPress={onBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={2}
-                    stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
-                />
-            </View>
+        <InteractiveStepWrapper
+            wrapperID={VerifyIdentity.displayName}
+            headerTitle={translate('onfidoStep.verifyIdentity')}
+            handleBackButtonPress={onBackButtonPress}
+            startStepIndex={2}
+            stepNames={CONST.BANK_ACCOUNT.STEP_NAMES}
+        >
             <FullPageOfflineBlockingView>
                 <ScrollView contentContainerStyle={styles.flex1}>
                     <Onfido
@@ -82,21 +66,10 @@ function VerifyIdentity({reimbursementAccount, onBackButtonPress, onfidoApplican
                     />
                 </ScrollView>
             </FullPageOfflineBlockingView>
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
 VerifyIdentity.displayName = 'VerifyIdentity';
 
-export default withOnyx<VerifyIdentityProps, VerifyIdentityOnyxProps>({
-    // @ts-expect-error: ONYXKEYS.REIMBURSEMENT_ACCOUNT is conflicting with ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    onfidoApplicantID: {
-        key: ONYXKEYS.ONFIDO_APPLICANT_ID,
-    },
-    onfidoToken: {
-        key: ONYXKEYS.ONFIDO_TOKEN,
-    },
-})(VerifyIdentity);
+export default VerifyIdentity;
diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx
index e89db5cb88db7..769532e49351e 100644
--- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx
@@ -1,11 +1,8 @@
 import React, {useMemo} from 'react';
-import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import SelectionList from '@components/SelectionList';
 import type {ListItem} from '@components/SelectionList/types';
 import UserListItem from '@components/SelectionList/UserListItem';
@@ -134,22 +131,15 @@ function AssigneeStep({policy}: AssigneeStepProps) {
     }, [debouncedSearchTerm, sections]);
 
     return (
-        <ScreenWrapper
-            testID={AssigneeStep.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={AssigneeStep.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('workspace.card.issueCard')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={0}
+            stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('workspace.card.issueCard')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={0}
-                    stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
-                />
-            </View>
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.whoNeedsCard')}</Text>
             <SelectionList
                 textInputLabel={textInputLabel}
@@ -160,7 +150,7 @@ function AssigneeStep({policy}: AssigneeStepProps) {
                 ListItem={UserListItem}
                 onSelectRow={submit}
             />
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx
index b75a1f417c789..26ae497406d6c 100644
--- a/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/CardNameStep.tsx
@@ -1,12 +1,9 @@
 import React, {useCallback} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
@@ -61,22 +58,15 @@ function CardNameStep() {
     }, [isEditing]);
 
     return (
-        <ScreenWrapper
-            testID={CardNameStep.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={CardNameStep.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('workspace.card.issueCard')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={4}
+            stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('workspace.card.issueCard')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={4}
-                    stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
-                />
-            </View>
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.giveItName')}</Text>
             <FormProvider
                 formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM}
@@ -98,7 +88,7 @@ function CardNameStep() {
                     ref={inputCallbackRef}
                 />
             </FormProvider>
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx
index fd1fb5a7586fe..ba335974663bb 100644
--- a/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/CardTypeStep.tsx
@@ -2,11 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import MenuItem from '@components/MenuItem';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -41,23 +39,16 @@ function CardTypeStep() {
     };
 
     return (
-        <ScreenWrapper
-            testID={CardTypeStep.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={CardTypeStep.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
             offlineIndicatorStyle={styles.mtAuto}
+            headerTitle={translate('workspace.card.issueCard')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={1}
+            stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('workspace.card.issueCard')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={1}
-                    stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
-                />
-            </View>
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.chooseCardType')}</Text>
             <View style={styles.mh5}>
                 <MenuItem
@@ -85,7 +76,7 @@ function CardTypeStep() {
                     wrapperStyle={styles.purposeMenuItem}
                 />
             </View>
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
index 0e030f11f1279..0170ff04ca6a9 100644
--- a/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/ConfirmationStep.tsx
@@ -2,10 +2,8 @@ import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -72,22 +70,15 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
     const translationForLimitType = getTranslationKeyForLimitType(data?.limitType);
 
     return (
-        <ScreenWrapper
-            testID={ConfirmationStep.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={ConfirmationStep.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('workspace.card.issueCard')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={5}
+            stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('workspace.card.issueCard')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={5}
-                    stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
-                />
-            </View>
             <ScrollView
                 style={styles.pt0}
                 contentContainerStyle={styles.flexGrow1}
@@ -136,7 +127,7 @@ function ConfirmationStep({policyID, backTo}: ConfirmationStepProps) {
                     />
                 </View>
             </ScrollView>
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx
index eb7c2e7d8e0fd..70776be526fa7 100644
--- a/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx
@@ -1,13 +1,10 @@
 import React, {useCallback} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import AmountForm from '@components/AmountForm';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import Text from '@components/Text';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
@@ -60,22 +57,15 @@ function LimitStep() {
     );
 
     return (
-        <ScreenWrapper
-            testID={LimitStep.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={LimitStep.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('workspace.card.issueCard')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={3}
+            stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('workspace.card.issueCard')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={3}
-                    stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
-                />
-            </View>
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.setLimit')}</Text>
             <FormProvider
                 formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM}
@@ -97,7 +87,7 @@ function LimitStep() {
                     ref={inputCallbackRef}
                 />
             </FormProvider>
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }
 
diff --git a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx
index 5dff1e9b5109c..a593fb4c75c74 100644
--- a/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx
+++ b/src/pages/workspace/expensifyCard/issueNew/LimitTypeStep.tsx
@@ -1,11 +1,8 @@
 import React, {useCallback, useMemo, useState} from 'react';
-import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
-import ScreenWrapper from '@components/ScreenWrapper';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
@@ -84,22 +81,15 @@ function LimitTypeStep({policy}: LimitTypeStepProps) {
     }, [areApprovalsConfigured, translate, typeSelected]);
 
     return (
-        <ScreenWrapper
-            testID={LimitTypeStep.displayName}
-            includeSafeAreaPaddingBottom={false}
+        <InteractiveStepWrapper
+            wrapperID={LimitTypeStep.displayName}
             shouldEnablePickerAvoiding={false}
             shouldEnableMaxHeight
+            headerTitle={translate('workspace.card.issueCard')}
+            handleBackButtonPress={handleBackButtonPress}
+            startStepIndex={2}
+            stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
         >
-            <HeaderWithBackButton
-                title={translate('workspace.card.issueCard')}
-                onBackButtonPress={handleBackButtonPress}
-            />
-            <View style={[styles.ph5, styles.mb5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
-                <InteractiveStepSubHeader
-                    startStepIndex={2}
-                    stepNames={CONST.EXPENSIFY_CARD.STEP_NAMES}
-                />
-            </View>
             <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.card.issueNewCard.chooseLimitType')}</Text>
             <SelectionList
                 ListItem={RadioListItem}
@@ -118,7 +108,7 @@ function LimitTypeStep({policy}: LimitTypeStepProps) {
                 onPress={submit}
                 style={styles.m5}
             />
-        </ScreenWrapper>
+        </InteractiveStepWrapper>
     );
 }