diff --git a/src/components/CustomStatusBarAndBackground/index.tsx b/src/components/CustomStatusBarAndBackground/index.tsx
index 42ea96fe41bb..c653fec73e91 100644
--- a/src/components/CustomStatusBarAndBackground/index.tsx
+++ b/src/components/CustomStatusBarAndBackground/index.tsx
@@ -116,15 +116,17 @@ function CustomStatusBarAndBackground({isNested = false}: CustomStatusBarAndBack
         return () => navigationRef.removeListener('state', listener);
     }, [isDisabled, theme.appBG, updateStatusBarStyle]);
 
-    // Update the global background (on web) everytime the theme changes.
+    // Update the global background and status bar style (on web) everytime the theme changes.
     // The background of the html element needs to be updated, otherwise you will see a big contrast when resizing the window or when the keyboard is open on iOS web.
+    // The status bar style needs to be updated when the user changes the theme, otherwise, the status bar will not change its color (mWeb iOS).
     useEffect(() => {
         if (isDisabled) {
             return;
         }
 
         updateGlobalBackgroundColor(theme);
-    }, [isDisabled, theme]);
+        updateStatusBarStyle();
+    }, [isDisabled, theme, updateStatusBarStyle]);
 
     if (isDisabled) {
         return null;
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 51422e7b4a49..a1de06314e4b 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -54,7 +54,7 @@ import MoneyWings from '@assets/images/simple-illustrations/simple-illustration_
 import OpenSafe from '@assets/images/simple-illustrations/simple-illustration__opensafe.svg';
 import PalmTree from '@assets/images/simple-illustrations/simple-illustration__palmtree.svg';
 import Profile from '@assets/images/simple-illustrations/simple-illustration__profile.svg';
-import QrCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
+import QRCode from '@assets/images/simple-illustrations/simple-illustration__qr-code.svg';
 import SanFrancisco from '@assets/images/simple-illustrations/simple-illustration__sanfrancisco.svg';
 import ShieldYellow from '@assets/images/simple-illustrations/simple-illustration__shield.svg';
 import SmallRocket from '@assets/images/simple-illustrations/simple-illustration__smallrocket.svg';
@@ -127,5 +127,5 @@ export {
     PalmTree,
     LockClosed,
     Gears,
-    QrCode,
+    QRCode,
 };
diff --git a/src/components/LottieAnimations/index.tsx b/src/components/LottieAnimations/index.tsx
index fd593421232d..10dc195365aa 100644
--- a/src/components/LottieAnimations/index.tsx
+++ b/src/components/LottieAnimations/index.tsx
@@ -1,7 +1,8 @@
+import colors from '@styles/theme/colors';
 import variables from '@styles/variables';
 import type DotLottieAnimation from './types';
 
-const DotLottieAnimations: Record<string, DotLottieAnimation> = {
+const DotLottieAnimations = {
     ExpensifyLounge: {
         file: require('@assets/animations/ExpensifyLounge.lottie'),
         w: 1920,
@@ -26,6 +27,7 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         file: require('@assets/animations/PreferencesDJ.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.blue500,
     },
     ReviewingBankInfo: {
         file: require('@assets/animations/ReviewingBankInfo.lottie'),
@@ -36,6 +38,7 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         file: require('@assets/animations/WorkspacePlanet.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.pink800,
     },
     SaveTheWorld: {
         file: require('@assets/animations/SaveTheWorld.lottie'),
@@ -46,6 +49,7 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         file: require('@assets/animations/Safe.lottie'),
         w: 625,
         h: 400,
+        backgroundColor: colors.ice500,
     },
     Magician: {
         file: require('@assets/animations/Magician.lottie'),
@@ -61,7 +65,8 @@ const DotLottieAnimations: Record<string, DotLottieAnimation> = {
         file: require('@assets/animations/Coin.lottie'),
         w: 375,
         h: 240,
+        backgroundColor: colors.yellow600,
     },
-};
+} satisfies Record<string, DotLottieAnimation>;
 
 export default DotLottieAnimations;
diff --git a/src/components/LottieAnimations/types.ts b/src/components/LottieAnimations/types.ts
index 6000b9f853f0..e1a6e0b66c74 100644
--- a/src/components/LottieAnimations/types.ts
+++ b/src/components/LottieAnimations/types.ts
@@ -1,9 +1,11 @@
 import type {LottieViewProps} from 'lottie-react-native';
+import type {ColorValue} from '@styles/utils/types';
 
 type DotLottieAnimation = {
     file: LottieViewProps['source'];
     w: number;
     h: number;
+    backgroundColor?: ColorValue;
 };
 
 export default DotLottieAnimation;
diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
index 7737927e5307..33f5f3d2230a 100644
--- a/src/components/Section/index.tsx
+++ b/src/components/Section/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {ReactNode} from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -65,6 +66,9 @@ type SectionProps = ChildrenProps & {
 
     /** Styles to apply to illustration component */
     illustrationStyle?: StyleProp<ViewStyle>;
+
+    /** Overlay content to display on top of animation */
+    overlayContent?: () => ReactNode;
 };
 
 function Section({
@@ -84,13 +88,14 @@ function Section({
     illustration,
     illustrationBackgroundColor,
     illustrationStyle,
+    overlayContent,
 }: SectionProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? theme.appBG);
+    const illustrationContainerStyle: StyleProp<ViewStyle> = StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? illustration?.backgroundColor ?? theme.appBG);
 
     return (
         <>
@@ -107,10 +112,12 @@ function Section({
                             <Lottie
                                 source={illustration}
                                 style={styles.h100}
+                                webStyle={styles.h100}
                                 autoPlay
                                 loop
                             />
                         </View>
+                        {overlayContent?.()}
                     </View>
                 )}
                 <View style={[styles.w100, isCentralPane && (isSmallScreenWidth ? styles.p5 : styles.p8)]}>
diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 410bd5081e25..3766ed71a149 100644
--- a/src/components/TestToolMenu.tsx
+++ b/src/components/TestToolMenu.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import * as Network from '@userActions/Network';
@@ -14,7 +13,6 @@ import Button from './Button';
 import {withNetwork} from './OnyxProvider';
 import Switch from './Switch';
 import TestToolRow from './TestToolRow';
-import Text from './Text';
 
 type TestToolMenuOnyxProps = {
     /** User object in Onyx */
@@ -29,17 +27,9 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT
 
 function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
     const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
-    const styles = useThemeStyles();
 
     return (
         <>
-            <Text
-                style={[styles.textLabelSupporting, styles.mb4]}
-                numberOfLines={1}
-            >
-                Test Preferences
-            </Text>
-
             {/* Option to switch between staging and default api endpoints.
         This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido.
         This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */}
diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx
index 4ed1aa126002..f6ff1787b566 100644
--- a/src/components/TestToolRow.tsx
+++ b/src/components/TestToolRow.tsx
@@ -14,7 +14,7 @@ type TestToolRowProps = {
 function TestToolRow({title, children}: TestToolRowProps) {
     const styles = useThemeStyles();
     return (
-        <View style={[styles.flexRow, styles.mb6, styles.justifyContentBetween, styles.alignItemsCenter, styles.mnw120]}>
+        <View style={styles.testRowContainer}>
             <View style={styles.flex2}>
                 <Text>{title}</Text>
             </View>
diff --git a/src/languages/en.ts b/src/languages/en.ts
index d46fb31eaf50..e4042ddd6ddd 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -718,6 +718,10 @@ export default {
             subtitle: 'These details are used for travel and payments. They are never shown on your public profile.',
         },
     },
+    securityPage: {
+        title: 'Security options',
+        subtitle: 'Enable two-factor authentication to keep your account safe.',
+    },
     shareCodePage: {
         title: 'Your code',
         subtitle: 'Invite members to Expensify by sharing your personal QR code or referral link.',
@@ -1051,6 +1055,14 @@ export default {
         defaultPaymentMethod: 'Default',
     },
     preferencesPage: {
+        appSection: {
+            title: 'App preferences',
+            subtitle: 'Customize your Expensify account.',
+        },
+        testSection: {
+            title: 'Test preferences',
+            subtitle: 'Settings to help debug and test the app on staging.',
+        },
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news',
         muteAllSounds: 'Mute all sounds from Expensify',
     },
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b02aef189545..643e9d63fe5f 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -713,6 +713,10 @@ export default {
             subtitle: 'Estos detalles se utilizan para viajes y pagos. Nunca se mostrarán en tu perfil público.',
         },
     },
+    securityPage: {
+        title: 'Opciones de seguridad',
+        subtitle: 'Activa la autenticación de dos factores para mantener tu cuenta segura.',
+    },
     shareCodePage: {
         title: 'Tu código',
         subtitle: 'Invita a miembros a Expensify compartiendo tu código QR personal o enlace de invitación.',
@@ -1049,6 +1053,14 @@ export default {
         defaultPaymentMethod: 'Predeterminado',
     },
     preferencesPage: {
+        appSection: {
+            title: 'Preferencias de la aplicación',
+            subtitle: 'Personaliza tu cuenta de Expensify.',
+        },
+        testSection: {
+            title: 'Preferencias para tests',
+            subtitle: 'Ajustes para ayudar a depurar y probar la aplicación en “staging”.',
+        },
         receiveRelevantFeatureUpdatesAndExpensifyNews: 'Recibir noticias sobre Expensify y actualizaciones del producto',
         muteAllSounds: 'Silenciar todos los sonidos de Expensify',
     },
diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx
index 7df92875b0ac..138aa729fcc2 100644
--- a/src/pages/ShareCodePage.tsx
+++ b/src/pages/ShareCodePage.tsx
@@ -81,7 +81,7 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP
                 title={translate('common.shareCode')}
                 onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID) : undefined)}
                 shouldShowBackButton={isReport || isSmallScreenWidth}
-                icon={Illustrations.QrCode}
+                icon={Illustrations.QRCode}
             />
             <ScrollView style={[themeStyles.flex1, themeStyles.pt3]}>
                 <View style={[themeStyles.flex1, isSmallScreenWidth ? themeStyles.workspaceSectionMobile : themeStyles.workspaceSection]}>
diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx
index a78d248d1d4c..26d845a6a921 100644
--- a/src/pages/settings/AboutPage/AboutPage.tsx
+++ b/src/pages/settings/AboutPage/AboutPage.tsx
@@ -1,17 +1,18 @@
 import React, {useCallback, useMemo, useRef} from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
-import type {GestureResponderEvent, Text as RNText} from 'react-native';
+import type {GestureResponderEvent, Text as RNText, StyleProp, ViewStyle} from 'react-native';
 import DeviceInfo from 'react-native-device-info';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
-import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -23,7 +24,6 @@ import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 import type IconAsset from '@src/types/utils/IconAsset';
 import pkg from '../../../../package.json';
 
@@ -44,11 +44,11 @@ type MenuItem = {
     iconRight?: IconAsset;
     action: () => Promise<void>;
     link?: string;
+    wrapperStyle?: StyleProp<ViewStyle>;
 };
 
 function AboutPage() {
     const {translate} = useLocalize();
-    const theme = useTheme();
     const styles = useThemeStyles();
     const popoverAnchor = useRef<View | RNText | null>(null);
     const waitForNavigate = useWaitForNavigation();
@@ -105,15 +105,16 @@ function AboutPage() {
                 : undefined,
             ref: popoverAnchor,
             shouldBlockSelection: !!link,
+            wrapperStyle: [styles.sectionMenuItemTopDescription],
         }));
-    }, [translate, waitForNavigate]);
+    }, [styles, translate, waitForNavigate]);
 
     const overlayContent = useCallback(
         () => (
-            <View style={[styles.pAbsolute, styles.w100, styles.h100, styles.justifyContentEnd, styles.pb5]}>
+            <View style={[styles.pAbsolute, styles.w100, styles.h100, styles.justifyContentEnd, styles.pb3]}>
                 <Text
                     selectable
-                    style={[styles.textLabel, styles.textIvoryLight, styles.alignSelfCenter]}
+                    style={[styles.textLabel, styles.textVersion, styles.alignSelfCenter]}
                 >
                     v{Environment.isInternalTestBuild() ? `${pkg.version} PR:${CONST.PULL_REQUEST_NUMBER}${getFlavor()}` : `${pkg.version}${getFlavor()}`}
                 </Text>
@@ -125,48 +126,60 @@ function AboutPage() {
     );
 
     return (
-        <IllustratedHeaderPageLayout
-            title={translate('initialSettingsPage.about')}
-            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
-            shouldShowBackButton={isSmallScreenWidth}
-            illustration={LottieAnimations.Coin}
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor}
-            overlayContent={overlayContent}
+        <ScreenWrapper
+            shouldEnablePickerAvoiding={false}
             shouldShowOfflineIndicatorInWideScreen
-            icon={Illustrations.PalmTree}
             testID={AboutPage.displayName}
         >
-            <View style={[styles.settingsPageBody, styles.ph5]}>
-                <Text style={[styles.textHeadline, styles.mb1]}>{translate('footer.aboutExpensify')}</Text>
-                <Text style={styles.mb4}>{translate('initialSettingsPage.aboutPage.description')}</Text>
-            </View>
-            <MenuItemList
-                menuItems={menuItems}
-                shouldUseSingleExecution
+            <HeaderWithBackButton
+                title={translate('initialSettingsPage.about')}
+                shouldShowBackButton={isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
+                icon={Illustrations.PalmTree}
             />
-            <View style={[styles.sidebarFooter]}>
-                <Text
-                    style={[styles.chatItemMessageHeaderTimestamp]}
-                    numberOfLines={1}
-                >
-                    {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '}
-                    <TextLink
-                        style={[styles.textMicroSupporting, styles.link]}
-                        href={CONST.TERMS_URL}
+            <ScrollView contentContainerStyle={styles.pt3}>
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={translate('footer.aboutExpensify')}
+                        subtitle={translate('initialSettingsPage.aboutPage.description')}
+                        isCentralPane
+                        subtitleMuted
+                        illustration={LottieAnimations.Coin}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                        overlayContent={overlayContent}
                     >
-                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')}
-                    </TextLink>{' '}
-                    {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '}
-                    <TextLink
-                        style={[styles.textMicroSupporting, styles.link]}
-                        href={CONST.PRIVACY_URL}
+                        <View style={[styles.flex1, styles.mt5]}>
+                            <MenuItemList
+                                menuItems={menuItems}
+                                shouldUseSingleExecution
+                            />
+                        </View>
+                    </Section>
+                </View>
+                <View style={[styles.sidebarFooter]}>
+                    <Text
+                        style={[styles.chatItemMessageHeaderTimestamp]}
+                        numberOfLines={1}
                     >
-                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')}
-                    </TextLink>
-                    .
-                </Text>
-            </View>
-        </IllustratedHeaderPageLayout>
+                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '}
+                        <TextLink
+                            style={[styles.textMicroSupporting, styles.link]}
+                            href={CONST.TERMS_URL}
+                        >
+                            {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')}
+                        </TextLink>{' '}
+                        {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '}
+                        <TextLink
+                            style={[styles.textMicroSupporting, styles.link]}
+                            href={CONST.PRIVACY_URL}
+                        >
+                            {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')}
+                        </TextLink>
+                        .
+                    </Text>
+                </View>
+            </ScrollView>
+        </ScreenWrapper>
     );
 }
 
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index e0f414910d7b..10f5dbef0e5a 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -173,6 +173,8 @@ function InitialSettingsPage(props) {
                         Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX);
                     },
                     link: () => Link.buildOldDotURL(CONST.OLDDOT_URLS.INBOX),
+                    iconRight: Expensicons.NewWindow,
+                    shouldShowRightIcon: true,
                 },
                 {
                     translationKey: 'initialSettingsPage.signOut',
@@ -222,6 +224,8 @@ function InitialSettingsPage(props) {
                     action: () => {
                         Link.openExternalLink(CONST.NEWHELP_URL);
                     },
+                    iconRight: Expensicons.NewWindow,
+                    shouldShowRightIcon: true,
                     link: CONST.NEWHELP_URL,
                 },
                 {
@@ -292,6 +296,8 @@ function InitialSettingsPage(props) {
                                 onSecondaryInteraction={item.link ? (event) => openPopover(item.link, event) : undefined}
                                 focused={activeRoute && item.routeName && activeRoute.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', '')}
                                 isPaneMenu
+                                iconRight={item.iconRight}
+                                shouldShowRightIcon={item.shouldShowRightIcon}
                             />
                         );
                     })}
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 0fe643884f25..5ac78f6d20c6 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -1,18 +1,19 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Illustrations from '@components/Icon/Illustrations';
-import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import Switch from '@components/Switch';
 import TestToolMenu from '@components/TestToolMenu';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
@@ -20,7 +21,6 @@ import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 
 const propTypes = {
     /** The chat priority mode */
@@ -43,79 +43,104 @@ const defaultProps = {
 };
 
 function PreferencesPage(props) {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const {isProduction} = useEnvironment();
     const {translate, preferredLocale} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
-        <IllustratedHeaderPageLayout
-            title={translate('common.preferences')}
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES.ROOT].backgroundColor}
-            illustration={LottieAnimations.PreferencesDJ}
-            shouldShowBackButton={isSmallScreenWidth}
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
             shouldShowOfflineIndicatorInWideScreen
-            icon={Illustrations.Gears}
             testID={PreferencesPage.displayName}
         >
-            <View style={styles.mb6}>
-                <Text
-                    style={[styles.textLabelSupporting, styles.mb2, styles.ml5, styles.mr8]}
-                    numberOfLines={1}
-                >
-                    {translate('common.notifications')}
-                </Text>
-                <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.ml5, styles.mr8]}>
-                    <View style={styles.flex4}>
-                        <Text>{translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}</Text>
-                    </View>
-                    <View style={[styles.flex1, styles.alignItemsEnd]}>
-                        <Switch
-                            accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
-                            isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
-                            onToggle={User.updateNewsletterSubscription}
-                        />
-                    </View>
+            <HeaderWithBackButton
+                title={translate('common.preferences')}
+                icon={Illustrations.Gears}
+                shouldShowBackButton={isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <ScrollView contentContainerStyle={styles.pt3}>
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={translate('preferencesPage.appSection.title')}
+                        subtitle={translate('preferencesPage.appSection.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        illustration={LottieAnimations.PreferencesDJ}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                    >
+                        <View style={[styles.flex1, styles.mt5]}>
+                            <Text
+                                style={[styles.textLabelSupporting, styles.mb2]}
+                                numberOfLines={1}
+                            >
+                                {translate('common.notifications')}
+                            </Text>
+                            <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.sectionMenuItemTopDescription]}>
+                                <View style={styles.flex4}>
+                                    <Text>{translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}</Text>
+                                </View>
+                                <View style={[styles.flex1, styles.alignItemsEnd]}>
+                                    <Switch
+                                        accessibilityLabel={translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
+                                        isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
+                                        onToggle={User.updateNewsletterSubscription}
+                                    />
+                                </View>
+                            </View>
+                            <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween]}>
+                                <View style={styles.flex4}>
+                                    <Text>{translate('preferencesPage.muteAllSounds')}</Text>
+                                </View>
+                                <View style={[styles.flex1, styles.alignItemsEnd]}>
+                                    <Switch
+                                        accessibilityLabel={translate('preferencesPage.muteAllSounds')}
+                                        isOn={lodashGet(props.user, 'isMutedAllSounds', false)}
+                                        onToggle={User.setMuteAllSounds}
+                                    />
+                                </View>
+                            </View>
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`priorityModePage.priorityModes.${props.priorityMode}.label`)}
+                                description={translate('priorityModePage.priorityMode')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`languagePage.languages.${preferredLocale}.label`)}
+                                description={translate('languagePage.language')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                            <MenuItemWithTopDescription
+                                shouldShowRightIcon
+                                title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
+                                description={translate('themePage.theme')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
+                                wrapperStyle={styles.sectionMenuItemTopDescription}
+                            />
+                        </View>
+                    </Section>
+                    {!isProduction && (
+                        <Section
+                            title={translate('preferencesPage.testSection.title')}
+                            subtitle={translate('preferencesPage.testSection.subtitle')}
+                            isCentralPane
+                            subtitleMuted
+                            titleStyles={styles.accountSettingsSectionTitle}
+                        >
+                            <View style={styles.mt5}>
+                                <TestToolMenu />
+                            </View>
+                        </Section>
+                    )}
                 </View>
-                <View style={[styles.flexRow, styles.mb4, styles.justifyContentBetween, styles.ml5, styles.mr8]}>
-                    <View style={styles.flex4}>
-                        <Text>{translate('preferencesPage.muteAllSounds')}</Text>
-                    </View>
-                    <View style={[styles.flex1, styles.alignItemsEnd]}>
-                        <Switch
-                            accessibilityLabel={translate('preferencesPage.muteAllSounds')}
-                            isOn={lodashGet(props.user, 'isMutedAllSounds', false)}
-                            onToggle={User.setMuteAllSounds}
-                        />
-                    </View>
-                </View>
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`priorityModePage.priorityModes.${props.priorityMode}.label`)}
-                    description={translate('priorityModePage.priorityMode')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
-                />
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`languagePage.languages.${preferredLocale}.label`)}
-                    description={translate('languagePage.language')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
-                />
-                <MenuItemWithTopDescription
-                    shouldShowRightIcon
-                    title={translate(`themePage.themes.${props.preferredTheme || CONST.THEME.DEFAULT}.label`)}
-                    description={translate('themePage.theme')}
-                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
-                />
-                {/* Enable additional test features in non-production environments */}
-                {!isProduction && (
-                    <View style={[styles.ml5, styles.mr8, styles.mt6]}>
-                        <TestToolMenu />
-                    </View>
-                )}
-            </View>
-        </IllustratedHeaderPageLayout>
+            </ScrollView>
+        </ScreenWrapper>
     );
 }
 
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index 5bac2a23eb8d..8600c9e08471 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -1,22 +1,21 @@
 import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
-import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Section from '@components/Section';
 import useLocalize from '@hooks/useLocalize';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 
 function SecuritySettingsPage() {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const waitForNavigate = useWaitForNavigation();
@@ -43,29 +42,42 @@ function SecuritySettingsPage() {
             onPress: item.action,
             shouldShowRightIcon: true,
             link: '',
+            wrapperStyle: [styles.sectionMenuItemTopDescription],
         }));
-    }, [translate, waitForNavigate]);
+    }, [translate, waitForNavigate, styles]);
 
     return (
-        <IllustratedHeaderPageLayout
-            title={translate('initialSettingsPage.security')}
-            onBackButtonPress={() => Navigation.goBack()}
-            shouldShowBackButton={isSmallScreenWidth}
-            illustration={LottieAnimations.Safe}
-            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
-            shouldShowOfflineIndicatorInWideScreen
-            icon={Illustrations.LockClosed}
+        <ScreenWrapper
             testID={SecuritySettingsPage.displayName}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldShowOfflineIndicatorInWideScreen
         >
-            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
-                <View style={[styles.flex1]}>
-                    <MenuItemList
-                        menuItems={menuItems}
-                        shouldUseSingleExecution
-                    />
+            <HeaderWithBackButton
+                title={translate('initialSettingsPage.security')}
+                shouldShowBackButton={isSmallScreenWidth}
+                onBackButtonPress={() => Navigation.goBack()}
+                icon={Illustrations.LockClosed}
+            />
+            <ScrollView contentContainerStyle={styles.pt3}>
+                <View style={[styles.flex1, isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection]}>
+                    <Section
+                        title={translate('securityPage.title')}
+                        subtitle={translate('securityPage.subtitle')}
+                        isCentralPane
+                        subtitleMuted
+                        illustration={LottieAnimations.Safe}
+                        titleStyles={styles.accountSettingsSectionTitle}
+                        childrenStyles={styles.pt5}
+                    >
+                        <MenuItemList
+                            menuItems={menuItems}
+                            shouldUseSingleExecution
+                        />
+                    </Section>
                 </View>
             </ScrollView>
-        </IllustratedHeaderPageLayout>
+        </ScreenWrapper>
     );
 }
 
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
index aa4f1df1ba7a..86b3d2aae51f 100755
--- a/src/pages/workspace/WorkspacesListPage.tsx
+++ b/src/pages/workspace/WorkspacesListPage.tsx
@@ -32,7 +32,6 @@ import * as Policy from '@userActions/Policy';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import SCREENS from '@src/SCREENS';
 import type {PolicyMembers, Policy as PolicyType, ReimbursementAccount, Report} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -343,7 +342,6 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, r
                             ctaAccessibilityLabel={translate('workspace.new.newWorkspace')}
                             onCtaPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
                             illustration={LottieAnimations.WorkspacePlanet}
-                            illustrationBackgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WORKSPACES].backgroundColor}
                             // We use this style to vertically center the illustration, as the original illustration is not centered
                             illustrationStyle={styles.emptyWorkspaceIllustrationStyle}
                         />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 1bea3d298cd4..1d3e323d6bd1 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -443,8 +443,12 @@ const styles = (theme: ThemeColors) =>
             color: theme.link,
         },
 
-        textIvoryLight: {
+        textVersion: {
             color: theme.iconColorfulBackground,
+            fontSize: variables.fontSizeNormal,
+            lineHeight: variables.lineHeightNormal,
+            fontFamily: FontUtils.fontFamily.platform.MONOSPACE,
+            textAlign: 'center',
         },
 
         textNoWrap: {
@@ -533,6 +537,14 @@ const styles = (theme: ThemeColors) =>
             paddingBottom: 1,
         },
 
+        testRowContainer: {
+            ...flex.flexRow,
+            ...flex.justifyContentBetween,
+            ...flex.alignItemsCenter,
+            ...sizing.mnw120,
+            height: 64,
+        },
+
         buttonSmall: {
             borderRadius: variables.buttonBorderRadius,
             minHeight: variables.componentSizeSmall,
@@ -1364,11 +1376,10 @@ const styles = (theme: ThemeColors) =>
         },
 
         sidebarFooter: {
-            alignItems: 'center',
             display: 'flex',
             justifyContent: 'center',
-            paddingVertical: variables.lineHeightXLarge,
             width: '100%',
+            paddingLeft: 20,
         },
 
         sidebarAvatar: {
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 3f14b9dc23ea..1230c4ae03c2 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -105,7 +105,7 @@ const darkTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.PREFERENCES.ROOT]: {
-            backgroundColor: colors.blue500,
+            backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.WORKSPACES]: {
@@ -116,10 +116,6 @@ const darkTheme = {
             backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
-        [SCREENS.SETTINGS.SECURITY]: {
-            backgroundColor: colors.ice500,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
-        },
         [SCREENS.SETTINGS.PROFILE.STATUS]: {
             backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
@@ -132,10 +128,6 @@ const darkTheme = {
             backgroundColor: colors.productDark100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
-        [SCREENS.SETTINGS.ABOUT]: {
-            backgroundColor: colors.yellow600,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
-        },
         [SCREENS.REFERRAL_DETAILS]: {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 9b072a1025a0..ad0bdfb296ce 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -105,7 +105,7 @@ const lightTheme = {
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.PREFERENCES.ROOT]: {
-            backgroundColor: colors.blue500,
+            backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
         },
         [SCREENS.SETTINGS.WORKSPACES]: {
@@ -116,10 +116,6 @@ const lightTheme = {
             backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
         },
-        [SCREENS.SETTINGS.SECURITY]: {
-            backgroundColor: colors.ice500,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
-        },
         [SCREENS.SETTINGS.PROFILE.STATUS]: {
             backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
@@ -132,10 +128,6 @@ const lightTheme = {
             backgroundColor: colors.productLight100,
             statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
         },
-        [SCREENS.SETTINGS.ABOUT]: {
-            backgroundColor: colors.yellow600,
-            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
-        },
         [SCREENS.REFERRAL_DETAILS]: {
             backgroundColor: colors.pink800,
             statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index c6d2bebe1417..6f7c18ea0dcf 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -192,7 +192,7 @@ export default {
     workspaceSectionMaxWidth: 680,
     oldDotWireframeIconWidth: 263.38,
     oldDotWireframeIconHeight: 143.28,
-    sectionIllustrationHeight: 240,
+    sectionIllustrationHeight: 220,
     photoUploadPopoverWidth: 335,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
diff --git a/tests/perf-test/SignInPage.perf-test.tsx b/tests/perf-test/SignInPage.perf-test.tsx
index dde8596fb2ae..88a653b1fbb9 100644
--- a/tests/perf-test/SignInPage.perf-test.tsx
+++ b/tests/perf-test/SignInPage.perf-test.tsx
@@ -35,6 +35,8 @@ jest.mock('@react-navigation/native', () => {
         createNavigationContainerRef: () => ({
             addListener: () => jest.fn(),
             removeListener: () => jest.fn(),
+            isReady: () => jest.fn(),
+            getCurrentRoute: () => jest.fn(),
         }),
     } as typeof NativeNavigation;
 });