diff --git a/src/CONST.ts b/src/CONST.ts
index b977c9dbd6d4..4e3f347544ba 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1163,6 +1163,7 @@ const CONST = {
     },
 
     AVATAR_SIZE: {
+        XLARGE: 'xlarge',
         LARGE: 'large',
         MEDIUM: 'medium',
         DEFAULT: 'default',
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 47935e117e99..eb125a43c239 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -12,8 +12,14 @@ export default {
     VALIDATE_LOGIN: 'ValidateLogin',
     CONCIERGE: 'Concierge',
     SETTINGS: {
+        ROOT: 'Settings_Root',
         PREFERENCES: 'Settings_Preferences',
         WORKSPACES: 'Settings_Workspaces',
+        SECURITY: 'Settings_Security',
+        STATUS: 'Settings_Status',
+    },
+    SAVE_THE_WORLD: {
+        ROOT: 'SaveTheWorld_Root',
     },
     SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop',
     SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop',
diff --git a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
index 6e6c46e971c0..cc305a628820 100644
--- a/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
+++ b/src/components/CurrentUserPersonalDetailsSkeletonView/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import SkeletonViewContentLoader from 'react-content-loader/native';
 import {Circle, Rect} from 'react-native-svg';
 import {View} from 'react-native';
@@ -12,14 +13,26 @@ import styles from '../../styles/styles';
 const propTypes = {
     /** Whether to animate the skeleton view */
     shouldAnimate: PropTypes.bool,
+
+    /** The size of the avatar */
+    avatarSize: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+
+    /** Background color of the skeleton view */
+    backgroundColor: PropTypes.string,
+
+    /** Foreground color of the skeleton view */
+    foregroundColor: PropTypes.string,
 };
 
 const defaultProps = {
     shouldAnimate: true,
+    avatarSize: CONST.AVATAR_SIZE.LARGE,
+    backgroundColor: themeColors.highlightBG,
+    foregroundColor: themeColors.border,
 };
 
 function CurrentUserPersonalDetailsSkeletonView(props) {
-    const avatarPlaceholderSize = StyleUtils.getAvatarSize(CONST.AVATAR_SIZE.LARGE);
+    const avatarPlaceholderSize = StyleUtils.getAvatarSize(props.avatarSize);
     const avatarPlaceholderRadius = avatarPlaceholderSize / 2;
     const spaceBetweenAvatarAndHeadline = styles.mb3.marginBottom + styles.mt1.marginTop + (variables.lineHeightXXLarge - variables.fontSizeXLarge) / 2;
     const headlineSize = variables.fontSizeXLarge;
@@ -29,8 +42,8 @@ function CurrentUserPersonalDetailsSkeletonView(props) {
         <View style={styles.avatarSectionWrapperSkeleton}>
             <SkeletonViewContentLoader
                 animate={props.shouldAnimate}
-                backgroundColor={themeColors.highlightBG}
-                foregroundColor={themeColors.border}
+                backgroundColor={props.backgroundColor}
+                foregroundColor={props.foregroundColor}
                 height={avatarPlaceholderSize + spaceBetweenAvatarAndHeadline + headlineSize + spaceBetweenHeadlineAndLabel + labelSize}
             >
                 <Circle
diff --git a/src/components/StaticHeaderPageLayout.js b/src/components/HeaderPageLayout.js
similarity index 53%
rename from src/components/StaticHeaderPageLayout.js
rename to src/components/HeaderPageLayout.js
index f97e42329942..bec1e52b1cad 100644
--- a/src/components/StaticHeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -10,6 +10,8 @@ import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 import FixedFooter from './FixedFooter';
+import useNetwork from '../hooks/useNetwork';
+import * as Browser from '../libs/Browser';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -22,16 +24,26 @@ const propTypes = {
 
     /** A fixed footer to display at the bottom of the page. */
     footer: PropTypes.node,
+
+    /** The image to display in the upper half of the screen. */
+    header: PropTypes.node,
+
+    /** Style to apply to the header image container */
+    // eslint-disable-next-line react/forbid-prop-types
+    headerContainerStyles: PropTypes.arrayOf(PropTypes.object),
 };
 
 const defaultProps = {
     backgroundColor: themeColors.appBG,
+    header: null,
+    headerContainerStyles: [],
     footer: null,
 };
 
-function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer, imageContainerStyle, style, ...propsToPassToHeader}) {
-    const {windowHeight} = useWindowDimensions();
-
+function HeaderPageLayout({backgroundColor, children, footer, headerContainerStyles, style, headerContent, ...propsToPassToHeader}) {
+    const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
+    const {isOffline} = useNetwork();
+    const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
     const {titleColor, iconFill} = useMemo(() => {
         const isColorfulBackground = backgroundColor !== themeColors.appBG;
         return {
@@ -45,7 +57,7 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
             style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
-            offlineIndicatorStyle={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}
+            offlineIndicatorStyle={[appBGColor]}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
@@ -55,27 +67,24 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
                         titleColor={titleColor}
                         iconFill={iconFill}
                     />
-                    <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>
+                    <View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
+                        {/** Safari on ios/mac has a bug where overscrolling the page scrollview shows green background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
+                        {Browser.isSafari() && (
+                            <View style={styles.dualColorOverscrollSpacer}>
+                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
+                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
+                            </View>
+                        )}
                         <ScrollView
                             contentContainerStyle={[safeAreaPaddingBottomStyle, style]}
                             showsVerticalScrollIndicator={false}
+                            offlineIndicatorStyle={[appBGColor]}
                         >
-                            <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />
-                            <View
-                                style={[
-                                    styles.alignItemsCenter,
-                                    styles.justifyContentEnd,
-                                    StyleUtils.getBackgroundColorStyle(backgroundColor),
-                                    imageContainerStyle,
-                                    styles.staticHeaderImage,
-                                ]}
-                            >
-                                <Image
-                                    pointerEvents="none"
-                                    style={styles.staticHeaderImage}
-                                />
+                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
+                            <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor), ...headerContainerStyles]}>
+                                {headerContent}
                             </View>
-                            <View style={styles.pt5}>{children}</View>
+                            <View style={[styles.pt5, appBGColor]}>{children}</View>
                         </ScrollView>
                         {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
                     </View>
@@ -85,8 +94,8 @@ function StaticHeaderPageLayout({backgroundColor, children, image: Image, footer
     );
 }
 
-StaticHeaderPageLayout.propTypes = propTypes;
-StaticHeaderPageLayout.defaultProps = defaultProps;
-StaticHeaderPageLayout.displayName = 'StaticHeaderPageLayout';
+HeaderPageLayout.propTypes = propTypes;
+HeaderPageLayout.defaultProps = defaultProps;
+HeaderPageLayout.displayName = 'HeaderPageLayout';
 
-export default StaticHeaderPageLayout;
+export default HeaderPageLayout;
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 92a9c8b8552b..ac916117094b 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -1,18 +1,10 @@
-import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {ScrollView, View} from 'react-native';
 import Lottie from 'lottie-react-native';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
-import HeaderWithBackButton from './HeaderWithBackButton';
-import ScreenWrapper from './ScreenWrapper';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
-import * as StyleUtils from '../styles/StyleUtils';
-import useWindowDimensions from '../hooks/useWindowDimensions';
-import FixedFooter from './FixedFooter';
-import useNetwork from '../hooks/useNetwork';
-import * as Browser from '../libs/Browser';
+import HeaderPageLayout from './HeaderPageLayout';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -40,54 +32,28 @@ const defaultProps = {
 };
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
-    const {isOffline} = useNetwork();
-    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
-    const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
-
     return (
-        <ScreenWrapper
-            style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
-            shouldEnablePickerAvoiding={false}
-            includeSafeAreaPaddingBottom={false}
-            offlineIndicatorStyle={[appBGColor]}
-        >
-            {({safeAreaPaddingBottomStyle}) => (
+        <HeaderPageLayout
+            backgroundColor={backgroundColor}
+            title={propsToPassToHeader.title}
+            headerContent={
                 <>
-                    <HeaderWithBackButton
-                        // eslint-disable-next-line react/jsx-props-no-spreading
-                        {...propsToPassToHeader}
-                        titleColor={backgroundColor === themeColors.appBG ? undefined : themeColors.textColorfulBackground}
-                        iconFill={backgroundColor === themeColors.appBG ? undefined : themeColors.iconColorfulBackground}
+                    <Lottie
+                        source={illustration}
+                        style={styles.w100}
+                        autoPlay
+                        loop
                     />
-                    <View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
-                        {/* Safari on ios/mac has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
-                        {Browser.isSafari() && (
-                            <View style={[styles.dualColorOverscrollSpacer]}>
-                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
-                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
-                            </View>
-                        )}
-                        <ScrollView
-                            contentContainerStyle={safeAreaPaddingBottomStyle}
-                            showsVerticalScrollIndicator={false}
-                        >
-                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
-                            <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
-                                <Lottie
-                                    source={illustration}
-                                    style={styles.w100}
-                                    autoPlay
-                                    loop
-                                />
-                                {overlayContent && overlayContent()}
-                            </View>
-                            <View style={[styles.pt5, appBGColor]}>{children}</View>
-                        </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
-                    </View>
+                    {overlayContent && overlayContent()}
                 </>
-            )}
-        </ScreenWrapper>
+            }
+            headerContainerStyles={[styles.justifyContentCenter, styles.w100]}
+            footer={footer}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...propsToPassToHeader}
+        >
+            {children}
+        </HeaderPageLayout>
     );
 }
 
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 392781a777db..5c110264e034 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -334,7 +334,7 @@ const NewTeachersUniteNavigator = createModalStackNavigator([
             const SaveTheWorldPage = require('../../../pages/TeachersUnite/SaveTheWorldPage').default;
             return SaveTheWorldPage;
         },
-        name: 'SaveTheWorld_Root',
+        name: SCREENS.SAVE_THE_WORLD.ROOT,
     },
     {
         getComponent: () => {
@@ -365,7 +365,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsInitialPage = require('../../../pages/settings/InitialSettingsPage').default;
             return SettingsInitialPage;
         },
-        name: 'Settings_Root',
+        name: SCREENS.SETTINGS.ROOT,
     },
     {
         getComponent: () => {
@@ -506,7 +506,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsSecurityPage = require('../../../pages/settings/Security/SecuritySettingsPage').default;
             return SettingsSecurityPage;
         },
-        name: 'Settings_Security',
+        name: SCREENS.SETTINGS.SECURITY,
     },
     {
         getComponent: () => {
@@ -576,7 +576,7 @@ const SettingsModalStackNavigator = createModalStackNavigator([
             const SettingsStatus = require('../../../pages/settings/Profile/CustomStatus/StatusPage').default;
             return SettingsStatus;
         },
-        name: 'Settings_Status',
+        name: SCREENS.SETTINGS.STATUS,
     },
     {
         getComponent: () => {
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index d8cb96e2c6b3..4d50a1cd6a68 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -103,7 +103,8 @@ function NavigationRoot(props) {
 
         prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
         statusBarBackgroundColor.current = currentScreenBackgroundColor;
-        if (prevStatusBarBackgroundColor.current === statusBarBackgroundColor.current) {
+
+        if (currentScreenBackgroundColor === themeColors.appBG && prevStatusBarBackgroundColor.current === themeColors.appBG) {
             return;
         }
 
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 11d21d6d005c..f4420330fbd9 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -38,7 +38,7 @@ export default {
                 screens: {
                     Settings: {
                         screens: {
-                            Settings_Root: {
+                            [SCREENS.SETTINGS.ROOT]: {
                                 path: ROUTES.SETTINGS,
                             },
                             [SCREENS.SETTINGS.WORKSPACES]: {
@@ -65,7 +65,7 @@ export default {
                                 path: ROUTES.SETTINGS_CLOSE,
                                 exact: true,
                             },
-                            Settings_Security: {
+                            [SCREENS.SETTINGS.SECURITY]: {
                                 path: ROUTES.SETTINGS_SECURITY,
                                 exact: true,
                             },
@@ -159,7 +159,7 @@ export default {
                                 path: ROUTES.SETTINGS_SHARE_CODE,
                                 exact: true,
                             },
-                            Settings_Status: {
+                            [SCREENS.SETTINGS.STATUS]: {
                                 path: ROUTES.SETTINGS_STATUS,
                                 exact: true,
                             },
@@ -273,7 +273,7 @@ export default {
                     },
                     TeachersUnite: {
                         screens: {
-                            SaveTheWorld_Root: ROUTES.TEACHERS_UNITE,
+                            [SCREENS.SAVE_THE_WORLD.ROOT]: ROUTES.TEACHERS_UNITE,
                             I_Know_A_Teacher: ROUTES.I_KNOW_A_TEACHER,
                             Intro_School_Principal: ROUTES.INTRO_SCHOOL_PRINCIPAL,
                             I_Am_A_Teacher: ROUTES.I_AM_A_TEACHER,
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index 1fb863051da5..0e650b72716e 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
+import SCREENS from '../../SCREENS';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
@@ -53,8 +54,8 @@ function SaveTheWorldPage(props) {
         <IllustratedHeaderPageLayout
             shouldShowBackButton
             title={translate('sidebarScreen.saveTheWorld')}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SAVE_THE_WORLD.ROOT]}
             onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
-            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.I_KNOW_A_TEACHER]}
             illustration={LottieAnimations.SaveTheWorld}
         >
             <View style={[styles.mb4, styles.justifyContentBetween, styles.mh5]}>
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index a67e7cbc122e..d10779210b09 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import React, {useState, useEffect, useRef, useMemo, useCallback} from 'react';
-import {View, ScrollView} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -12,11 +12,11 @@ import * as Session from '../../libs/actions/Session';
 import ONYXKEYS from '../../ONYXKEYS';
 import Tooltip from '../../components/Tooltip';
 import Avatar from '../../components/Avatar';
-import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Navigation from '../../libs/Navigation/Navigation';
 import * as Expensicons from '../../components/Icon/Expensicons';
-import ScreenWrapper from '../../components/ScreenWrapper';
 import MenuItem from '../../components/MenuItem';
+import themeColors from '../../styles/themes/default';
+import SCREENS from '../../SCREENS';
 import ROUTES from '../../ROUTES';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import compose from '../../libs/compose';
@@ -43,6 +43,7 @@ import PressableWithoutFeedback from '../../components/Pressable/PressableWithou
 import useLocalize from '../../hooks/useLocalize';
 import useSingleExecution from '../../hooks/useSingleExecution';
 import useWaitForNavigation from '../../hooks/useWaitForNavigation';
+import HeaderPageLayout from '../../components/HeaderPageLayout';
 
 const propTypes = {
     /* Onyx Props */
@@ -326,79 +327,80 @@ function InitialSettingsPage(props) {
     if (_.isEmpty(props.currentUserPersonalDetails)) {
         return null;
     }
-
-    return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
-            {({safeAreaPaddingBottomStyle}) => (
+    const headerContent = (
+        <View style={[styles.avatarSectionWrapper, styles.justifyContentCenter]}>
+            {_.isEmpty(props.currentUserPersonalDetails) || _.isUndefined(props.currentUserPersonalDetails.displayName) ? (
+                <CurrentUserPersonalDetailsSkeletonView
+                    backgroundColor={themeColors.appBG}
+                    avatarSize={CONST.AVATAR_SIZE.XLARGE}
+                />
+            ) : (
                 <>
-                    <HeaderWithBackButton title={translate('common.settings')} />
-                    <ScrollView
-                        contentContainerStyle={safeAreaPaddingBottomStyle}
-                        style={[styles.settingsPageBackground]}
+                    <Tooltip text={translate('common.profile')}>
+                        <PressableWithoutFeedback
+                            style={styles.mb3}
+                            onPress={openProfileSettings}
+                            accessibilityLabel={translate('common.profile')}
+                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        >
+                            <OfflineWithFeedback pendingAction={lodashGet(props.currentUserPersonalDetails, 'pendingFields.avatar', null)}>
+                                <Avatar
+                                    imageStyles={[styles.avatarXLarge]}
+                                    source={UserUtils.getAvatar(props.currentUserPersonalDetails.avatar, props.session.accountID)}
+                                    size={CONST.AVATAR_SIZE.XLARGE}
+                                />
+                            </OfflineWithFeedback>
+                        </PressableWithoutFeedback>
+                    </Tooltip>
+                    <PressableWithoutFeedback
+                        style={[styles.mt1, styles.mw100]}
+                        onPress={openProfileSettings}
+                        accessibilityLabel={translate('common.profile')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
                     >
-                        <View style={styles.w100}>
-                            {_.isEmpty(props.currentUserPersonalDetails) || _.isUndefined(props.currentUserPersonalDetails.displayName) ? (
-                                <CurrentUserPersonalDetailsSkeletonView />
-                            ) : (
-                                <View style={styles.avatarSectionWrapper}>
-                                    <Tooltip text={translate('common.profile')}>
-                                        <PressableWithoutFeedback
-                                            style={[styles.mb3]}
-                                            onPress={openProfileSettings}
-                                            accessibilityLabel={translate('common.profile')}
-                                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                                        >
-                                            <OfflineWithFeedback pendingAction={lodashGet(props.currentUserPersonalDetails, 'pendingFields.avatar', null)}>
-                                                <Avatar
-                                                    imageStyles={[styles.avatarLarge]}
-                                                    source={UserUtils.getAvatar(props.currentUserPersonalDetails.avatar, props.session.accountID)}
-                                                    size={CONST.AVATAR_SIZE.LARGE}
-                                                />
-                                            </OfflineWithFeedback>
-                                        </PressableWithoutFeedback>
-                                    </Tooltip>
-                                    <PressableWithoutFeedback
-                                        style={[styles.mt1, styles.mw100]}
-                                        onPress={openProfileSettings}
-                                        accessibilityLabel={translate('common.profile')}
-                                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
-                                    >
-                                        <Tooltip text={translate('common.profile')}>
-                                            <Text
-                                                style={[styles.textHeadline, styles.pre]}
-                                                numberOfLines={1}
-                                            >
-                                                {props.currentUserPersonalDetails.displayName ? props.currentUserPersonalDetails.displayName : props.formatPhoneNumber(props.session.email)}
-                                            </Text>
-                                        </Tooltip>
-                                    </PressableWithoutFeedback>
-                                    {Boolean(props.currentUserPersonalDetails.displayName) && (
-                                        <Text
-                                            style={[styles.textLabelSupporting, styles.mt1]}
-                                            numberOfLines={1}
-                                        >
-                                            {props.formatPhoneNumber(props.session.email)}
-                                        </Text>
-                                    )}
-                                </View>
-                            )}
-                            {getMenuItems}
-
-                            <ConfirmModal
-                                danger
-                                title={translate('common.areYouSure')}
-                                prompt={translate('initialSettingsPage.signOutConfirmationText')}
-                                confirmText={translate('initialSettingsPage.signOut')}
-                                cancelText={translate('common.cancel')}
-                                isVisible={shouldShowSignoutConfirmModal}
-                                onConfirm={() => signOut(true)}
-                                onCancel={() => toggleSignoutConfirmModal(false)}
-                            />
-                        </View>
-                    </ScrollView>
+                        <Tooltip text={translate('common.profile')}>
+                            <Text
+                                style={[styles.textHeadline, styles.pre]}
+                                numberOfLines={1}
+                            >
+                                {props.currentUserPersonalDetails.displayName ? props.currentUserPersonalDetails.displayName : props.formatPhoneNumber(props.session.email)}
+                            </Text>
+                        </Tooltip>
+                    </PressableWithoutFeedback>
+                    {Boolean(props.currentUserPersonalDetails.displayName) && (
+                        <Text
+                            style={[styles.textLabelSupporting, styles.mt1]}
+                            numberOfLines={1}
+                        >
+                            {props.formatPhoneNumber(props.session.email)}
+                        </Text>
+                    )}
                 </>
             )}
-        </ScreenWrapper>
+        </View>
+    );
+
+    return (
+        <HeaderPageLayout
+            title={translate('common.settings')}
+            headerContent={headerContent}
+            headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentCenter]}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.ROOT]}
+        >
+            <View style={styles.w100}>
+                {getMenuItems}
+                <ConfirmModal
+                    danger
+                    title={translate('common.areYouSure')}
+                    prompt={translate('initialSettingsPage.signOutConfirmationText')}
+                    confirmText={translate('initialSettingsPage.signOut')}
+                    cancelText={translate('common.cancel')}
+                    isVisible={shouldShowSignoutConfirmModal}
+                    onConfirm={() => signOut(true)}
+                    onCancel={() => toggleSignoutConfirmModal(false)}
+                />
+            </View>
+        </HeaderPageLayout>
     );
 }
 
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index dcd356978bd3..807bd73cecc1 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -4,7 +4,7 @@ import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes} from '../../../../components/withCurrentUserPersonalDetails';
 import MenuItemWithTopDescription from '../../../../components/MenuItemWithTopDescription';
-import StaticHeaderPageLayout from '../../../../components/StaticHeaderPageLayout';
+import HeaderPageLayout from '../../../../components/HeaderPageLayout';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
 import withLocalize from '../../../../components/withLocalize';
 import MenuItem from '../../../../components/MenuItem';
@@ -19,6 +19,7 @@ import styles from '../../../../styles/styles';
 import compose from '../../../../libs/compose';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import ROUTES from '../../../../ROUTES';
+import SCREENS from '../../../../SCREENS';
 
 const propTypes = {
     ...withCurrentUserPersonalDetailsPropTypes,
@@ -63,11 +64,17 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
     useEffect(() => () => User.clearDraftCustomStatus(), []);
 
     return (
-        <StaticHeaderPageLayout
+        <HeaderPageLayout
             title={localize.translate('statusPage.status')}
             onBackButtonPress={navigateBackToSettingsPage}
-            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.SETTINGS_STATUS]}
-            image={MobileBackgroundImage}
+            headerContent={
+                <MobileBackgroundImage
+                    pointerEvents="none"
+                    style={styles.staticHeaderImage}
+                />
+            }
+            headerContainerStyles={[styles.staticHeaderImage]}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.STATUS]}
             footer={footerComponent}
         >
             <View style={styles.m5}>
@@ -91,7 +98,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
                     wrapperStyle={[styles.cardMenuItem]}
                 />
             )}
-        </StaticHeaderPageLayout>
+        </HeaderPageLayout>
     );
 }
 
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index 7f08247557f4..293e488ede7a 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
+import SCREENS from '../../../SCREENS';
 import styles from '../../../styles/styles';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import themeColors from '../../../styles/themes/default';
@@ -54,7 +55,7 @@ function SecuritySettingsPage(props) {
             shouldShowBackButton
             shouldShowCloseButton
             illustration={LottieAnimations.Safe}
-            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[ROUTES.SETTINGS_SECURITY]}
+            backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.SECURITY]}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index ec06bb07c3fe..11ade02220ab 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -25,6 +25,7 @@ type AvatarSizeValue = ValueOf<
         | 'avatarSizeSubscript'
         | 'avatarSizeSmall'
         | 'avatarSizeSmaller'
+        | 'avatarSizeXLarge'
         | 'avatarSizeLarge'
         | 'avatarSizeMedium'
         | 'avatarSizeLargeBordered'
@@ -95,6 +96,7 @@ const avatarBorderSizes: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.DEFAULT]: variables.componentBorderRadiusNormal,
     [CONST.AVATAR_SIZE.MEDIUM]: variables.componentBorderRadiusLarge,
     [CONST.AVATAR_SIZE.LARGE]: variables.componentBorderRadiusLarge,
+    [CONST.AVATAR_SIZE.XLARGE]: variables.componentBorderRadiusLarge,
     [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.componentBorderRadiusRounded,
     [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.componentBorderRadiusMedium,
 };
@@ -107,6 +109,7 @@ const avatarSizes: Record<AvatarSizeName, AvatarSizeValue> = {
     [CONST.AVATAR_SIZE.SMALL]: variables.avatarSizeSmall,
     [CONST.AVATAR_SIZE.SMALLER]: variables.avatarSizeSmaller,
     [CONST.AVATAR_SIZE.LARGE]: variables.avatarSizeLarge,
+    [CONST.AVATAR_SIZE.XLARGE]: variables.avatarSizeXLarge,
     [CONST.AVATAR_SIZE.MEDIUM]: variables.avatarSizeMedium,
     [CONST.AVATAR_SIZE.LARGE_BORDERED]: variables.avatarSizeLargeBordered,
     [CONST.AVATAR_SIZE.HEADER]: variables.avatarSizeHeader,
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 01689a43952a..1c2d61ae5a36 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -1994,6 +1994,11 @@ const styles = (theme) => ({
         height: variables.avatarSizeLarge,
     },
 
+    avatarXLarge: {
+        width: variables.avatarSizeXLarge,
+        height: variables.avatarSizeXLarge,
+    },
+
     avatarNormal: {
         height: variables.componentSizeNormal,
         width: variables.componentSizeNormal,
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index 6abc8d7e4463..5ff997684304 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -87,11 +87,12 @@ const darkTheme = {
 
 darkTheme.PAGE_BACKGROUND_COLORS = {
     [SCREENS.HOME]: darkTheme.sidebar,
+    [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
     [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
     [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-    [ROUTES.SETTINGS_STATUS]: colors.green700,
-    [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800,
-    [ROUTES.SETTINGS_SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.STATUS]: colors.green700,
+    [SCREENS.SETTINGS.ROOT]: darkTheme.sidebar,
 };
 
 export default darkTheme;
diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js
index 69127e19ae14..e6ca56d248d6 100644
--- a/src/styles/themes/light.js
+++ b/src/styles/themes/light.js
@@ -1,6 +1,5 @@
 import colors from '../colors';
 import SCREENS from '../../SCREENS';
-import ROUTES from '../../ROUTES';
 
 const lightTheme = {
     // Figma keys
@@ -86,11 +85,12 @@ const lightTheme = {
 
 lightTheme.PAGE_BACKGROUND_COLORS = {
     [SCREENS.HOME]: lightTheme.sidebar,
+    [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
     [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
     [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-    [ROUTES.SETTINGS_STATUS]: colors.green700,
-    [ROUTES.I_KNOW_A_TEACHER]: colors.tangerine800,
-    [ROUTES.SETTINGS_SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.SECURITY]: colors.ice500,
+    [SCREENS.SETTINGS.STATUS]: colors.green700,
+    [SCREENS.SETTINGS.ROOT]: lightTheme.sidebar,
 };
 
 export default lightTheme;
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 6291323cef0b..c75d03a39986 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -28,6 +28,7 @@ export default {
     appModalAppIconSize: 48,
     buttonBorderRadius: 100,
     avatarSizeLargeBordered: 88,
+    avatarSizeXLarge: 120,
     avatarSizeLarge: 80,
     avatarSizeMedium: 52,
     avatarSizeHeader: 40,