diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 40fb1115ac36..2694e2b83f7f 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -655,9 +655,10 @@ class BaseOptionsSelector extends Component {
                     )}
                 </View>
                 {this.props.shouldShowReferralCTA && (
-                    <View style={[this.props.themeStyles.ph5, this.props.themeStyles.pb5, this.props.themeStyles.flexShrink0]}>
-                        <ReferralProgramCTA referralContentType={this.props.referralContentType} />
-                    </View>
+                    <ReferralProgramCTA
+                        referralContentType={this.props.referralContentType}
+                        style={[this.props.themeStyles.mh5, this.props.themeStyles.mb5, this.props.themeStyles.flexShrink0]}
+                    />
                 )}
 
                 {shouldShowFooter && (
diff --git a/src/components/ReferralProgramCTA.tsx b/src/components/ReferralProgramCTA.tsx
index 6db37ce1320a..c5a91b3fdceb 100644
--- a/src/components/ReferralProgramCTA.tsx
+++ b/src/components/ReferralProgramCTA.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
@@ -25,9 +26,11 @@ type ReferralProgramCTAProps = ReferralProgramCTAOnyxProps & {
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY
         | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND;
+
+    style?: StyleProp<ViewStyle>;
 };
 
-function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: ReferralProgramCTAProps) {
+function ReferralProgramCTA({referralContentType, style, dismissedReferralBanners}: ReferralProgramCTAProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -45,7 +48,7 @@ function ReferralProgramCTA({referralContentType, dismissedReferralBanners}: Ref
             onPress={() => {
                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(referralContentType, Navigation.getActiveRouteWithoutParams()));
             }}
-            style={[styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5]}
+            style={[styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10, padding: 10}, styles.pl5, style]}
             accessibilityLabel="referral"
             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
         >
diff --git a/src/hooks/useStyledSafeAreaInsets.ts b/src/hooks/useStyledSafeAreaInsets.ts
new file mode 100644
index 000000000000..bfd9c32a46ae
--- /dev/null
+++ b/src/hooks/useStyledSafeAreaInsets.ts
@@ -0,0 +1,37 @@
+// eslint-disable-next-line no-restricted-imports
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useStyleUtils from './useStyleUtils';
+
+/**
+ * Custom hook to get the styled safe area insets.
+ * This hook utilizes the `SafeAreaInsetsContext` to retrieve the current safe area insets
+ * and applies styling adjustments using the `useStyleUtils` hook.
+ *
+ * @returns  An object containing the styled safe area insets and additional styles.
+ * @returns  .paddingTop The top padding adjusted for safe area.
+ * @returns  .paddingBottom The bottom padding adjusted for safe area.
+ * @returns  .insets The safe area insets object or undefined if not available.
+ * @returns  .safeAreaPaddingBottomStyle An object containing the bottom padding style adjusted for safe area.
+ *
+ * @example
+ * // How to use this hook in a component
+ * function MyComponent() {
+ *     const { paddingTop, paddingBottom, safeAreaPaddingBottomStyle } = useStyledSafeAreaInsets();
+ *
+ *     // Use these values to style your component accordingly
+ * }
+ */
+function useStyledSafeAreaInsets() {
+    const StyleUtils = useStyleUtils();
+    const insets = useSafeAreaInsets();
+
+    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets ?? undefined);
+    return {
+        paddingTop,
+        paddingBottom,
+        insets: insets ?? undefined,
+        safeAreaPaddingBottomStyle: {paddingBottom},
+    };
+}
+
+export default useStyledSafeAreaInsets;
diff --git a/src/libs/DoInteractionTask/index.ts b/src/libs/DoInteractionTask/index.ts
index 0eadb8f7dbee..c53f08be88dc 100644
--- a/src/libs/DoInteractionTask/index.ts
+++ b/src/libs/DoInteractionTask/index.ts
@@ -1,7 +1,8 @@
+import DomUtils from '@libs/DomUtils';
 import type DoInteractionTask from './types';
 
 const doInteractionTask: DoInteractionTask = (callback) => {
-    callback();
+    DomUtils.requestAnimationFrame(callback);
     return null;
 };
 
diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
index 72393e89ae1a..c707f937eed5 100755
--- a/src/pages/NewChatPage.tsx
+++ b/src/pages/NewChatPage.tsx
@@ -1,19 +1,28 @@
+import {useFocusEffect} from '@react-navigation/native';
+import isEmpty from 'lodash/isEmpty';
+import reject from 'lodash/reject';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
+import type {SectionListData} from 'react-native';
+import {InteractionManager, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import Button from '@components/Button';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
-import OptionsSelector from '@components/OptionsSelector';
-import ScreenWrapper from '@components/ScreenWrapper';
-import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import {useBetas, usePersonalDetails} from '@components/OnyxProvider';
+import {PressableWithFeedback} from '@components/Pressable';
+import ReferralProgramCTA from '@components/ReferralProgramCTA';
+import SelectCircle from '@components/SelectCircle';
+import SelectionList from '@components/SelectionList';
+import type {ListItem, Section} from '@components/SelectionList/types';
+import UserListItem from '@components/SelectionList/UserListItem';
+import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch';
+import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import doInteractionTask from '@libs/DoInteractionTask';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import type {OptionData} from '@libs/ReportUtils';
@@ -22,20 +31,11 @@ import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
-import type {DismissedReferralBanners} from '@src/types/onyx/Account';
 
 type NewChatPageWithOnyxProps = {
     /** All reports shared with the user */
     reports: OnyxCollection<OnyxTypes.Report>;
 
-    /** All of the personal details for everyone */
-    personalDetails: OnyxEntry<OnyxTypes.PersonalDetailsList>;
-
-    betas: OnyxEntry<OnyxTypes.Beta[]>;
-
-    /** An object that holds data about which referral banners have been dismissed */
-    dismissedReferralBanners: DismissedReferralBanners;
-
     /** Whether we are searching for reports in the server */
     isSearchingForReports: OnyxEntry<boolean>;
 };
@@ -46,119 +46,126 @@ type NewChatPageProps = NewChatPageWithOnyxProps & {
 
 const excludedGroupEmails = CONST.EXPENSIFY_EMAILS.filter((value) => value !== CONST.EMAIL.CONCIERGE);
 
-function NewChatPage({betas, isGroupChat, personalDetails, reports, isSearchingForReports, dismissedReferralBanners}: NewChatPageProps) {
+const EMPTY_ARRAY: Array<SectionListData<ListItem, Section<ListItem>>> = [];
+
+function useOptions({reports, isGroupChat}: Omit<NewChatPageProps, 'isSearchingForReports'>) {
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+    const personalDetails = usePersonalDetails();
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
+    const [selectedOptions, setSelectedOptions] = useState<Array<ListItem & OptionData>>([]);
+    const betas = useBetas();
+
+    const options = useMemo(() => {
+        const filteredOptions = OptionsListUtils.getFilteredOptions(
+            reports,
+            personalDetails,
+            betas,
+            debouncedSearchTerm,
+            selectedOptions,
+            isGroupChat ? excludedGroupEmails : [],
+            false,
+            true,
+            false,
+            {},
+            [],
+            false,
+            {},
+            [],
+            true,
+            false,
+        );
+        const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
+
+        const headerMessage = OptionsListUtils.getHeaderMessage(
+            filteredOptions.personalDetails.length + filteredOptions.recentReports.length !== 0,
+            Boolean(filteredOptions.userToInvite),
+            debouncedSearchTerm.trim(),
+            maxParticipantsReached,
+            selectedOptions.some((participant) => participant?.searchText?.toLowerCase?.().includes(debouncedSearchTerm.trim().toLowerCase())),
+        );
+        return {...filteredOptions, headerMessage, maxParticipantsReached};
+    }, [betas, debouncedSearchTerm, isGroupChat, personalDetails, reports, selectedOptions]);
+
+    useEffect(() => {
+        if (!debouncedSearchTerm.length || options.maxParticipantsReached) {
+            return;
+        }
+
+        Report.searchInServer(debouncedSearchTerm);
+    }, [debouncedSearchTerm, options.maxParticipantsReached]);
+
+    return {...options, searchTerm, debouncedSearchTerm, setSearchTerm, isOptionsDataReady, selectedOptions, setSelectedOptions};
+}
+
+function NewChatPage({isGroupChat, reports, isSearchingForReports}: NewChatPageProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const [searchTerm, setSearchTerm] = useState('');
-    const [filteredRecentReports, setFilteredRecentReports] = useState<ReportUtils.OptionData[]>([]);
-    const [filteredPersonalDetails, setFilteredPersonalDetails] = useState<ReportUtils.OptionData[]>([]);
-    const [filteredUserToInvite, setFilteredUserToInvite] = useState<ReportUtils.OptionData | null>();
-    const [selectedOptions, setSelectedOptions] = useState<OptionData[]>([]);
+    const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
     const {isOffline} = useNetwork();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
-
-    const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
-    const setSearchTermAndSearchInServer = useSearchTermAndSearch(setSearchTerm, maxParticipantsReached);
 
-    const headerMessage = OptionsListUtils.getHeaderMessage(
-        filteredPersonalDetails.length + filteredRecentReports.length !== 0,
-        Boolean(filteredUserToInvite),
-        searchTerm.trim(),
+    const {
+        headerMessage,
         maxParticipantsReached,
-        selectedOptions.some((participant) => participant?.searchText?.toLowerCase().includes(searchTerm.trim().toLowerCase())),
-    );
-
-    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
-
-    const sections = useMemo((): OptionsListUtils.CategorySection[] => {
-        const sectionsList: OptionsListUtils.CategorySection[] = [];
+        searchTerm,
+        debouncedSearchTerm,
+        setSearchTerm,
+        selectedOptions,
+        setSelectedOptions,
+        recentReports,
+        personalDetails,
+        userToInvite,
+        isOptionsDataReady,
+    } = useOptions({
+        reports,
+        isGroupChat,
+    });
+
+    const sections = useMemo(() => {
+        const sectionsList = [];
         let indexOffset = 0;
 
-        const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(searchTerm, selectedOptions, filteredRecentReports, filteredPersonalDetails, maxParticipantsReached, indexOffset);
+        const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(debouncedSearchTerm, selectedOptions, recentReports, personalDetails, true, indexOffset);
         sectionsList.push(formatResults.section);
-
         indexOffset = formatResults.newIndexOffset;
 
         if (maxParticipantsReached) {
-            return sectionsList;
+            return sectionsList as unknown as Array<SectionListData<ListItem, Section<ListItem>>>;
         }
 
         sectionsList.push({
             title: translate('common.recents'),
-            data: filteredRecentReports,
-            shouldShow: filteredRecentReports.length > 0,
+            data: recentReports,
+            shouldShow: !isEmpty(recentReports),
             indexOffset,
         });
-        indexOffset += filteredRecentReports.length;
+        indexOffset += recentReports.length;
 
         sectionsList.push({
             title: translate('common.contacts'),
-            data: filteredPersonalDetails,
-            shouldShow: filteredPersonalDetails.length > 0,
+            data: personalDetails,
+            shouldShow: !isEmpty(personalDetails),
             indexOffset,
         });
-        indexOffset += filteredPersonalDetails.length;
+        indexOffset += personalDetails.length;
 
-        if (filteredUserToInvite) {
+        if (userToInvite) {
             sectionsList.push({
                 title: undefined,
-                data: [filteredUserToInvite],
+                data: [userToInvite],
                 shouldShow: true,
                 indexOffset,
             });
         }
 
-        return sectionsList;
-    }, [translate, filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, selectedOptions, searchTerm]);
-
-    /**
-     * Removes a selected option from list if already selected. If not already selected add this option to the list.
-     */
-    const toggleOption = (option: OptionData) => {
-        const isOptionInList = selectedOptions.some((selectedOption) => selectedOption.login === option.login);
-
-        let newSelectedOptions;
-
-        if (isOptionInList) {
-            newSelectedOptions = selectedOptions.filter((selectedOption) => selectedOption.login !== option.login);
-        } else {
-            newSelectedOptions = [...selectedOptions, option];
-        }
-
-        const {
-            recentReports,
-            personalDetails: newChatPersonalDetails,
-            userToInvite,
-        } = OptionsListUtils.getFilteredOptions(
-            reports,
-            personalDetails,
-            betas ?? [],
-            searchTerm,
-            newSelectedOptions,
-            isGroupChat ? excludedGroupEmails : [],
-            false,
-            true,
-            false,
-            {},
-            [],
-            false,
-            {},
-            [],
-            true,
-        );
-
-        setSelectedOptions(newSelectedOptions);
-        setFilteredRecentReports(recentReports);
-        setFilteredPersonalDetails(newChatPersonalDetails);
-        setFilteredUserToInvite(userToInvite);
-    };
+        return sectionsList as unknown as Array<SectionListData<ListItem, Section<ListItem>>>;
+    }, [debouncedSearchTerm, selectedOptions, recentReports, personalDetails, maxParticipantsReached, translate, userToInvite]);
 
     /**
      * Creates a new 1:1 chat with the option and the current user,
      * or navigates to the existing chat if one with those participants already exists.
      */
-    const createChat = (option: OptionData) => {
+    const createChat = (option: ListItem) => {
         if (!option.login) {
             return;
         }
@@ -166,139 +173,141 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, isSearchingF
     };
 
     /**
-     * Creates a new group chat with all the selected options and the current user,
-     * or navigates to the existing chat if one with those participants already exists.
+     *  This hook is used to set the state of didScreenTransitionEnd to true after the screen has transitioned.
+     *  This is used to prevent the screen from rendering sections until transition has ended.
      */
-    const createGroup = () => {
-        const logins = selectedOptions.map((option) => option.login).filter((login): login is string => typeof login === 'string');
+    useFocusEffect(
+        React.useCallback(() => {
+            const task = InteractionManager.runAfterInteractions(() => {
+                setDidScreenTransitionEnd(true);
+            });
 
-        if (logins.length < 1) {
-            return;
-        }
+            return () => task.cancel();
+        }, []),
+    );
 
-        Report.navigateToAndOpenReport(logins);
-    };
+    const itemRightSideComponent = useCallback(
+        (listItem: ListItem) => {
+            const item = listItem as ListItem & OptionData;
+            /**
+             * Removes a selected option from list if already selected. If not already selected add this option to the list.
+             * @param  option
+             */
+            function toggleOption(option: ListItem & OptionData) {
+                const isOptionInList = !!option.isSelected;
+
+                let newSelectedOptions: Array<ListItem & OptionData>;
+
+                if (isOptionInList) {
+                    newSelectedOptions = reject(selectedOptions, (selectedOption) => selectedOption.login === option.login);
+                } else {
+                    newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true}];
+                }
+
+                setSelectedOptions(newSelectedOptions);
+            }
 
-    const updateOptions = useCallback(() => {
-        const {
-            recentReports,
-            personalDetails: newChatPersonalDetails,
-            userToInvite,
-        } = OptionsListUtils.getFilteredOptions(
-            reports,
-            personalDetails,
-            betas ?? [],
-            searchTerm,
-            selectedOptions,
-            isGroupChat ? excludedGroupEmails : [],
-            false,
-            true,
-            false,
-            {},
-            [],
-            false,
-            {},
-            [],
-            true,
-        );
-        setFilteredRecentReports(recentReports);
-        setFilteredPersonalDetails(newChatPersonalDetails);
-        setFilteredUserToInvite(userToInvite);
-        // props.betas is not added as dependency since it doesn't change during the component lifecycle
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [reports, personalDetails, searchTerm]);
+            if (item.isSelected) {
+                return (
+                    <PressableWithFeedback
+                        onPress={() => toggleOption(item)}
+                        disabled={item.isDisabled}
+                        role={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                        accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                        style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
+                    >
+                        <SelectCircle isChecked={item.isSelected} />
+                    </PressableWithFeedback>
+                );
+            }
 
-    useEffect(() => {
-        const interactionTask = doInteractionTask(() => {
-            setDidScreenTransitionEnd(true);
-        });
+            return (
+                <Button
+                    onPress={() => toggleOption(item)}
+                    style={[styles.pl2]}
+                    text={translate('newChatPage.addToGroup')}
+                    small
+                />
+            );
+        },
+        [selectedOptions, setSelectedOptions, styles, translate],
+    );
+
+    const footerContent = useMemo(() => {
+        /**
+         * Creates a new group chat with all the selected options and the current user,
+         * or navigates to the existing chat if one with those participants already exists.
+         */
+        const createGroup = () => {
+            const logins = selectedOptions.map((option) => option.login).filter((login): login is string => typeof login === 'string');
 
-        return () => {
-            if (!interactionTask) {
+            if (logins.length < 1) {
                 return;
             }
 
-            interactionTask.cancel();
+            Report.navigateToAndOpenReport(logins);
         };
-    }, []);
-
-    useEffect(() => {
-        if (!didScreenTransitionEnd) {
-            return;
-        }
-        updateOptions();
-    }, [didScreenTransitionEnd, updateOptions]);
-
-    const {inputCallbackRef} = useAutoFocusInput();
+        return (
+            <>
+                <ReferralProgramCTA
+                    referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT}
+                    style={[!!selectedOptions.length && styles.mb5]}
+                />
+
+                {!!selectedOptions.length && (
+                    <Button
+                        success
+                        text={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
+                        onPress={createGroup}
+                        pressOnEnter
+                    />
+                )}
+            </>
+        );
+    }, [selectedOptions, styles, translate]);
 
+    const {insets, safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
     return (
-        <ScreenWrapper
-            shouldEnableKeyboardAvoidingView={false}
-            includeSafeAreaPaddingBottom={isOffline}
-            shouldShowOfflineIndicator={false}
-            includePaddingTop={false}
-            shouldEnableMaxHeight
+        <View
             testID={NewChatPage.displayName}
+            style={styles.flex1}
         >
-            {({safeAreaPaddingBottomStyle, insets}) => (
-                <KeyboardAvoidingView
-                    style={{height: '100%'}}
-                    behavior="padding"
-                    // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
-                    // This is because when wrapping whole screen the screen was freezing when changing Tabs.
-                    keyboardVerticalOffset={variables.contentHeaderHeight + (insets?.top ?? 0) + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding}
-                >
-                    <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
-                        <OptionsSelector
-                            ref={inputCallbackRef}
-                            // @ts-expect-error TODO: Remove this once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TypeScript.
-                            canSelectMultipleOptions
-                            shouldShowMultipleOptionSelectorAsButton
-                            multipleOptionSelectorButtonText={translate('newChatPage.addToGroup')}
-                            onAddToSelection={toggleOption}
-                            sections={sections}
-                            selectedOptions={selectedOptions}
-                            onSelectRow={createChat}
-                            onChangeText={setSearchTermAndSearchInServer}
-                            headerMessage={headerMessage}
-                            boldStyle
-                            shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
-                            shouldShowOptions={isOptionsDataReady && didScreenTransitionEnd}
-                            shouldShowConfirmButton
-                            shouldShowReferralCTA={!dismissedReferralBanners[CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT]}
-                            referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT}
-                            confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
-                            textInputAlert={isOffline ? [`${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}`, {isTranslated: true}] : ''}
-                            onConfirmSelection={createGroup}
-                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
-                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                            isLoadingNewOptions={isSearchingForReports}
-                            autoFocus={false}
-                        />
-                    </View>
-                    {isSmallScreenWidth && <OfflineIndicator />}
-                </KeyboardAvoidingView>
-            )}
-        </ScreenWrapper>
+            <KeyboardAvoidingView
+                style={styles.flex1}
+                behavior="padding"
+                // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
+                // This is because when wrapping whole screen the screen was freezing when changing Tabs.
+                keyboardVerticalOffset={variables.contentHeaderHeight + insets.top + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding}
+            >
+                <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
+                    <SelectionList
+                        ListItem={UserListItem}
+                        sections={isOptionsDataReady && didScreenTransitionEnd ? sections : EMPTY_ARRAY}
+                        textInputValue={searchTerm}
+                        textInputHint={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
+                        onChangeText={setSearchTerm}
+                        textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                        headerMessage={headerMessage}
+                        onSelectRow={createChat}
+                        rightHandSideComponent={itemRightSideComponent}
+                        footerContent={footerContent}
+                        showLoadingPlaceholder={!didScreenTransitionEnd}
+                        shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+                        isLoadingNewOptions={!!isSearchingForReports}
+                    />
+                </View>
+                {isSmallScreenWidth && <OfflineIndicator />}
+            </KeyboardAvoidingView>
+        </View>
     );
 }
 
 NewChatPage.displayName = 'NewChatPage';
 
 export default withOnyx<NewChatPageProps, NewChatPageWithOnyxProps>({
-    dismissedReferralBanners: {
-        key: ONYXKEYS.ACCOUNT,
-        selector: (data) => data?.dismissedReferralBanners ?? {},
-    },
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,
     },
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
     isSearchingForReports: {
         key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
         initWithStoredValues: false,
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
index 5033c74cdad3..864855dca5a5 100755
--- a/src/pages/NewChatSelectorPage.js
+++ b/src/pages/NewChatSelectorPage.js
@@ -1,32 +1,16 @@
-import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TabSelector from '@components/TabSelector/TabSelector';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import compose from '@libs/compose';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
 import OnyxTabNavigator, {TopTab} from '@libs/Navigation/OnyxTabNavigator';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import NewChatPage from './NewChatPage';
 import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    betas: [],
-    personalDetails: {},
-    reports: {},
-};
-
-function NewChatSelectorPage(props) {
-    const navigation = useNavigation();
+function NewChatSelectorPage() {
+    const {translate} = useLocalize();
 
     return (
         <ScreenWrapper
@@ -37,8 +21,8 @@ function NewChatSelectorPage(props) {
             testID={NewChatSelectorPage.displayName}
         >
             <HeaderWithBackButton
-                title={props.translate('sidebarScreen.fabNewChat')}
-                onBackButtonPress={navigation.goBack}
+                title={translate('sidebarScreen.fabNewChat')}
+                onBackButtonPress={Navigation.dismissModal}
             />
             <OnyxTabNavigator
                 id={CONST.TAB.NEW_CHAT_TAB_ID}
@@ -57,14 +41,6 @@ function NewChatSelectorPage(props) {
     );
 }
 
-NewChatSelectorPage.propTypes = propTypes;
-NewChatSelectorPage.defaultProps = defaultProps;
 NewChatSelectorPage.displayName = 'NewChatSelectorPage';
 
-export default compose(
-    withLocalize,
-    withWindowDimensions,
-    withOnyx({
-        betas: {key: ONYXKEYS.BETAS},
-    }),
-)(NewChatSelectorPage);
+export default NewChatSelectorPage;
diff --git a/src/pages/SearchPage/SearchPageFooter.tsx b/src/pages/SearchPage/SearchPageFooter.tsx
index 3d5ebfd2c193..a9369ff9f0b7 100644
--- a/src/pages/SearchPage/SearchPageFooter.tsx
+++ b/src/pages/SearchPage/SearchPageFooter.tsx
@@ -1,17 +1,9 @@
 import React from 'react';
-import {View} from 'react-native';
 import ReferralProgramCTA from '@components/ReferralProgramCTA';
-import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 function SearchPageFooter() {
-    const themeStyles = useThemeStyles();
-
-    return (
-        <View style={[themeStyles.flexShrink0]}>
-            <ReferralProgramCTA referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} />
-        </View>
-    );
+    return <ReferralProgramCTA referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} />;
 }
 
 SearchPageFooter.displayName = 'SearchPageFooter';
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index fb3a4d9457d5..01b6b0f4d21c 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -28,9 +28,6 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** An object that holds data about which referral banners have been dismissed */
-    dismissedReferralBanners: PropTypes.objectOf(PropTypes.bool),
-
     /** Callback to request parent modal to go to next step, which should be split */
     onFinish: PropTypes.func.isRequired,
 
@@ -69,7 +66,6 @@ const defaultProps = {
     safeAreaPaddingBottomStyle: {},
     reports: {},
     betas: [],
-    dismissedReferralBanners: {},
     didScreenTransitionEnd: false,
 };
 
@@ -82,7 +78,6 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     safeAreaPaddingBottomStyle,
     iouType,
     iouRequestType,
-    dismissedReferralBanners,
     didScreenTransitionEnd,
 }) {
     const {translate} = useLocalize();
@@ -268,11 +263,10 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
     const footerContent = useMemo(
         () => (
             <View>
-                {!dismissedReferralBanners[referralContentType] && (
-                    <View style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.pb5]}>
-                        <ReferralProgramCTA referralContentType={referralContentType} />
-                    </View>
-                )}
+                <ReferralProgramCTA
+                    referralContentType={referralContentType}
+                    style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.mb5]}
+                />
 
                 {shouldShowSplitBillErrorMessage && (
                     <FormHelpMessage
@@ -293,7 +287,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
                 )}
             </View>
         ),
-        [handleConfirmSelection, participants.length, dismissedReferralBanners, referralContentType, shouldShowSplitBillErrorMessage, styles, translate],
+        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, styles, translate],
     );
 
     const itemRightSideComponent = useCallback(
@@ -358,10 +352,6 @@ MoneyTemporaryForRefactorRequestParticipantsSelector.defaultProps = defaultProps
 MoneyTemporaryForRefactorRequestParticipantsSelector.displayName = 'MoneyTemporaryForRefactorRequestParticipantsSelector';
 
 export default withOnyx({
-    dismissedReferralBanners: {
-        key: ONYXKEYS.ACCOUNT,
-        selector: (data) => data.dismissedReferralBanners || {},
-    },
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,
     },
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 1ad6488aeee9..ca52053eca33 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -36,9 +36,6 @@ const propTypes = {
     /** Callback to add participants in MoneyRequestModal */
     onAddParticipants: PropTypes.func.isRequired,
 
-    /** An object that holds data about which referral banners have been dismissed */
-    dismissedReferralBanners: PropTypes.objectOf(PropTypes.bool),
-
     /** Selected participants from MoneyRequestModal with login */
     participants: PropTypes.arrayOf(
         PropTypes.shape({
@@ -67,7 +64,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    dismissedReferralBanners: {},
     participants: [],
     safeAreaPaddingBottomStyle: {},
     reports: {},
@@ -78,7 +74,6 @@ const defaultProps = {
 
 function MoneyRequestParticipantsSelector({
     betas,
-    dismissedReferralBanners,
     participants,
     reports,
     navigateToRequest,
@@ -286,11 +281,10 @@ function MoneyRequestParticipantsSelector({
     const footerContent = useMemo(
         () => (
             <View>
-                {!dismissedReferralBanners[referralContentType] && (
-                    <View style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.pb5]}>
-                        <ReferralProgramCTA referralContentType={referralContentType} />
-                    </View>
-                )}
+                <ReferralProgramCTA
+                    referralContentType={referralContentType}
+                    style={[styles.flexShrink0, !!participants.length && !shouldShowSplitBillErrorMessage && styles.mb5]}
+                />
 
                 {shouldShowSplitBillErrorMessage && (
                     <FormHelpMessage
@@ -311,7 +305,7 @@ function MoneyRequestParticipantsSelector({
                 )}
             </View>
         ),
-        [handleConfirmSelection, participants.length, dismissedReferralBanners, referralContentType, shouldShowSplitBillErrorMessage, styles, translate],
+        [handleConfirmSelection, participants.length, referralContentType, shouldShowSplitBillErrorMessage, styles, translate],
     );
 
     const itemRightSideComponent = useCallback(
@@ -371,10 +365,6 @@ MoneyRequestParticipantsSelector.displayName = 'MoneyRequestParticipantsSelector
 MoneyRequestParticipantsSelector.defaultProps = defaultProps;
 
 export default withOnyx({
-    dismissedReferralBanners: {
-        key: ONYXKEYS.ACCOUNT,
-        selector: (data) => data.dismissedReferralBanners || {},
-    },
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,
     },