diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index fbc7465bc023..f16b41538531 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -420,6 +420,9 @@ const ONYXKEYS = {
     /** Stores the route to open after changing app permission from settings */
     LAST_ROUTE: 'lastRoute',
 
+    /** Stores the information if user loaded the Onyx state through Import feature  */
+    IS_USING_IMPORTED_STATE: 'isUsingImportedState',
+
     /** Stores the information about the saved searches */
     SAVED_SEARCHES: 'nvp_savedSearches',
 
@@ -989,9 +992,9 @@ type OnyxValuesMapping = {
     [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflowOnyx;
     [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet;
     [ONYXKEYS.LAST_ROUTE]: string;
+    [ONYXKEYS.IS_USING_IMPORTED_STATE]: boolean;
     [ONYXKEYS.SHOULD_SHOW_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
 };
-
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;
 
 type OnyxCollectionKey = keyof OnyxCollectionValuesMapping;
diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx
index 2f62e6a813b5..975ea6c548c0 100644
--- a/src/components/AttachmentPicker/index.native.tsx
+++ b/src/components/AttachmentPicker/index.native.tsx
@@ -22,12 +22,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
 import launchCamera from './launchCamera/launchCamera';
-import type BaseAttachmentPickerProps from './types';
-
-type AttachmentPickerProps = BaseAttachmentPickerProps & {
-    /** If this value is true, then we exclude Camera option. */
-    shouldHideCameraOption?: boolean;
-};
+import type AttachmentPickerProps from './types';
 
 type Item = {
     /** The icon associated with the item. */
@@ -112,7 +107,13 @@ const getDataForUpload = (fileData: FileResponse): Promise<FileObject> => {
  * a callback. This is the ios/android implementation
  * opening a modal with attachment options
  */
-function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, shouldHideCameraOption = false, shouldValidateImage = true}: AttachmentPickerProps) {
+function AttachmentPicker({
+    type = CONST.ATTACHMENT_PICKER_TYPE.FILE,
+    children,
+    shouldHideCameraOption = false,
+    shouldHideGalleryOption = false,
+    shouldValidateImage = true,
+}: AttachmentPickerProps) {
     const styles = useThemeStyles();
     const [isVisible, setIsVisible] = useState(false);
 
@@ -221,17 +222,19 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
 
     const menuItemData: Item[] = useMemo(() => {
         const data: Item[] = [
-            {
-                icon: Expensicons.Gallery,
-                textTranslationKey: 'attachmentPicker.chooseFromGallery',
-                pickAttachment: () => showImagePicker(launchImageLibrary),
-            },
             {
                 icon: Expensicons.Paperclip,
                 textTranslationKey: 'attachmentPicker.chooseDocument',
                 pickAttachment: showDocumentPicker,
             },
         ];
+        if (!shouldHideGalleryOption) {
+            data.unshift({
+                icon: Expensicons.Gallery,
+                textTranslationKey: 'attachmentPicker.chooseFromGallery',
+                pickAttachment: () => showImagePicker(launchImageLibrary),
+            });
+        }
         if (!shouldHideCameraOption) {
             data.unshift({
                 icon: Expensicons.Camera,
@@ -241,7 +244,7 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
         }
 
         return data;
-    }, [showDocumentPicker, showImagePicker, shouldHideCameraOption]);
+    }, [showDocumentPicker, shouldHideGalleryOption, shouldHideCameraOption, showImagePicker]);
 
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: menuItemData.length - 1, isActive: isVisible});
 
diff --git a/src/components/AttachmentPicker/types.ts b/src/components/AttachmentPicker/types.ts
index 38e8e5c73032..ee9d39aabef3 100644
--- a/src/components/AttachmentPicker/types.ts
+++ b/src/components/AttachmentPicker/types.ts
@@ -43,6 +43,10 @@ type AttachmentPickerProps = {
 
     acceptedFileTypes?: Array<ValueOf<typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS>>;
 
+    shouldHideCameraOption?: boolean;
+
+    shouldHideGalleryOption?: boolean;
+
     /** Whether to validate the image and show the alert or not. */
     shouldValidateImage?: boolean;
 };
diff --git a/src/components/ImportOnyxState/BaseImportOnyxState.tsx b/src/components/ImportOnyxState/BaseImportOnyxState.tsx
new file mode 100644
index 000000000000..216a6ddf76e4
--- /dev/null
+++ b/src/components/ImportOnyxState/BaseImportOnyxState.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import type {FileObject} from '@components/AttachmentModal';
+import AttachmentPicker from '@components/AttachmentPicker';
+import DecisionModal from '@components/DecisionModal';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function BaseImportOnyxState({
+    onFileRead,
+    isErrorModalVisible,
+    setIsErrorModalVisible,
+}: {
+    onFileRead: (file: FileObject) => void;
+    isErrorModalVisible: boolean;
+    setIsErrorModalVisible: (value: boolean) => void;
+}) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    return (
+        <>
+            <AttachmentPicker
+                acceptedFileTypes={['text']}
+                shouldHideCameraOption
+                shouldHideGalleryOption
+            >
+                {({openPicker}) => {
+                    return (
+                        <MenuItem
+                            icon={Expensicons.Upload}
+                            title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                            wrapperStyle={[styles.sectionMenuItemTopDescription]}
+                            onPress={() => {
+                                openPicker({
+                                    onPicked: onFileRead,
+                                });
+                            }}
+                        />
+                    );
+                }}
+            </AttachmentPicker>
+            <DecisionModal
+                title={translate('initialSettingsPage.troubleshoot.invalidFile')}
+                prompt={translate('initialSettingsPage.troubleshoot.invalidFileDescription')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setIsErrorModalVisible(false)}
+                secondOptionText={translate('common.ok')}
+                isVisible={isErrorModalVisible}
+                onClose={() => setIsErrorModalVisible(false)}
+            />
+        </>
+    );
+}
+
+export default BaseImportOnyxState;
diff --git a/src/components/ImportOnyxState/index.native.tsx b/src/components/ImportOnyxState/index.native.tsx
new file mode 100644
index 000000000000..b07f47d3a5de
--- /dev/null
+++ b/src/components/ImportOnyxState/index.native.tsx
@@ -0,0 +1,105 @@
+import React, {useState} from 'react';
+import RNFS from 'react-native-fs';
+import Onyx from 'react-native-onyx';
+import type {FileObject} from '@components/AttachmentModal';
+import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
+import {setShouldForceOffline} from '@libs/actions/Network';
+import Navigation from '@libs/Navigation/Navigation';
+import type {OnyxValues} from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import BaseImportOnyxState from './BaseImportOnyxState';
+import type ImportOnyxStateProps from './types';
+import {cleanAndTransformState} from './utils';
+
+const CHUNK_SIZE = 100;
+
+function readFileInChunks(fileUri: string, chunkSize = 1024 * 1024) {
+    const filePath = decodeURIComponent(fileUri.replace('file://', ''));
+
+    return RNFS.exists(filePath)
+        .then((exists) => {
+            if (!exists) {
+                throw new Error('File does not exist');
+            }
+            return RNFS.stat(filePath);
+        })
+        .then((fileStats) => {
+            const fileSize = fileStats.size;
+            let fileContent = '';
+            const promises = [];
+
+            // Chunk the file into smaller parts to avoid memory issues
+            for (let i = 0; i < fileSize; i += chunkSize) {
+                promises.push(RNFS.read(filePath, chunkSize, i, 'utf8').then((chunk) => chunk));
+            }
+
+            // After all chunks have been read, join them together
+            return Promise.all(promises).then((chunks) => {
+                fileContent = chunks.join('');
+
+                return fileContent;
+            });
+        });
+}
+
+function chunkArray<T>(array: T[], size: number): T[][] {
+    const result = [];
+    for (let i = 0; i < array.length; i += size) {
+        result.push(array.slice(i, i + size));
+    }
+    return result;
+}
+
+function applyStateInChunks(state: OnyxValues) {
+    const entries = Object.entries(state);
+    const chunks = chunkArray(entries, CHUNK_SIZE);
+
+    let promise = Promise.resolve();
+    chunks.forEach((chunk) => {
+        const partialOnyxState = Object.fromEntries(chunk) as Partial<OnyxValues>;
+        promise = promise.then(() => Onyx.multiSet(partialOnyxState));
+    });
+
+    return promise;
+}
+
+export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
+    const [isErrorModalVisible, setIsErrorModalVisible] = useState(false);
+
+    const handleFileRead = (file: FileObject) => {
+        if (!file.uri) {
+            return;
+        }
+
+        setIsLoading(true);
+        readFileInChunks(file.uri)
+            .then((fileContent) => {
+                const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
+                setShouldForceOffline(true);
+                Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                    applyStateInChunks(transformedState).then(() => {
+                        setIsUsingImportedState(true);
+                        Navigation.navigate(ROUTES.HOME);
+                    });
+                });
+            })
+            .catch(() => {
+                setIsErrorModalVisible(true);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+
+        if (isLoading) {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <BaseImportOnyxState
+            onFileRead={handleFileRead}
+            isErrorModalVisible={isErrorModalVisible}
+            setIsErrorModalVisible={setIsErrorModalVisible}
+        />
+    );
+}
diff --git a/src/components/ImportOnyxState/index.tsx b/src/components/ImportOnyxState/index.tsx
new file mode 100644
index 000000000000..8add2d9172fd
--- /dev/null
+++ b/src/components/ImportOnyxState/index.tsx
@@ -0,0 +1,59 @@
+import React, {useState} from 'react';
+import Onyx from 'react-native-onyx';
+import type {FileObject} from '@components/AttachmentModal';
+import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
+import {setShouldForceOffline} from '@libs/actions/Network';
+import Navigation from '@libs/Navigation/Navigation';
+import type {OnyxValues} from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import BaseImportOnyxState from './BaseImportOnyxState';
+import type ImportOnyxStateProps from './types';
+import {cleanAndTransformState} from './utils';
+
+export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
+    const [isErrorModalVisible, setIsErrorModalVisible] = useState(false);
+
+    const handleFileRead = (file: FileObject) => {
+        if (!file.uri) {
+            return;
+        }
+
+        setIsLoading(true);
+        const blob = new Blob([file as BlobPart]);
+        const response = new Response(blob);
+
+        response
+            .text()
+            .then((text) => {
+                const fileContent = text;
+                const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
+                setShouldForceOffline(true);
+                Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                    Onyx.multiSet(transformedState)
+                        .then(() => {
+                            setIsUsingImportedState(true);
+                            Navigation.navigate(ROUTES.HOME);
+                        })
+                        .finally(() => {
+                            setIsLoading(false);
+                        });
+                });
+            })
+            .catch(() => {
+                setIsErrorModalVisible(true);
+                setIsLoading(false);
+            });
+
+        if (isLoading) {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <BaseImportOnyxState
+            onFileRead={handleFileRead}
+            isErrorModalVisible={isErrorModalVisible}
+            setIsErrorModalVisible={setIsErrorModalVisible}
+        />
+    );
+}
diff --git a/src/components/ImportOnyxState/types.ts b/src/components/ImportOnyxState/types.ts
new file mode 100644
index 000000000000..8e504c493529
--- /dev/null
+++ b/src/components/ImportOnyxState/types.ts
@@ -0,0 +1,6 @@
+type ImportOnyxStateProps = {
+    isLoading: boolean;
+    setIsLoading: (isLoading: boolean) => void;
+};
+
+export default ImportOnyxStateProps;
diff --git a/src/components/ImportOnyxState/utils.ts b/src/components/ImportOnyxState/utils.ts
new file mode 100644
index 000000000000..a5f24fa80714
--- /dev/null
+++ b/src/components/ImportOnyxState/utils.ts
@@ -0,0 +1,53 @@
+import cloneDeep from 'lodash/cloneDeep';
+import type {UnknownRecord} from 'type-fest';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+// List of Onyx keys from the .txt file we want to keep for the local override
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION, ONYXKEYS.PREFERRED_THEME];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && !Array.isArray(value) && value !== null;
+}
+
+function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unknown[] {
+    const dataCopy = cloneDeep(data);
+    if (!isRecord(dataCopy)) {
+        return Array.isArray(dataCopy) ? (dataCopy as UnknownRecord[]).map(transformNumericKeysToArray) : (dataCopy as UnknownRecord);
+    }
+
+    const keys = Object.keys(dataCopy);
+
+    if (keys.length === 0) {
+        return dataCopy;
+    }
+    const allKeysAreNumeric = keys.every((key) => !Number.isNaN(Number(key)));
+    const keysAreSequential = keys.every((key, index) => parseInt(key, 10) === index);
+    if (allKeysAreNumeric && keysAreSequential) {
+        return keys.map((key) => transformNumericKeysToArray(dataCopy[key] as UnknownRecord));
+    }
+
+    for (const key in dataCopy) {
+        if (key in dataCopy) {
+            dataCopy[key] = transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
+        }
+    }
+
+    return dataCopy;
+}
+
+function cleanAndTransformState<T>(state: string): T {
+    const parsedState = JSON.parse(state) as UnknownRecord;
+
+    Object.keys(parsedState).forEach((key) => {
+        const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+
+        if (shouldOmit) {
+            delete parsedState[key];
+        }
+    });
+
+    const transformedState = transformNumericKeysToArray(parsedState) as T;
+    return transformedState;
+}
+
+export {transformNumericKeysToArray, cleanAndTransformState};
diff --git a/src/components/ImportedStateIndicator.tsx b/src/components/ImportedStateIndicator.tsx
new file mode 100644
index 000000000000..029c0f51cd33
--- /dev/null
+++ b/src/components/ImportedStateIndicator.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {clearOnyxAndResetApp} from '@libs/actions/App';
+import ONYXKEYS from '@src/ONYXKEYS';
+import Button from './Button';
+
+function ImportedStateIndicator() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
+
+    if (!isUsingImportedState) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.buttonDanger]}>
+            <Button
+                danger
+                small
+                shouldRemoveLeftBorderRadius
+                shouldRemoveRightBorderRadius
+                text={translate('initialSettingsPage.troubleshoot.usingImportedState')}
+                onPress={() => clearOnyxAndResetApp(true)}
+                textStyles={[styles.fontWeightNormal]}
+            />
+        </View>
+    );
+}
+
+export default ImportedStateIndicator;
diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx
index 37e2842c0671..9a85e1d3af24 100644
--- a/src/components/ScreenWrapper.tsx
+++ b/src/components/ScreenWrapper.tsx
@@ -22,6 +22,7 @@ import CustomDevMenu from './CustomDevMenu';
 import FocusTrapForScreens from './FocusTrap/FocusTrapForScreen';
 import type FocusTrapForScreenProps from './FocusTrap/FocusTrapForScreen/FocusTrapProps';
 import HeaderGap from './HeaderGap';
+import ImportedStateIndicator from './ImportedStateIndicator';
 import KeyboardAvoidingView from './KeyboardAvoidingView';
 import OfflineIndicator from './OfflineIndicator';
 import SafeAreaConsumer from './SafeAreaConsumer';
@@ -285,12 +286,22 @@ function ScreenWrapper(
                                                       })
                                                     : children
                                             }
-                                            {isSmallScreenWidth && shouldShowOfflineIndicator && <OfflineIndicator style={offlineIndicatorStyle} />}
+                                            {isSmallScreenWidth && shouldShowOfflineIndicator && (
+                                                <>
+                                                    <OfflineIndicator style={offlineIndicatorStyle} />
+                                                    {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
+                                                    <ImportedStateIndicator />
+                                                </>
+                                            )}
                                             {!shouldUseNarrowLayout && shouldShowOfflineIndicatorInWideScreen && (
-                                                <OfflineIndicator
-                                                    containerStyles={[]}
-                                                    style={[styles.pl5, styles.offlineIndicatorRow, offlineIndicatorStyle]}
-                                                />
+                                                <>
+                                                    <OfflineIndicator
+                                                        containerStyles={[]}
+                                                        style={[styles.pl5, styles.offlineIndicatorRow, offlineIndicatorStyle]}
+                                                    />
+                                                    {/* Since import state is tightly coupled to the offline state, it is safe to display it when showing offline indicator */}
+                                                    <ImportedStateIndicator />
+                                                </>
                                             )}
                                         </ScreenWrapperStatusContext.Provider>
                                     </PickerAvoidingView>
diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 115ce3bfc152..e81405d026b4 100644
--- a/src/components/TestToolMenu.tsx
+++ b/src/components/TestToolMenu.tsx
@@ -32,6 +32,7 @@ const USER_DEFAULT: UserOnyx = {
 
 function TestToolMenu({network}: TestToolMenuProps) {
     const [user = USER_DEFAULT] = useOnyx(ONYXKEYS.USER);
+    const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
     const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
     const isDebugModeEnabled = !!user?.isDebugModeEnabled;
     const styles = useThemeStyles();
@@ -73,6 +74,7 @@ function TestToolMenu({network}: TestToolMenuProps) {
                     accessibilityLabel="Force offline"
                     isOn={!!network?.shouldForceOffline}
                     onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)}
+                    disabled={isUsingImportedState}
                 />
             </TestToolRow>
 
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 18dcbe35c9f6..f15e5c97d037 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1194,8 +1194,13 @@ const translations = {
             destroy: 'Destroy',
             maskExportOnyxStateData: 'Mask fragile user data while exporting Onyx state',
             exportOnyxState: 'Export Onyx state',
+            importOnyxState: 'Import Onyx state',
             testCrash: 'Test crash',
+            resetToOriginalState: 'Reset to original state',
+            usingImportedState: 'You are using imported state. Press here to clear it.',
             debugMode: 'Debug mode',
+            invalidFile: 'Invalid file',
+            invalidFileDescription: 'The file you are trying to import is not valid. Please try again.',
         },
         debugConsole: {
             saveLog: 'Save log',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 8e16c03a91d3..413084aa8286 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1189,8 +1189,13 @@ const translations = {
             destroy: 'Destruir',
             maskExportOnyxStateData: 'Enmascare los datos frágiles del usuario mientras exporta el estado Onyx',
             exportOnyxState: 'Exportar estado Onyx',
+            importOnyxState: 'Importar estado Onyx',
             testCrash: 'Prueba de fallo',
+            resetToOriginalState: 'Restablecer al estado original',
+            usingImportedState: 'Estás utilizando el estado importado. Pulsa aquí para borrarlo.',
             debugMode: 'Modo depuración',
+            invalidFile: 'Archivo inválido',
+            invalidFileDescription: 'El archivo que estás intentando importar no es válido. Por favor, inténtalo de nuevo.',
         },
         debugConsole: {
             saveLog: 'Guardar registro',
diff --git a/src/libs/ExportOnyxState/common.ts b/src/libs/ExportOnyxState/common.ts
index 564db322930c..46a47528f1fe 100644
--- a/src/libs/ExportOnyxState/common.ts
+++ b/src/libs/ExportOnyxState/common.ts
@@ -22,13 +22,17 @@ const maskSessionDetails = (data: Record<string, unknown>): Record<string, unkno
     };
 };
 
-const maskFragileData = (data: Record<string, unknown>, parentKey?: string): Record<string, unknown> => {
-    const maskedData: Record<string, unknown> = {};
+const maskFragileData = (data: Record<string, unknown> | unknown[] | null, parentKey?: string): Record<string, unknown> | unknown[] | null => {
+    if (data === null) {
+        return data;
+    }
 
-    if (!data) {
-        return maskedData;
+    if (Array.isArray(data)) {
+        return data.map((item): unknown => (typeof item === 'object' ? maskFragileData(item as Record<string, unknown>, parentKey) : item));
     }
 
+    const maskedData: Record<string, unknown> = {};
+
     Object.keys(data).forEach((key) => {
         if (!Object.prototype.hasOwnProperty.call(data, key)) {
             return;
@@ -56,7 +60,7 @@ const maskOnyxState = (data: Record<string, unknown>, isMaskingFragileDataEnable
     onyxState = maskSessionDetails(onyxState);
     // Mask fragile data other than session details if the user has enabled the option
     if (isMaskingFragileDataEnabled) {
-        onyxState = maskFragileData(onyxState);
+        onyxState = maskFragileData(onyxState) as Record<string, unknown>;
     }
 
     return onyxState;
diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
index 8a66a9702acb..d69bcf0e5761 100644
--- a/src/libs/actions/App.ts
+++ b/src/libs/actions/App.ts
@@ -24,6 +24,8 @@ import type {Route} from '@src/ROUTES';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {OnyxData} from '@src/types/onyx/Request';
+import {setShouldForceOffline} from './Network';
+import * as PersistedRequests from './PersistedRequests';
 import * as Policy from './Policy/Policy';
 import * as Session from './Session';
 import Timing from './Timing';
@@ -77,6 +79,14 @@ Onyx.connect({
     },
 });
 
+let isUsingImportedState: boolean | undefined;
+Onyx.connect({
+    key: ONYXKEYS.IS_USING_IMPORTED_STATE,
+    callback: (value) => {
+        isUsingImportedState = value ?? false;
+    },
+});
+
 const KEYS_TO_PRESERVE: OnyxKey[] = [
     ONYXKEYS.ACCOUNT,
     ONYXKEYS.IS_CHECKING_PUBLIC_ROOM,
@@ -518,6 +528,39 @@ function updateLastRoute(screen: string) {
     Onyx.set(ONYXKEYS.LAST_ROUTE, screen);
 }
 
+function setIsUsingImportedState(usingImportedState: boolean) {
+    Onyx.set(ONYXKEYS.IS_USING_IMPORTED_STATE, usingImportedState);
+}
+
+function clearOnyxAndResetApp(shouldNavigateToHomepage?: boolean) {
+    // The value of isUsingImportedState will be lost once Onyx is cleared, so we need to store it
+    const isStateImported = isUsingImportedState;
+    const sequentialQueue = PersistedRequests.getAll();
+    Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+        // Network key is preserved, so when using imported state, we should stop forcing offline mode so that the app can re-fetch the network
+        if (isStateImported) {
+            setShouldForceOffline(false);
+        }
+
+        if (shouldNavigateToHomepage) {
+            Navigation.navigate(ROUTES.HOME);
+        }
+
+        // Requests in a sequential queue should be called even if the Onyx state is reset, so we do not lose any pending data.
+        // However, the OpenApp request must be called before any other request in a queue to ensure data consistency.
+        // To do that, sequential queue is cleared together with other keys, and then it's restored once the OpenApp request is resolved.
+        openApp().then(() => {
+            if (!sequentialQueue || isStateImported) {
+                return;
+            }
+
+            sequentialQueue.forEach((request) => {
+                PersistedRequests.save(request);
+            });
+        });
+    });
+}
+
 export {
     setLocale,
     setLocaleAndNavigate,
@@ -536,5 +579,7 @@ export {
     createWorkspaceWithPolicyDraftAndNavigateToIt,
     updateLastVisitedPath,
     updateLastRoute,
+    setIsUsingImportedState,
+    clearOnyxAndResetApp,
     KEYS_TO_PRESERVE,
 };
diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx
index 1478b5a1dab9..527c33bd08e4 100755
--- a/src/pages/NewChatPage.tsx
+++ b/src/pages/NewChatPage.tsx
@@ -3,6 +3,7 @@ import reject from 'lodash/reject';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
+import ImportedStateIndicator from '@components/ImportedStateIndicator';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import {useOptionsList} from '@components/OptionListContextProvider';
@@ -348,7 +349,12 @@ function NewChatPage({isGroupChat}: NewChatPageProps) {
                     initiallyFocusedOptionKey={firstKeyForList}
                     shouldTextInputInterceptSwipe
                 />
-                {isSmallScreenWidth && <OfflineIndicator />}
+                {isSmallScreenWidth && (
+                    <>
+                        <OfflineIndicator />
+                        <ImportedStateIndicator />
+                    </>
+                )}
             </KeyboardAvoidingView>
         </ScreenWrapper>
     );
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index bbfb47ad8e1f..af766f7b9357 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -13,6 +13,7 @@ import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton';
 import ExceededCommentLength from '@components/ExceededCommentLength';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import ImportedStateIndicator from '@components/ImportedStateIndicator';
 import type {Mention} from '@components/MentionSuggestions';
 import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -122,6 +123,7 @@ function ReportActionCompose({
     const navigation = useNavigation();
     const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
     const [shouldShowComposeInput = true] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT);
+
     /**
      * Updates the Highlight state of the composer
      */
@@ -539,6 +541,11 @@ function ReportActionCompose({
                         {hasExceededMaxCommentLength && <ExceededCommentLength />}
                     </View>
                 </OfflineWithFeedback>
+                {!isSmallScreenWidth && (
+                    <View style={[styles.mln5, styles.mrn5]}>
+                        <ImportedStateIndicator />
+                    </View>
+                )}
             </View>
         </View>
     );
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 3a2fb427e630..5b826b94aa77 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -179,7 +179,8 @@ function ReportActionItem({
     );
     const theme = useTheme();
     const styles = useThemeStyles();
-    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- This is needed to prevent the app from crashing when the app is using imported state.
+    const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || '-1'}`);
     const StyleUtils = useStyleUtils();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(action.reportActionID));
diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
index c7c2ca956ae1..69293fe894d4 100644
--- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
+++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx
@@ -1,12 +1,14 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import Onyx, {useOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import ClientSideLoggingToolMenu from '@components/ClientSideLoggingToolMenu';
 import ConfirmModal from '@components/ConfirmModal';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
+import ImportOnyxState from '@components/ImportOnyxState';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItemList from '@components/MenuItemList';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -23,10 +25,9 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import {setShouldMaskOnyxState} from '@libs/actions/MaskOnyx';
-import * as PersistedRequests from '@libs/actions/PersistedRequests';
 import ExportOnyxState from '@libs/ExportOnyxState';
 import Navigation from '@libs/Navigation/Navigation';
-import * as App from '@userActions/App';
+import {clearOnyxAndResetApp} from '@userActions/App';
 import * as Report from '@userActions/Report';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -47,7 +48,7 @@ function TroubleshootPage() {
     const waitForNavigate = useWaitForNavigation();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const illustrationStyle = getLightbulbIllustrationStyle();
-
+    const [isLoading, setIsLoading] = useState(false);
     const [shouldStoreLogs] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS);
     const [shouldMaskOnyxState = true] = useOnyx(ONYXKEYS.SHOULD_MASK_ONYX_STATE);
 
@@ -106,6 +107,7 @@ function TroubleshootPage() {
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
                 icon={Illustrations.Lightbulb}
             />
+            {isLoading && <FullScreenLoadingIndicator />}
             <ScrollView contentContainerStyle={styles.pt3}>
                 <View style={[styles.flex1, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                     <Section
@@ -140,6 +142,10 @@ function TroubleshootPage() {
                                     />
                                 </TestToolRow>
                             </View>
+                            <ImportOnyxState
+                                setIsLoading={setIsLoading}
+                                isLoading={isLoading}
+                            />
                             <MenuItemList
                                 menuItems={menuItems}
                                 shouldUseSingleExecution
@@ -154,21 +160,7 @@ function TroubleshootPage() {
                                 isVisible={isConfirmationModalVisible}
                                 onConfirm={() => {
                                     setIsConfirmationModalVisible(false);
-                                    // Requests in a sequential queue should be called even if the Onyx state is reset, so we do not lose any pending data.
-                                    // However, the OpenApp request must be called before any other request in a queue to ensure data consistency.
-                                    // To do that, sequential queue is cleared together with other keys, and then it's restored once the OpenApp request is resolved.
-                                    const sequentialQueue = PersistedRequests.getAll();
-                                    Onyx.clear(App.KEYS_TO_PRESERVE).then(() => {
-                                        App.openApp().then(() => {
-                                            if (!sequentialQueue) {
-                                                return;
-                                            }
-
-                                            sequentialQueue.forEach((request) => {
-                                                PersistedRequests.save(request);
-                                            });
-                                        });
-                                    });
+                                    clearOnyxAndResetApp();
                                 }}
                                 onCancel={() => setIsConfirmationModalVisible(false)}
                                 prompt={translate('initialSettingsPage.troubleshoot.confirmResetDescription')}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.tsx b/src/pages/workspace/WorkspaceNewRoomPage.tsx
index c0e953a6a350..481fc6c41402 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.tsx
+++ b/src/pages/workspace/WorkspaceNewRoomPage.tsx
@@ -1,8 +1,7 @@
 import {useIsFocused} from '@react-navigation/core';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
@@ -10,6 +9,7 @@ import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormOnyxValues} from '@components/Form/types';
 import * as Illustrations from '@components/Icon/Illustrations';
+import ImportedStateIndicator from '@components/ImportedStateIndicator';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RoomNameInput from '@components/RoomNameInput';
@@ -34,36 +34,20 @@ import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {NewRoomForm} from '@src/types/form/NewRoomForm';
 import INPUT_IDS from '@src/types/form/NewRoomForm';
-import type {Policy, Report as ReportType, Session} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type WorkspaceNewRoomPageOnyxProps = {
-    /** The list of policies the user has access to. */
-    policies: OnyxCollection<Policy>;
-
-    /** All reports shared with the user */
-    reports: OnyxCollection<ReportType>;
-
-    /** Form state for NEW_ROOM_FORM */
-    formState: OnyxEntry<NewRoomForm>;
-
-    /** Session details for the user */
-    session: OnyxEntry<Session>;
-
-    /** policyID for main workspace */
-    activePolicyID: OnyxEntry<Required<string>>;
-};
-
-type WorkspaceNewRoomPageProps = WorkspaceNewRoomPageOnyxProps;
-
-function WorkspaceNewRoomPage({policies, reports, formState, session, activePolicyID}: WorkspaceNewRoomPageProps) {
+function WorkspaceNewRoomPage() {
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [formState] = useOnyx(ONYXKEYS.FORMS.NEW_ROOM_FORM, {initWithStoredValues: false});
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only
     const {isSmallScreenWidth} = useResponsiveLayout();
     const [visibility, setVisibility] = useState<ValueOf<typeof CONST.REPORT.VISIBILITY>>(CONST.REPORT.VISIBILITY.RESTRICTED);
@@ -242,7 +226,12 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                 style={[styles.mh5, styles.mb5]}
             />
-            {isSmallScreenWidth && <OfflineIndicator />}
+            {isSmallScreenWidth && (
+                <>
+                    <OfflineIndicator />
+                    <ImportedStateIndicator />
+                </>
+            )}
         </>
     );
 
@@ -336,7 +325,12 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
                                 />
                             </View>
                         </FormProvider>
-                        {isSmallScreenWidth && <OfflineIndicator />}
+                        {isSmallScreenWidth && (
+                            <>
+                                <OfflineIndicator />
+                                <ImportedStateIndicator />
+                            </>
+                        )}
                     </KeyboardAvoidingView>
                 )
             }
@@ -346,21 +340,4 @@ function WorkspaceNewRoomPage({policies, reports, formState, session, activePoli
 
 WorkspaceNewRoomPage.displayName = 'WorkspaceNewRoomPage';
 
-export default withOnyx<WorkspaceNewRoomPageProps, WorkspaceNewRoomPageOnyxProps>({
-    policies: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-    formState: {
-        key: ONYXKEYS.FORMS.NEW_ROOM_FORM,
-        initWithStoredValues: false,
-    },
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-    activePolicyID: {
-        key: ONYXKEYS.NVP_ACTIVE_POLICY_ID,
-    },
-})(WorkspaceNewRoomPage);
+export default WorkspaceNewRoomPage;