diff --git a/src/CONST.ts b/src/CONST.ts
index 1ef2f3e83246..8c437a9f47cc 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -293,8 +293,8 @@ const CONST = {
             },
             type: KEYBOARD_SHORTCUT_NAVIGATION_TYPE,
         },
-        NEW_GROUP: {
-            descriptionKey: 'newGroup',
+        NEW_CHAT: {
+            descriptionKey: 'newChat',
             shortcutKey: 'K',
             modifiers: ['CTRL', 'SHIFT'],
             trigger: {
@@ -2624,6 +2624,9 @@ const CONST = {
         DISABLED: 'DISABLED',
     },
     TAB: {
+        NEW_CHAT_TAB_ID: 'NewChatTab',
+        NEW_CHAT: 'chat',
+        NEW_ROOM: 'room',
         RECEIPT_TAB_ID: 'ReceiptTab',
         MANUAL: 'manual',
         SCAN: 'scan',
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 1133dcec8e9a..36260058e741 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -13,7 +13,6 @@ type ParseReportRouteParams = {
 
 const REPORT = 'r';
 const IOU_REQUEST = 'request/new';
-const IOU_BILL = 'split/new';
 const IOU_SEND = 'send/new';
 const NEW_TASK = 'new/task';
 const SETTINGS_PERSONAL_DETAILS = 'settings/profile/personal-details';
@@ -67,8 +66,9 @@ export default {
     SETTINGS_2FA: 'settings/security/two-factor-auth',
     SETTINGS_STATUS,
     SETTINGS_STATUS_SET,
-    NEW_GROUP: 'new/group',
+    NEW: 'new',
     NEW_CHAT: 'new/chat',
+    NEW_ROOM: 'new/room',
     NEW_TASK,
     REPORT,
     REPORT_WITH_ID: 'r/:reportID?/:reportActionID?',
@@ -86,7 +86,6 @@ export default {
     CONCIERGE: 'concierge',
 
     IOU_REQUEST,
-    IOU_BILL,
     IOU_SEND,
 
     // To see the available iouType, please refer to CONST.IOU.MONEY_REQUEST_TYPE
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 50aff23dc9d0..a07510f7603d 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -8,6 +8,7 @@ import * as StyleUtils from '../styles/StyleUtils';
 import optionPropTypes from './optionPropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import Button from './Button';
 import MultipleAvatars from './MultipleAvatars';
 import Hoverable from './Hoverable';
 import DisplayNames from './DisplayNames';
@@ -39,6 +40,15 @@ const propTypes = {
     /** Whether we should show the selected state */
     showSelectedState: PropTypes.bool,
 
+    /** Whether to show a button pill instead of a tickbox */
+    shouldShowSelectedStateAsButton: PropTypes.bool,
+
+    /** Text for button pill */
+    selectedStateButtonText: PropTypes.string,
+
+    /** Callback to fire when the multiple selector (tickbox or button) is clicked */
+    onSelectedStatePressed: PropTypes.func,
+
     /** Whether we highlight selected option */
     highlightSelected: PropTypes.bool,
 
@@ -71,6 +81,9 @@ const propTypes = {
 const defaultProps = {
     hoverStyle: styles.sidebarLinkHover,
     showSelectedState: false,
+    shouldShowSelectedStateAsButton: false,
+    selectedStateButtonText: 'Select',
+    onSelectedStatePressed: () => {},
     highlightSelected: false,
     isSelected: false,
     boldStyle: false,
@@ -100,6 +113,7 @@ class OptionRow extends Component {
             this.props.isMultilineSupported !== nextProps.isMultilineSupported ||
             this.props.isSelected !== nextProps.isSelected ||
             this.props.shouldHaveOptionSeparator !== nextProps.shouldHaveOptionSeparator ||
+            this.props.selectedStateButtonText !== nextProps.selectedStateButtonText ||
             this.props.showSelectedState !== nextProps.showSelectedState ||
             this.props.highlightSelected !== nextProps.highlightSelected ||
             this.props.showTitleTooltip !== nextProps.showTitleTooltip ||
@@ -259,7 +273,26 @@ class OptionRow extends Component {
                                             />
                                         </View>
                                     )}
-                                    {this.props.showSelectedState && <SelectCircle isChecked={this.props.isSelected} />}
+                                    {this.props.showSelectedState && (
+                                        <>
+                                            {this.props.shouldShowSelectedStateAsButton && !this.props.isSelected ? (
+                                                <Button
+                                                    style={[styles.pl2]}
+                                                    text={this.props.selectedStateButtonText}
+                                                    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
+                                                    small
+                                                />
+                                            ) : (
+                                                <PressableWithFeedback
+                                                    onPress={() => this.props.onSelectedStatePressed(this.props.option)}
+                                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                    accessibilityLabel={CONST.ACCESSIBILITY_ROLE.CHECKBOX}
+                                                >
+                                                    <SelectCircle isChecked={this.props.isSelected} />
+                                                </PressableWithFeedback>
+                                            )}
+                                        </>
+                                    )}
                                     {this.props.isSelected && this.props.highlightSelected && (
                                         <View style={styles.defaultCheckmarkWrapper}>
                                             <Icon
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index 9c139a04dfbb..9b6875ccf8c2 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -56,6 +56,9 @@ function BaseOptionsList({
     shouldDisableRowInnerPadding,
     disableFocusOptions,
     canSelectMultipleOptions,
+    shouldShowMultipleOptionSelectorAsButton,
+    multipleOptionSelectorButtonText,
+    onAddToSelection,
     highlightSelectedOptions,
     onSelectRow,
     boldStyle,
@@ -191,6 +194,9 @@ function BaseOptionsList({
                 onSelectRow={onSelectRow}
                 isSelected={isSelected}
                 showSelectedState={canSelectMultipleOptions}
+                shouldShowSelectedStateAsButton={shouldShowMultipleOptionSelectorAsButton}
+                selectedStateButtonText={multipleOptionSelectorButtonText}
+                onSelectedStatePressed={onAddToSelection}
                 highlightSelected={highlightSelectedOptions}
                 boldStyle={boldStyle}
                 isDisabled={isItemDisabled}
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index ee3840bff69d..bff9f8b6d7d0 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View, InteractionManager} from 'react-native';
+import {View} from 'react-native';
 import Button from '../Button';
 import FixedFooter from '../FixedFooter';
 import OptionsList from '../OptionsList';
@@ -16,11 +16,9 @@ import KeyboardShortcut from '../../libs/KeyboardShortcut';
 import {propTypes as optionsSelectorPropTypes, defaultProps as optionsSelectorDefaultProps} from './optionsSelectorPropTypes';
 import setSelection from '../../libs/setSelection';
 import compose from '../../libs/compose';
+import getPlatform from '../../libs/getPlatform';
 
 const propTypes = {
-    /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
-    shouldDelayFocus: PropTypes.bool,
-
     /** padding bottom style of safe area */
     safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
@@ -70,6 +68,12 @@ class BaseOptionsSelector extends Component {
     componentDidMount() {
         this.subscribeToKeyboardShortcut();
 
+        if (this.props.isFocused && this.props.autoFocus && this.textInput) {
+            setTimeout(() => {
+                this.textInput.focus();
+            }, CONST.ANIMATED_TRANSITION);
+        }
+
         this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false);
     }
 
@@ -82,12 +86,13 @@ class BaseOptionsSelector extends Component {
             }
         }
 
-        if (this.textInput && this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) {
-            InteractionManager.runAfterInteractions(() => {
-                // If we automatically focus on a text input when mounting a component,
-                // let's automatically focus on it when the component updates as well (eg, when navigating back from a page)
+        // Screen coming back into focus, for example
+        // when doing Cmd+Shift+K, then Cmd+K, then Cmd+Shift+K.
+        // Only applies to platforms that support keyboard shortcuts
+        if ([CONST.PLATFORM.DESKTOP, CONST.PLATFORM.WEB].includes(getPlatform()) && !prevProps.isFocused && this.props.isFocused && this.props.autoFocus && this.textInput) {
+            setTimeout(() => {
                 this.textInput.focus();
-            });
+            }, CONST.ANIMATED_TRANSITION);
         }
 
         if (_.isEqual(this.props.sections, prevProps.sections)) {
@@ -359,8 +364,6 @@ class BaseOptionsSelector extends Component {
                 selectTextOnFocus
                 blurOnSubmit={Boolean(this.state.allOptions.length)}
                 spellCheck={false}
-                autoFocus={this.props.autoFocus}
-                shouldDelayFocus={this.props.shouldDelayFocus}
             />
         );
         const optionsList = (
@@ -372,6 +375,9 @@ class BaseOptionsSelector extends Component {
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
+                multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText}
+                onAddToSelection={this.props.onAddToSelection}
                 hideSectionHeaders={this.props.hideSectionHeaders}
                 headerMessage={this.props.headerMessage}
                 boldStyle={this.props.boldStyle}
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index dff0a16c0b3e..ca336c324673 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -53,6 +53,15 @@ const propTypes = {
     /** Whether we can select multiple options */
     canSelectMultipleOptions: PropTypes.bool,
 
+    /** Whether to show a button pill instead of a standard tickbox */
+    shouldShowMultipleOptionSelectorAsButton: PropTypes.bool,
+
+    /** Text for button pill */
+    multipleOptionSelectorButtonText: PropTypes.string,
+
+    /** Callback to fire when the multiple selector (tickbox or button) is clicked */
+    onAddToSelection: PropTypes.func,
+
     /** Whether we highlight selected options */
     highlightSelectedOptions: PropTypes.bool,
 
@@ -125,6 +134,9 @@ const defaultProps = {
     selectedOptions: [],
     headerMessage: '',
     canSelectMultipleOptions: false,
+    shouldShowMultipleOptionSelectorAsButton: false,
+    multipleOptionSelectorButtonText: '',
+    onAddToSelection: () => {},
     highlightSelectedOptions: false,
     hideSectionHeaders: false,
     boldStyle: false,
diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 14b369d86a4c..4546e83ef769 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -6,7 +6,7 @@ import useLocalize from '../../hooks/useLocalize';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
 
-function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
     const {translate} = useLocalize();
 
     const [selection, setSelection] = useState();
@@ -57,8 +57,9 @@ function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onB
             onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
             errorText={errorText}
             autoCapitalize="none"
-            onBlur={onBlur}
-            autoFocus={autoFocus}
+            onBlur={() => isFocused && onBlur()}
+            shouldDelayFocus={shouldDelayFocus}
+            autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             spellCheck={false}
         />
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
index e263321dea0e..78500a8f0be2 100644
--- a/src/components/RoomNameInput/index.native.js
+++ b/src/components/RoomNameInput/index.native.js
@@ -7,7 +7,7 @@ import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 import * as RoomNameInputUtils from '../../libs/RoomNameInputUtils';
 import getOperatingSystem from '../../libs/getOperatingSystem';
 
-function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
     const {translate} = useLocalize();
 
     /**
@@ -41,8 +41,8 @@ function RoomNameInput({autoFocus, disabled, errorText, forwardedRef, value, onB
             errorText={errorText}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
             keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
-            onBlur={onBlur}
-            autoFocus={autoFocus}
+            onBlur={() => isFocused && onBlur()}
+            autoFocus={isFocused && autoFocus}
             autoCapitalize="none"
             shouldDelayFocus={shouldDelayFocus}
         />
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 3eef833a1252..ab1ac37d32c8 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import {withNavigationFocusPropTypes} from '../withNavigationFocus';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -27,6 +28,8 @@ const propTypes = {
 
     /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
     shouldDelayFocus: PropTypes.bool,
+
+    ...withNavigationFocusPropTypes,
 };
 
 const defaultProps = {
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index 3c69da78b860..79cd1a6dd17d 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -36,25 +36,20 @@ const defaultProps = {
     },
 };
 
-const getIcon = (route) => {
+const getIconAndTitle = (route, translate) => {
     switch (route) {
+        case CONST.TAB.MANUAL:
+            return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')};
         case CONST.TAB.SCAN:
-            return Expensicons.Receipt;
+            return {icon: Expensicons.Receipt, title: translate('tabSelector.scan')};
+        case CONST.TAB.NEW_CHAT:
+            return {icon: Expensicons.User, title: translate('tabSelector.chat')};
+        case CONST.TAB.NEW_ROOM:
+            return {icon: Expensicons.Hashtag, title: translate('tabSelector.room')};
         case CONST.TAB.DISTANCE:
-            return Expensicons.Car;
+            return {icon: Expensicons.Car, title: translate('common.distance')};
         default:
-            return Expensicons.Pencil;
-    }
-};
-
-const getTitle = (route, translate) => {
-    switch (route) {
-        case CONST.TAB.SCAN:
-            return translate('tabSelector.scan');
-        case CONST.TAB.DISTANCE:
-            return translate('common.distance');
-        default:
-            return translate('tabSelector.manual');
+            throw new Error(`Route ${route} has no icon nor title set.`);
     }
 };
 
@@ -94,8 +89,8 @@ function TabSelector({state, navigation, onTabPress, position}) {
                 const activeOpacity = getOpacity(position, state.routes.length, index, true);
                 const inactiveOpacity = getOpacity(position, state.routes.length, index, false);
                 const backgroundColor = getBackgroundColor(position, state.routes.length, index);
-
                 const isFocused = index === state.index;
+                const {icon, title} = getIconAndTitle(route.name, translate);
 
                 const onPress = () => {
                     if (isFocused) {
@@ -119,8 +114,8 @@ function TabSelector({state, navigation, onTabPress, position}) {
                 return (
                     <TabSelectorItem
                         key={route.name}
-                        title={getTitle(route.name, translate)}
-                        icon={getIcon(route.name)}
+                        icon={icon}
+                        title={title}
                         onPress={onPress}
                         activeOpacity={activeOpacity}
                         inactiveOpacity={inactiveOpacity}
diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js
index 19453be054d4..9d122fb7ccf1 100644
--- a/src/components/TextInput/BaseTextInput.js
+++ b/src/components/TextInput/BaseTextInput.js
@@ -29,7 +29,6 @@ function BaseTextInput(props) {
     const [passwordHidden, setPasswordHidden] = useState(props.secureTextEntry);
     const [textInputWidth, setTextInputWidth] = useState(0);
     const [textInputHeight, setTextInputHeight] = useState(0);
-    const [prefixWidth, setPrefixWidth] = useState(0);
     const [height, setHeight] = useState(variables.componentSizeLarge);
     const [width, setWidth] = useState();
     const labelScale = useRef(new Animated.Value(initialActiveLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE)).current;
@@ -221,9 +220,20 @@ function BaseTextInput(props) {
         setPasswordHidden((prevPasswordHidden) => !prevPasswordHidden);
     }, []);
 
-    const storePrefixLayoutDimensions = useCallback((event) => {
-        setPrefixWidth(Math.abs(event.nativeEvent.layout.width));
-    }, []);
+    // When adding a new prefix character, adjust this method to add expected character width.
+    // This is because character width isn't known before it's rendered to the screen, and once it's rendered,
+    // it's too late to calculate it's width because the change in padding would cause a visible jump.
+    // Some characters are wider than the others when rendered, e.g. '@' vs '#'. Chosen font-family and font-size
+    // also have an impact on the width of the character, but as long as there's only one font-family and one font-size,
+    // this method will produce reliable results.
+    const getCharacterPadding = (prefix) => {
+        switch (prefix) {
+            case CONST.POLICY.ROOM_PREFIX:
+                return 10;
+            default:
+                throw new Error(`Prefix ${prefix} has no padding assigned.`);
+        }
+    };
 
     // eslint-disable-next-line react/forbid-foreign-prop-types
     const inputProps = _.omit(props, _.keys(baseTextInputPropTypes.propTypes));
@@ -295,7 +305,6 @@ function BaseTextInput(props) {
                                         pointerEvents="none"
                                         selectable={false}
                                         style={[styles.textInputPrefix, !hasLabel && styles.pv0]}
-                                        onLayout={storePrefixLayoutDimensions}
                                     >
                                         {props.prefixCharacter}
                                     </Text>
@@ -322,7 +331,7 @@ function BaseTextInput(props) {
                                     styles.w100,
                                     props.inputStyle,
                                     (!hasLabel || isMultiline) && styles.pv0,
-                                    props.prefixCharacter && StyleUtils.getPaddingLeft(prefixWidth + styles.pl1.paddingLeft),
+                                    props.prefixCharacter && StyleUtils.getPaddingLeft(getCharacterPadding(props.prefixCharacter) + styles.pl1.paddingLeft),
                                     props.secureTextEntry && styles.secureInput,
 
                                     // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.js
index 8d7d000ad72d..84109217b18f 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.js
@@ -32,7 +32,7 @@ function WalletStatementModal({statementPageURL, session}) {
         }
 
         if (event.data.type === 'STATEMENT_NAVIGATE' && event.data.url) {
-            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
+            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
             const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => event.data.url.includes(iouRoute));
             if (navigateToIOURoute) {
                 Navigation.navigate(navigateToIOURoute);
diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.js
index 86737da158c8..590431274da5 100644
--- a/src/components/WalletStatementModal/index.native.js
+++ b/src/components/WalletStatementModal/index.native.js
@@ -37,7 +37,7 @@ class WalletStatementModal extends React.Component {
         }
 
         if (type === 'STATEMENT_NAVIGATE' && url) {
-            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND, ROUTES.IOU_BILL];
+            const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
             const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => url.includes(iouRoute));
             if (navigateToIOURoute) {
                 this.webview.stopLoading();
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 03adaa1e66b1..e47ae06b108f 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -460,13 +460,10 @@ export default {
         },
     },
     sidebarScreen: {
-        fabAction: 'New chat',
-        newChat: 'New chat',
-        newGroup: 'New group',
-        newRoom: 'New room',
         buttonSearch: 'Search',
         buttonMySettings: 'My settings',
-        fabNewChat: 'New chat (Floating action)',
+        fabNewChat: 'Send message',
+        fabNewChatExplained: 'Send message (Floating action)',
         chatPinned: 'Chat pinned',
         draftedMessage: 'Drafted message',
         listOfChatMessages: 'List of chat messages',
@@ -474,6 +471,8 @@ export default {
         saveTheWorld: 'Save the world',
     },
     tabSelector: {
+        chat: 'Chat',
+        room: 'Room',
         manual: 'Manual',
         scan: 'Scan',
     },
@@ -500,9 +499,10 @@ export default {
         approved: 'Approved',
         cash: 'Cash',
         split: 'Split',
+        addToSplit: 'Add to split',
+        splitBill: 'Split bill',
         request: 'Request',
         participants: 'Participants',
-        splitBill: 'Split bill',
         requestMoney: 'Request money',
         sendMoney: 'Send money',
         pay: 'Pay',
@@ -988,7 +988,9 @@ export default {
         localTime: 'Local time',
     },
     newChatPage: {
+        createChat: 'Create chat',
         createGroup: 'Create group',
+        addToGroup: 'Add to group',
     },
     yearPickerPage: {
         year: 'Year',
@@ -1538,7 +1540,7 @@ export default {
             openShortcutDialog: 'Opens the keyboard shortcuts dialog',
             escape: 'Escape dialogs',
             search: 'Open search dialog',
-            newGroup: 'New group screen',
+            newChat: 'New chat screen',
             copy: 'Copy comment',
         },
     },
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 7315c42cebab..2b345daded2f 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -452,13 +452,10 @@ export default {
         },
     },
     sidebarScreen: {
-        fabAction: 'Nuevo chat',
-        newChat: 'Nuevo chat',
-        newGroup: 'Nuevo grupo',
-        newRoom: 'Nueva sala de chat',
         buttonSearch: 'Buscar',
         buttonMySettings: 'Mi configuración',
-        fabNewChat: 'Nuevo chat',
+        fabNewChat: 'Enviar mensaje',
+        fabNewChatExplained: 'Enviar mensaje',
         chatPinned: 'Chat fijado',
         draftedMessage: 'Mensaje borrador',
         listOfChatMessages: 'Lista de mensajes del chat',
@@ -466,6 +463,8 @@ export default {
         saveTheWorld: 'Salvar el mundo',
     },
     tabSelector: {
+        chat: 'Chat',
+        room: 'Sala',
         manual: 'Manual',
         scan: 'Escanear',
     },
@@ -492,9 +491,10 @@ export default {
         approved: 'Aprobado',
         cash: 'Efectivo',
         split: 'Dividir',
+        addToSplit: 'Añadir para dividir',
+        splitBill: 'Dividir factura',
         request: 'Solicitar',
         participants: 'Participantes',
-        splitBill: 'Dividir factura',
         requestMoney: 'Pedir dinero',
         sendMoney: 'Enviar dinero',
         pay: 'Pagar',
@@ -986,7 +986,9 @@ export default {
         localTime: 'Hora local',
     },
     newChatPage: {
+        createChat: 'Crear chat',
         createGroup: 'Crear grupo',
+        addToGroup: 'Añadir al grupo',
     },
     yearPickerPage: {
         year: 'Año',
@@ -1560,7 +1562,7 @@ export default {
             openShortcutDialog: 'Abre el cuadro de diálogo de métodos abreviados de teclado',
             escape: 'Diálogos de escape',
             search: 'Abrir diálogo de búsqueda',
-            newGroup: 'Nueva pantalla de grupo',
+            newChat: 'Nueva pantalla de chat',
             copy: 'Copiar comentario',
         },
     },
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 37b7087b6ad4..e0197805f09c 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -159,7 +159,7 @@ class AuthScreens extends React.Component {
         Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
 
         const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH;
-        const groupShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_GROUP;
+        const chatShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_CHAT;
 
         // Listen for the key K being pressed so that focus can be given to
         // the chat switcher, or new group chat
@@ -178,18 +178,18 @@ class AuthScreens extends React.Component {
             searchShortcutConfig.modifiers,
             true,
         );
-        this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(
-            groupShortcutConfig.shortcutKey,
+        this.unsubscribeChatShortcut = KeyboardShortcut.subscribe(
+            chatShortcutConfig.shortcutKey,
             () => {
                 Modal.close(() => {
-                    if (Navigation.isActiveRoute(ROUTES.NEW_GROUP)) {
+                    if (Navigation.isActiveRoute(ROUTES.NEW_CHAT)) {
                         return;
                     }
-                    Navigation.navigate(ROUTES.NEW_GROUP);
+                    Navigation.navigate(ROUTES.NEW_CHAT);
                 });
             },
-            groupShortcutConfig.descriptionKey,
-            groupShortcutConfig.modifiers,
+            chatShortcutConfig.descriptionKey,
+            chatShortcutConfig.modifiers,
             true,
         );
     }
@@ -202,8 +202,8 @@ class AuthScreens extends React.Component {
         if (this.unsubscribeSearchShortcut) {
             this.unsubscribeSearchShortcut();
         }
-        if (this.unsubscribeGroupShortcut) {
-            this.unsubscribeGroupShortcut();
+        if (this.unsubscribeChatShortcut) {
+            this.unsubscribeChatShortcut();
         }
         Session.cleanupSession();
         clearInterval(this.interval);
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 6b83fe2dcbb8..ea9ef0840812 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -273,21 +273,11 @@ const SearchModalStackNavigator = createModalStackNavigator([
     },
 ]);
 
-const NewGroupModalStackNavigator = createModalStackNavigator([
-    {
-        getComponent: () => {
-            const NewGroupPage = require('../../../pages/NewGroupPage').default;
-            return NewGroupPage;
-        },
-        name: 'NewGroup_Root',
-    },
-]);
-
 const NewChatModalStackNavigator = createModalStackNavigator([
     {
         getComponent: () => {
-            const NewChatPage = require('../../../pages/NewChatPage').default;
-            return NewChatPage;
+            const NewChatSelectorPage = require('../../../pages/NewChatSelectorPage').default;
+            return NewChatSelectorPage;
         },
         name: 'NewChat_Root',
     },
@@ -679,13 +669,6 @@ const SettingsModalStackNavigator = createModalStackNavigator([
         },
         name: 'Workspace_Invite_Message',
     },
-    {
-        getComponent: () => {
-            const WorkspaceNewRoomPage = require('../../../pages/workspace/WorkspaceNewRoomPage').default;
-            return WorkspaceNewRoomPage;
-        },
-        name: 'Workspace_NewRoom',
-    },
     {
         getComponent: () => {
             const ReimbursementAccountPage = require('../../../pages/ReimbursementAccount/ReimbursementAccountPage').default;
@@ -798,7 +781,6 @@ export {
     ReportWelcomeMessageModalStackNavigator,
     ReportParticipantsModalStackNavigator,
     SearchModalStackNavigator,
-    NewGroupModalStackNavigator,
     NewChatModalStackNavigator,
     NewTaskModalStackNavigator,
     SettingsModalStackNavigator,
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index f6ea89ecd088..1340c4bb8e62 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -32,14 +32,6 @@ function RightModalNavigator(props) {
                         name="NewChat"
                         component={ModalStackNavigators.NewChatModalStackNavigator}
                     />
-                    <Stack.Screen
-                        name="NewGroup"
-                        component={ModalStackNavigators.NewGroupModalStackNavigator}
-                        options={{
-                            // Disable animation for this screen because it causes an animation glitch when using shortcuts
-                            animationEnabled: false,
-                        }}
-                    />
                     <Stack.Screen
                         name="Search"
                         component={ModalStackNavigators.SearchModalStackNavigator}
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index a15daf992836..3311fc81bc82 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -204,9 +204,6 @@ export default {
                             Workspace_Invite_Message: {
                                 path: ROUTES.WORKSPACE_INVITE_MESSAGE,
                             },
-                            Workspace_NewRoom: {
-                                path: ROUTES.WORKSPACE_NEW_ROOM,
-                            },
                             ReimbursementAccount: {
                                 path: ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN,
                                 exact: true,
@@ -243,14 +240,22 @@ export default {
                             Report_WelcomeMessage_Root: ROUTES.REPORT_WELCOME_MESSAGE,
                         },
                     },
-                    NewGroup: {
-                        screens: {
-                            NewGroup_Root: ROUTES.NEW_GROUP,
-                        },
-                    },
                     NewChat: {
                         screens: {
-                            NewChat_Root: ROUTES.NEW_CHAT,
+                            NewChat_Root: {
+                                path: ROUTES.NEW,
+                                exact: true,
+                                screens: {
+                                    chat: {
+                                        path: ROUTES.NEW_CHAT,
+                                        exact: true,
+                                    },
+                                    room: {
+                                        path: ROUTES.NEW_ROOM,
+                                        exact: true,
+                                    },
+                                },
+                            },
                         },
                     },
                     NewTask: {
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 4a753c8632bd..e72cb9a3f79b 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -5,24 +5,23 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import OptionsSelector from '../components/OptionsSelector';
 import * as OptionsListUtils from '../libs/OptionsListUtils';
+import Permissions from '../libs/Permissions';
 import * as ReportUtils from '../libs/ReportUtils';
 import ONYXKEYS from '../ONYXKEYS';
 import styles from '../styles/styles';
 import * as Report from '../libs/actions/Report';
 import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
-import HeaderWithBackButton from '../components/HeaderWithBackButton';
 import ScreenWrapper from '../components/ScreenWrapper';
+import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import * as Browser from '../libs/Browser';
 import compose from '../libs/compose';
 import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
+import variables from '../styles/variables';
 
 const propTypes = {
-    /** Whether screen is used to create group chat */
-    isGroupChat: PropTypes.bool,
-
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -38,7 +37,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    isGroupChat: false,
     betas: [],
     personalDetails: {},
     reports: {},
@@ -46,7 +44,7 @@ const defaultProps = {
 
 const excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE);
 
-function NewChatPage(props) {
+function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) {
     const [searchTerm, setSearchTerm] = useState('');
     const [filteredRecentReports, setFilteredRecentReports] = useState([]);
     const [filteredPersonalDetails, setFilteredPersonalDetails] = useState([]);
@@ -60,28 +58,26 @@ function NewChatPage(props) {
         searchTerm,
         maxParticipantsReached,
     );
-    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(props.personalDetails);
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
 
     const sections = useMemo(() => {
         const sectionsList = [];
         let indexOffset = 0;
 
-        if (props.isGroupChat) {
-            sectionsList.push({
-                title: undefined,
-                data: selectedOptions,
-                shouldShow: !_.isEmpty(selectedOptions),
-                indexOffset,
-            });
-            indexOffset += selectedOptions.length;
+        sectionsList.push({
+            title: undefined,
+            data: selectedOptions,
+            shouldShow: !_.isEmpty(selectedOptions),
+            indexOffset,
+        });
+        indexOffset += selectedOptions.length;
 
-            if (maxParticipantsReached) {
-                return sectionsList;
-            }
+        if (maxParticipantsReached) {
+            return sectionsList;
         }
 
         sectionsList.push({
-            title: props.translate('common.recents'),
+            title: translate('common.recents'),
             data: filteredRecentReports,
             shouldShow: !_.isEmpty(filteredRecentReports),
             indexOffset,
@@ -89,7 +85,7 @@ function NewChatPage(props) {
         indexOffset += filteredRecentReports.length;
 
         sectionsList.push({
-            title: props.translate('common.contacts'),
+            title: translate('common.contacts'),
             data: filteredPersonalDetails,
             shouldShow: !_.isEmpty(filteredPersonalDetails),
             indexOffset,
@@ -106,8 +102,7 @@ function NewChatPage(props) {
         }
 
         return sectionsList;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, props.isGroupChat, selectedOptions]);
+    }, [translate, filteredPersonalDetails, filteredRecentReports, filteredUserToInvite, maxParticipantsReached, selectedOptions]);
 
     /**
      * Removes a selected option from list if already selected. If not already selected add this option to the list.
@@ -124,18 +119,15 @@ function NewChatPage(props) {
             newSelectedOptions = [...selectedOptions, option];
         }
 
-        const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
-            props.reports,
-            props.personalDetails,
-            props.betas,
-            searchTerm,
-            newSelectedOptions,
-            excludedGroupEmails,
-        );
+        const {
+            recentReports,
+            personalDetails: newChatPersonalDetails,
+            userToInvite,
+        } = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, newSelectedOptions, excludedGroupEmails);
 
         setSelectedOptions(newSelectedOptions);
         setFilteredRecentReports(recentReports);
-        setFilteredPersonalDetails(personalDetails);
+        setFilteredPersonalDetails(newChatPersonalDetails);
         setFilteredUserToInvite(userToInvite);
     }
 
@@ -154,9 +146,6 @@ function NewChatPage(props) {
      * or navigates to the existing chat if one with those participants already exists.
      */
     const createGroup = () => {
-        if (!props.isGroupChat) {
-            return;
-        }
         const logins = _.pluck(selectedOptions, 'login');
         if (logins.length < 1) {
             return;
@@ -165,49 +154,58 @@ function NewChatPage(props) {
     };
 
     useEffect(() => {
-        const {recentReports, personalDetails, userToInvite} = OptionsListUtils.getNewChatOptions(
-            props.reports,
-            props.personalDetails,
-            props.betas,
-            searchTerm,
-            selectedOptions,
-            props.isGroupChat ? excludedGroupEmails : [],
-        );
+        const {
+            recentReports,
+            personalDetails: newChatPersonalDetails,
+            userToInvite,
+        } = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, selectedOptions, isGroupChat ? excludedGroupEmails : []);
         setFilteredRecentReports(recentReports);
-        setFilteredPersonalDetails(personalDetails);
+        setFilteredPersonalDetails(newChatPersonalDetails);
         setFilteredUserToInvite(userToInvite);
-        // props.betas and props.isGroupChat are not added as dependencies since they don't change during the component lifecycle
+        // props.betas is not added as dependency since it doesn't change during the component lifecycle
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.reports, props.personalDetails, searchTerm]);
+    }, [reports, personalDetails, searchTerm]);
 
     return (
         <ScreenWrapper
+            shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
+            includePaddingTop={false}
             shouldEnableMaxHeight
         >
-            {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
-                <>
-                    <HeaderWithBackButton title={props.isGroupChat ? props.translate('sidebarScreen.newGroup') : props.translate('sidebarScreen.newChat')} />
+            {({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 + (Permissions.canUsePolicyRooms(betas) ? variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding : 0)
+                    }
+                >
                     <View style={[styles.flex1, styles.w100, styles.pRelative, selectedOptions.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
                         <OptionsSelector
-                            canSelectMultipleOptions={props.isGroupChat}
+                            canSelectMultipleOptions
+                            shouldShowMultipleOptionSelectorAsButton
+                            multipleOptionSelectorButtonText={translate('newChatPage.addToGroup')}
+                            onAddToSelection={(option) => toggleOption(option)}
                             sections={sections}
                             selectedOptions={selectedOptions}
                             value={searchTerm}
-                            onSelectRow={(option) => (props.isGroupChat ? toggleOption(option) : createChat(option))}
+                            onSelectRow={(option) => createChat(option)}
                             onChangeText={setSearchTerm}
                             headerMessage={headerMessage}
                             boldStyle
-                            shouldFocusOnSelectRow={props.isGroupChat && !Browser.isMobile()}
-                            shouldShowConfirmButton={props.isGroupChat}
-                            shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady}
-                            confirmButtonText={props.translate('newChatPage.createGroup')}
+                            shouldFocusOnSelectRow={!Browser.isMobile()}
+                            shouldShowOptions={isOptionsDataReady}
+                            shouldShowConfirmButton
+                            confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
                             onConfirmSelection={createGroup}
-                            textInputLabel={props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                         />
                     </View>
-                </>
+                </KeyboardAvoidingView>
             )}
         </ScreenWrapper>
     );
diff --git a/src/pages/NewChatSelectorPage.js b/src/pages/NewChatSelectorPage.js
new file mode 100755
index 000000000000..89a3fd1adc72
--- /dev/null
+++ b/src/pages/NewChatSelectorPage.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import OnyxTabNavigator, {TopTab} from '../libs/Navigation/OnyxTabNavigator';
+import TabSelector from '../components/TabSelector/TabSelector';
+import Navigation from '../libs/Navigation/Navigation';
+import Permissions from '../libs/Permissions';
+import NewChatPage from './NewChatPage';
+import WorkspaceNewRoomPage from './workspace/WorkspaceNewRoomPage';
+import CONST from '../CONST';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
+import HeaderWithBackButton from '../components/HeaderWithBackButton';
+import ScreenWrapper from '../components/ScreenWrapper';
+import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
+import compose from '../libs/compose';
+
+const propTypes = {
+    ...windowDimensionsPropTypes,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    betas: [],
+    personalDetails: {},
+    reports: {},
+};
+
+function NewChatSelectorPage(props) {
+    return (
+        <ScreenWrapper
+            shouldEnableKeyboardAvoidingView={false}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={props.translate('sidebarScreen.fabNewChat')}
+                onBackButtonPress={Navigation.dismissModal}
+            />
+            {Permissions.canUsePolicyRooms(props.betas) ? (
+                <OnyxTabNavigator
+                    id={CONST.TAB.NEW_CHAT_TAB_ID}
+                    tabBar={({state, navigation, position}) => (
+                        <TabSelector
+                            state={state}
+                            navigation={navigation}
+                            position={position}
+                        />
+                    )}
+                >
+                    <TopTab.Screen
+                        name={CONST.TAB.NEW_CHAT}
+                        component={NewChatPage}
+                    />
+                    <TopTab.Screen
+                        name={CONST.TAB.NEW_ROOM}
+                        component={WorkspaceNewRoomPage}
+                    />
+                </OnyxTabNavigator>
+            ) : (
+                <NewChatPage />
+            )}
+        </ScreenWrapper>
+    );
+}
+
+NewChatSelectorPage.propTypes = propTypes;
+NewChatSelectorPage.defaultProps = defaultProps;
+NewChatSelectorPage.displayName = 'NewChatPage';
+
+export default compose(withLocalize, withWindowDimensions)(NewChatSelectorPage);
diff --git a/src/pages/NewGroupPage.js b/src/pages/NewGroupPage.js
deleted file mode 100755
index 63f90016e63e..000000000000
--- a/src/pages/NewGroupPage.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import NewChatPage from './NewChatPage';
-
-function NewGroupPage(props) {
-    return (
-        <NewChatPage
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            isGroupChat
-        />
-    );
-}
-
-NewGroupPage.displayName = 'NewGroupPage';
-
-export default NewGroupPage;
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index dd42ed80c3d4..67d4ebb57876 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -170,6 +170,7 @@ function SearchPage({betas, personalDetails, reports}) {
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                             onLayout={searchRendered}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                            autoFocus
                         />
                     </View>
                 </>
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index cb77a832705c..418b7c89aa91 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -12,7 +12,6 @@ import NAVIGATORS from '../../../../NAVIGATORS';
 import SCREENS from '../../../../SCREENS';
 import Permissions from '../../../../libs/Permissions';
 import * as Policy from '../../../../libs/actions/Policy';
-import * as PolicyUtils from '../../../../libs/PolicyUtils';
 import PopoverMenu from '../../../../components/PopoverMenu';
 import CONST from '../../../../CONST';
 import FloatingActionButton from '../../../../components/FloatingActionButton';
@@ -180,8 +179,6 @@ function FloatingActionButtonAndPopover(props) {
         },
     }));
 
-    const workspaces = PolicyUtils.getActivePolicies(props.allPolicies);
-
     return (
         <View>
             <PopoverMenu
@@ -193,23 +190,9 @@ function FloatingActionButtonAndPopover(props) {
                 menuItems={[
                     {
                         icon: Expensicons.ChatBubble,
-                        text: props.translate('sidebarScreen.newChat'),
-                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.NEW_CHAT)),
-                    },
-                    {
-                        icon: Expensicons.Users,
-                        text: props.translate('sidebarScreen.newGroup'),
-                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.NEW_GROUP)),
+                        text: props.translate('sidebarScreen.fabNewChat'),
+                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.NEW)),
                     },
-                    ...(Permissions.canUsePolicyRooms(props.betas) && workspaces.length
-                        ? [
-                              {
-                                  icon: Expensicons.Hashtag,
-                                  text: props.translate('sidebarScreen.newRoom'),
-                                  onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.WORKSPACE_NEW_ROOM)),
-                              },
-                          ]
-                        : []),
                     ...(Permissions.canUseIOUSend(props.betas)
                         ? [
                               {
@@ -225,9 +208,9 @@ function FloatingActionButtonAndPopover(props) {
                         onSelected: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)),
                     },
                     {
-                        icon: Expensicons.Receipt,
-                        text: props.translate('iou.splitBill'),
-                        onSelected: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.MONEY_REQUEST_TYPE.SPLIT)),
+                        icon: Expensicons.Heart,
+                        text: props.translate('sidebarScreen.saveTheWorld'),
+                        onSelected: () => interceptAnonymousUser(() => Navigation.navigate(ROUTES.TEACHERS_UNITE)),
                     },
                     ...(Permissions.canUseTasks(props.betas)
                         ? [
@@ -255,7 +238,7 @@ function FloatingActionButtonAndPopover(props) {
                 anchorRef={anchorRef}
             />
             <FloatingActionButton
-                accessibilityLabel={props.translate('sidebarScreen.fabNewChat')}
+                accessibilityLabel={props.translate('sidebarScreen.fabNewChatExplained')}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                 isActive={isCreateMenuActive}
                 ref={anchorRef}
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index 1c653271ea7d..38a5b9c82c07 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -258,12 +258,24 @@ function MoneyRequestConfirmPage(props) {
         [props.iou.amount, props.iou.comment, participants, props.iou.currency, props.currentUserPersonalDetails.accountID, props.report],
     );
 
+    const headerTitle = () => {
+        if (isDistanceRequest) {
+            return props.translate('common.distance');
+        }
+
+        if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT) {
+            return props.translate('iou.split');
+        }
+
+        return props.translate('tabSelector.manual');
+    };
+
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={[styles.flex1, safeAreaPaddingBottomStyle]}>
                     <HeaderWithBackButton
-                        title={isDistanceRequest ? props.translate('common.distance') : props.translate('iou.cash')}
+                        title={headerTitle()}
                         onBackButtonPress={navigateBack}
                     />
                     {/*
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 84ea24f4da6b..1d9f12a9cdbb 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -1,12 +1,12 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import _ from 'underscore';
 import CONST from '../../../../CONST';
 import ONYXKEYS from '../../../../ONYXKEYS';
 import ROUTES from '../../../../ROUTES';
-import MoneyRequestParticipantsSplitSelector from './MoneyRequestParticipantsSplitSelector';
 import MoneyRequestParticipantsSelector from './MoneyRequestParticipantsSelector';
 import styles from '../../../../styles/styles';
 import ScreenWrapper from '../../../../components/ScreenWrapper';
@@ -42,31 +42,29 @@ const defaultProps = {
     iou: iouDefaultProps,
 };
 
-function MoneyRequestParticipantsPage(props) {
+function MoneyRequestParticipantsPage({iou, selectedTab, route}) {
     const {translate} = useLocalize();
-    const prevMoneyRequestId = useRef(props.iou.id);
-    const iouType = useRef(lodashGet(props.route, 'params.iouType', ''));
-    const reportID = useRef(lodashGet(props.route, 'params.reportID', ''));
+    const prevMoneyRequestId = useRef(iou.id);
     const isNewReportIDSelectedLocally = useRef(false);
     const optionsSelectorRef = useRef();
-    const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType.current, props.selectedTab);
-
-    const splitNavigateToNextStep = () => {
-        Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, reportID.current));
-    };
-
-    const moneyRequestNavigateToNextStep = (option) => {
-        isNewReportIDSelectedLocally.current = true;
-
-        if (!option.reportID) {
-            IOU.setMoneyRequestId(iouType.current);
-            Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, reportID.current));
+    const iouType = useRef(lodashGet(route, 'params.iouType', ''));
+    const reportID = useRef(lodashGet(route, 'params.reportID', ''));
+    const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType.current, selectedTab);
+    const isSplitRequest = iou.id === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT;
+    const [headerTitle, setHeaderTitle] = useState();
 
+    useEffect(() => {
+        if (isDistanceRequest) {
+            setHeaderTitle(translate('common.distance'));
             return;
         }
 
-        IOU.setMoneyRequestId(`${iouType.current}${option.reportID}`);
-        Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(iouType.current, option.reportID));
+        setHeaderTitle(_.isEmpty(iou.participants) ? translate('tabSelector.manual') : translate('iou.split'));
+    }, [iou.participants, isDistanceRequest, translate]);
+
+    const navigateToNextStep = (moneyRequestType) => {
+        IOU.setMoneyRequestId(moneyRequestType);
+        Navigation.navigate(ROUTES.getMoneyRequestConfirmationRoute(moneyRequestType, reportID.current));
     };
 
     const navigateBack = (forceFallback = false) => {
@@ -75,9 +73,9 @@ function MoneyRequestParticipantsPage(props) {
 
     useEffect(() => {
         // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (prevMoneyRequestId.current !== props.iou.id) {
+        if (prevMoneyRequestId.current !== iou.id) {
             // The ID is cleared on completing a request. In that case, we will do nothing
-            if (!isNewReportIDSelectedLocally.current && !isDistanceRequest && props.iou.id) {
+            if (iou.id && !isDistanceRequest && !isSplitRequest && !isNewReportIDSelectedLocally.current) {
                 navigateBack(true);
             }
             return;
@@ -85,18 +83,18 @@ function MoneyRequestParticipantsPage(props) {
 
         // Reset the money request Onyx if the ID in Onyx does not match the ID from params
         const moneyRequestId = `${iouType.current}${reportID.current}`;
-        const shouldReset = props.iou.id !== moneyRequestId && !isNewReportIDSelectedLocally.current;
+        const shouldReset = iou.id !== moneyRequestId && !isNewReportIDSelectedLocally.current;
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
-        if (!isDistanceRequest && ((props.iou.amount === 0 && !props.iou.receiptPath) || shouldReset)) {
+        if (!isDistanceRequest && ((iou.amount === 0 && !iou.receiptPath) || shouldReset)) {
             navigateBack(true);
         }
 
         return () => {
-            prevMoneyRequestId.current = props.iou.id;
+            prevMoneyRequestId.current = iou.id;
         };
-    }, [props.iou.amount, props.iou.id, props.iou.receiptPath, isDistanceRequest]);
+    }, [iou.amount, iou.id, iou.receiptPath, isDistanceRequest, isSplitRequest]);
 
     return (
         <ScreenWrapper
@@ -107,26 +105,19 @@ function MoneyRequestParticipantsPage(props) {
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={styles.flex1}>
                     <HeaderWithBackButton
-                        title={isDistanceRequest ? translate('common.distance') : translate('iou.cash')}
+                        title={headerTitle}
                         onBackButtonPress={navigateBack}
                     />
-                    {iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT ? (
-                        <MoneyRequestParticipantsSplitSelector
-                            onStepComplete={splitNavigateToNextStep}
-                            participants={props.iou.participants}
-                            onAddParticipants={IOU.setMoneyRequestParticipants}
-                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                        />
-                    ) : (
-                        <MoneyRequestParticipantsSelector
-                            ref={(el) => (optionsSelectorRef.current = el)}
-                            onStepComplete={moneyRequestNavigateToNextStep}
-                            onAddParticipants={IOU.setMoneyRequestParticipants}
-                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                            iouType={iouType.current}
-                            isDistanceRequest={isDistanceRequest}
-                        />
-                    )}
+                    <MoneyRequestParticipantsSelector
+                        ref={(el) => (optionsSelectorRef.current = el)}
+                        participants={iou.participants}
+                        onAddParticipants={IOU.setMoneyRequestParticipants}
+                        navigateToRequest={() => navigateToNextStep(CONST.IOU.MONEY_REQUEST_TYPE.REQUEST)}
+                        navigateToSplit={() => navigateToNextStep(CONST.IOU.MONEY_REQUEST_TYPE.SPLIT)}
+                        safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                        iouType={iouType.current}
+                        isDistanceRequest={isDistanceRequest}
+                    />
                 </View>
             )}
         </ScreenWrapper>
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index e12672650a54..9ff787ebe21b 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -1,12 +1,15 @@
-import React, {Component} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import styles from '../../../../styles/styles';
+import OptionsSelector from '../../../../components/OptionsSelector';
 import * as OptionsListUtils from '../../../../libs/OptionsListUtils';
 import * as ReportUtils from '../../../../libs/ReportUtils';
-import OptionsSelector from '../../../../components/OptionsSelector';
-import ONYXKEYS from '../../../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import * as Browser from '../../../../libs/Browser';
 import compose from '../../../../libs/compose';
 import CONST from '../../../../CONST';
 import personalDetailsPropType from '../../../personalDetailsPropType';
@@ -17,15 +20,29 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
+    /** Callback to request parent modal to go to next step, which should be split */
+    navigateToRequest: PropTypes.func.isRequired,
+
+    /** Callback to request parent modal to go to next step, which should be split */
+    navigateToSplit: PropTypes.func.isRequired,
+
     /** A ref to forward to options selector's text input */
     forwardedRef: refPropTypes,
 
-    /** Callback to inform parent modal of success */
-    onStepComplete: PropTypes.func.isRequired,
-
     /** Callback to add participants in MoneyRequestModal */
     onAddParticipants: PropTypes.func.isRequired,
 
+    /** Selected participants from MoneyRequestModal with login */
+    participants: PropTypes.arrayOf(
+        PropTypes.shape({
+            accountID: PropTypes.number,
+            login: PropTypes.string,
+            isPolicyExpenseChat: PropTypes.bool,
+            isOwnPolicyExpenseChat: PropTypes.bool,
+            selected: PropTypes.bool,
+        }),
+    ),
+
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(personalDetailsPropType),
 
@@ -45,6 +62,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    participants: [],
     forwardedRef: undefined,
     safeAreaPaddingBottomStyle: {},
     personalDetails: {},
@@ -53,137 +71,193 @@ const defaultProps = {
     isDistanceRequest: false,
 };
 
-class MoneyRequestParticipantsSelector extends Component {
-    constructor(props) {
-        super(props);
+function MoneyRequestParticipantsSelector({
+    forwardedRef,
+    betas,
+    participants,
+    personalDetails,
+    reports,
+    translate,
+    navigateToRequest,
+    navigateToSplit,
+    onAddParticipants,
+    safeAreaPaddingBottomStyle,
+    iouType,
+    isDistanceRequest,
+}) {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [newChatOptions, setNewChatOptions] = useState({
+        recentReports: [],
+        personalDetails: [],
+        userToInvite: null,
+    });
 
-        this.addSingleParticipant = this.addSingleParticipant.bind(this);
-        this.updateOptionsWithSearchTerm = this.updateOptionsWithSearchTerm.bind(this);
-
-        const {recentReports, personalDetails, userToInvite} = this.getRequestOptions();
-
-        this.state = {
-            recentReports,
-            personalDetails,
-            userToInvite,
-            searchTerm: '',
-        };
-    }
-
-    componentDidUpdate(prevProps) {
-        if (_.isEqual(prevProps.reports, this.props.reports) && _.isEqual(prevProps.personalDetails, this.props.personalDetails)) {
-            return;
-        }
-        this.updateOptionsWithSearchTerm(this.state.searchTerm);
-    }
-
-    /**
-     * @param {string} searchTerm
-     * @returns {Object}
-     */
-    getRequestOptions(searchTerm = '') {
-        return OptionsListUtils.getNewChatOptions(
-            this.props.reports,
-            this.props.personalDetails,
-            this.props.betas,
-            searchTerm,
-            [],
-            CONST.EXPENSIFY_EMAILS,
-
-            // If we are using this component in the "Request money" flow then we pass the includeOwnedWorkspaceChats argument so that the current user
-            // sees the option to request money from their admin on their own Workspace Chat.
-            this.props.iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
-
-            // We don't want to include any P2P options like personal details or reports that are not workspace chats for certain features.
-            !this.props.isDistanceRequest,
-        );
-    }
+    const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
 
     /**
      * Returns the sections needed for the OptionsSelector
      *
      * @returns {Array}
      */
-    getSections() {
-        const sections = [];
+    const sections = useMemo(() => {
+        const newSections = [];
         let indexOffset = 0;
 
-        sections.push({
-            title: this.props.translate('common.recents'),
-            data: this.state.recentReports,
-            shouldShow: !_.isEmpty(this.state.recentReports),
+        newSections.push({
+            title: undefined,
+            data: OptionsListUtils.getParticipantsOptions(participants, personalDetails),
+            shouldShow: true,
             indexOffset,
         });
-        indexOffset += this.state.recentReports.length;
+        indexOffset += participants.length;
+
+        if (maxParticipantsReached) {
+            return newSections;
+        }
 
-        sections.push({
-            title: this.props.translate('common.contacts'),
-            data: this.state.personalDetails,
-            shouldShow: !_.isEmpty(this.state.personalDetails),
+        newSections.push({
+            title: translate('common.recents'),
+            data: newChatOptions.recentReports,
+            shouldShow: !_.isEmpty(newChatOptions.recentReports),
             indexOffset,
         });
-        indexOffset += this.state.personalDetails.length;
+        indexOffset += newChatOptions.recentReports.length;
 
-        if (this.state.userToInvite && !OptionsListUtils.isCurrentUser(this.state.userToInvite)) {
-            sections.push({
+        newSections.push({
+            title: translate('common.contacts'),
+            data: newChatOptions.personalDetails,
+            shouldShow: !_.isEmpty(newChatOptions.personalDetails),
+            indexOffset,
+        });
+        indexOffset += newChatOptions.personalDetails.length;
+
+        if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
+            newSections.push({
                 undefined,
-                data: [this.state.userToInvite],
+                data: [newChatOptions.userToInvite],
                 shouldShow: true,
                 indexOffset,
             });
         }
 
-        return sections;
-    }
-
-    updateOptionsWithSearchTerm(searchTerm = '') {
-        const {recentReports, personalDetails, userToInvite} = this.getRequestOptions(searchTerm);
-        this.setState({
-            searchTerm,
-            recentReports,
-            userToInvite,
-            personalDetails,
-        });
-    }
+        return newSections;
+    }, [maxParticipantsReached, newChatOptions, participants, personalDetails, translate]);
 
     /**
      * Adds a single participant to the request
      *
      * @param {Object} option
      */
-    addSingleParticipant(option) {
-        this.props.onAddParticipants([{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true}]);
-        this.props.onStepComplete(option);
-    }
-
-    render() {
-        const headerMessage = OptionsListUtils.getHeaderMessage(
-            this.state.personalDetails.length + this.state.recentReports.length !== 0,
-            Boolean(this.state.userToInvite),
-            this.state.searchTerm,
+    const addSingleParticipant = (option) => {
+        onAddParticipants([{accountID: option.accountID, login: option.login, isPolicyExpenseChat: option.isPolicyExpenseChat, reportID: option.reportID, selected: true}]);
+        navigateToRequest();
+    };
+
+    /**
+     * Removes a selected option from list if already selected. If not already selected add this option to the list.
+     * @param {Object} option
+     */
+    const addParticipantToSelection = useCallback(
+        (option) => {
+            const isOptionInList = _.some(participants, (selectedOption) => selectedOption.accountID === option.accountID);
+
+            let newSelectedOptions;
+
+            if (isOptionInList) {
+                newSelectedOptions = _.reject(participants, (selectedOption) => selectedOption.accountID === option.accountID);
+            } else {
+                newSelectedOptions = [...participants, {accountID: option.accountID, login: option.login, selected: true}];
+            }
+
+            onAddParticipants(newSelectedOptions);
+
+            const chatOptions = OptionsListUtils.getNewChatOptions(
+                reports,
+                personalDetails,
+                betas,
+                isOptionInList ? searchTerm : '',
+                newSelectedOptions,
+                CONST.EXPENSIFY_EMAILS,
+
+                // If we are using this component in the "Request money" flow then we pass the includeOwnedWorkspaceChats argument so that the current user
+                // sees the option to request money from their admin on their own Workspace Chat.
+                iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
+
+                // We don't want to include any P2P options like personal details or reports that are not workspace chats for certain features.
+                !isDistanceRequest,
+            );
+
+            setNewChatOptions({
+                recentReports: chatOptions.recentReports,
+                personalDetails: chatOptions.personalDetails,
+                userToInvite: chatOptions.userToInvite,
+            });
+        },
+        [participants, onAddParticipants, reports, personalDetails, betas, searchTerm, iouType, isDistanceRequest],
+    );
+
+    const headerMessage = OptionsListUtils.getHeaderMessage(
+        newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
+        Boolean(newChatOptions.userToInvite),
+        searchTerm,
+        maxParticipantsReached,
+    );
+    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
+
+    useEffect(() => {
+        const chatOptions = OptionsListUtils.getNewChatOptions(
+            reports,
+            personalDetails,
+            betas,
+            searchTerm,
+            participants,
+            CONST.EXPENSIFY_EMAILS,
+
+            // If we are using this component in the "Request money" flow then we pass the includeOwnedWorkspaceChats argument so that the current user
+            // sees the option to request money from their admin on their own Workspace Chat.
+            iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST,
+
+            // We don't want to include any P2P options like personal details or reports that are not workspace chats for certain features.
+            !isDistanceRequest,
         );
-        const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(this.props.personalDetails);
+        setNewChatOptions({
+            recentReports: chatOptions.recentReports,
+            personalDetails: chatOptions.personalDetails,
+            userToInvite: chatOptions.userToInvite,
+        });
+    }, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions, iouType, isDistanceRequest]);
 
-        return (
+    return (
+        <View style={[styles.flex1, styles.w100, participants.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
             <OptionsSelector
-                ref={this.props.forwardedRef}
-                autoFocus={false}
-                sections={this.getSections()}
-                value={this.state.searchTerm}
-                onSelectRow={this.addSingleParticipant}
-                onChangeText={this.updateOptionsWithSearchTerm}
+                canSelectMultipleOptions
+                shouldShowMultipleOptionSelectorAsButton
+                multipleOptionSelectorButtonText={translate('iou.split')}
+                onAddToSelection={addParticipantToSelection}
+                sections={sections}
+                selectedOptions={participants}
+                value={searchTerm}
+                onSelectRow={addSingleParticipant}
+                onChangeText={setSearchTerm}
+                ref={forwardedRef}
                 headerMessage={headerMessage}
-                textInputLabel={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                 boldStyle
-                safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
+                shouldShowConfirmButton
+                confirmButtonText={translate('iou.addToSplit')}
+                onConfirmSelection={navigateToSplit}
+                textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
                 shouldShowOptions={isOptionsDataReady}
+                shouldFocusOnSelectRow={!Browser.isMobile()}
+                shouldDelayFocus
             />
-        );
-    }
+        </View>
+    );
 }
 
 MoneyRequestParticipantsSelector.propTypes = propTypes;
 MoneyRequestParticipantsSelector.defaultProps = defaultProps;
+MoneyRequestParticipantsSelector.displayName = 'MoneyRequestParticipantsSelector';
 
 export default compose(
     withLocalize,
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js
deleted file mode 100755
index 2ebddbdd8741..000000000000
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {View} from 'react-native';
-import PropTypes from 'prop-types';
-import _ from 'underscore';
-import {withOnyx} from 'react-native-onyx';
-import ONYXKEYS from '../../../../ONYXKEYS';
-import styles from '../../../../styles/styles';
-import OptionsSelector from '../../../../components/OptionsSelector';
-import * as OptionsListUtils from '../../../../libs/OptionsListUtils';
-import * as ReportUtils from '../../../../libs/ReportUtils';
-import CONST from '../../../../CONST';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import compose from '../../../../libs/compose';
-import personalDetailsPropType from '../../../personalDetailsPropType';
-import * as Browser from '../../../../libs/Browser';
-import reportPropTypes from '../../../reportPropTypes';
-
-const propTypes = {
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
-    /** Callback to inform parent modal of success */
-    onStepComplete: PropTypes.func.isRequired,
-
-    /** Callback to add participants in MoneyRequestModal */
-    onAddParticipants: PropTypes.func.isRequired,
-
-    /** Selected participants from MoneyRequestModal with login */
-    participants: PropTypes.arrayOf(
-        PropTypes.shape({
-            accountID: PropTypes.number,
-            login: PropTypes.string,
-            isPolicyExpenseChat: PropTypes.bool,
-            isOwnPolicyExpenseChat: PropTypes.bool,
-            selected: PropTypes.bool,
-        }),
-    ),
-
-    /** All of the personal details for everyone */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
-    /** All reports shared with the user */
-    reports: PropTypes.objectOf(reportPropTypes),
-
-    /** padding bottom style of safe area */
-    safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    participants: [],
-    betas: [],
-    personalDetails: {},
-    reports: {},
-    safeAreaPaddingBottomStyle: {},
-};
-
-function MoneyRequestParticipantsSplitSelector({betas, participants, personalDetails, reports, translate, onAddParticipants, onStepComplete, safeAreaPaddingBottomStyle}) {
-    const [searchTerm, setSearchTerm] = useState('');
-    const [newChatOptions, setNewChatOptions] = useState({
-        recentReports: [],
-        personalDetails: [],
-        userToInvite: null,
-    });
-
-    const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
-
-    /**
-     * Returns the sections needed for the OptionsSelector
-     *
-     * @param {Boolean} maxParticipantsReached
-     * @returns {Array}
-     */
-    const sections = useMemo(() => {
-        const newSections = [];
-        let indexOffset = 0;
-
-        newSections.push({
-            title: undefined,
-            data: OptionsListUtils.getParticipantsOptions(participants, personalDetails),
-            shouldShow: true,
-            indexOffset,
-        });
-        indexOffset += participants.length;
-
-        if (maxParticipantsReached) {
-            return newSections;
-        }
-
-        newSections.push({
-            title: translate('common.recents'),
-            data: newChatOptions.recentReports,
-            shouldShow: !_.isEmpty(newChatOptions.recentReports),
-            indexOffset,
-        });
-        indexOffset += newChatOptions.recentReports.length;
-
-        newSections.push({
-            title: translate('common.contacts'),
-            data: newChatOptions.personalDetails,
-            shouldShow: !_.isEmpty(newChatOptions.personalDetails),
-            indexOffset,
-        });
-        indexOffset += newChatOptions.personalDetails.length;
-
-        if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
-            newSections.push({
-                undefined,
-                data: [newChatOptions.userToInvite],
-                shouldShow: true,
-                indexOffset,
-            });
-        }
-
-        return newSections;
-    }, [maxParticipantsReached, newChatOptions, participants, personalDetails, translate]);
-
-    /**
-     * Removes a selected option from list if already selected. If not already selected add this option to the list.
-     * @param {Object} option
-     */
-    const toggleOption = useCallback(
-        (option) => {
-            const isOptionInList = _.some(participants, (selectedOption) => selectedOption.accountID === option.accountID);
-
-            let newSelectedOptions;
-
-            if (isOptionInList) {
-                newSelectedOptions = _.reject(participants, (selectedOption) => selectedOption.accountID === option.accountID);
-            } else {
-                newSelectedOptions = [...participants, {accountID: option.accountID, login: option.login, selected: true, searchText: option.searchText}];
-            }
-
-            onAddParticipants(newSelectedOptions);
-
-            const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, isOptionInList ? searchTerm : '', newSelectedOptions, CONST.EXPENSIFY_EMAILS);
-
-            setNewChatOptions({
-                recentReports: chatOptions.recentReports,
-                personalDetails: chatOptions.personalDetails,
-                userToInvite: chatOptions.userToInvite,
-            });
-        },
-        [searchTerm, participants, onAddParticipants, reports, personalDetails, betas, setNewChatOptions],
-    );
-
-    const headerMessage = OptionsListUtils.getHeaderMessage(
-        newChatOptions.personalDetails.length + newChatOptions.recentReports.length !== 0,
-        Boolean(newChatOptions.userToInvite),
-        searchTerm,
-        maxParticipantsReached,
-        _.some(participants, (participant) => participant.searchText.toLowerCase().includes(searchTerm.toLowerCase())),
-    );
-    const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails);
-
-    useEffect(() => {
-        const chatOptions = OptionsListUtils.getNewChatOptions(reports, personalDetails, betas, searchTerm, participants, CONST.EXPENSIFY_EMAILS);
-        setNewChatOptions({
-            recentReports: chatOptions.recentReports,
-            personalDetails: chatOptions.personalDetails,
-            userToInvite: chatOptions.userToInvite,
-        });
-    }, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions]);
-
-    return (
-        <View style={[styles.flex1, styles.w100, participants.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
-            <OptionsSelector
-                canSelectMultipleOptions
-                sections={sections}
-                selectedOptions={participants}
-                value={searchTerm}
-                onSelectRow={toggleOption}
-                onChangeText={setSearchTerm}
-                headerMessage={headerMessage}
-                boldStyle
-                shouldShowConfirmButton
-                confirmButtonText={translate('common.next')}
-                onConfirmSelection={onStepComplete}
-                textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
-                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                shouldShowOptions={isOptionsDataReady}
-                shouldFocusOnSelectRow={!Browser.isMobile()}
-            />
-        </View>
-    );
-}
-
-MoneyRequestParticipantsSplitSelector.propTypes = propTypes;
-MoneyRequestParticipantsSplitSelector.defaultProps = defaultProps;
-MoneyRequestParticipantsSplitSelector.displayName = 'MoneyRequestParticipantsSplitSelector';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-        reports: {
-            key: ONYXKEYS.COLLECTION.REPORT,
-        },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-    }),
-)(MoneyRequestParticipantsSplitSelector);
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 0321394b37bc..f112744842b3 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -3,13 +3,14 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
+import withNavigationFocus, {withNavigationFocusPropTypes} from '../../components/withNavigationFocus';
 import * as Report from '../../libs/actions/Report';
 import useLocalize from '../../hooks/useLocalize';
-import HeaderWithBackButton from '../../components/HeaderWithBackButton';
-import ScreenWrapper from '../../components/ScreenWrapper';
 import styles from '../../styles/styles';
 import RoomNameInput from '../../components/RoomNameInput';
 import Picker from '../../components/Picker';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
+import ScreenWrapper from '../../components/ScreenWrapper';
 import ONYXKEYS from '../../ONYXKEYS';
 import CONST from '../../CONST';
 import Text from '../../components/Text';
@@ -19,9 +20,10 @@ import * as ValidationUtils from '../../libs/ValidationUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
 import * as PolicyUtils from '../../libs/PolicyUtils';
 import Form from '../../components/Form';
-import shouldDelayFocus from '../../libs/shouldDelayFocus';
 import policyMemberPropType from '../policyMemberPropType';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
+import compose from '../../libs/compose';
+import variables from '../../styles/variables';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -55,6 +57,8 @@ const propTypes = {
 
     /** A collection of objects for all policies which key policy member objects by accountIDs */
     allPolicyMembers: PropTypes.objectOf(PropTypes.objectOf(policyMemberPropType)),
+
+    ...withNavigationFocusPropTypes,
 };
 const defaultProps = {
     betas: [],
@@ -140,60 +144,72 @@ function WorkspaceNewRoomPage(props) {
     );
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            shouldEnablePickerAvoiding={false}
-        >
-            <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}>
-                <HeaderWithBackButton title={translate('newRoomPage.newRoom')} />
-                <Form
-                    formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-                    submitButtonText={translate('newRoomPage.createRoom')}
-                    scrollContextEnabled
-                    style={[styles.mh5, styles.flexGrow1]}
-                    validate={validate}
-                    onSubmit={submit}
-                    enabledWhenOffline
-                >
-                    <View style={styles.mb5}>
-                        <RoomNameInput
-                            inputID="roomName"
-                            autoFocus
-                            shouldDelayFocus={shouldDelayFocus}
-                        />
-                    </View>
-                    <View style={styles.mb2}>
-                        <Picker
-                            inputID="policyID"
-                            label={translate('workspace.common.workspace')}
-                            placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
-                            items={workspaceOptions}
-                            onValueChange={setPolicyID}
-                        />
-                    </View>
-                    {isPolicyAdmin && (
-                        <View style={styles.mb2}>
-                            <Picker
-                                inputID="writeCapability"
-                                label={translate('writeCapabilityPage.label')}
-                                items={writeCapabilityOptions}
-                                defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
-                            />
-                        </View>
-                    )}
-                    <View style={styles.mb2}>
-                        <Picker
-                            inputID="visibility"
-                            label={translate('newRoomPage.visibility')}
-                            items={visibilityOptions}
-                            onValueChange={setVisibility}
-                            defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
-                        />
-                    </View>
-                    <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                </Form>
-            </FullPageNotFoundView>
-        </ScreenWrapper>
+        <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}>
+            <ScreenWrapper
+                shouldEnableKeyboardAvoidingView={false}
+                includeSafeAreaPaddingBottom={false}
+                includePaddingTop={false}
+                shouldEnablePickerAvoiding={false}
+            >
+                {({insets}) => (
+                    <KeyboardAvoidingView
+                        style={{height: '100%'}}
+                        behavior="height"
+                        // 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 + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
+                    >
+                        <Form
+                            formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                            submitButtonText={translate('newRoomPage.createRoom')}
+                            scrollContextEnabled
+                            style={[styles.mh5, styles.flexGrow1]}
+                            validate={validate}
+                            onSubmit={submit}
+                            enabledWhenOffline
+                        >
+                            <View style={styles.mb5}>
+                                <RoomNameInput
+                                    inputID="roomName"
+                                    isFocused={props.isFocused}
+                                    shouldDelayFocus
+                                    autoFocus
+                                />
+                            </View>
+                            <View style={styles.mb2}>
+                                <Picker
+                                    inputID="policyID"
+                                    label={translate('workspace.common.workspace')}
+                                    placeholder={{value: '', label: translate('newRoomPage.selectAWorkspace')}}
+                                    items={workspaceOptions}
+                                    onValueChange={setPolicyID}
+                                />
+                            </View>
+                            {isPolicyAdmin && (
+                                <View style={styles.mb2}>
+                                    <Picker
+                                        inputID="writeCapability"
+                                        label={translate('writeCapabilityPage.label')}
+                                        items={writeCapabilityOptions}
+                                        defaultValue={CONST.REPORT.WRITE_CAPABILITIES.ALL}
+                                    />
+                                </View>
+                            )}
+                            <View style={styles.mb2}>
+                                <Picker
+                                    inputID="visibility"
+                                    label={translate('newRoomPage.visibility')}
+                                    items={visibilityOptions}
+                                    onValueChange={setVisibility}
+                                    defaultValue={CONST.REPORT.VISIBILITY.RESTRICTED}
+                                />
+                            </View>
+                            <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+                        </Form>
+                    </KeyboardAvoidingView>
+                )}
+            </ScreenWrapper>
+        </FullPageNotFoundView>
     );
 }
 
@@ -201,17 +217,20 @@ WorkspaceNewRoomPage.propTypes = propTypes;
 WorkspaceNewRoomPage.defaultProps = defaultProps;
 WorkspaceNewRoomPage.displayName = 'WorkspaceNewRoomPage';
 
-export default withOnyx({
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-    allPolicyMembers: {
-        key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
-    },
-})(WorkspaceNewRoomPage);
+export default compose(
+    withNavigationFocus,
+    withOnyx({
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+        policies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        reports: {
+            key: ONYXKEYS.COLLECTION.REPORT,
+        },
+        allPolicyMembers: {
+            key: ONYXKEYS.COLLECTION.POLICY_MEMBERS,
+        },
+    }),
+)(WorkspaceNewRoomPage);
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 0fba61f1e8d9..a7e904ec8f6b 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3721,8 +3721,8 @@ const styles = (theme) => ({
     },
 
     tabSelectorButton: {
-        height: 40,
-        padding: 12,
+        height: variables.tabSelectorButtonHeight,
+        padding: variables.tabSelectorButtonPadding,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index eb182ab1eca0..17d056fbe6f4 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -133,6 +133,8 @@ export default {
     signInLogoWidth: 120,
     signInLogoWidthLargeScreen: 144,
     signInLogoWidthPill: 132,
+    tabSelectorButtonHeight: 40,
+    tabSelectorButtonPadding: 12,
     lhnLogoWidth: 108,
     lhnLogoHeight: 28,
     signInLogoWidthLargeScreenPill: 162,