diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 96fa3dee7559..8baf4a7a9670 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -50,6 +50,9 @@ const propTypes = {
     /** Are we adding a withdrawal account? */
     allowDebit: PropTypes.bool,
 
+    /** Any error we want to show? */
+    errorText: PropTypes.string,
+
     ...withLocalizePropTypes,
 };
 
@@ -69,6 +72,7 @@ const defaultProps = {
     plaidLinkOAuthToken: '',
     allowDebit: false,
     bankAccountID: 0,
+    errorText: '',
 };
 
 class AddPlaidBankAccount extends React.Component {
@@ -192,6 +196,7 @@ class AddPlaidBankAccount extends React.Component {
                             label: this.props.translate('bankAccount.chooseAnAccount'),
                         } : {}}
                         value={selectedPlaidBankAccount.plaidAccountID}
+                        errorText={this.props.errorText}
                     />
                 </View>
             </View>
diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index a5f59ded8036..8f756409c9ee 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -135,6 +135,10 @@ class KYCWall extends React.Component {
                     onItemSelected={(item) => {
                         this.setState({shouldShowAddPaymentMenu: false});
                         if (item === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+                            // If we are adding a new bank account and starting over, clear all plaid data, tokens, and saved personal bank account data
+                            PaymentMethods.clearPersonalBankAccount();
+                            PaymentMethods.clearPlaid();
+
                             Navigation.navigate(this.props.addBankAccountRoute);
                         } else if (item === CONST.PAYMENT_METHODS.DEBIT_CARD) {
                             Navigation.navigate(this.props.addDebitCardRoute);
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index a323893a1fc6..ac611fde7210 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -37,6 +37,7 @@ const defaultProps = {
     iconFill: undefined,
     focused: false,
     disabled: false,
+    isPending: false,
     isSelected: false,
     subtitle: undefined,
     iconType: 'icon',
@@ -76,7 +77,7 @@ const MenuItem = (props) => {
         >
             {({hovered, pressed}) => (
                 <>
-                    <View style={[styles.flexRow, styles.pointerEventsNone, styles.flex1]}>
+                    <View style={[styles.flexRow, styles.pointerEventsNone, styles.flex1, (props.isPending ? styles.offlineFeedback.pending : undefined)]}>
                         {(props.icon && props.iconType === CONST.ICON_TYPE_ICON) && (
                             <View
                                 style={[
diff --git a/src/components/bankAccountPropTypes.js b/src/components/bankAccountPropTypes.js
index 3331a617cbce..6ac7784139c1 100644
--- a/src/components/bankAccountPropTypes.js
+++ b/src/components/bankAccountPropTypes.js
@@ -7,6 +7,9 @@ export default PropTypes.shape({
     /** The masked bank account number */
     accountNumber: PropTypes.string,
 
+    /** The routing number */
+    routingNumber: PropTypes.string,
+
     /** The bankAccountID in the bankAccounts db */
     bankAccountID: PropTypes.number,
 
diff --git a/src/components/menuItemPropTypes.js b/src/components/menuItemPropTypes.js
index 65f0dbf48d03..43a00f16d32b 100644
--- a/src/components/menuItemPropTypes.js
+++ b/src/components/menuItemPropTypes.js
@@ -58,6 +58,9 @@ const propTypes = {
     /** Should we disable this menu item? */
     disabled: PropTypes.bool,
 
+    /** Gives the menu item a pending style */
+    isPending: PropTypes.bool,
+
     /** A right-aligned subtitle for this menu option */
     subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
diff --git a/src/components/personalBankAccountPropTypes.js b/src/components/personalBankAccountPropTypes.js
new file mode 100644
index 000000000000..6819bef62d38
--- /dev/null
+++ b/src/components/personalBankAccountPropTypes.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+    /** General errors */
+    errors: PropTypes.shape({
+        /** Key: timestamp - Value: Error message */
+    }),
+
+    /** Field specific errors */
+    errorFields: PropTypes.shape({
+        /** Key: fieldID - bool */
+    }),
+
+    /** Is this pending to be added? */
+    pendingAction: PropTypes.string,
+
+    /** Plaid account ID of the pending bank account */
+    selectedPlaidAccountID: PropTypes.string,
+
+    /** Personal Bank Account successfully added. Show user success modal */
+    shouldShowSuccess: PropTypes.bool,
+
+    /** Show loader if still awaiting response */
+    isLoading: PropTypes.bool,
+});
diff --git a/src/languages/en.js b/src/languages/en.js
index 1b7e384a92dd..230576e21bee 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -412,7 +412,7 @@ export default {
             notOwnerOfFund: 'There was an error setting this card as your default payment method.',
             setDefaultFailure: 'Something went wrong. Please chat with Concierge for further assistance.',
         },
-        addBankAccountFailure: 'And unexpected error occurred while trying to add your bank account. Please try again.',
+        addBankAccountFailure: 'An unexpected error occurred while trying to add your bank account. Please try again.',
     },
     transferAmountPage: {
         transfer: ({amount}) => `Transfer${amount ? ` ${amount}` : ''}`,
@@ -588,6 +588,8 @@ export default {
         chooseAccountLabel: 'Account',
         successTitle: 'Personal bank account added!',
         successMessage: 'Congrats, your bank account is set up and ready to receive reimbursements.',
+        passwordRequired: 'Please enter a password',
+        plaidBankAccountRequired: 'Please select a bank account',
     },
     attachmentView: {
         unknownFilename: 'Unknown filename',
diff --git a/src/languages/es.js b/src/languages/es.js
index 9fee9c421a5a..bc8e6323415d 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -588,6 +588,8 @@ export default {
         chooseAccountLabel: 'Cuenta',
         successTitle: '¡Cuenta bancaria personal añadida!',
         successMessage: 'Enhorabuena, tu cuenta bancaria está lista para recibir reembolsos.',
+        passwordRequired: 'Por favor introduce tu contraseña',
+        plaidBankAccountRequired: 'Por favor seleccione una cuenta bancaria',
     },
     attachmentView: {
         unknownFilename: 'Archivo desconocido',
diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js
index a74a9be3c46a..7abd2810832e 100644
--- a/src/libs/PaymentUtils.js
+++ b/src/libs/PaymentUtils.js
@@ -85,7 +85,7 @@ function calculateWalletTransferBalanceFee(currentBalance, methodType) {
 }
 
 export {
-    hasExpensifyPaymentMethod,
-    formatPaymentMethods,
     calculateWalletTransferBalanceFee,
+    formatPaymentMethods,
+    hasExpensifyPaymentMethod,
 };
diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js
index f1fad43a63a9..da124ce72556 100644
--- a/src/libs/actions/BankAccounts.js
+++ b/src/libs/actions/BankAccounts.js
@@ -4,6 +4,9 @@ import * as API from '../API';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as Localize from '../Localize';
 import DateUtils from '../DateUtils';
+import Navigation from '../Navigation/Navigation';
+import ROUTES from '../../ROUTES';
+import * as NetworkStore from '../Network/NetworkStore';
 
 export {
     setupWithdrawalAccount,
@@ -31,10 +34,6 @@ export {
     acceptWalletTerms,
 } from './Wallet';
 
-function clearPersonalBankAccount() {
-    Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {});
-}
-
 function clearPlaid() {
     Onyx.set(ONYXKEYS.PLAID_DATA, {});
     Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, '');
@@ -116,7 +115,6 @@ function connectBankAccountWithPlaid(bankAccountID, selectedPlaidBankAccount) {
  *
  * @param {Object} account
  * @param {String} password
- * @TODO offline pattern for this command will have to be added later once the pattern B design doc is complete
  */
 function addPersonalBankAccount(account, password) {
     const commandName = 'AddPersonalBankAccount';
@@ -131,6 +129,7 @@ function addPersonalBankAccount(account, password) {
         plaidAccountID: account.plaidAccountID,
         plaidAccessToken: account.plaidAccessToken,
         password,
+        isPending: true,
     };
 
     const onyxData = {
@@ -139,8 +138,10 @@ function addPersonalBankAccount(account, password) {
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                 value: {
+                    errors: null,
+                    errorFields: null,
+                    selectedPlaidAccountID: parameters.plaidAccountID,
                     isLoading: true,
-                    error: '',
                 },
             },
         ],
@@ -150,10 +151,19 @@ function addPersonalBankAccount(account, password) {
                 key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                 value: {
                     isLoading: false,
-                    error: '',
                     shouldShowSuccess: true,
                 },
             },
+            {
+                onyxMethod: CONST.ONYX.METHOD.SET,
+                key: ONYXKEYS.PLAID_DATA,
+                value: {},
+            },
+            {
+                onyxMethod: CONST.ONYX.METHOD.SET,
+                key: ONYXKEYS.PLAID_LINK_TOKEN,
+                value: '',
+            },
         ],
         failureData: [
             {
@@ -161,12 +171,52 @@ function addPersonalBankAccount(account, password) {
                 key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
                 value: {
                     isLoading: false,
-                    error: Localize.translateLocal('paymentsPage.addBankAccountFailure'),
                 },
             },
         ],
     };
 
+    if (NetworkStore.isOffline()) {
+        // If offline, Optimistically go to the list of bank accounts
+        Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
+
+        // And build Onyx Data for pattern B
+        onyxData.optimisticData = onyxData.optimisticData.concat({
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+            value: {
+                0: {
+                    title: account.addressName,
+                    description: `${Localize.translateLocal('paymentMethodList.accountLastFour')} ${account.accountNumber.slice(-4)}`,
+                    methodID: 0,
+                    key: 'bankAccount-0',
+                    accountType: CONST.PAYMENT_METHODS.BANK_ACCOUNT,
+                    accountData: {...account, bankAccountID: 0},
+                    errors: null,
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+                },
+            },
+        });
+        onyxData.successData = onyxData.successData.concat({
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+            value: {
+                0: null,
+            },
+        });
+        onyxData.failureData = onyxData.failureData.concat({
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: ONYXKEYS.BANK_ACCOUNT_LIST,
+            value: {
+                0: {
+                    errors: {
+                        [DateUtils.getMicroseconds()]: Localize.translateLocal('paymentsPage.addBankAccountFailure'),
+                    },
+                },
+            },
+        });
+    }
+
     API.write(commandName, parameters, onyxData);
 }
 
@@ -178,7 +228,11 @@ function deletePaymentBankAccount(bankAccountID) {
             {
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`,
-                value: {[bankAccountID]: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}},
+                value: {
+                    [bankAccountID]: {
+                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                    },
+                },
             },
         ],
     });
@@ -295,7 +349,6 @@ export {
     addPersonalBankAccount,
     connectBankAccountManually,
     deletePaymentBankAccount,
-    clearPersonalBankAccount,
     clearPlaid,
     clearOnfido,
     updatePersonalInformationForBankAccount,
diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 017bdf785f49..7e8842cfd5bf 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -370,6 +370,46 @@ function deletePaymentCard(fundID) {
     });
 }
 
+function navigateToAddPaymentMethodPage(paymentType, allowPaypalPaymentTypes = true) {
+    // We don't always show Paypal as an option
+    if (paymentType === CONST.PAYMENT_METHODS.PAYPAL && allowPaypalPaymentTypes) {
+        Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME);
+        return;
+    }
+
+    if (paymentType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
+        Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
+        return;
+    }
+
+    if (paymentType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+        // If we are adding a new bank account and starting over, clear all plaid data, tokens, and saved personal bank account data
+        this.clearPersonalBankAccount();
+        this.clearPlaid();
+
+        Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT);
+        return;
+    }
+
+    throw new Error('Invalid payment method type selected');
+}
+
+function clearBankAccountPendingAdd() {
+    Onyx.merge(ONYXKEYS.BANK_ACCOUNT_LIST, {
+        0: null,
+    });
+}
+
+function clearPersonalBankAccount() {
+    Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {});
+    clearBankAccountPendingAdd();
+}
+
+function clearPlaid() {
+    Onyx.set(ONYXKEYS.PLAID_DATA, {});
+    Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, '');
+}
+
 export {
     deletePayPalMe,
     deletePaymentCard,
@@ -390,5 +430,9 @@ export {
     clearDeletePaymentMethodError,
     clearAddPaymentMethodError,
     clearWalletError,
+    navigateToAddPaymentMethodPage,
+    clearPersonalBankAccount,
+    clearBankAccountPendingAdd,
+    clearPlaid,
     clearWalletTermsError,
 };
diff --git a/src/libs/actions/ReimbursementAccount/errors.js b/src/libs/actions/ReimbursementAccount/errors.js
index 3427524711c2..1bdeefb9f2e2 100644
--- a/src/libs/actions/ReimbursementAccount/errors.js
+++ b/src/libs/actions/ReimbursementAccount/errors.js
@@ -12,6 +12,14 @@ function setPersonalBankAccountFormValidationErrorFields(errorFields) {
     Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {errorFields});
 }
 
+/**
+ * Clear validation messages from personal bank account
+ */
+function resetPersonalBankAccountErrors() {
+    setPersonalBankAccountFormValidationErrorFields({});
+    Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {errors: null});
+}
+
 /**
  * Set the current fields with errors.
  *
@@ -49,4 +57,5 @@ export {
     setPersonalBankAccountFormValidationErrorFields,
     showBankAccountFormValidationError,
     resetReimbursementAccount,
+    resetPersonalBankAccountErrors,
 };
diff --git a/src/libs/actions/ReimbursementAccount/index.js b/src/libs/actions/ReimbursementAccount/index.js
index 5bc9e3ea562a..563c01e686e1 100644
--- a/src/libs/actions/ReimbursementAccount/index.js
+++ b/src/libs/actions/ReimbursementAccount/index.js
@@ -9,6 +9,7 @@ export {goToWithdrawalAccountSetupStep, navigateToBankAccountRoute} from './navi
 export {
     setBankAccountFormValidationErrors,
     setPersonalBankAccountFormValidationErrorFields,
+    resetPersonalBankAccountErrors,
     resetReimbursementAccount,
     showBankAccountFormValidationError,
 } from './errors';
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 17bc7cea68a2..53184c67c213 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -3,7 +3,6 @@ import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import Navigation from '../libs/Navigation/Navigation';
@@ -19,22 +18,22 @@ import * as Illustrations from '../components/Icon/Illustrations';
 import Icon from '../components/Icon';
 import defaultTheme from '../styles/themes/default';
 import Button from '../components/Button';
-import FixedFooter from '../components/FixedFooter';
 import FormScrollView from '../components/FormScrollView';
-import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
 import FormHelper from '../libs/FormHelper';
 import * as ReimbursementAccount from '../libs/actions/ReimbursementAccount';
 import TextInput from '../components/TextInput';
 import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus/index.native';
+import personalBankAccountPropTypes from '../components/personalBankAccountPropTypes';
+import {withNetwork} from '../components/OnyxProvider';
+import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton';
+import * as PaymentMethods from '../libs/actions/PaymentMethods';
+import FixedFooter from '../components/FixedFooter';
 import ROUTES from '../ROUTES';
+import * as ErrorUtils from '../libs/ErrorUtils';
 
 const propTypes = {
     ...withLocalizePropTypes,
-    personalBankAccount: PropTypes.shape({
-        error: PropTypes.string,
-        shouldShowSuccess: PropTypes.bool,
-        isLoading: PropTypes.bool,
-    }),
+    personalBankAccount: personalBankAccountPropTypes,
 };
 
 const defaultProps = {
@@ -55,7 +54,6 @@ class AddPersonalBankAccountPage extends React.Component {
         this.submit = this.submit.bind(this);
 
         this.state = {
-            selectedPlaidBankAccount: undefined,
             password: '',
         };
 
@@ -63,10 +61,11 @@ class AddPersonalBankAccountPage extends React.Component {
             errorPath: 'personalBankAccount.errorFields',
             setErrors: errorFields => ReimbursementAccount.setPersonalBankAccountFormValidationErrorFields(errorFields),
         });
-    }
 
-    componentDidMount() {
-        BankAccounts.clearPersonalBankAccount();
+        this.errorTranslationKeys = {
+            selectedBank: 'addPersonalBankAccountPage.plaidBankAccountRequired',
+            password: 'addPersonalBankAccountPage.passwordRequired',
+        };
     }
 
     /**
@@ -101,11 +100,11 @@ class AddPersonalBankAccountPage extends React.Component {
      */
     validate() {
         const errors = {};
-        if (_.isUndefined(this.state.selectedPlaidBankAccount)) {
+        if (_.isEmpty(lodashGet(this.props, 'plaidData.selectedPlaidBankAccount', {}))) {
             errors.selectedBank = true;
         }
 
-        if (this.props.isPasswordRequired && _.isEmpty(this.state.password)) {
+        if (_.isEmpty(this.state.password)) {
             errors.password = true;
         }
 
@@ -114,23 +113,29 @@ class AddPersonalBankAccountPage extends React.Component {
     }
 
     submit() {
+        ReimbursementAccount.resetPersonalBankAccountErrors();
         if (!this.validate()) {
             return;
         }
 
-        BankAccounts.addPersonalBankAccount(this.state.selectedPlaidBankAccount, this.state.password);
+        BankAccounts.addPersonalBankAccount(this.props.plaidData.selectedPlaidBankAccount, this.state.password);
     }
 
     render() {
+        const selectedPlaidBankAccount = lodashGet(this.props, 'plaidData.selectedPlaidBankAccount', {});
+        const hasPlaidBankAccounts = !_.isEmpty(lodashGet(this.props, 'plaidData.bankAccounts'));
         const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false);
-        const error = lodashGet(this.props, 'personalBankAccount.error', '');
         const isLoading = lodashGet(this.props, 'personalBankAccount.isLoading', false);
+        const error = ErrorUtils.getLatestErrorMessage(this.props.personalBankAccount);
 
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
                     title={this.props.translate('bankAccount.addBankAccount')}
-                    onCloseButtonPress={Navigation.goBack}
+                    onCloseButtonPress={() => {
+                        PaymentMethods.clearPersonalBankAccount();
+                        Navigation.goBack();
+                    }}
                     shouldShowBackButton
                     onBackButtonPress={Navigation.goBack}
                 />
@@ -163,44 +168,51 @@ class AddPersonalBankAccountPage extends React.Component {
                         </FixedFooter>
                     </>
                 ) : (
-                    <FormScrollView>
-                        <View style={[styles.mh5, styles.mb5, styles.flex1]}>
-                            <AddPlaidBankAccount
-                                onSelect={(params) => {
-                                    this.setState({
-                                        selectedPlaidBankAccount: params.selectedPlaidBankAccount,
-                                    });
-                                }}
-                                onExitPlaid={Navigation.goBack}
-                                receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
-                            />
-                            {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
-                                <View style={[styles.mb5]}>
-                                    <TextInput
-                                        label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
-                                        secureTextEntry
-                                        value={this.state.password}
-                                        autoCompleteType="password"
-                                        textContentType="password"
-                                        autoCapitalize="none"
-                                        autoFocus={canFocusInputOnScreenFocus()}
-                                        onChangeText={text => this.setState({password: text})}
-                                        errorText={this.getErrorText('password')}
-                                        hasError={this.getErrors().password}
-                                    />
-                                </View>
-                            )}
-                        </View>
-                        {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
+                    <>
+                        <FormScrollView>
+                            <View style={[styles.mh5, styles.mb5, styles.flex1]}>
+                                <AddPlaidBankAccount
+                                    onSelect={(params) => {
+                                        this.clearError('selectedBank');
+                                        BankAccounts.updatePlaidData({selectedPlaidBankAccount: params.selectedPlaidBankAccount});
+                                    }}
+                                    onExitPlaid={Navigation.goBack}
+                                    receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                                    selectedPlaidAccountID={selectedPlaidBankAccount.plaidAccountID}
+                                    errorText={this.getErrors().selectedBank ? this.getErrorText('selectedBank') : ''}
+                                />
+                                {hasPlaidBankAccounts && (
+                                    <View style={[styles.mb5]}>
+                                        <TextInput
+                                            label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
+                                            secureTextEntry
+                                            value={this.state.password}
+                                            autoCompleteType="password"
+                                            textContentType="password"
+                                            autoCapitalize="none"
+                                            autoFocus={canFocusInputOnScreenFocus()}
+                                            onChangeText={(text) => {
+                                                this.setState({password: text});
+                                                this.clearError('password');
+                                            }}
+                                            errorText={this.getErrorText('password')}
+                                            hasError={this.getErrors().password}
+                                        />
+                                    </View>
+                                )}
+                            </View>
+                        </FormScrollView>
+                        {hasPlaidBankAccounts && (
                             <FormAlertWithSubmitButton
-                                isAlertVisible={Boolean(error)}
+                                isAlertVisible={Boolean(error) || !_.isEmpty(this.props.personalBankAccount.errorFields)}
                                 buttonText={this.props.translate('common.saveAndContinue')}
                                 onSubmit={this.submit}
                                 message={error}
                                 isLoading={isLoading}
+                                enabledWhenOffline
                             />
                         )}
-                    </FormScrollView>
+                    </>
                 )}
             </ScreenWrapper>
         );
@@ -212,7 +224,11 @@ AddPersonalBankAccountPage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
+    withNetwork(),
     withOnyx({
+        plaidData: {
+            key: ONYXKEYS.PLAID_DATA,
+        },
         personalBankAccount: {
             key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
         },
diff --git a/src/pages/ReimbursementAccount/plaidDataPropTypes.js b/src/pages/ReimbursementAccount/plaidDataPropTypes.js
index ae4f3b896b4c..7bafaebf4ebc 100644
--- a/src/pages/ReimbursementAccount/plaidDataPropTypes.js
+++ b/src/pages/ReimbursementAccount/plaidDataPropTypes.js
@@ -18,6 +18,9 @@ export default PropTypes.shape({
         /** Name of account */
         addressName: PropTypes.string,
 
+        /** Name of the bank */
+        bankName: PropTypes.string,
+
         /** Is the account a savings account? */
         isSavings: PropTypes.bool,
 
@@ -34,3 +37,4 @@ export default PropTypes.shape({
         plaidAccessToken: PropTypes.string,
     })),
 });
+
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index b70beb2a9e33..94dacb3c0932 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -162,7 +162,8 @@ class InitialSettingsPage extends React.Component {
                 translationKey: 'common.payments',
                 icon: Expensicons.Wallet,
                 action: () => { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); },
-                brickRoadIndicator: PaymentMethods.hasPaymentMethodError(this.props.bankAccountList, this.props.cardList) || !_.isEmpty(this.props.userWallet.errors)
+                brickRoadIndicator: PaymentMethods.hasPaymentMethodError(this.props.bankAccountList, this.props.cardList)
+                    || !_.isEmpty(this.props.userWallet.errors)
                     || !_.isEmpty(this.props.walletTerms.errors) ? 'error' : null,
             },
             {
diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js
index 99d0b1fe2623..b6cf9e63196c 100644
--- a/src/pages/settings/Payments/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js
@@ -44,17 +44,6 @@ const ChooseTransferAccountPage = (props) => {
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE);
     };
 
-    /**
-     * @param {String} paymentType
-     */
-    const navigateToAddPaymentMethodPage = () => {
-        if (props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-            Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
-            return;
-        }
-        Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT);
-    };
-
     return (
         <ScreenWrapper>
             <HeaderWithCloseButton
@@ -73,7 +62,7 @@ const ChooseTransferAccountPage = (props) => {
                 />
             </View>
             <MenuItem
-                onPress={navigateToAddPaymentMethodPage}
+                onPress={PaymentMethods.navigateToAddPaymentMethodPage(props.walletTransfer.filterPaymentMethodType, false)}
                 title={props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
                     ? props.translate('paymentMethodList.addNewBankAccount')
                     : props.translate('paymentMethodList.addNewDebitCard')}
diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
index f924e5a7ee8d..afcfdaae808d 100644
--- a/src/pages/settings/Payments/PaymentMethodList.js
+++ b/src/pages/settings/Payments/PaymentMethodList.js
@@ -120,7 +120,15 @@ class PaymentMethodList extends Component {
 
         combinedPaymentMethods = _.map(combinedPaymentMethods, paymentMethod => ({
             ...paymentMethod,
-            onPress: e => this.props.onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID),
+            onPress: e => this.props.onPress(
+                e,
+                paymentMethod.accountType,
+                paymentMethod.accountData,
+                paymentMethod.isDefault,
+                paymentMethod.methodID,
+                paymentMethod.pendingAction,
+                paymentMethod.errors,
+            ),
             iconFill: this.isPaymentMethodActive(paymentMethod) ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
             wrapperStyle: this.isPaymentMethodActive(paymentMethod) ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
         }));
@@ -167,11 +175,13 @@ class PaymentMethodList extends Component {
      * @return {React.Component}
      */
     renderItem({item}) {
+        const isPendingAdd = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
+
         return (
             <OfflineWithFeedback
                 onClose={() => this.dismissError(item)}
                 pendingAction={item.pendingAction}
-                errors={item.errors}
+                errors={!isPendingAdd ? item.errors : {}}
                 errorRowStyles={styles.ph6}
             >
                 <MenuItem
@@ -187,6 +197,8 @@ class PaymentMethodList extends Component {
                     wrapperStyle={item.wrapperStyle}
                     shouldShowSelectedState={this.props.shouldShowSelectedState}
                     isSelected={this.props.selectedMethodID === item.methodID}
+                    brickRoadIndicator={!_.isEmpty(item.errors) && isPendingAdd ? 'error' : null}
+                    isPending={Boolean(item.pendingAction) && _.isEmpty(item.errors)}
                 />
             </OfflineWithFeedback>
         );
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index ef6bf593440f..8c8c05737c1e 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -55,7 +55,6 @@ class BasePaymentsPage extends React.Component {
         };
 
         this.paymentMethodPressed = this.paymentMethodPressed.bind(this);
-        this.addPaymentMethodTypePressed = this.addPaymentMethodTypePressed.bind(this);
         this.hideAddPaymentMenu = this.hideAddPaymentMenu.bind(this);
         this.hideDefaultDeleteMenu = this.hideDefaultDeleteMenu.bind(this);
         this.makeDefaultPaymentMethod = this.makeDefaultPaymentMethod.bind(this);
@@ -123,8 +122,10 @@ class BasePaymentsPage extends React.Component {
      * @param {String} account
      * @param {Boolean} isDefault
      * @param {String|Number} methodID
+     * @param {String} pendingAction
+     * @param {Object} errors
      */
-    paymentMethodPressed(nativeEvent, accountType, account, isDefault, methodID) {
+    paymentMethodPressed(nativeEvent, accountType, account, isDefault, methodID, pendingAction, errors) {
         const position = getClickedTargetLocation(nativeEvent.currentTarget);
         this.setState({
             addPaymentMethodButton: nativeEvent.currentTarget,
@@ -141,6 +142,16 @@ class BasePaymentsPage extends React.Component {
                     type: CONST.PAYMENT_METHODS.PAYPAL,
                 };
             } else if (accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+                // If the bank account is pending creation, direct the user to complete setting up their personal bank account
+                if (pendingAction) {
+                    const hasPendingAddError = pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && !_.isEmpty(errors);
+                    if (hasPendingAddError) {
+                        PaymentMethods.clearBankAccountPendingAdd();
+                        Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT);
+                    }
+                    return;
+                }
+
                 formattedSelectedPaymentMethod = {
                     title: account.addressName,
                     icon: account.icon,
@@ -173,32 +184,6 @@ class BasePaymentsPage extends React.Component {
         this.setPositionAddPaymentMenu(position);
     }
 
-    /**
-     * Navigate to the appropriate payment type addition screen
-     *
-     * @param {String} paymentType
-     */
-    addPaymentMethodTypePressed(paymentType) {
-        this.hideAddPaymentMenu();
-
-        if (paymentType === CONST.PAYMENT_METHODS.PAYPAL) {
-            Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME);
-            return;
-        }
-
-        if (paymentType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-            Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
-            return;
-        }
-
-        if (paymentType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
-            Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT);
-            return;
-        }
-
-        throw new Error('Invalid payment method type selected');
-    }
-
     fetchData() {
         PaymentMethods.openPaymentsPage();
     }
@@ -329,7 +314,10 @@ class BasePaymentsPage extends React.Component {
                         bottom: this.state.anchorPositionBottom,
                         right: this.state.anchorPositionRight - 10,
                     }}
-                    onItemSelected={method => this.addPaymentMethodTypePressed(method)}
+                    onItemSelected={(item) => {
+                        this.hideAddPaymentMenu();
+                        PaymentMethods.navigateToAddPaymentMethodPage(item);
+                    }}
                 />
                 <Popover
                     isVisible={this.state.shouldShowDefaultDeleteMenu}
