diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index f0d6720080e8..d62469e46b86 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1019,7 +1019,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Airship: c70eed50e429f97f5adb285423c7291fb7a032ae
   AirshipFrameworkProxy: 2eefb77bb77b5120b0f48814b0d44439aa3ad415
-  boost: 57d2868c099736d80fcd648bf211b4431e51a558
+  boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: ff54429f0110d3c722630a98096ba689c39f6d5f
@@ -1062,7 +1062,7 @@ SPEC CHECKSUMS:
   Permission-LocationWhenInUse: 3ba99e45c852763f730eabecec2870c2382b7bd4
   Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
   PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
-  RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
+  RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
   RCTRequired: e9e7b8b45aa9bedb2fdad71740adf07a7265b9be
   RCTTypeSafety: 9ae0e9206625e995f0df4d5b9ddc94411929fb30
   React: a71c8e1380f07e01de721ccd52bcf9c03e81867d
@@ -1135,4 +1135,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 5feaab251246f42f41e69c8a28fa331b4899e814
 
-COCOAPODS: 1.12.0
+COCOAPODS: 1.11.3
diff --git a/patches/@react-navigation+stack+6.3.16.patch b/patches/@react-navigation+stack+6.3.16.patch
new file mode 100644
index 000000000000..921f09491927
--- /dev/null
+++ b/patches/@react-navigation+stack+6.3.16.patch
@@ -0,0 +1,91 @@
+diff --git a/node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx b/node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx
+index 1e9ee0e..d85c7b4 100644
+--- a/node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx
++++ b/node_modules/@react-navigation/stack/src/views/Stack/CardContainer.tsx
+@@ -105,14 +105,14 @@ function CardContainer({
+   const handleOpen = () => {
+     const { route } = scene.descriptor;
+ 
+-    onTransitionEnd({ route }, false);
++    onTransitionEnd({ route }, false, scene.descriptor.navigation.getState());
+     onOpenRoute({ route });
+   };
+ 
+   const handleClose = () => {
+     const { route } = scene.descriptor;
+ 
+-    onTransitionEnd({ route }, true);
++    onTransitionEnd({ route }, true, scene.descriptor.navigation.getState());
+     onCloseRoute({ route });
+   };
+ 
+@@ -120,7 +120,7 @@ function CardContainer({
+     const { route } = scene.descriptor;
+ 
+     onPageChangeStart();
+-    onGestureStart({ route });
++    onGestureStart({ route }, scene.descriptor.navigation.getState());
+   };
+ 
+   const handleGestureCanceled = () => {
+diff --git a/node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx b/node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx
+index 6bbce10..7f2eed3 100644
+--- a/node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx
++++ b/node_modules/@react-navigation/stack/src/views/Stack/StackView.tsx
+@@ -375,29 +375,51 @@ export default class StackView extends React.Component<Props, State> {
+ 
+   private handleTransitionStart = (
+     { route }: { route: Route<string> },
+-    closing: boolean
+-  ) =>
++    closing: boolean,
++  ) => {
+     this.props.navigation.emit({
+       type: 'transitionStart',
+       data: { closing },
+       target: route.key,
+     });
++  }
+ 
+   private handleTransitionEnd = (
+     { route }: { route: Route<string> },
+-    closing: boolean
+-  ) =>
++    closing: boolean,
++    state: StackNavigationState<ParamListBase>
++  ) => {
+     this.props.navigation.emit({
+       type: 'transitionEnd',
+       data: { closing },
+       target: route.key,
+     });
++    // Patch introduced to pass information about events to screens lower in the stack, so they could be safely frozen
++    if (state?.index > 1) {
++      this.props.navigation.emit({
++        type: 'transitionEnd',
++        data: { closing: !closing },
++        target: state.routes[state.index - 2].key,
++      });
++    }
++  }
+ 
+-  private handleGestureStart = ({ route }: { route: Route<string> }) => {
++  private handleGestureStart = (
++      { route }: { route: Route<string> },
++      state: StackNavigationState<ParamListBase>
++    ) => {
++    console.log(state)
+     this.props.navigation.emit({
+       type: 'gestureStart',
+       target: route.key,
+     });
++    // Patch introduced to pass information about events to screens lower in the stack, so they could be safely frozen
++    if (state?.index > 1) {
++      this.props.navigation.emit({
++        type: 'gestureStart',
++        target: state.routes[state.index - 2].key,
++      });
++    }
+   };
+ 
+   private handleGestureEnd = ({ route }: { route: Route<string> }) => {
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index ea5f5baa1558..9d7b6beaae3d 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -16,7 +16,7 @@ import themeColors from '../styles/themes/default';
 import compose from '../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import Button from './Button';
-import HeaderWithCloseButton from './HeaderWithCloseButton';
+import HeaderWithBackButton from './HeaderWithBackButton';
 import fileDownload from '../libs/fileDownload';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import ConfirmModal from './ConfirmModal';
@@ -270,11 +270,14 @@ class AttachmentModal extends PureComponent {
                     propagateSwipe
                 >
                     {this.props.isSmallScreenWidth && <HeaderGap />}
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={this.props.headerTitle || this.props.translate('common.attachment')}
                         shouldShowBorderBottom
                         shouldShowDownloadButton={this.props.allowDownload}
                         onDownloadButtonPress={() => this.downloadAttachment(source)}
+                        shouldShowCloseButton={!this.props.isSmallScreenWidth}
+                        shouldShowBackButton={this.props.isSmallScreenWidth}
+                        onBackButtonPress={() => this.setState({isModalOpen: false})}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
                     />
                     <View style={styles.imageModalImageCenterContainer}>
diff --git a/src/components/AvatarCropModal/AvatarCropModal.js b/src/components/AvatarCropModal/AvatarCropModal.js
index 7f5104e22130..99da80593768 100644
--- a/src/components/AvatarCropModal/AvatarCropModal.js
+++ b/src/components/AvatarCropModal/AvatarCropModal.js
@@ -8,7 +8,7 @@ import compose from '../../libs/compose';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import Button from '../Button';
-import HeaderWithCloseButton from '../HeaderWithCloseButton';
+import HeaderWithBackButton from '../HeaderWithBackButton';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
 import Modal from '../Modal';
@@ -361,9 +361,9 @@ const AvatarCropModal = (props) => {
             onModalHide={resetState}
         >
             {props.isSmallScreenWidth && <HeaderGap />}
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('avatarCropModal.title')}
-                onCloseButtonPress={props.onClose}
+                onBackButtonPress={props.onClose}
             />
             <Text style={[styles.mh5]}>{props.translate('avatarCropModal.description')}</Text>
             <GestureHandlerRootView
diff --git a/src/components/BlockingViews/BlockingView.js b/src/components/BlockingViews/BlockingView.js
index d8453cc8a91f..b57b51e00ccb 100644
--- a/src/components/BlockingViews/BlockingView.js
+++ b/src/components/BlockingViews/BlockingView.js
@@ -55,7 +55,7 @@ const BlockingView = (props) => (
         <Text style={[styles.textAlignCenter]}>{props.subtitle}</Text>
         {props.shouldShowBackHomeLink ? (
             <TextLink
-                onPress={() => Navigation.dismissModal(true)}
+                onPress={Navigation.goBack}
                 style={[styles.link, styles.mt2]}
             >
                 {props.link}
diff --git a/src/components/BlockingViews/FullPageNotFoundView.js b/src/components/BlockingViews/FullPageNotFoundView.js
index 9a6e4ebd3ee3..cf2b4f1d4280 100644
--- a/src/components/BlockingViews/FullPageNotFoundView.js
+++ b/src/components/BlockingViews/FullPageNotFoundView.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import BlockingView from './BlockingView';
 import * as Illustrations from '../Icon/Illustrations';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import HeaderWithCloseButton from '../HeaderWithCloseButton';
+import HeaderWithBackButton from '../HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
@@ -25,12 +25,6 @@ const propTypes = {
     /** The key in the translations file to use for the subtitle */
     subtitleKey: PropTypes.string,
 
-    /** Whether we should show a back icon */
-    shouldShowBackButton: PropTypes.bool,
-
-    /** Whether we should show a close button */
-    shouldShowCloseButton: PropTypes.bool,
-
     /** Whether we should show a go back home link */
     shouldShowBackHomeLink: PropTypes.bool,
 
@@ -47,10 +41,8 @@ const defaultProps = {
     titleKey: 'notFound.notHere',
     subtitleKey: 'notFound.pageNotFound',
     linkKey: 'notFound.goBackHome',
-    shouldShowBackButton: true,
     shouldShowBackHomeLink: false,
-    shouldShowCloseButton: true,
-    onBackButtonPress: () => Navigation.dismissModal(),
+    onBackButtonPress: Navigation.goBack,
 };
 
 // eslint-disable-next-line rulesdir/no-negated-variables
@@ -58,12 +50,7 @@ const FullPageNotFoundView = (props) => {
     if (props.shouldShow) {
         return (
             <>
-                <HeaderWithCloseButton
-                    shouldShowBackButton={props.shouldShowBackButton}
-                    shouldShowCloseButton={props.shouldShowCloseButton}
-                    onBackButtonPress={props.onBackButtonPress}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
+                <HeaderWithBackButton onBackButtonPress={props.onBackButtonPress} />
                 <View style={[styles.flex1, styles.blockingViewContainer]}>
                     <BlockingView
                         icon={Illustrations.ToddBehindCloud}
diff --git a/src/components/FlatList/index.android.js b/src/components/FlatList/index.android.js
index ab3cd82c92cd..8763488cf180 100644
--- a/src/components/FlatList/index.android.js
+++ b/src/components/FlatList/index.android.js
@@ -1,6 +1,7 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, useCallback, useState} from 'react';
 import {FlatList} from 'react-native';
 import PropTypes from 'prop-types';
+import {useFocusEffect} from '@react-navigation/native';
 
 const propTypes = {
     /** Same as for FlatList */
@@ -31,46 +32,32 @@ const defaultProps = {
 // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android).
 // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen.
 function CustomFlatList(props) {
-    const contentOffsetRef = React.useRef(null);
-    const isHidden = React.useRef(false);
-    const [ready, setReady] = React.useState(true);
+    const [scrollPosition, setScrollPosition] = useState({});
 
-    const handleOnScroll = (event) => {
-        props.onScroll(event);
-
-        // The last onScroll event happens after freezing the FlatList and it's called with offset: 0.
-        // Don't save this value because it's incorrect.
-        if (!isHidden.current) {
-            contentOffsetRef.current = event.nativeEvent.contentOffset;
+    const onScreenFocus = useCallback(() => {
+        if (!props.innerRef.current || !scrollPosition.offset) {
+            return;
         }
-    };
-    const handleOnLayout = (event) => {
-        props.onLayout(event);
-
-        if (event.nativeEvent.layout.height === 0) {
-            // If the layout height is equal to 0, we can assume that this flatList is frozen.
-            isHidden.current = true;
-
-            // The maintainVisibleContentPosition prop causes glitches with animations and scrollToOffset.
-            // Use ready state to decide if this prop should be undefined to avoid glitching.
-            setReady(false);
-        } else {
-            isHidden.current = false;
-            if (props.innerRef.current && contentOffsetRef.current) {
-                props.innerRef.current.scrollToOffset({offset: contentOffsetRef.current.y, animated: false});
-                setReady(true);
-            }
+        if (props.innerRef.current && scrollPosition.offset) {
+            props.innerRef.current.scrollToOffset({offset: scrollPosition.offset, animated: false});
         }
-    };
+    }, [scrollPosition.offset, props.innerRef]);
+
+    useFocusEffect(
+        useCallback(() => {
+            onScreenFocus();
+        }, [onScreenFocus]),
+    );
 
     return (
         <FlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            onScroll={(event) => props.onScroll(event)}
+            onMomentumScrollEnd={(event) => {
+                setScrollPosition({offset: event.nativeEvent.contentOffset.y});
+            }}
             ref={props.innerRef}
-            onScroll={handleOnScroll}
-            onLayout={handleOnLayout}
-            maintainVisibleContentPosition={ready ? props.maintainVisibleContentPosition : undefined}
         />
     );
 }
@@ -78,9 +65,9 @@ function CustomFlatList(props) {
 CustomFlatList.propTypes = propTypes;
 CustomFlatList.defaultProps = defaultProps;
 
-// eslint-disable-next-line react/jsx-props-no-spreading
 export default forwardRef((props, ref) => (
     <CustomFlatList
+        // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         innerRef={ref}
     />
diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithBackButton.js
similarity index 96%
rename from src/components/HeaderWithCloseButton.js
rename to src/components/HeaderWithBackButton.js
index e1c87c0c4728..949999e51708 100755
--- a/src/components/HeaderWithCloseButton.js
+++ b/src/components/HeaderWithBackButton.js
@@ -38,9 +38,6 @@ const propTypes = {
     /** Method to trigger when pressing more options button of the header */
     onThreeDotsButtonPress: PropTypes.func,
 
-    /** Whether we should show a back icon */
-    shouldShowBackButton: PropTypes.bool,
-
     /** Whether we should show a border on the bottom of the Header */
     shouldShowBorderBottom: PropTypes.bool,
 
@@ -67,6 +64,9 @@ const propTypes = {
     /** Whether we should show a close button */
     shouldShowCloseButton: PropTypes.bool,
 
+    /** Whether we should show a back button */
+    shouldShowBackButton: PropTypes.bool,
+
     /** Whether we should show the step counter */
     shouldShowStepCounter: PropTypes.bool,
 
@@ -103,16 +103,16 @@ const defaultProps = {
     title: '',
     subtitle: '',
     onDownloadButtonPress: () => {},
-    onCloseButtonPress: () => {},
-    onBackButtonPress: () => {},
+    onBackButtonPress: Navigation.goBack,
+    onCloseButtonPress: Navigation.dismissModal,
     onThreeDotsButtonPress: () => {},
-    shouldShowBackButton: false,
     shouldShowBorderBottom: false,
     shouldShowDownloadButton: false,
     shouldShowGetAssistanceButton: false,
     shouldShowThreeDotsButton: false,
-    shouldShowCloseButton: true,
     shouldShowStepCounter: true,
+    shouldShowCloseButton: false,
+    shouldShowBackButton: true,
     shouldShowAvatarWithDisplay: false,
     report: null,
     policies: {},
@@ -126,7 +126,7 @@ const defaultProps = {
     },
 };
 
-class HeaderWithCloseButton extends Component {
+class HeaderWithBackButton extends Component {
     constructor(props) {
         super(props);
 
@@ -238,7 +238,7 @@ class HeaderWithCloseButton extends Component {
     }
 }
 
-HeaderWithCloseButton.propTypes = propTypes;
-HeaderWithCloseButton.defaultProps = defaultProps;
+HeaderWithBackButton.propTypes = propTypes;
+HeaderWithBackButton.defaultProps = defaultProps;
 
-export default compose(withLocalize, withDelayToggleButtonState, withKeyboardState)(HeaderWithCloseButton);
+export default compose(withLocalize, withDelayToggleButtonState, withKeyboardState)(HeaderWithBackButton);
diff --git a/src/components/KeyboardShortcutsModal.js b/src/components/KeyboardShortcutsModal.js
index b1a2dab61664..282007fb3d77 100644
--- a/src/components/KeyboardShortcutsModal.js
+++ b/src/components/KeyboardShortcutsModal.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {View, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import HeaderWithCloseButton from './HeaderWithCloseButton';
+import HeaderWithBackButton from './HeaderWithBackButton';
 import Text from './Text';
 import Modal from './Modal';
 import CONST from '../CONST';
@@ -159,8 +159,10 @@ class KeyboardShortcutsModal extends React.Component {
                 innerContainerStyle={{...styles.keyboardShortcutModalContainer, ...StyleUtils.getKeyboardShortcutsModalWidth(this.props.isSmallScreenWidth)}}
                 onClose={KeyboardShortcutsActions.hideKeyboardShortcutModal}
             >
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('keyboardShortcutModal.title')}
+                    shouldShowCloseButton
+                    shouldShowBackButton={false}
                     onCloseButtonPress={KeyboardShortcutsActions.hideKeyboardShortcutModal}
                 />
                 <ScrollView style={[styles.p5, styles.pt0]}>
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index ac7908677d68..6d255da21129 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
-import HeaderWithCloseButton from './HeaderWithCloseButton';
+import HeaderWithBackButton from './HeaderWithBackButton';
 import iouReportPropTypes from '../pages/iouReportPropTypes';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import * as ReportUtils from '../libs/ReportUtils';
@@ -53,7 +53,7 @@ const MoneyRequestHeader = (props) => {
         : ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.report.managerEmail);
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 shouldShowAvatarWithDisplay
                 shouldShowThreeDotsButton={!isSettled}
                 threeDotsMenuItems={[
@@ -67,9 +67,8 @@ const MoneyRequestHeader = (props) => {
                 report={props.report}
                 policies={props.policies}
                 personalDetails={props.personalDetails}
-                shouldShowCloseButton={false}
                 shouldShowBackButton={props.isSmallScreenWidth}
-                onBackButtonPress={() => Navigation.navigate(ROUTES.HOME)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
             />
             <View style={[styles.ph5, styles.pb2]}>
                 <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text>
diff --git a/src/components/Pressable/PressableWithFeedback.js b/src/components/Pressable/PressableWithFeedback.js
index 0f4c07c63f64..9e475b7169cf 100644
--- a/src/components/Pressable/PressableWithFeedback.js
+++ b/src/components/Pressable/PressableWithFeedback.js
@@ -46,10 +46,9 @@ const PressableWithFeedback = forwardRef((props, ref) => {
                         setDisabled(props.disabled);
                         return;
                     }
-                    onPress
-                        .finally(() => {
-                            setDisabled(props.disabled);
-                        });
+                    onPress.finally(() => {
+                        setDisabled(props.disabled);
+                    });
                 });
             }}
         >
diff --git a/src/components/ReimbursementAccountLoadingIndicator.js b/src/components/ReimbursementAccountLoadingIndicator.js
index e7876d18ad53..a110d3c747ba 100644
--- a/src/components/ReimbursementAccountLoadingIndicator.js
+++ b/src/components/ReimbursementAccountLoadingIndicator.js
@@ -6,8 +6,7 @@ import ReviewingBankInfoAnimation from '../../assets/animations/ReviewingBankInf
 import styles from '../styles/styles';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Text from './Text';
-import HeaderWithCloseButton from './HeaderWithCloseButton';
-import Navigation from '../libs/Navigation/Navigation';
+import HeaderWithBackButton from './HeaderWithBackButton';
 import ScreenWrapper from './ScreenWrapper';
 import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
@@ -25,10 +24,8 @@ const propTypes = {
 
 const ReimbursementAccountLoadingIndicator = (props) => (
     <ScreenWrapper style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}>
-        <HeaderWithCloseButton
+        <HeaderWithBackButton
             title={props.translate('reimbursementAccountLoadingAnimation.oneMoment')}
-            onCloseButtonPress={Navigation.dismissModal}
-            shouldShowBackButton={props.network.isOffline}
             onBackButtonPress={props.onBackButtonPress}
         />
         <FullPageOfflineBlockingView>
diff --git a/src/components/withCurrentReportId.js b/src/components/withCurrentReportId.js
index ef87993060ed..8898ad45019f 100644
--- a/src/components/withCurrentReportId.js
+++ b/src/components/withCurrentReportId.js
@@ -49,10 +49,11 @@ CurrentReportIdContextProvider.propTypes = withCurrentReportIdPropTypes;
 export default function withCurrentReportId(WrappedComponent) {
     const WithCurrentReportId = forwardRef((props, ref) => (
         <CurrentReportIdContext.Consumer>
-            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
             {(translateUtils) => (
                 <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
                     {...translateUtils}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
                     {...props}
                     ref={ref}
                 />
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 3de8f6032013..abb125dc6a9e 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import Str from 'expensify-common/lib/str';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import CONST from '../../../CONST';
 import compose from '../../compose';
@@ -178,6 +177,7 @@ class AuthScreens extends React.Component {
             animationEnabled: true,
             cardStyleInterpolator: (props) => modalCardStyleInterpolator(this.props.isSmallScreenWidth, false, props),
             cardOverlayEnabled: true,
+            animationTypeForReplace: 'pop',
         };
 
         const rightModalNavigatorScreenOptions = {
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 7b33335fb86d..2340753d6578 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -598,6 +598,13 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'GetAssistance',
     },
+    {
+        getComponent: () => {
+            const YearPickerPage = require('../../../pages/YearPickerPage').default;
+            return YearPickerPage;
+        },
+        name: 'YearPicker_Root',
+    },
 ]);
 
 const EnablePaymentsStackNavigator = createModalStackNavigator([
@@ -640,16 +647,6 @@ const WalletStatementStackNavigator = createModalStackNavigator([
     },
 ]);
 
-const YearPickerStackNavigator = createModalStackNavigator([
-    {
-        getComponent: () => {
-            const YearPickerPage = require('../../../pages/YearPickerPage').default;
-            return YearPickerPage;
-        },
-        name: 'YearPicker_Root',
-    },
-]);
-
 export {
     IOUBillStackNavigator,
     IOURequestModalStackNavigator,
@@ -669,5 +666,4 @@ export {
     AddPersonalBankAccountModalStackNavigator,
     ReimbursementAccountModalStackNavigator,
     WalletStatementStackNavigator,
-    YearPickerStackNavigator,
 };
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js
index e86d66115304..83edd723b16b 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator.js
@@ -1,5 +1,7 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
+import {useIsFocused, useNavigation} from '@react-navigation/native';
+import {Freeze} from 'react-freeze';
 
 import SCREENS from '../../../../SCREENS';
 import ReportScreenWrapper from '../ReportScreenWrapper';
@@ -12,22 +14,47 @@ const url = getCurrentUrl();
 const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;
 
 function CentralPaneNavigator() {
+    const [isScreenBlurred, setIsScreenBlurred] = useState(false);
+    const [screenIndex, setScreenIndex] = useState(null);
+    const isFocused = useIsFocused();
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        if (screenIndex !== null) {
+            return;
+        }
+        setScreenIndex(navigation.getState().index);
+    }, [navigation, screenIndex]);
+
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('state', () => {
+            if (navigation.getState().index - screenIndex > 2) {
+                setIsScreenBlurred(true);
+            } else {
+                setIsScreenBlurred(false);
+            }
+        });
+        return () => unsubscribe();
+    }, [isFocused, isScreenBlurred, navigation, screenIndex]);
+
     return (
-        <Stack.Navigator>
-            <Stack.Screen
-                name={SCREENS.REPORT}
-                // We do it this way to avoid adding this to url
-                initialParams={{openOnAdminRoom: openOnAdminRoom ? 'true' : undefined}}
-                options={{
-                    headerShown: false,
-                    title: 'New Expensify',
-
-                    // Prevent unnecessary scrolling
-                    cardStyle: styles.cardStyleNavigator,
-                }}
-                component={ReportScreenWrapper}
-            />
-        </Stack.Navigator>
+        <Freeze freeze={!isFocused && isScreenBlurred}>
+            <Stack.Navigator>
+                <Stack.Screen
+                    name={SCREENS.REPORT}
+                    // We do it this way to avoid adding this to url
+                    initialParams={{openOnAdminRoom: openOnAdminRoom ? 'true' : undefined}}
+                    options={{
+                        headerShown: false,
+                        title: 'New Expensify',
+
+                        // Prevent unnecessary scrolling
+                        cardStyle: styles.cardStyleNavigator,
+                    }}
+                    component={ReportScreenWrapper}
+                />
+            </Stack.Navigator>
+        </Freeze>
     );
 }
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index 8946b4737286..a3b3ee3f9231 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -84,11 +84,6 @@ function RigthModalNavigator() {
                 options={defaultModalScreenOptions}
                 component={ModalStackNavigators.WalletStatementStackNavigator}
             />
-            <Stack.Screen
-                name="Select_Year"
-                options={defaultModalScreenOptions}
-                component={ModalStackNavigators.YearPickerStackNavigator}
-            />
             <Stack.Screen
                 name="NewTask"
                 options={defaultModalScreenOptions}
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
index 1b35e312b57b..931d68d1309d 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
@@ -11,6 +11,7 @@ import * as ReportUtils from '../../ReportUtils';
 import reportPropTypes from '../../../pages/reportPropTypes';
 import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 import {withNavigationPropTypes} from '../../../components/withNavigation';
+import * as App from '../../actions/App';
 
 const propTypes = {
     /** Available reports that would be displayed in this navigator */
@@ -79,6 +80,8 @@ class ReportScreenWrapper extends Component {
             // in that case the reportID is undefined
             if (reportID) {
                 this.props.navigation.setParams({reportID: String(reportID)});
+            } else {
+                App.confirmReadyToOpenApp();
             }
         }
     }
@@ -86,10 +89,11 @@ class ReportScreenWrapper extends Component {
     shouldComponentUpdate(nextProps) {
         // Don't update if there is a reportID in the params already
         if (lodashGet(this.props.route, 'params.reportID', null)) {
+            App.confirmReadyToOpenApp();
             return false;
         }
 
-        // If the reports weren't fully loaded in the contructor
+        // If the reports weren't fully loaded in the constructor,
         // try to get and set reportID again
         const reportID = getLastAccessedReportID(
             nextProps.reports,
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index 4a4a7827fe7b..efbae8bde2cd 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -40,26 +40,35 @@ function canNavigate(methodName, params = {}) {
 const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopmostReportId(state);
 
 /**
- * @private
- * @param {Boolean} shouldOpenDrawer
+ * Method for finding on which index in stack we are.
+ * @param {Object} route
+ * @param {Number} index
+ * @returns {Number}
  */
-function goBack() {
-    if (!canNavigate('goBack')) {
-        return;
+const getActiveRouteIndex = function (route, index) {
+    if (route.routes) {
+        const childActiveRoute = route.routes[route.index || 0];
+        return getActiveRouteIndex(childActiveRoute, route.index || 0);
     }
 
-    if (!navigationRef.current.canGoBack()) {
-        Log.hmmm('[Navigation] Unable to go back');
-        return;
+    if (route.state && route.state.routes) {
+        const childActiveRoute = route.state.routes[route.state.index || 0];
+        return getActiveRouteIndex(childActiveRoute, route.state.index || 0);
     }
-    navigationRef.current.goBack();
-}
+
+    if (route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+        return 0;
+    }
+
+    return index;
+};
 
 /**
  * Main navigation method for redirecting to a route.
  * @param {String} route
+ * @param {String} type - Type of action to perform. Currently UP is supported.
  */
-function navigate(route = ROUTES.HOME) {
+function navigate(route = ROUTES.HOME, type) {
     if (!canNavigate('navigate', {route})) {
         // Store intended route if the navigator is not yet available,
         // we will try again after the NavigationContainer is ready
@@ -73,7 +82,29 @@ function navigate(route = ROUTES.HOME) {
     // More info: https://github.com/Expensify/App/issues/13146
     DomUtils.blurActiveElement();
 
-    linkTo(navigationRef.current, route);
+    linkTo(navigationRef.current, route, type);
+}
+
+/**
+ * @param {String} fallbackRoute - Fallback route if pop/goBack action should, but is not possible within RHP
+ * @param {Bool} shouldEnforceFallback - Enforces navigation to fallback route
+ */
+function goBack(fallbackRoute = ROUTES.HOME, shouldEnforceFallback = false) {
+    if (!canNavigate('goBack')) {
+        return;
+    }
+
+    if (!navigationRef.current.canGoBack()) {
+        Log.hmmm('[Navigation] Unable to go back');
+        return;
+    }
+
+    if (shouldEnforceFallback || (!getActiveRouteIndex(navigationRef.current.getState()) && fallbackRoute)) {
+        navigate(fallbackRoute, 'UP');
+        return;
+    }
+
+    navigationRef.current.goBack();
 }
 
 /**
diff --git a/src/libs/Navigation/linkTo.js b/src/libs/Navigation/linkTo.js
index 9da007fad66a..86871f822bd1 100644
--- a/src/libs/Navigation/linkTo.js
+++ b/src/libs/Navigation/linkTo.js
@@ -4,7 +4,7 @@ import NAVIGATORS from '../../NAVIGATORS';
 import linkingConfig from './linkingConfig';
 import getTopmostReportId from './getTopmostReportId';
 
-export default function linkTo(navigation, path) {
+export default function linkTo(navigation, path, type) {
     const normalizedPath = !path.startsWith('/') ? `/${path}` : path;
     if (navigation === undefined) {
         throw new Error("Couldn't find a navigation object. Is your component inside a screen in a navigator?");
@@ -33,6 +33,11 @@ export default function linkTo(navigation, path) {
         if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && getTopmostReportId(root.getState()) !== getTopmostReportId(state)) {
             action.type = 'PUSH';
 
+            // If this action is navigating to the RightModalNavigator and the last route on the root navigator is also RightModalNavigator
+            // then we want to replace the current RHP state with new one
+        } else if (type === 'UP') {
+            action.type = 'REPLACE';
+
             // If this action is navigating to the RightModalNavigator and the last route on the root navigator is not RightModalNavigator then push
         } else if (action.payload.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && _.last(root.getState().routes).name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
             action.type = 'PUSH';
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 876eb943d354..898017f6bbb9 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -190,6 +190,9 @@ export default {
                             GetAssistance: {
                                 path: ROUTES.GET_ASSISTANCE,
                             },
+                            YearPicker_Root: {
+                                path: ROUTES.SELECT_YEAR,
+                            },
                         },
                     },
                     Report_Details: {
@@ -291,11 +294,6 @@ export default {
                             WalletStatement_Root: ROUTES.WALLET_STATEMENT_WITH_DATE,
                         },
                     },
-                    Select_Year: {
-                        screens: {
-                            YearPicker_Root: ROUTES.SELECT_YEAR,
-                        },
-                    },
                 },
             },
         },
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 36d82b1a7068..8e9e067957c3 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import Navigation from '../libs/Navigation/Navigation';
 import * as BankAccounts from '../libs/actions/BankAccounts';
@@ -89,11 +89,9 @@ class AddPersonalBankAccountPage extends React.Component {
                 includeSafeAreaPaddingBottom={shouldShowSuccess}
                 shouldEnablePickerAvoiding={false}
             >
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('bankAccount.addBankAccount')}
-                    onCloseButtonPress={Navigation.dismissModal}
-                    shouldShowBackButton
-                    onBackButtonPress={Navigation.goBack}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PAYMENTS)}
                 />
                 {shouldShowSuccess ? (
                     <ConfirmationPage
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index baee3381673b..26014440b293 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -10,8 +10,7 @@ import styles from '../styles/styles';
 import Text from '../components/Text';
 import ONYXKEYS from '../ONYXKEYS';
 import Avatar from '../components/Avatar';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
-import Navigation from '../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import personalDetailsPropType from './personalDetailsPropType';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
@@ -28,6 +27,8 @@ import * as Report from '../libs/actions/Report';
 import OfflineWithFeedback from '../components/OfflineWithFeedback';
 import AutoUpdateTime from '../components/AutoUpdateTime';
 import FullPageNotFoundView from '../components/BlockingViews/FullPageNotFoundView';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
 
 const matchType = PropTypes.shape({
     params: PropTypes.shape({
@@ -86,7 +87,6 @@ const getPhoneNumber = (details) => {
 class DetailsPage extends React.PureComponent {
     render() {
         const login = lodashGet(this.props.route.params, 'login', '');
-        const reportID = lodashGet(this.props.route.params, 'reportID', '');
         let details = lodashGet(this.props.personalDetails, login);
 
         if (!details) {
@@ -99,9 +99,6 @@ class DetailsPage extends React.PureComponent {
 
         const isSMSLogin = details.login ? Str.isSMSLogin(details.login) : false;
 
-        // If we have a reportID param this means that we
-        // arrived here via the ParticipantsPage and should be allowed to navigate back to it
-        const shouldShowBackButton = Boolean(reportID);
         const shouldShowLocalTime = !ReportUtils.hasAutomatedExpensifyEmails([details.login]) && details.timezone;
         let pronouns = details.pronouns;
 
@@ -116,11 +113,9 @@ class DetailsPage extends React.PureComponent {
         return (
             <ScreenWrapper>
                 <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={this.props.translate('common.details')}
-                        shouldShowBackButton={shouldShowBackButton}
-                        onBackButtonPress={() => Navigation.goBack()}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
                     />
                     <View
                         pointerEvents="box-none"
diff --git a/src/pages/EnablePayments/ActivateStep.js b/src/pages/EnablePayments/ActivateStep.js
index 4b814125c577..736cdf4af059 100644
--- a/src/pages/EnablePayments/ActivateStep.js
+++ b/src/pages/EnablePayments/ActivateStep.js
@@ -2,8 +2,7 @@ import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import FireworksAnimation from '../../../assets/animations/Fireworks.json';
 import ReviewingBankInfoAnimation from '../../../assets/animations/ReviewingBankInfo.json';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import userWalletPropTypes from './userWalletPropTypes';
 import CONST from '../../CONST';
@@ -37,12 +36,7 @@ const ActivateStep = (props) => {
 
     return (
         <>
-            <HeaderWithCloseButton
-                title={props.translate('activateStep.headerTitle')}
-                onCloseButtonPress={() => Navigation.dismissModal()}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
-            />
+            <HeaderWithBackButton title={props.translate('activateStep.headerTitle')} />
             <ConfirmationPage
                 animation={animation}
                 heading={props.translate(`activateStep.${isGoldWallet ? 'activated' : 'checkBackLater'}Title`)}
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index e7cfbfc3ab67..22dd50e2ab4a 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -7,9 +7,8 @@ import moment from 'moment/moment';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import IdologyQuestions from './IdologyQuestions';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import Text from '../../components/Text';
 import CONST from '../../CONST';
@@ -197,10 +196,8 @@ class AdditionalDetailsStep extends React.Component {
                     style={[styles.flex1]}
                     keyboardAvoidingViewBehavior="height"
                 >
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={this.props.translate('additionalDetailsStep.headerTitle')}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                        shouldShowBackButton
                         onBackButtonPress={() => Wallet.setAdditionalDetailsQuestions(null)}
                     />
                     <IdologyQuestions
@@ -214,10 +211,7 @@ class AdditionalDetailsStep extends React.Component {
 
         return (
             <>
-                <HeaderWithCloseButton
-                    title={this.props.translate('additionalDetailsStep.headerTitle')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
+                <HeaderWithBackButton title={this.props.translate('additionalDetailsStep.headerTitle')} />
                 <View style={[styles.flex1]}>
                     <View style={[styles.ph5]}>
                         <Text style={styles.mb3}>{this.props.translate('additionalDetailsStep.helpText')}</Text>
diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js
index 954c82edbabe..e0a1f5a22eee 100644
--- a/src/pages/EnablePayments/EnablePaymentsPage.js
+++ b/src/pages/EnablePayments/EnablePaymentsPage.js
@@ -15,11 +15,12 @@ import OnfidoStep from './OnfidoStep';
 import AdditionalDetailsStep from './AdditionalDetailsStep';
 import TermsStep from './TermsStep';
 import ActivateStep from './ActivateStep';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import FailedKYC from './FailedKYC';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
 
 const propTypes = {
     /** Information about the network from Onyx */
@@ -59,9 +60,9 @@ class EnablePaymentsPage extends React.Component {
                     if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
                         return (
                             <>
-                                <HeaderWithCloseButton
+                                <HeaderWithBackButton
                                     title={this.props.translate('additionalDetailsStep.headerTitle')}
-                                    onCloseButtonPress={() => Navigation.dismissModal()}
+                                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PAYMENTS)}
                                 />
                                 <FailedKYC />
                             </>
diff --git a/src/pages/EnablePayments/OnfidoStep.js b/src/pages/EnablePayments/OnfidoStep.js
index 9c22175464ee..31727f51cb69 100644
--- a/src/pages/EnablePayments/OnfidoStep.js
+++ b/src/pages/EnablePayments/OnfidoStep.js
@@ -5,7 +5,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import * as Wallet from '../../libs/actions/Wallet';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
@@ -39,10 +39,8 @@ class OnfidoStep extends React.Component {
     render() {
         return (
             <>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('onfidoStep.verifyIdentity')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                    shouldShowBackButton
                     onBackButtonPress={() => Wallet.updateCurrentStep(CONST.WALLET.STEP.ADDITIONAL_DETAILS)}
                 />
                 <FullPageOfflineBlockingView>
diff --git a/src/pages/EnablePayments/TermsStep.js b/src/pages/EnablePayments/TermsStep.js
index 216787d12c5c..0e088e68f04c 100644
--- a/src/pages/EnablePayments/TermsStep.js
+++ b/src/pages/EnablePayments/TermsStep.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
@@ -69,10 +68,8 @@ class TermsStep extends React.Component {
         const errorMessage = this.state.error ? this.props.translate('common.error.acceptTerms') : ErrorUtils.getLatestErrorMessage(this.props.walletTerms) || '';
         return (
             <>
-                <HeaderWithCloseButton
-                    title={this.props.translate('termsStep.headerTitle')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
+                <HeaderWithBackButton title={this.props.translate('termsStep.headerTitle')} />
+
                 <ScrollView
                     style={styles.flex1}
                     contentContainerStyle={styles.ph5}
diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.js
index d7a520b0298f..4b4ca66a80eb 100644
--- a/src/pages/GetAssistancePage.js
+++ b/src/pages/GetAssistancePage.js
@@ -5,9 +5,8 @@ import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import ScreenWrapper from '../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import Section from '../components/Section';
-import Navigation from '../libs/Navigation/Navigation';
 import styles from '../styles/styles';
 import Text from '../components/Text';
 import * as Expensicons from '../components/Icon/Expensicons';
@@ -17,6 +16,8 @@ import * as Link from '../libs/actions/Link';
 import CONST from '../CONST';
 import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
+import Navigation from '../libs/Navigation/Navigation';
+import ROUTES from '../ROUTES';
 
 const propTypes = {
     /** Route object from navigation */
@@ -77,11 +78,9 @@ const GetAssistancePage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('getAssistancePage.title')}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
             />
             <ScrollView>
                 <Section
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 1765c700221e..a5b9d8f39f2f 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -11,8 +11,7 @@ import styles from '../styles/styles';
 import * as Report from '../libs/actions/Report';
 import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
-import Navigation from '../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
@@ -232,10 +231,8 @@ class NewChatPage extends Component {
             >
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
-                        <HeaderWithCloseButton
-                            title={this.props.isGroupChat ? this.props.translate('sidebarScreen.newGroup') : this.props.translate('sidebarScreen.newChat')}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
-                        />
+                        <HeaderWithBackButton title={this.props.isGroupChat ? this.props.translate('sidebarScreen.newGroup') : this.props.translate('sidebarScreen.newChat')} />
+
                         <View style={[styles.flex1, styles.w100, styles.pRelative, this.state.selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
                             <OptionsSelector
                                 canSelectMultipleOptions={this.props.isGroupChat}
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index 6c7fd4ca77a7..ae1225291473 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -5,14 +5,13 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import Text from '../../components/Text';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import styles from '../../styles/styles';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import TextLink from '../../components/TextLink';
 import IdentityForm from './IdentityForm';
 import withLocalize from '../../components/withLocalize';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
-import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
 import * as ValidationUtils from '../../libs/ValidationUtils';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -162,14 +161,12 @@ class ACHContractStep extends React.Component {
     render() {
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('beneficialOwnersStep.additionalInformation')}
                     stepCounter={{step: 4, total: 5}}
-                    onCloseButtonPress={Navigation.dismissModal}
                     onBackButtonPress={this.props.onBackButtonPress}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index 0cb6a706abf8..e8bda84318d5 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import {Image} from 'react-native';
 import lodashGet from 'lodash/get';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import CONST from '../../CONST';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
-import Navigation from '../../libs/Navigation/Navigation';
 import Text from '../../components/Text';
 import TextInput from '../../components/TextInput';
 import styles from '../../styles/styles';
@@ -68,14 +67,12 @@ class BankAccountManualStep extends React.Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('workspace.common.bankAccount')}
                     stepCounter={{step: 1, total: 5}}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                     onBackButtonPress={this.props.onBackButtonPress}
-                    onCloseButtonPress={Navigation.dismissModal}
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index aade78afd54a..bd6ce5294166 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -3,10 +3,9 @@ import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import CONST from '../../CONST';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
-import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize from '../../components/withLocalize';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -85,14 +84,12 @@ class BankAccountPlaidStep extends React.Component {
                 includeSafeAreaPaddingBottom={false}
                 shouldEnablePickerAvoiding={false}
             >
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('workspace.common.bankAccount')}
                     stepCounter={{step: 1, total: 5}}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                     onBackButtonPress={this.props.onBackButtonPress}
-                    onCloseButtonPress={Navigation.dismissModal}
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index e8cd1d7a2f60..2d7a8b83608e 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -5,14 +5,13 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import BankAccountManualStep from './BankAccountManualStep';
 import BankAccountPlaidStep from './BankAccountPlaidStep';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import MenuItem from '../../components/MenuItem';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import styles from '../../styles/styles';
 import TextLink from '../../components/TextLink';
 import Icon from '../../components/Icon';
 import colors from '../../styles/colors';
-import Navigation from '../../libs/Navigation/Navigation';
 import CONST from '../../CONST';
 import withLocalize from '../../components/withLocalize';
 import Text from '../../components/Text';
@@ -92,15 +91,13 @@ const BankAccountStep = (props) => {
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <View style={[styles.flex1, styles.justifyContentBetween]}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={props.translate('workspace.common.bankAccount')}
                     subtitle={props.policyName}
                     stepCounter={subStep ? {step: 1, total: 5} : undefined}
-                    onCloseButtonPress={Navigation.dismissModal}
                     onBackButtonPress={props.onBackButtonPress}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                 />
                 <ScrollView style={[styles.flex1]}>
                     <Section
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 3e86c9565ede..1265469abd26 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -6,10 +6,9 @@ import Str from 'expensify-common/lib/str';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import {parsePhoneNumber} from 'awesome-phonenumber';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import CONST from '../../CONST';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
-import Navigation from '../../libs/Navigation/Navigation';
 import Text from '../../components/Text';
 import DatePicker from '../../components/DatePicker';
 import TextInput from '../../components/TextInput';
@@ -159,14 +158,12 @@ class CompanyStep extends React.Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('companyStep.headerTitle')}
                     stepCounter={{step: 2, total: 5}}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                     onBackButtonPress={this.props.onBackButtonPress}
-                    onCloseButtonPress={Navigation.dismissModal}
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
diff --git a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
index 9d7506383219..ecf635be6344 100644
--- a/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
+++ b/src/pages/ReimbursementAccount/ContinueBankAccountSetup.js
@@ -10,9 +10,8 @@ import Button from '../../components/Button';
 import compose from '../../libs/compose';
 import CONST from '../../CONST';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import MenuItem from '../../components/MenuItem';
-import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import Section from '../../components/Section';
@@ -49,14 +48,11 @@ const ContinueBankAccountSetup = (props) => {
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             <FullPageNotFoundView shouldShow={_.isEmpty(props.policy)}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={props.translate('workspace.common.bankAccount')}
                     subtitle={props.policyName}
-                    onCloseButtonPress={Navigation.dismissModal}
-                    onBackButtonPress={Navigation.goBack}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                 />
                 <ScrollView style={styles.flex1}>
                     <Section
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 3b70f19957c5..9092a4a2da52 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Text from '../../components/Text';
 import compose from '../../libs/compose';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -58,14 +57,11 @@ const EnableStep = (props) => {
             style={[styles.flex1, styles.justifyContentBetween]}
             includeSafeAreaPaddingBottom={false}
         >
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('workspace.common.bankAccount')}
                 subtitle={props.policyName}
-                onCloseButtonPress={Navigation.dismissModal}
                 shouldShowGetAssistanceButton
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
             />
             <ScrollView style={[styles.flex1]}>
                 <Section
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 76294b23dd5d..3299bc446c01 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -27,7 +27,7 @@ import ValidationStep from './ValidationStep';
 import ACHContractStep from './ACHContractStep';
 import EnableStep from './EnableStep';
 import ROUTES from '../../ROUTES';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import * as ReimbursementAccountProps from './reimbursementAccountPropTypes';
 import reimbursementAccountDraftPropTypes from './ReimbursementAccountDraftPropTypes';
 import withPolicy from '../workspace/withPolicy';
@@ -376,10 +376,10 @@ class ReimbursementAccountPage extends React.Component {
         if (errorComponent) {
             return (
                 <ScreenWrapper>
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={this.props.translate('workspace.common.bankAccount')}
-                        onCloseButtonPress={Navigation.dismissModal}
                         subtitle={policyName}
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                     />
                     {errorComponent}
                 </ScreenWrapper>
diff --git a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
index 46eb79375bf7..aad5def99518 100644
--- a/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
+++ b/src/pages/ReimbursementAccount/RequestorOnfidoStep.js
@@ -13,8 +13,7 @@ import Growl from '../../libs/Growl';
 import CONST from '../../CONST';
 import FullPageOfflineBlockingView from '../../components/BlockingViews/FullPageOfflineBlockingView';
 import StepPropTypes from './StepPropTypes';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../components/ScreenWrapper';
 
 const propTypes = {
@@ -43,14 +42,12 @@ class RequestorOnfidoStep extends React.Component {
     render() {
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
                     stepCounter={{step: 3, total: 5}}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                     onBackButtonPress={this.props.onBackButtonPress}
-                    onCloseButtonPress={Navigation.dismissModal}
                 />
                 <FullPageOfflineBlockingView>
                     <ScrollView contentContainerStyle={styles.flex1}>
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 74b183fe3d32..b69067550848 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -4,10 +4,9 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
 import withLocalize from '../../components/withLocalize';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import CONST from '../../CONST';
 import TextLink from '../../components/TextLink';
-import Navigation from '../../libs/Navigation/Navigation';
 import CheckboxWithLabel from '../../components/CheckboxWithLabel';
 import Text from '../../components/Text';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
@@ -115,14 +114,12 @@ class RequestorStep extends React.Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}
                     stepCounter={{step: 3, total: 5}}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                     onBackButtonPress={this.props.onBackButtonPress}
-                    onCloseButtonPress={Navigation.dismissModal}
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index ab8010f1b347..fe0a477de0fd 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -10,8 +10,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import compose from '../../libs/compose';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import * as Report from '../../libs/actions/Report';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import TextInput from '../../components/TextInput';
 import Text from '../../components/Text';
 import BankAccount from '../../libs/models/BankAccount';
@@ -133,14 +132,12 @@ class ValidationStep extends React.Component {
                 style={[styles.flex1, styles.justifyContentBetween]}
                 includeSafeAreaPaddingBottom={false}
             >
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={isVerifying ? this.props.translate('validationStep.headerTitle') : this.props.translate('workspace.common.testTransactions')}
                     stepCounter={{step: 5, total: 5}}
-                    onCloseButtonPress={Navigation.dismissModal}
                     onBackButtonPress={this.props.onBackButtonPress}
                     shouldShowGetAssistanceButton
                     guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
-                    shouldShowBackButton
                     shouldShowStepCounter={!isVerifying}
                 />
                 {maxAttemptsReached && (
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 9ed7bfa86092..48b873596e88 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -10,7 +10,7 @@ import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import ONYXKEYS from '../ONYXKEYS';
 import ScreenWrapper from '../components/ScreenWrapper';
 import Navigation from '../libs/Navigation/Navigation';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import styles from '../styles/styles';
 import DisplayNames from '../components/DisplayNames';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
@@ -120,11 +120,7 @@ class ReportDetailsPage extends Component {
         return (
             <ScreenWrapper>
                 <FullPageNotFoundView shouldShow={_.isEmpty(this.props.report)}>
-                    <HeaderWithCloseButton
-                        title={this.props.translate('common.details')}
-                        onBackButtonPress={() => Navigation.goBack()}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
-                    />
+                    <HeaderWithBackButton title={this.props.translate('common.details')} />
                     <ScrollView style={[styles.flex1]}>
                         <View style={[styles.m5]}>
                             <View style={styles.reportDetailsTitleContainer}>
diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js
index a4a4d4b8e17a..febf3c890a68 100755
--- a/src/pages/ReportParticipantsPage.js
+++ b/src/pages/ReportParticipantsPage.js
@@ -7,7 +7,7 @@ import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import styles from '../styles/styles';
 import ONYXKEYS from '../ONYXKEYS';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import Navigation from '../libs/Navigation/Navigation';
 import ScreenWrapper from '../components/ScreenWrapper';
 import OptionsList from '../components/OptionsList';
@@ -85,11 +85,8 @@ const ReportParticipantsPage = (props) => {
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={props.translate(ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report) ? 'common.members' : 'common.details')}
-                        onCloseButtonPress={Navigation.dismissModal}
-                        onBackButtonPress={Navigation.goBack}
-                        shouldShowBackButton={ReportUtils.isChatRoom(props.report) || ReportUtils.isPolicyExpenseChat(props.report)}
                     />
                     <View
                         pointerEvents="box-none"
diff --git a/src/pages/ReportSettingsPage.js b/src/pages/ReportSettingsPage.js
index cee26f37714b..b0da2e6c65a9 100644
--- a/src/pages/ReportSettingsPage.js
+++ b/src/pages/ReportSettingsPage.js
@@ -8,11 +8,10 @@ import CONST from '../CONST';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
 import compose from '../libs/compose';
-import Navigation from '../libs/Navigation/Navigation';
 import * as Report from '../libs/actions/Report';
 import * as Policy from '../libs/actions/Policy';
 import * as ReportUtils from '../libs/ReportUtils';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import Text from '../components/Text';
@@ -150,12 +149,7 @@ class ReportSettingsPage extends Component {
         return (
             <ScreenWrapper>
                 <FullPageNotFoundView shouldShow={_.isEmpty(this.props.report)}>
-                    <HeaderWithCloseButton
-                        title={this.props.translate('common.settings')}
-                        shouldShowBackButton
-                        onBackButtonPress={Navigation.goBack}
-                        onCloseButtonPress={Navigation.dismissModal}
-                    />
+                    <HeaderWithBackButton title={this.props.translate('common.settings')} />
                     <Form
                         formID={ONYXKEYS.FORMS.ROOM_SETTINGS_FORM}
                         submitButtonText={this.props.translate('common.save')}
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 43d0da6bdc67..1e0c7404c016 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -12,7 +12,7 @@ import Navigation from '../libs/Navigation/Navigation';
 import ROUTES from '../ROUTES';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
 import * as Report from '../libs/actions/Report';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import ScreenWrapper from '../components/ScreenWrapper';
 import Timing from '../libs/actions/Timing';
 import CONST from '../CONST';
@@ -173,10 +173,7 @@ class SearchPage extends Component {
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                     <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('common.search')}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
-                        />
+                        <HeaderWithBackButton title={this.props.translate('common.search')} />
                         <View style={[styles.flex1, styles.w100, styles.pRelative]}>
                             <OptionsSelector
                                 sections={sections}
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index 8fbfabe9f524..ec312428498e 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View, ScrollView} from 'react-native';
 import ScreenWrapper from '../components/ScreenWrapper';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import Navigation from '../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import QRShareWithDownload from '../components/QRShare/QRShareWithDownload';
@@ -45,11 +45,9 @@ class ShareCodePage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('common.shareCode')}
-                    shouldShowBackButton
                     onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
                 />
 
                 <ScrollView style={[styles.flex1, styles.mt3]}>
diff --git a/src/pages/YearPickerPage.js b/src/pages/YearPickerPage.js
index 5cab2fc73044..b82c5413bf7f 100644
--- a/src/pages/YearPickerPage.js
+++ b/src/pages/YearPickerPage.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import React from 'react';
 import {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../components/ScreenWrapper';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import ROUTES from '../ROUTES';
 import styles from '../styles/styles';
@@ -64,7 +64,7 @@ class YearPickerPage extends React.Component {
      */
     updateSelectedYear(selectedYear) {
         // We have to navigate using concatenation here as it is not possible to pass a function as a route param
-        Navigation.navigate(`${this.props.route.params.backTo}?year=${selectedYear}`);
+        Navigation.goBack(`${ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH}?year=${selectedYear}`, true);
     }
 
     /**
@@ -89,11 +89,9 @@ class YearPickerPage extends React.Component {
         const headerMessage = this.state.inputText.trim() && !this.state.yearOptions.length ? this.props.translate('common.noResultsFound') : '';
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('yearPickerPage.year')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(`${this.props.route.params.backTo}?year=${this.currentYear}` || ROUTES.HOME)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(`${this.props.route.params.backTo}?year=${this.currentYear}` || ROUTES.HOME)}
                 />
                 <OptionsSelector
                     textInputLabel={this.props.translate('yearPickerPage.selectYear')}
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 4b300085bf99..22b5e657cee3 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -40,6 +40,7 @@ import EmojiPicker from '../../components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
 import TaskHeader from '../../components/TaskHeader';
 import MoneyRequestHeader from '../../components/MoneyRequestHeader';
+import withNavigation, {withNavigationPropTypes} from '../../components/withNavigation';
 import * as ComposerActions from '../../libs/actions/Composer';
 
 const propTypes = {
@@ -89,6 +90,7 @@ const propTypes = {
 
     ...windowDimensionsPropTypes,
     ...viewportOffsetTopPropTypes,
+    ...withNavigationPropTypes,
 };
 
 const defaultProps = {
@@ -121,6 +123,10 @@ function getReportID(route) {
 let reportActionsListViewHeight = 0;
 
 class ReportScreen extends React.Component {
+    transitionEndListener = null;
+
+    gestureStartListener = null;
+
     constructor(props) {
         super(props);
 
@@ -132,6 +138,7 @@ class ReportScreen extends React.Component {
             skeletonViewContainerHeight: reportActionsListViewHeight,
             isBannerVisible: true,
             animationFinished: false,
+            isScreenBlurred: false,
         };
     }
 
@@ -153,6 +160,15 @@ class ReportScreen extends React.Component {
         InteractionManager.runAfterInteractions(() => {
             this.setState({animationFinished: true});
         });
+
+        // ReportScreen is nested inside another navigator, so we need to listen to the parent navigator's events
+        this.transitionEndListener = this.props.navigation.getParent().addListener('transitionEnd', (e) => {
+            this.setState({isScreenBlurred: e.data.closing});
+        });
+
+        this.gestureStartListener = this.props.navigation.getParent().addListener('gestureStart', () => {
+            this.setState({isScreenBlurred: false});
+        });
     }
 
     componentDidUpdate(prevProps) {
@@ -175,6 +191,8 @@ class ReportScreen extends React.Component {
             this.unsubscribeVisibilityListener();
         }
         Navigation.resetIsReportScreenReadyPromise();
+        this.transitionEndListener();
+        this.gestureStartListener();
     }
 
     /**
@@ -241,7 +259,8 @@ class ReportScreen extends React.Component {
             (ReportUtils.isUserCreatedPolicyRoom(this.props.report) && !Permissions.canUsePolicyRooms(this.props.betas));
 
         // When the ReportScreen is not open/in the viewport, we want to "freeze" it for performance reasons
-        const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isFocused;
+        const isVisible = this.props.isFocused || !this.state.isScreenBlurred;
+        const shouldFreeze = this.props.isSmallScreenWidth && !isVisible;
 
         const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails) || !this.state.animationFinished;
 
@@ -294,7 +313,7 @@ class ReportScreen extends React.Component {
                                     ) : (
                                         <HeaderView
                                             reportID={reportID}
-                                            onNavigationMenuButtonClicked={Navigation.goBack}
+                                            onNavigationMenuButtonClicked={() => Navigation.goBack(ROUTES.HOME)}
                                             personalDetails={this.props.personalDetails}
                                             report={this.props.report}
                                         />
@@ -388,6 +407,7 @@ export default compose(
     withLocalize,
     withWindowDimensions,
     withNavigationFocus,
+    withNavigation,
     withNetwork(),
     withOnyx({
         isSidebarLoaded: {
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 21fa3300f8a1..fa73f8650a31 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -49,7 +49,6 @@ import ArrowKeyFocusManager from '../../../components/ArrowKeyFocusManager';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import KeyboardShortcut from '../../../libs/KeyboardShortcut';
 import * as ComposerUtils from '../../../libs/ComposerUtils';
-import * as ComposerActions from '../../../libs/actions/Composer';
 import * as Welcome from '../../../libs/actions/Welcome';
 import Permissions from '../../../libs/Permissions';
 import * as TaskUtils from '../../../libs/actions/Task';
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index 95e81854a671..2bfbceed1384 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -31,6 +31,7 @@ import reportPropTypes from '../../reportPropTypes';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import withNavigationFocus from '../../../components/withNavigationFocus';
 import withCurrentReportId from '../../../components/withCurrentReportId';
+import withNavigation, {withNavigationPropTypes} from '../../../components/withNavigation';
 import Header from '../../../components/Header';
 import defaultTheme from '../../../styles/themes/default';
 import OptionsListSkeletonView from '../../../components/OptionsListSkeletonView';
@@ -78,6 +79,7 @@ const propTypes = {
     priorityMode: PropTypes.string,
 
     ...withLocalizePropTypes,
+    ...withNavigationPropTypes,
 };
 
 const defaultProps = {
@@ -92,17 +94,42 @@ const defaultProps = {
 };
 
 class SidebarLinks extends React.Component {
+    transitionEndListener = null;
+
+    gestureStartListener = null;
+
     constructor(props) {
         super(props);
 
         this.showSearchPage = this.showSearchPage.bind(this);
         this.showSettingsPage = this.showSettingsPage.bind(this);
         this.showReportPage = this.showReportPage.bind(this);
+
+        if (this.props.isSmallScreenWidth) {
+            App.confirmReadyToOpenApp();
+        }
+
+        this.state = {
+            isScreenBlurred: false,
+        };
     }
 
     componentDidMount() {
         App.setSidebarLoaded();
         this.isSidebarLoaded = true;
+        // SidebarLinks need to have information if the screen is blurred in order to enable freeze
+        this.transitionEndListener = this.props.navigation.addListener('transitionEnd', (e) => {
+            this.setState({isScreenBlurred: e.data.closing});
+        });
+
+        this.gestureStartListener = this.props.navigation.addListener('gestureStart', () => {
+            this.setState({isScreenBlurred: false});
+        });
+    }
+
+    componentWillUnmount() {
+        this.transitionEndListener();
+        this.gestureStartListener();
     }
 
     showSearchPage() {
@@ -138,7 +165,8 @@ class SidebarLinks extends React.Component {
 
     render() {
         const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports);
-        const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isFocused && this.isSidebarLoaded;
+        const isVisible = this.props.isFocused || !this.state.isScreenBlurred;
+        const shouldFreeze = this.props.isSmallScreenWidth && this.isSidebarLoaded && !isVisible;
         const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute);
 
         const skeletonPlaceholder = <OptionsListSkeletonView shouldAnimate={!shouldFreeze} />;
@@ -294,6 +322,7 @@ export default compose(
     withNavigationFocus,
     withWindowDimensions,
     withCurrentReportId,
+    withNavigation,
     withOnyx({
         // Note: It is very important that the keys subscribed to here are the same
         // keys that are subscribed to at the top of SidebarUtils.js. If there was a key missing from here and data was updated
diff --git a/src/pages/iou/IOUCurrencySelection.js b/src/pages/iou/IOUCurrencySelection.js
index 20182afc4fff..4d835bc872ec 100644
--- a/src/pages/iou/IOUCurrencySelection.js
+++ b/src/pages/iou/IOUCurrencySelection.js
@@ -7,12 +7,13 @@ import ONYXKEYS from '../../ONYXKEYS';
 import OptionsSelector from '../../components/OptionsSelector';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import compose from '../../libs/compose';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import * as IOU from '../../libs/actions/IOU';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import {withNetwork} from '../../components/OnyxProvider';
+import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
 import themeColors from '../../styles/themes/default';
 import * as Expensicons from '../../components/Icon/Expensicons';
@@ -138,9 +139,9 @@ class IOUCurrencySelection extends Component {
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {({safeAreaPaddingBottomStyle}) => (
                     <>
-                        <HeaderWithCloseButton
+                        <HeaderWithBackButton
                             title={this.props.translate('iOUCurrencySelection.selectCurrency')}
-                            onCloseButtonPress={Navigation.goBack}
+                            onBackButtonPress={() => Navigation.goBack(ROUTES.getIouRequestRoute(Navigation.getTopmostReportId()))}
                         />
                         <OptionsSelector
                             sections={this.getSections()}
diff --git a/src/pages/iou/IOUDetailsModal.js b/src/pages/iou/IOUDetailsModal.js
index f81fe53fb492..32d6ba67ff55 100644
--- a/src/pages/iou/IOUDetailsModal.js
+++ b/src/pages/iou/IOUDetailsModal.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
 import {withNetwork} from '../../components/OnyxProvider';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import * as IOU from '../../libs/actions/IOU';
@@ -172,9 +172,9 @@ class IOUDetailsModal extends Component {
                         subtitleKey="notFound.iouReportNotFound"
                         onBackButtonPress={Navigation.dismissModal}
                     >
-                        <HeaderWithCloseButton
+                        <HeaderWithBackButton
                             title={this.props.translate('common.details')}
-                            onCloseButtonPress={Navigation.dismissModal}
+                            onBackButtonPress={() => Navigation.goBack(ROUTES.IOU_REQUEST)}
                         />
                         {this.props.iou.loading ? (
                             <View style={styles.flex1}>
diff --git a/src/pages/iou/ModalHeader.js b/src/pages/iou/ModalHeader.js
deleted file mode 100644
index dd5b3fdadf54..000000000000
--- a/src/pages/iou/ModalHeader.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import {View, TouchableOpacity} from 'react-native';
-import PropTypes from 'prop-types';
-import styles from '../../styles/styles';
-import Icon from '../../components/Icon';
-import Header from '../../components/Header';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import * as Expensicons from '../../components/Icon/Expensicons';
-import Tooltip from '../../components/Tooltip';
-import Navigation from '../../libs/Navigation/Navigation';
-
-const propTypes = {
-    /** Title of the header */
-    title: PropTypes.string.isRequired,
-
-    /** Should we show the back button? */
-    shouldShowBackButton: PropTypes.bool,
-
-    /** Callback to fire on back button press */
-    onBackButtonPress: PropTypes.func,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    shouldShowBackButton: true,
-    onBackButtonPress: () => Navigation.goBack(),
-};
-
-const ModalHeader = (props) => (
-    <View style={[styles.headerBar, props.shouldShowBackButton && styles.pl2]}>
-        <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
-            {props.shouldShowBackButton && (
-                <Tooltip text={props.translate('common.back')}>
-                    <TouchableOpacity
-                        onPress={props.onBackButtonPress}
-                        style={[styles.touchableButtonImage]}
-                    >
-                        <Icon src={Expensicons.BackArrow} />
-                    </TouchableOpacity>
-                </Tooltip>
-            )}
-            <Header title={props.title} />
-            <View style={[styles.reportOptions, styles.flexRow, styles.pr5]}>
-                <Tooltip text={props.translate('common.close')}>
-                    <TouchableOpacity
-                        onPress={() => Navigation.dismissModal()}
-                        style={[styles.touchableButtonImage]}
-                        accessibilityRole="button"
-                        accessibilityLabel={props.translate('common.close')}
-                    >
-                        <Icon src={Expensicons.Close} />
-                    </TouchableOpacity>
-                </Tooltip>
-            </View>
-        </View>
-    </View>
-);
-
-ModalHeader.displayName = 'ModalHeader';
-ModalHeader.propTypes = propTypes;
-ModalHeader.defaultProps = defaultProps;
-export default withLocalize(ModalHeader);
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index a186d6a41054..93b1470b6179 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import TextInput from '../../components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Form from '../../components/Form';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
@@ -37,11 +37,11 @@ class MoneyRequestDescriptionPage extends Component {
     }
 
     /**
-     * Closes the modal and clears the description from Onyx.
+     * Goes back and clears the description from Onyx.
      */
-    onCloseButtonPress() {
+    onBackButtonPress() {
         IOU.setMoneyRequestDescription('');
-        Navigation.dismissModal();
+        Navigation.goBack();
     }
 
     /**
@@ -62,11 +62,9 @@ class MoneyRequestDescriptionPage extends Component {
                 shouldEnableMaxHeight
                 onEntryTransitionEnd={() => this.descriptionInputRef && this.descriptionInputRef.focus()}
             >
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('common.description')}
-                    shouldShowBackButton
-                    onBackButtonPress={Navigation.goBack}
-                    onCloseButtonPress={this.onCloseButtonPress}
+                    onBackButtonPress={this.onBackButtonPress}
                 />
                 <Form
                     style={[styles.flexGrow1, styles.ph5]}
diff --git a/src/pages/iou/MoneyRequestModal.js b/src/pages/iou/MoneyRequestModal.js
index 02e31ede0527..f53be289a548 100644
--- a/src/pages/iou/MoneyRequestModal.js
+++ b/src/pages/iou/MoneyRequestModal.js
@@ -7,7 +7,6 @@ import {withOnyx} from 'react-native-onyx';
 import MoneyRequestAmountPage from './steps/MoneyRequestAmountPage';
 import MoneyRequestParticipantsPage from './steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage';
 import MoneyRequestConfirmPage from './steps/MoneyRequestConfirmPage';
-import ModalHeader from './ModalHeader';
 import styles from '../../styles/styles';
 import * as IOU from '../../libs/actions/IOU';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -25,7 +24,9 @@ import * as ReportUtils from '../../libs/ReportUtils';
 import * as ReportScrollManager from '../../libs/ReportScrollManager';
 import useOnNetworkReconnect from '../../components/hooks/useOnNetworkReconnect';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
+import Navigation from '../../libs/Navigation/Navigation';
 
 /**
  * A modal used for requesting money, splitting bills or sending money.
@@ -281,18 +282,16 @@ const MoneyRequestModal = (props) => {
     const currentStep = steps[currentStepIndex];
     const moneyRequestStepIndex = _.indexOf(steps, Steps.MoneyRequestConfirm);
     const isEditingAmountAfterConfirm = currentStepIndex === 0 && previousStepIndex === _.indexOf(steps, Steps.MoneyRequestConfirm);
+    const navigateBack = isEditingAmountAfterConfirm ? () => navigateToStep(moneyRequestStepIndex) : navigateToPreviousStep;
     const reportID = lodashGet(props, 'route.params.reportID', '');
-    const shouldShowBackButton = currentStepIndex > 0 || isEditingAmountAfterConfirm;
     const modalHeader = (
-        <ModalHeader
+        <HeaderWithBackButton
             title={titleForStep}
-            shouldShowBackButton={shouldShowBackButton}
-            onBackButtonPress={isEditingAmountAfterConfirm ? () => navigateToStep(moneyRequestStepIndex) : navigateToPreviousStep}
+            onBackButtonPress={currentStepIndex === 0 ? Navigation.dismissModal : navigateBack}
         />
     );
     const amountButtonText = isEditingAmountAfterConfirm ? props.translate('common.save') : props.translate('common.next');
     const enableMaxHeight = DeviceCapabilities.canUseTouchScreen() && currentStep === Steps.MoneyRequestParticipants;
-
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index 79ba4bcb216a..8ec8ea447f0b 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import {View, ScrollView} from 'react-native';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import styles from '../../../styles/styles';
@@ -72,11 +72,9 @@ const AboutPage = (props) => {
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({safeAreaPaddingBottomStyle}) => (
                 <>
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={props.translate('initialSettingsPage.about')}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                        onCloseButtonPress={() => Navigation.dismissModal(true)}
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                     />
                     <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween, safeAreaPaddingBottomStyle]}>
                         <View style={[styles.flex1]}>
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index c120bf68872d..3c42e4901616 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -1,8 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import {ScrollView} from 'react-native';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
-import Navigation from '../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import CONST from '../../CONST';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -14,6 +13,8 @@ import * as Link from '../../libs/actions/Link';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions';
 import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu';
 import {CONTEXT_MENU_TYPES} from '../home/report/ContextMenu/ContextMenuActions';
+import ROUTES from '../../ROUTES';
+import Navigation from '../../libs/Navigation/Navigation';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -55,11 +56,9 @@ const AppDownloadLinksPage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('initialSettingsPage.aboutPage.appDownloadLinks')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
             />
             <ScrollView style={[styles.mt5]}>
                 {_.map(menuItems, (item) => (
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index eba3ccefb9fd..168f78b1d9fe 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -11,7 +11,7 @@ import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
 import Tooltip from '../../components/Tooltip';
 import Avatar from '../../components/Avatar';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import ScreenWrapper from '../../components/ScreenWrapper';
@@ -314,10 +314,7 @@ class InitialSettingsPage extends React.Component {
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {({safeAreaPaddingBottomStyle}) => (
                     <>
-                        <HeaderWithCloseButton
-                            title={this.props.translate('common.settings')}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
-                        />
+                        <HeaderWithBackButton title={this.props.translate('common.settings')} />
                         <ScrollView
                             contentContainerStyle={safeAreaPaddingBottomStyle}
                             style={[styles.settingsPageBackground]}
diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js
index a2d740dc97b9..33718f651b39 100755
--- a/src/pages/settings/PasswordPage.js
+++ b/src/pages/settings/PasswordPage.js
@@ -3,7 +3,7 @@ import {View, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import Text from '../../components/Text';
@@ -19,6 +19,7 @@ import TextInput from '../../components/TextInput';
 import * as Session from '../../libs/actions/Session';
 import * as ErrorUtils from '../../libs/ErrorUtils';
 import ConfirmationPage from '../../components/ConfirmationPage';
+import ROUTES from '../../ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -147,11 +148,9 @@ class PasswordPage extends Component {
                     this.currentPasswordInputRef.focus();
                 }}
             >
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('passwordPage.changePassword')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
                 />
                 {!_.isEmpty(this.props.account.success) ? (
                     <ConfirmationPage
diff --git a/src/pages/settings/Payments/AddDebitCardPage.js b/src/pages/settings/Payments/AddDebitCardPage.js
index 8b127e65e092..7c174c58dbc2 100644
--- a/src/pages/settings/Payments/AddDebitCardPage.js
+++ b/src/pages/settings/Payments/AddDebitCardPage.js
@@ -4,8 +4,7 @@ import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import compose from '../../../libs/compose';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
-import Navigation from '../../../libs/Navigation/Navigation';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import styles from '../../../styles/styles';
 import Text from '../../../components/Text';
@@ -22,6 +21,8 @@ import AddressSearch from '../../../components/AddressSearch';
 import * as ComponentUtils from '../../../libs/ComponentUtils';
 import Form from '../../../components/Form';
 import Permissions from '../../../libs/Permissions';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -114,11 +115,9 @@ class DebitCardPage extends Component {
     render() {
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('addDebitCardPage.addADebitCard')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PAYMENTS)}
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM}
diff --git a/src/pages/settings/Payments/AddPayPalMePage.js b/src/pages/settings/Payments/AddPayPalMePage.js
index f4b2bd81bb8d..9a7534288bc9 100644
--- a/src/pages/settings/Payments/AddPayPalMePage.js
+++ b/src/pages/settings/Payments/AddPayPalMePage.js
@@ -3,7 +3,7 @@ import {View, TouchableWithoutFeedback, Linking} from 'react-native';
 import _ from 'underscore';
 import CONST from '../../../CONST';
 import ROUTES from '../../../ROUTES';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import TextLink from '../../../components/TextLink';
 import Text from '../../../components/Text';
 import ScreenWrapper from '../../../components/ScreenWrapper';
@@ -44,11 +44,9 @@ const AddPayPalMePage = (props) => {
 
     return (
         <ScreenWrapper onEntryTransitionEnd={() => payPalMeInput.current && payPalMeInput.current.focus()}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('common.payPalMe')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PAYMENTS)}
             />
             <View style={[styles.flex1, styles.p5]}>
                 <View style={[styles.flex1]}>
diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js
index 6fe32df5af15..224b727bf4e5 100644
--- a/src/pages/settings/Payments/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import {View} from 'react-native';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import Navigation from '../../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
@@ -53,11 +53,9 @@ const ChooseTransferAccountPage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('chooseTransferAccountPage.chooseAccount')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
-                onCloseButtonPress={() => Navigation.dismissModal()}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE)}
             />
             <View style={[styles.mt6, styles.flexShrink1, styles.flexBasisAuto]}>
                 <PaymentMethodList
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 2389d3a3de6b..f649531219e4 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import PaymentMethodList from '../PaymentMethodList';
 import ROUTES from '../../../../ROUTES';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import PasswordPopover from '../../../../components/PasswordPopover';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 import Navigation from '../../../../libs/Navigation/Navigation';
@@ -389,11 +389,9 @@ class BasePaymentsPage extends React.Component {
         const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth;
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('common.payments')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 />
                 <View style={[styles.flex1, styles.mb4]}>
                     <OfflineWithFeedback
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index dc6bae210bea..40c24b1b178d 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -4,7 +4,7 @@ import {View, ScrollView} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../../ONYXKEYS';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import Navigation from '../../../libs/Navigation/Navigation';
 import styles from '../../../styles/styles';
@@ -138,9 +138,9 @@ class TransferBalancePage extends React.Component {
         if (this.props.walletTransfer.shouldShowSuccess && !this.props.walletTransfer.loading) {
             return (
                 <ScreenWrapper>
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={this.props.translate('common.transferBalance')}
-                        onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
+                        onBackButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                     />
                     <ConfirmationPage
                         heading={this.props.translate('transferAmountPage.transferSuccess')}
@@ -168,11 +168,9 @@ class TransferBalancePage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('common.transferBalance')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.goBack()}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
                 />
                 <View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto, styles.justifyContentCenter]}>
                     <CurrentWalletBalance balanceStyles={[styles.transferBalanceBalance]} />
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.js
index f4c1b14d948b..23f36e6e44e3 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.js
@@ -1,16 +1,16 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import OptionsList from '../../../components/OptionsList';
 import styles from '../../../styles/styles';
 import themeColors from '../../../styles/themes/default';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as App from '../../../libs/actions/App';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
 
 const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
@@ -36,11 +36,9 @@ const LanguagePage = (props) => {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('languagePage.language')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PREFERENCES)}
             />
             <OptionsList
                 sections={[{data: localesToLanguages}]}
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 03b79d2dcae2..8cf39f23f9f8 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -4,7 +4,7 @@ import React from 'react';
 import {View, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import ONYXKEYS from '../../../ONYXKEYS';
@@ -51,11 +51,9 @@ const PreferencesPage = (props) => {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('common.preferences')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             />
             <ScrollView style={[styles.flex1, styles.mt3]}>
                 <View style={styles.mb6}>
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index 0e254311bb40..e044d906e862 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -2,11 +2,9 @@ import _, {compose} from 'underscore';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
 import OptionsList from '../../../components/OptionsList';
 import styles from '../../../styles/styles';
 import Text from '../../../components/Text';
@@ -15,6 +13,8 @@ import * as Expensicons from '../../../components/Icon/Expensicons';
 import ONYXKEYS from '../../../ONYXKEYS';
 import * as User from '../../../libs/actions/User';
 import CONST from '../../../CONST';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
 
 const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
@@ -48,11 +48,9 @@ const PriorityModePage = (props) => {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('priorityModePage.priorityMode')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PREFERENCES)}
             />
             <Text style={[styles.mh5, styles.mv4]}>{props.translate('priorityModePage.explainerText')}</Text>
             <OptionsList
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index e35b9408c7c0..be2f3eb86943 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -6,9 +6,8 @@ import {View, ScrollView} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import Navigation from '../../../../libs/Navigation/Navigation';
-import ROUTES from '../../../../ROUTES';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import compose from '../../../../libs/compose';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
@@ -27,6 +26,7 @@ import * as ErrorUtils from '../../../../libs/ErrorUtils';
 import themeColors from '../../../../styles/themes/default';
 import NotFoundPage from '../../../ErrorPage/NotFoundPage';
 import * as ValidationUtils from '../../../../libs/ValidationUtils';
+import ROUTES from '../../../../ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -232,11 +232,9 @@ class ContactMethodDetailsPage extends Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={formattedContactMethod}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS)}
                 />
                 <ScrollView keyboardShouldPersistTaps="handled">
                     <ConfirmModal
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 4dcbbb933242..aa27771beeec 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -7,7 +7,7 @@ import {ScrollView} from 'react-native-gesture-handler';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Button from '../../../../components/Button';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import CONST from '../../../../CONST';
@@ -112,11 +112,9 @@ const ContactMethodsPage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('contacts.contactMethods')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
             <ScrollView>
                 <View style={[styles.ph5, styles.mv3, styles.flexRow, styles.flexWrap]}>
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 221f4a0ff549..b4af941cf1bf 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -7,7 +7,7 @@ import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import compose from '../../../../libs/compose';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
 import Text from '../../../../components/Text';
 import TextInput from '../../../../components/TextInput';
@@ -119,11 +119,9 @@ function NewContactMethodPage(props) {
             }}
             includeSafeAreaPaddingBottom={false}
         >
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('contacts.newContactMethod')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS)}
             />
             <Form
                 formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
index e55d46fcb557..2649db5a1805 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.js
@@ -3,9 +3,8 @@ import React, {Component} from 'react';
 import {View} from 'react-native';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import ROUTES from '../../../ROUTES';
 import Form from '../../../components/Form';
 import ONYXKEYS from '../../../ONYXKEYS';
 import CONST from '../../../CONST';
@@ -13,10 +12,11 @@ import * as ValidationUtils from '../../../libs/ValidationUtils';
 import TextInput from '../../../components/TextInput';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
-import Navigation from '../../../libs/Navigation/Navigation';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
 import compose from '../../../libs/compose';
 import * as ErrorUtils from '../../../libs/ErrorUtils';
+import ROUTES from '../../../ROUTES';
+import Navigation from '../../../libs/Navigation/Navigation';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -75,11 +75,9 @@ class DisplayNamePage extends Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('displayNamePage.headerTitle')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
                 />
                 <Form
                     style={[styles.flexGrow1, styles.ph5]}
diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
index fcbfee12e251..cb9e3ac1325f 100644
--- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js
@@ -6,21 +6,21 @@ import {View} from 'react-native';
 import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import ROUTES from '../../../../ROUTES';
 import Form from '../../../../components/Form';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import CONST from '../../../../CONST';
 import TextInput from '../../../../components/TextInput';
 import styles from '../../../../styles/styles';
-import Navigation from '../../../../libs/Navigation/Navigation';
 import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import * as ValidationUtils from '../../../../libs/ValidationUtils';
 import compose from '../../../../libs/compose';
 import AddressSearch from '../../../../components/AddressSearch';
 import CountryPicker from '../../../../components/CountryPicker';
 import StatePicker from '../../../../components/StatePicker';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -138,11 +138,9 @@ class AddressPage extends Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('privatePersonalDetails.homeAddress')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
                 />
                 <Form
                     style={[styles.flexGrow1, styles.ph5]}
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 0a3d892f7981..2ac92e52d281 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -3,18 +3,18 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import moment from 'moment';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import ROUTES from '../../../../ROUTES';
 import Form from '../../../../components/Form';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import * as ValidationUtils from '../../../../libs/ValidationUtils';
 import styles from '../../../../styles/styles';
-import Navigation from '../../../../libs/Navigation/Navigation';
 import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import compose from '../../../../libs/compose';
 import NewDatePicker from '../../../../components/NewDatePicker';
 import CONST from '../../../../CONST';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -49,6 +49,7 @@ class DateOfBirthPage extends Component {
     }
 
     componentDidMount() {
+        this.getYearFromRouteParams();
         this.props.navigation.addListener('focus', this.getYearFromRouteParams);
     }
 
@@ -102,11 +103,9 @@ class DateOfBirthPage extends Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('common.dob')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
                 />
                 <Form
                     style={[styles.flexGrow1, styles.ph5]}
diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
index 1ee9e60d93d8..41139e74bcb7 100644
--- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
+++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js
@@ -5,18 +5,18 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import ROUTES from '../../../../ROUTES';
 import Form from '../../../../components/Form';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import CONST from '../../../../CONST';
 import * as ValidationUtils from '../../../../libs/ValidationUtils';
 import TextInput from '../../../../components/TextInput';
 import styles from '../../../../styles/styles';
-import Navigation from '../../../../libs/Navigation/Navigation';
 import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import compose from '../../../../libs/compose';
+import Navigation from '../../../../libs/Navigation/Navigation';
+import ROUTES from '../../../../ROUTES';
 
 const propTypes = {
     /* Onyx Props */
@@ -69,11 +69,9 @@ function LegalNamePage(props) {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.legalName')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)}
             />
             <Form
                 style={[styles.flexGrow1, styles.ph5]}
diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
index db1817ad7355..e8eb26e120a7 100644
--- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import ROUTES from '../../../../ROUTES';
 import Text from '../../../../components/Text';
@@ -89,11 +89,9 @@ const PersonalDetailsInitialPage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('privatePersonalDetails.personalDetails')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
             <ScrollView>
                 <View style={styles.flex1}>
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 88890bcd0f99..3ecfa65a7f1a 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -6,7 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import {ScrollView} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import AvatarWithImagePicker from '../../../components/AvatarWithImagePicker';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import MenuItem from '../../../components/MenuItem';
 import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
@@ -82,11 +82,9 @@ const ProfilePage = (props) => {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('common.profile')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             />
             <ScrollView>
                 <OfflineWithFeedback
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
index 6c39f15ec83a..ea20b1a1cda4 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.js
@@ -3,18 +3,18 @@ import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import ROUTES from '../../../ROUTES';
 import Text from '../../../components/Text';
 import styles from '../../../styles/styles';
-import Navigation from '../../../libs/Navigation/Navigation';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
 import compose from '../../../libs/compose';
 import themeColors from '../../../styles/themes/default';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import CONST from '../../../CONST';
 import OptionsSelector from '../../../components/OptionsSelector';
+import ROUTES from '../../../ROUTES';
+import Navigation from '../../../libs/Navigation/Navigation';
 
 const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
@@ -123,11 +123,9 @@ class PronounsPage extends Component {
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {({safeAreaPaddingBottomStyle}) => (
                     <>
-                        <HeaderWithCloseButton
+                        <HeaderWithBackButton
                             title={this.props.translate('pronounsPage.pronouns')}
-                            shouldShowBackButton
-                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
+                            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
                         />
                         <Text style={[styles.ph5, styles.mb3]}>{this.props.translate('pronounsPage.isShownOnProfile')}</Text>
                         <OptionsSelector
@@ -140,6 +138,7 @@ class PronounsPage extends Component {
                             onChangeText={this.onChangeText}
                             optionHoveredStyle={styles.hoveredComponentBG}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                            shouldDelayFocus
                             shouldFocusOnSelectRow
                             shouldHaveOptionSeparator
                             initiallyFocusedOptionKey={this.initiallyFocusedOption.keyForList}
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 1cf7a06f7e95..d23131305054 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -4,7 +4,7 @@ import {View} from 'react-native';
 import moment from 'moment-timezone';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import ROUTES from '../../../ROUTES';
 import CONST from '../../../CONST';
@@ -43,11 +43,9 @@ const TimezoneInitialPage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('timezonePage.timezone')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
             <View style={styles.flex1}>
                 <View style={[styles.ph5]}>
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.js
index 6e410655b2b5..a5853d3c99d5 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.js
@@ -4,17 +4,17 @@ import _ from 'underscore';
 import moment from 'moment-timezone';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
 import ScreenWrapper from '../../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import ROUTES from '../../../ROUTES';
 import CONST from '../../../CONST';
 import styles from '../../../styles/styles';
-import Navigation from '../../../libs/Navigation/Navigation';
 import * as PersonalDetails from '../../../libs/actions/PersonalDetails';
 import compose from '../../../libs/compose';
 import OptionsSelector from '../../../components/OptionsSelector';
 import themeColors from '../../../styles/themes/default';
 import * as Expensicons from '../../../components/Icon/Expensicons';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
 
 const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
@@ -124,11 +124,9 @@ class TimezoneSelectPage extends Component {
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
                 {({safeAreaPaddingBottomStyle}) => (
                     <>
-                        <HeaderWithCloseButton
+                        <HeaderWithBackButton
                             title={this.props.translate('timezonePage.timezone')}
-                            shouldShowBackButton
-                            onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE)}
-                            onCloseButtonPress={() => Navigation.dismissModal(true)}
+                            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_TIMEZONE)}
                         />
                         <OptionsSelector
                             textInputLabel={this.props.translate('timezonePage.timezone')}
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 6d0988401137..b026cec6f805 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -3,9 +3,7 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
-import Navigation from '../../../libs/Navigation/Navigation';
-import ROUTES from '../../../ROUTES';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import * as User from '../../../libs/actions/User';
 import compose from '../../../libs/compose';
 import styles from '../../../styles/styles';
@@ -19,6 +17,8 @@ import ONYXKEYS from '../../../ONYXKEYS';
 import Form from '../../../components/Form';
 import CONST from '../../../CONST';
 import ConfirmModal from '../../../components/ConfirmModal';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
 
 const propTypes = {
     /** Session of currently logged in user */
@@ -86,11 +86,9 @@ class CloseAccountPage extends Component {
         const userEmailOrPhone = this.props.formatPhoneNumber(this.props.session.email);
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('closeAccountPage.closeAccount')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_SECURITY)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_SECURITY)}
                 />
                 <Form
                     formID={ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM}
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index d6d4b0104bee..6f28e2fa0024 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import {View, ScrollView} from 'react-native';
-import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import styles from '../../../styles/styles';
@@ -34,11 +34,9 @@ const SecuritySettingsPage = (props) => {
 
     return (
         <ScreenWrapper>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('initialSettingsPage.security')}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             />
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index 0d2c7ff7fff4..6e929ffba87b 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import styles from '../../styles/styles';
@@ -68,10 +68,8 @@ const NewTaskDescriptionPage = (props) => {
                 inputRef.current.focus();
             }}
         >
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('newTaskPage.description')}
-                onCloseButtonPress={() => Navigation.dismissModal()}
-                shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <Form
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index a6eda7b32268..cd949d8966bf 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import styles from '../../styles/styles';
@@ -61,12 +61,7 @@ const NewTaskPage = (props) => {
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             includeSafeAreaPaddingBottom={false}
         >
-            <HeaderWithCloseButton
-                title={props.translate('newTaskPage.assignTask')}
-                onCloseButtonPress={() => Navigation.dismissModal()}
-                shouldShowBackButton
-                onBackButtonPress={() => Navigation.goBack()}
-            />
+            <HeaderWithBackButton title={props.translate('newTaskPage.assignTask')} />
             <Form
                 formID={ONYXKEYS.FORMS.NEW_TASK_FORM}
                 submitButtonText={props.translate('common.next')}
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index 0d61bf23d049..1bb63d2f7f8b 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import styles from '../../styles/styles';
@@ -119,10 +119,8 @@ const NewTaskPage = (props) => {
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('newTaskPage.confirmTask')}
-                onCloseButtonPress={() => Navigation.dismissModal()}
-                shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <View style={[styles.mt5, styles.ph5, styles.containerWithSpaceBetween]}>
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 09d082fba080..63609cfe692e 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import styles from '../../styles/styles';
@@ -76,10 +76,8 @@ const NewTaskTitlePage = (props) => {
             }}
             includeSafeAreaPaddingBottom={false}
         >
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('newTaskPage.title')}
-                onCloseButtonPress={() => Navigation.dismissModal()}
-                shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <Form
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 02d22d6b107c..f2ec21958a23 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -8,7 +8,7 @@ import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import Timing from '../../libs/actions/Timing';
 import CONST from '../../CONST';
@@ -177,10 +177,8 @@ const TaskAssigneeSelectorModal = (props) => {
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={props.translate('newTaskPage.assignee')}
-                        onCloseButtonPress={() => Navigation.goBack()}
-                        shouldShowBackButton
                         onBackButtonPress={() => Navigation.goBack()}
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index d96682151f18..1b72f16462cd 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import Form from '../../components/Form';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -71,7 +71,7 @@ function TaskDescriptionPage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
         >
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('newTaskPage.task')}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index cd155d915956..32870a97bf81 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -8,7 +8,7 @@ import * as OptionsListUtils from '../../libs/OptionsListUtils';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import Timing from '../../libs/actions/Timing';
 import CONST from '../../CONST';
@@ -141,10 +141,8 @@ const TaskShareDestinationSelectorModal = (props) => {
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
                 <>
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={props.translate('newTaskPage.shareSomewhere')}
-                        onCloseButtonPress={() => Navigation.goBack()}
-                        shouldShowBackButton
                         onBackButtonPress={() => Navigation.goBack()}
                     />
                     <View style={[styles.flex1, styles.w100, styles.pRelative]}>
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index 9fb5e3b8a479..05a8b1d4b432 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import Form from '../../components/Form';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -72,7 +72,7 @@ function TaskTitlePage(props) {
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
         >
-            <HeaderWithCloseButton
+            <HeaderWithBackButton
                 title={props.translate('newTaskPage.task')}
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.goBack()}
diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js
index 033e24dc912d..443d8ad755e6 100644
--- a/src/pages/wallet/WalletStatementPage.js
+++ b/src/pages/wallet/WalletStatementPage.js
@@ -6,7 +6,7 @@ import moment from 'moment';
 import Str from 'expensify-common/lib/str';
 import Navigation from '../../libs/Navigation/Navigation';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import ONYXKEYS from '../../ONYXKEYS';
 import compose from '../../libs/compose';
@@ -94,10 +94,9 @@ class WalletStatementPage extends React.Component {
 
         return (
             <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={Str.recapitalize(title)}
                     shouldShowDownloadButton={!this.props.network.isOffline || this.props.walletStatement.isGenerating}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
                     onDownloadButtonPress={() => this.processDownload(this.yearMonth)}
                 />
                 <FullPageOfflineBlockingView>
diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index bc4d6274534c..bd23cb663a2b 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -14,7 +14,7 @@ import * as Expensicons from '../../components/Icon/Expensicons';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import MenuItem from '../../components/MenuItem';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import compose from '../../libs/compose';
 import Avatar from '../../components/Avatar';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
@@ -134,11 +134,8 @@ const WorkspaceInitialPage = (props) => {
                     shouldShow={_.isEmpty(policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 >
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={props.translate('workspace.common.workspace')}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
                         shouldShowThreeDotsButton
                         shouldShowGetAssistanceButton
                         guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INITIAL}
@@ -150,6 +147,7 @@ const WorkspaceInitialPage = (props) => {
                             },
                         ]}
                         threeDotsAnchorPosition={styles.threeDotsPopoverOffset}
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                     />
                     <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween, safeAreaPaddingBottomStyle]}>
                         <OfflineWithFeedback
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index b5e8714f1623..10c6669071c9 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -7,7 +7,7 @@ import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import compose from '../../libs/compose';
@@ -133,7 +133,7 @@ class WorkspaceInviteMessagePage extends React.Component {
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 >
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={this.props.translate('workspace.inviteMessage.inviteMessageTitle')}
                         subtitle={policyName}
                         shouldShowGetAssistanceButton
diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js
index 67f9a1bbb11c..043182e37b97 100644
--- a/src/pages/workspace/WorkspaceInvitePage.js
+++ b/src/pages/workspace/WorkspaceInvitePage.js
@@ -6,7 +6,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import styles from '../../styles/styles';
 import compose from '../../libs/compose';
@@ -181,12 +181,9 @@ class WorkspaceInvitePage extends React.Component {
         Link.openExternalLink(CONST.PRIVACY_URL);
     }
 
-    clearErrors(closeModal = false) {
+    clearErrors() {
         Policy.setWorkspaceErrors(this.props.route.params.policyID, {});
         Policy.hideWorkspaceAlertMessage(this.props.route.params.policyID);
-        if (closeModal) {
-            Navigation.dismissModal();
-        }
     }
 
     /**
@@ -265,14 +262,15 @@ class WorkspaceInvitePage extends React.Component {
                             style={[styles.flex1]}
                             onSubmit={this.inviteUser}
                         >
-                            <HeaderWithCloseButton
+                            <HeaderWithBackButton
                                 title={this.props.translate('workspace.invite.invitePeople')}
                                 subtitle={policyName}
-                                onCloseButtonPress={() => this.clearErrors(true)}
                                 shouldShowGetAssistanceButton
                                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                                shouldShowBackButton
-                                onBackButtonPress={() => Navigation.goBack()}
+                                onBackButtonPress={() => {
+                                    this.clearErrors();
+                                    Navigation.goBack(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
+                                }}
                             />
                             <View style={[styles.flex1]}>
                                 <OptionsSelector
diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js
index 1ba01ddeae34..3f83ae7f3609 100644
--- a/src/pages/workspace/WorkspaceMembersPage.js
+++ b/src/pages/workspace/WorkspaceMembersPage.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -422,17 +422,15 @@ class WorkspaceMembersPage extends React.Component {
                         shouldShow={_.isEmpty(this.props.policy)}
                         onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                     >
-                        <HeaderWithCloseButton
+                        <HeaderWithBackButton
                             title={this.props.translate('workspace.common.members')}
                             subtitle={policyName}
-                            onCloseButtonPress={() => Navigation.dismissModal()}
                             onBackButtonPress={() => {
                                 this.updateSearchValue('');
-                                Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID));
+                                Navigation.goBack(ROUTES.getWorkspaceInitialRoute(policyID));
                             }}
                             shouldShowGetAssistanceButton
                             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
-                            shouldShowBackButton
                         />
                         <ConfirmModal
                             danger
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 6d19d2ae21b2..60583cbc95e8 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import * as Report from '../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import styles from '../../styles/styles';
@@ -147,10 +147,7 @@ class WorkspaceNewRoomPage extends React.Component {
                 includeSafeAreaPaddingBottom={false}
                 shouldEnablePickerAvoiding={false}
             >
-                <HeaderWithCloseButton
-                    title={this.props.translate('newRoomPage.newRoom')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
+                <HeaderWithBackButton title={this.props.translate('newRoomPage.newRoom')} />
                 <Form
                     formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
                     submitButtonText={this.props.translate('newRoomPage.createRoom')}
diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.js
index 14cc6ac01403..bb0c7f4804c3 100644
--- a/src/pages/workspace/WorkspacePageWithSections.js
+++ b/src/pages/workspace/WorkspacePageWithSections.js
@@ -8,7 +8,7 @@ import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
 import compose from '../../libs/compose';
 import ROUTES from '../../ROUTES';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ONYXKEYS from '../../ONYXKEYS';
@@ -114,14 +114,12 @@ class WorkspacePageWithSections extends React.Component {
                     shouldShow={_.isEmpty(this.props.policy)}
                     onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 >
-                    <HeaderWithCloseButton
+                    <HeaderWithBackButton
                         title={this.props.headerText}
                         subtitle={policyName}
                         shouldShowGetAssistanceButton
                         guidesCallTaskID={this.props.guidesCallTaskID}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(policyID))}
-                        onCloseButtonPress={() => Navigation.dismissModal()}
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.getWorkspaceInitialRoute(policyID))}
                     />
                     {this.props.shouldUseScrollView ? (
                         <ScrollViewWithContext
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index cec33f66530c..bf362168ad99 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -3,7 +3,7 @@ import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import ROUTES from '../../ROUTES';
@@ -180,11 +180,9 @@ class WorkspacesListPage extends Component {
         const workspaces = this.getWorkspaces();
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
+                <HeaderWithBackButton
                     title={this.props.translate('common.workspaces')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 />
                 {_.isEmpty(workspaces) ? (
                     <BlockingView
diff --git a/src/stories/HeaderWithCloseButton.stories.js b/src/stories/HeaderWithBackButton.stories.js
similarity index 78%
rename from src/stories/HeaderWithCloseButton.stories.js
rename to src/stories/HeaderWithBackButton.stories.js
index c7c021e21d53..82bdccfa77ca 100644
--- a/src/stories/HeaderWithCloseButton.stories.js
+++ b/src/stories/HeaderWithBackButton.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -7,12 +7,12 @@ import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
 const story = {
-    title: 'Components/HeaderWithCloseButton',
-    component: HeaderWithCloseButton,
+    title: 'Components/HeaderWithBackButton',
+    component: HeaderWithBackButton,
 };
 
 // eslint-disable-next-line react/jsx-props-no-spreading
-const Template = (args) => <HeaderWithCloseButton {...args} />;
+const Template = (args) => <HeaderWithBackButton {...args} />;
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js
index 8ac94782fd4b..70649900b61c 100644
--- a/tests/ui/UnreadIndicatorsTest.js
+++ b/tests/ui/UnreadIndicatorsTest.js
@@ -329,6 +329,13 @@ describe('Unread Indicators', () => {
                         },
                         shouldNotify: true,
                     },
+                    {
+                        onyxMethod: Onyx.METHOD.MERGE,
+                        key: ONYXKEYS.PERSONAL_DETAILS,
+                        value: {
+                            [USER_C_EMAIL]: TestHelper.buildPersonalDetails(USER_C_EMAIL, USER_C_ACCOUNT_ID, 'C'),
+                        },
+                    },
                 ]);
                 return waitForPromisesToResolve();
             })
diff --git a/tests/utils/LHNTestUtils.js b/tests/utils/LHNTestUtils.js
index 1631cd6ccdca..9c96004bedea 100644
--- a/tests/utils/LHNTestUtils.js
+++ b/tests/utils/LHNTestUtils.js
@@ -6,6 +6,7 @@ import {LocaleContextProvider} from '../../src/components/withLocalize';
 import SidebarLinks from '../../src/pages/home/sidebar/SidebarLinks';
 import CONST from '../../src/CONST';
 import DateUtils from '../../src/libs/DateUtils';
+import {CurrentReportIdContextProvider} from '../../src/components/withCurrentReportId';
 
 // we have to mock `useIsFocused` because it's used in the SidebarLinks component
 const mockedNavigate = jest.fn();
@@ -16,6 +17,11 @@ jest.mock('@react-navigation/native', () => {
         useIsFocused: () => ({
             navigate: mockedNavigate,
         }),
+        useNavigation: () => ({
+            navigate: jest.fn(),
+            addListener: jest.fn(),
+        }),
+        createNavigationContainerRef: jest.fn(),
     };
 });
 
@@ -180,7 +186,7 @@ function getDefaultRenderedSidebarLinks(reportIDFromRoute = '') {
     // and there are a lot of render warnings. It needs to be done like this because normally in
     // our app (App.js) is when the react application is wrapped in the context providers
     render(
-        <ComposeProviders components={[OnyxProvider, LocaleContextProvider]}>
+        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, CurrentReportIdContextProvider]}>
             <ErrorBoundary>
                 <SidebarLinks
                     onLinkClick={() => {}}