diff --git a/.eslintrc.js b/.eslintrc.js
index b76782af60f4..b71338d0c1a5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,6 +14,11 @@ const restrictedImportPaths = [
         importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight'],
         message: "Please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
     },
+    {
+        name: 'react-native-safe-area-context',
+        importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
+        message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [
diff --git a/.github/workflows/platformDeploy.yml b/.github/workflows/platformDeploy.yml
index bf27006e34a2..8ccc0a7f6056 100644
--- a/.github/workflows/platformDeploy.yml
+++ b/.github/workflows/platformDeploy.yml
@@ -347,6 +347,9 @@ jobs:
     if: ${{ failure() }}
     needs: [android, desktop, iOS, web]
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Post Slack message on failure
         uses: ./.github/actions/composite/announceFailedWorkflowInSlack
         with:
diff --git a/.imgbotconfig b/.imgbotconfig
index ff5c3345cc4d..43d1b77166cc 100644
--- a/.imgbotconfig
+++ b/.imgbotconfig
@@ -1,6 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade.png" // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 4db8a0836477..2e735cbaf419 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040601
-        versionName "1.4.6-1"
+        versionCode 1001040700
+        versionName "1.4.7-0"
     }
 
     flavorDimensions "default"
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index aa0e8136957f..a040598e982d 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -11,7 +11,6 @@
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="popupTheme">@style/AppTheme.Popup</item>
         <item name="android:spinnerDropDownItemStyle">@style/TextViewSpinnerDropDownItem</item>
-        <item name="android:datePickerDialogTheme">@style/DatePickerDialogTheme</item>
         <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
     </style>
 
@@ -28,18 +27,6 @@
         <item name="android:fontFamily">@font/expneuebold</item>
     </style>
 
-    <!-- Theme used by the DatePicker dialog -->
-    <style name="DatePickerDialogTheme" parent="Theme.AppCompat.Dialog">
-        <item name="android:windowBackground">@drawable/datepicker_background</item>
-        <item name="android:datePickerStyle">@style/DatePickerStyle</item>
-        <item name="android:fontFamily">@font/expneuebold</item>
-        <item name="colorAccent">@color/accent</item>
-    </style>
-
-    <style name="DatePickerStyle" parent="android:Widget.Material.DatePicker">
-        <item name="android:headerBackground">@color/card_highlight_bg</item> <!-- header background color -->
-    </style>
-
     <!-- Theme used by the Alert dialog -->
     <style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
         <item name="android:windowBackground">@drawable/alert_background</item>
diff --git a/docs/articles/expensify-classic/account-settings/Merge-Accounts.md b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md
index 7fc355b30bd9..abb218c74118 100644
--- a/docs/articles/expensify-classic/account-settings/Merge-Accounts.md
+++ b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md
@@ -5,29 +5,32 @@ description: How to merge two Expensify accounts and why this is useful.
 
 # Overview
 
-Merging accounts allows you to combine two accounts. When you combine two accounts, all receipts, expenses, expense reports, invoices, bills, imported cards, secondary logins, co-pilots, and group policy settings will be combined into one account. 
+Merging accounts allows you to combine two accounts. When you combine two accounts, all receipts, expenses, expense reports, invoices, bills, imported cards, secondary logins, co-pilots, and group workspace settings will be combined into one account. 
 This can be useful if you start off with an account of your own but your organization creates a separate account for you. You can then track both personal and business expenses via one account. 
 
 # How to merge accounts
 Merging two accounts together is fairly straightforward. Let’s go over how to do that below:
 1. Navigate to [expensify.com](https://www.expensify.com)
 2. Log into the account you want to set as the Primary account
-3. Navigate to Settings > Account > Account Details
-4. Scroll down to the Merge Accounts section and fill in the fields. Once you click Merge, a magic code link will be sent to you via email and you'll be prompted to enter the magic code
-5. Copy the magic code, switch back to the expensify.com page, and paste the code into the required field
+3. Navigate to **Settings > Account > Account Details**
+4. Scroll down to Merge Accounts and fill in the fields
 6. Click Merge Accounts
+7. Once you click Merge, a magic code is sent to you via email
+8. Paste the code into the required field
 If you have any questions about this process, feel free to reach out to Concierge for some assistance!
 
 # FAQ
 ## Can you merge accounts from the mobile app?
 No, accounts can only be merged from the full website at expensify.com.
 ## Can I administratively merge two accounts together?
-No, only the account holder (user) can perform account merging.
+No, only the account holder (member) can perform account merging.
 ## Is merging accounts reversible?
 No, merging accounts is not reversible. It is a permanent action that cannot be undone.
+## I have open expenses in the account I'm merging from. Will those expenses merge into the new account?
+All expenses must be reported and submitted for them to merge into the new account. Any open expenses will not merge.  
 ## Are there any restrictions on account merging?
 Yes! Please see below:
-* If your email address belongs to a verified domain (verified in Expensify), you must start the process from the email account under the verified domain. You cannot merge a verified company email account into a personal account.
-* If you have two accounts with two different verified domains, you cannot merge them together.
-## What happens to my “personal” Individual policy when merging accounts?
-The old “personal” Individual policy will be deleted. If you plan to submit reports under a different policy in the future, ensure that any reports on the Individual policy in the old account are marked as Open before merging the accounts. You can typically do this by selecting “Undo Submit” on any submitted reports. 
+- If your email address belongs to a verified domain (verified in Expensify), you must start the process from the email account under the verified domain. You cannot merge a verified company email account into a personal account.
+- If you have two accounts with two different verified domains, you cannot merge them together.
+## What happens to my “personal” Individual workspace when merging accounts?
+The old “personal” Individual workspace is deleted. If you plan to submit reports under a different workspace in the future, ensure that any reports on the Individual workspace in the old account are marked as Open before merging the accounts. You can typically do this by selecting “Undo Submit” on any submitted reports. 
diff --git a/docs/articles/expensify-classic/billing-and-subscriptions/Payment-Card.md b/docs/articles/expensify-classic/billing-and-subscriptions/Payment-Card.md
deleted file mode 100644
index 41a1fb96f56f..000000000000
--- a/docs/articles/expensify-classic/billing-and-subscriptions/Payment-Card.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Payment Card
-description: Payment Card
----
-## Resource Coming Soon!
diff --git a/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md b/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md
index 4c216faffc18..8bcc11fbf167 100644
--- a/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md
+++ b/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md
@@ -5,7 +5,30 @@ description: Get the most out of your Expensify Card with exclusive perks!
 
 
 # Overview
-The Expensify Card is packed with perks, both native to our Card program and through exclusive discounts with partnering solutions. Below, we’ll cover all of our exclusive offers in more detail and how to claim discounts with our partners.
+The Expensify Card is packed with perks, both native to our Card program and through exclusive discounts with partnering solutions. The Expensify Card’s primary perks include: 
+- Swipe to Win, where every swipe has a chance to win fun personalized gifts for you and your closest friends and family members
+- Unbeatable cash back incentive with each swipe
+Below, we’ll cover all of our exclusive offers in more detail and how to claim discounts with our partners.
+
+# Expensify Card Perks
+
+## Swipe to Win
+Swipe to Win is a new [Expensify Card](https://use.expensify.com/company-credit-card) perk that gives cardholders the chance to send a gift to a friend, family member, or essential worker on the frontlines!
+
+Winners can choose to _Send a Smile_ or _Send a Laugh_. To start, we’re offering one gift per option:
+
+- **Send A Smile:** Champagne by Expensify
+- **Send a Laugh:** Jenga Set
+
+**How to Participate**
+It’s easy! Once you have an Expensify Card, you just need to start using it. With each swipe, you're automatically entered to win and have a 1 in 250 chance of getting a prize!
+
+**How will I know if I’ve won?**
+Winners will be notified immediately via the Expensify app, and receive additional instructions on how to choose and send their desired gift. 
+
+If you don't have Expensify notifications turned on yet, here are some helpful guides:
+- [Apple Notification Preferences](https://support.apple.com/en-us/HT201925)
+- [Android Notification Preferences](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fsupport.google.com%2Fandroid%2Fanswer%2F9079661%3Fhl%3Den)
 
 # Partner Specific Perks
 
@@ -188,4 +211,3 @@ Stripe Atlas helps removes obstacles typically associated with starting a busine
 **Receive $100 off Stripe Atlas and get access to a startup toolkit and special offers on additional Strip Atlas services.**
 
 **How to redeem:** Sign up with your Expensify Card.
-
diff --git a/docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md b/docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md
deleted file mode 100644
index 6b85bb0364b5..000000000000
--- a/docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Coming Soon
-description: Coming Soon
----
diff --git a/docs/articles/new-expensify/get-paid-back/Distance-Requests.md b/docs/articles/new-expensify/get-paid-back/Distance-Requests.md
new file mode 100644
index 000000000000..91b88409be8b
--- /dev/null
+++ b/docs/articles/new-expensify/get-paid-back/Distance-Requests.md
@@ -0,0 +1,27 @@
+---
+title: Distance Requests
+description: How to create a distance request and request reimbursement for mileage
+---
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# Overview
+
+Expensify allows you to request reimbursement for mileage by creating a distance request from a map. You can send a distance request in Expensify's mobile, desktop, or web app.
+
+
+# How to create and send a distance request
+
+1. Click the green + button and select Request Money.
+2. Select Distance along the top row of the Request Money window.
+3. Enter the Start and Finish addresses then click Next. If there are multiple stops, you can add them before clicking Next.
+4. Choose who to send the request to by selecting your organization's workspace from the list of recent workspaces.
+5. On the confirmation page, confirm the amount, date, distance, and optionally add a description or category. Click the Request button.
+6. A workspace admin will receive your request and can reimburse you through Expensify or elsewhere!
+
+
+
+# FAQs
+
+## Is there an easy way to reuse recent locations?
+
+Yes! We save your recently used locations and list them out on the page where you select the Start and Finish.
diff --git a/docs/articles/new-expensify/workspace-and-domain-settings/Coming-Soon.md b/docs/articles/new-expensify/workspace-and-domain-settings/Coming-Soon.md
deleted file mode 100644
index 6b85bb0364b5..000000000000
--- a/docs/articles/new-expensify/workspace-and-domain-settings/Coming-Soon.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Coming Soon
-description: Coming Soon
----
diff --git a/docs/assets/images/ExpensifyHelp_Time.png b/docs/assets/images/ExpensifyHelp_Time.png
index a042ab60f681..f4d91b1e8aeb 100644
Binary files a/docs/assets/images/ExpensifyHelp_Time.png and b/docs/assets/images/ExpensifyHelp_Time.png differ
diff --git a/docs/assets/images/QBO1.png b/docs/assets/images/QBO1.png
index 911c02db70d3..4037db44d3bb 100644
Binary files a/docs/assets/images/QBO1.png and b/docs/assets/images/QBO1.png differ
diff --git a/docs/assets/images/QBO2-Bill.png b/docs/assets/images/QBO2-Bill.png
index 1aacd5980df9..f75716a85079 100644
Binary files a/docs/assets/images/QBO2-Bill.png and b/docs/assets/images/QBO2-Bill.png differ
diff --git a/docs/assets/images/QBO3-Checktoprint.png b/docs/assets/images/QBO3-Checktoprint.png
index b2ab0d6f01ce..732141a74353 100644
Binary files a/docs/assets/images/QBO3-Checktoprint.png and b/docs/assets/images/QBO3-Checktoprint.png differ
diff --git a/docs/assets/images/QBO4-JournalEntry.png b/docs/assets/images/QBO4-JournalEntry.png
index 289ccef5e3f9..342d20e49608 100644
Binary files a/docs/assets/images/QBO4-JournalEntry.png and b/docs/assets/images/QBO4-JournalEntry.png differ
diff --git a/docs/assets/images/QBO5-Expense.png b/docs/assets/images/QBO5-Expense.png
index 32abf4d31b8e..5d71f3955557 100644
Binary files a/docs/assets/images/QBO5-Expense.png and b/docs/assets/images/QBO5-Expense.png differ
diff --git a/docs/assets/images/QBO6-Check.png b/docs/assets/images/QBO6-Check.png
index 54b5a0ce26a9..087720a76875 100644
Binary files a/docs/assets/images/QBO6-Check.png and b/docs/assets/images/QBO6-Check.png differ
diff --git a/docs/assets/images/QBO7-Transactions.png b/docs/assets/images/QBO7-Transactions.png
index 40fa7036ed47..c7752c42870b 100644
Binary files a/docs/assets/images/QBO7-Transactions.png and b/docs/assets/images/QBO7-Transactions.png differ
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 5ce1b7f51147..a01a04f71b3c 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.6</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.1</string>
+	<string>1.4.7.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index f9675bc7cc27..095122c37ce4 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.6</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.1</string>
+	<string>1.4.7.0</string>
 </dict>
 </plist>
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index e0615c4a52fa..390511397b0e 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -726,8 +726,6 @@ PODS:
     - React-Core
   - RNCPicker (2.4.4):
     - React-Core
-  - RNDateTimePicker (3.5.2):
-    - React-Core
   - RNDeviceInfo (10.3.0):
     - React-Core
   - RNDevMenu (4.1.1):
@@ -919,7 +917,6 @@ DEPENDENCIES:
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
-  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNDevMenu (from `../node_modules/react-native-dev-menu`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
@@ -1121,8 +1118,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCPicker:
     :path: "../node_modules/@react-native-picker/picker"
-  RNDateTimePicker:
-    :path: "../node_modules/@react-native-community/datetimepicker"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNDevMenu:
@@ -1270,7 +1265,6 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60
   RNCClipboard: d77213bfa269013bf4b857b7a9ca37ee062d8ef1
   RNCPicker: 0b65be85fe7954fbb2062ef079e3d1cde252d888
-  RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140
   RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7
   RNDevMenu: 72807568fe4188bd4c40ce32675d82434b43c45d
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
diff --git a/package-lock.json b/package-lock.json
index 289c13c27e27..65173ccec496 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.6-1",
+  "version": "1.4.7-0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.6-1",
+      "version": "1.4.7-0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -26,7 +26,6 @@
         "@react-native-async-storage/async-storage": "^1.17.10",
         "@react-native-camera-roll/camera-roll": "5.4.0",
         "@react-native-clipboard/clipboard": "^1.12.1",
-        "@react-native-community/datetimepicker": "^3.5.2",
         "@react-native-community/geolocation": "^3.0.6",
         "@react-native-community/netinfo": "^9.3.10",
         "@react-native-firebase/analytics": "^12.3.0",
@@ -8292,15 +8291,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/@react-native-community/datetimepicker": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz",
-      "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==",
-      "license": "MIT",
-      "dependencies": {
-        "invariant": "^2.2.4"
-      }
-    },
     "node_modules/@react-native-community/eslint-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-3.0.0.tgz",
@@ -58712,14 +58702,6 @@
         "joi": "^17.2.1"
       }
     },
-    "@react-native-community/datetimepicker": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz",
-      "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==",
-      "requires": {
-        "invariant": "^2.2.4"
-      }
-    },
     "@react-native-community/eslint-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-3.0.0.tgz",
diff --git a/package.json b/package.json
index de4be2ace0f4..1693afc40b04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.6-1",
+  "version": "1.4.7-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -73,7 +73,6 @@
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-native-camera-roll/camera-roll": "5.4.0",
     "@react-native-clipboard/clipboard": "^1.12.1",
-    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/geolocation": "^3.0.6",
     "@react-native-community/netinfo": "^9.3.10",
     "@react-native-firebase/analytics": "^12.3.0",
diff --git a/src/App.js b/src/App.js
index ac34ece5c6c7..2caa6b9ffc29 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,8 +6,10 @@ import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
+import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
 import CustomStatusBar from './components/CustomStatusBar';
+import CustomStatusBarContextProvider from './components/CustomStatusBar/CustomStatusBarContextProvider';
 import ErrorBoundary from './components/ErrorBoundary';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
@@ -66,11 +68,14 @@ function App() {
                     ThemeProvider,
                     ThemeStylesProvider,
                     ThemeIllustrationsProvider,
+                    CustomStatusBarContextProvider,
                 ]}
             >
                 <CustomStatusBar />
                 <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
-                    <Expensify />
+                    <ColorSchemeWrapper>
+                        <Expensify />
+                    </ColorSchemeWrapper>
                 </ErrorBoundary>
             </ComposeProviders>
         </GestureHandlerRootView>
diff --git a/src/CONST.ts b/src/CONST.ts
index 8d928df71ef0..13b79179f431 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -497,6 +497,7 @@ const CONST = {
                 MODIFIEDEXPENSE: 'MODIFIEDEXPENSE',
                 MOVED: 'MOVED',
                 REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',
+                REIMBURSEMENTDEQUEUED: 'REIMBURSEMENTDEQUEUED',
                 RENAMED: 'RENAMED',
                 REPORTPREVIEW: 'REPORTPREVIEW',
                 SUBMITTED: 'SUBMITTED',
@@ -699,6 +700,14 @@ const CONST = {
         DARK: 'dark',
         SYSTEM: 'system',
     },
+    COLOR_SCHEME: {
+        LIGHT: 'light',
+        DARK: 'dark',
+    },
+    STATUS_BAR_STYLE: {
+        LIGHT_CONTENT: 'light-content',
+        DARK_CONTENT: 'dark-content',
+    },
     TRANSACTION: {
         DEFAULT_MERCHANT: 'Request',
         UNKNOWN_MERCHANT: 'Unknown Merchant',
@@ -1157,6 +1166,9 @@ const CONST = {
             SVG: 'svg',
         },
         RECEIPT_ERROR: 'receiptError',
+        CANCEL_REASON: {
+            PAYMENT_EXPIRED: 'CANCEL_REASON_PAYMENT_EXPIRED',
+        },
     },
 
     GROWL: {
@@ -2844,6 +2856,32 @@ const CONST = {
         RUNS: 20,
     },
 
+    /**
+     * Bank account names
+     */
+    BANK_NAMES: {
+        EXPENSIFY: 'expensify',
+        AMERICAN_EXPRESS: 'americanexpress',
+        BANK_OF_AMERICA: 'bank of america',
+        BB_T: 'bbt',
+        CAPITAL_ONE: 'capital one',
+        CHASE: 'chase',
+        CHARLES_SCHWAB: 'charles schwab',
+        CITIBANK: 'citibank',
+        CITIZENS_BANK: 'citizens bank',
+        DISCOVER: 'discover',
+        FIDELITY: 'fidelity',
+        GENERIC_BANK: 'generic bank',
+        HUNTINGTON_BANK: 'huntington bank',
+        NAVY_FEDERAL_CREDIT_UNION: 'navy federal credit union',
+        PNC: 'pnc',
+        REGIONS_BANK: 'regions bank',
+        SUNTRUST: 'suntrust',
+        TD_BANK: 'td bank',
+        US_BANK: 'us bank',
+        USAA: 'usaa',
+    },
+
     /**
      * Constants for maxToRenderPerBatch parameter that is used for FlatList or SectionList. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
      */
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 24b698c24619..a3aa28c44609 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -130,7 +130,10 @@ const ROUTES = {
         route: 'settings/profile/contact-methods/:contactMethod/details',
         getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details` as const,
     },
-    SETTINGS_NEW_CONTACT_METHOD: 'settings/profile/contact-methods/new',
+    SETTINGS_NEW_CONTACT_METHOD: {
+        route: 'settings/profile/contact-methods/new',
+        getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods/new', backTo),
+    },
     SETTINGS_2FA: {
         route: 'settings/security/two-factor-auth',
         getRoute: (backTo?: string) => getUrlWithBackToParam('settings/security/two-factor-auth', backTo),
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 3c7feb8fb70c..a955cf821f7f 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -8,6 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import colors from '@styles/colors';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
@@ -25,12 +26,13 @@ const defaultProps = {
 
 function CurrentLocationButton({onPress, isDisabled}) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
 
     return (
         <PressableWithFeedback
             style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
-            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
+            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(true), true)}
             onPress={onPress}
             accessibilityLabel={translate('location.useCurrent')}
             disabled={isDisabled}
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index a401300e920d..9f16766a22ae 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -509,7 +509,13 @@ function AddressSearch({
                         }}
                         styles={{
                             textInputContainer: [styles.flexColumn],
-                            listView: [StyleUtils.getGoogleListViewStyle(displayListViewBorder), styles.overflowAuto, styles.borderLeft, styles.borderRight, !isFocused && {height: 0}],
+                            listView: [
+                                StyleUtils.getGoogleListViewStyle(styles, displayListViewBorder),
+                                styles.overflowAuto,
+                                styles.borderLeft,
+                                styles.borderRight,
+                                !isFocused && {height: 0},
+                            ],
                             row: [styles.pv4, styles.ph3, styles.overflowAuto],
                             description: [styles.googleSearchText],
                             separator: [styles.googleSearchSeparator],
@@ -526,7 +532,7 @@ function AddressSearch({
                         inbetweenCompo={
                             // We want to show the current location button even if there are no recent destinations
                             predefinedPlaces.length === 0 && shouldShowCurrentLocationButton ? (
-                                <View style={[StyleUtils.getGoogleListViewStyle(true), styles.overflowAuto, styles.borderLeft, styles.borderRight]}>
+                                <View style={[StyleUtils.getGoogleListViewStyle(styles, true), styles.overflowAuto, styles.borderLeft, styles.borderRight]}>
                                     <CurrentLocationButton
                                         onPress={getCurrentLocation}
                                         isDisabled={network.isOffline}
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.tsx
similarity index 51%
rename from src/components/AnonymousReportFooter.js
rename to src/components/AnonymousReportFooter.tsx
index 387e2ab01930..65dc813a829d 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.tsx
@@ -1,57 +1,52 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Text, View} from 'react-native';
-import reportPropTypes from '@pages/reportPropTypes';
+import {OnyxCollection} from 'react-native-onyx';
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
+import {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
-import participantPropTypes from './participantPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-const propTypes = {
+type AnonymousReportFooterProps = {
     /** The report currently being looked at */
-    report: reportPropTypes,
+    report: OnyxEntry<Report>;
 
-    isSmallSizeLayout: PropTypes.bool,
+    /** Whether the small screen size layout should be used */
+    isSmallSizeLayout?: boolean;
 
     /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    report: {},
-    isSmallSizeLayout: false,
-    personalDetails: {},
+    personalDetails: OnyxCollection<PersonalDetails>;
 };
 
-function AnonymousReportFooter(props) {
+function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, report}: AnonymousReportFooterProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
-        <View style={styles.anonymousRoomFooter(props.isSmallSizeLayout)}>
+        <View style={styles.anonymousRoomFooter(isSmallSizeLayout)}>
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
-                    report={props.report}
-                    personalDetails={props.personalDetails}
+                    report={report}
+                    personalDetails={personalDetails}
                     isAnonymous
                     shouldEnableDetailPageNavigation
                 />
             </View>
-            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(props.isSmallSizeLayout)}>
-                <View style={[props.isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
-                    <View style={[props.isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
+            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(isSmallSizeLayout)}>
+                <View style={[isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
+                    <View style={[isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
                         <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
                     </View>
-                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
+                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{translate('anonymousReportFooter.logoTagline')}</Text>
                 </View>
                 <View style={[styles.anonymousRoomFooterSignInButton]}>
                     <Button
                         medium
                         success
-                        text={props.translate('common.signIn')}
+                        text={translate('common.signIn')}
                         onPress={() => Session.signOutAndRedirectToSignIn()}
                     />
                 </View>
@@ -60,8 +55,6 @@ function AnonymousReportFooter(props) {
     );
 }
 
-AnonymousReportFooter.propTypes = propTypes;
-AnonymousReportFooter.defaultProps = defaultProps;
 AnonymousReportFooter.displayName = 'AnonymousReportFooter';
 
-export default withLocalize(AnonymousReportFooter);
+export default AnonymousReportFooter;
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 3e5e7b4fdd9a..f24b82d8e867 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -6,6 +6,7 @@ import {ScrollView} from 'react-native-gesture-handler';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import viewForwardedRef from '@src/types/utils/viewForwardedRef';
@@ -39,6 +40,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
     ref: ForwardedRef<View | HTMLDivElement>,
 ) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const rowHeight = useSharedValue(0);
     const scrollRef = useRef<FlashList<TSuggestion>>(null);
     /**
@@ -47,7 +49,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
     const renderItem = useCallback(
         ({item, index}: RenderSuggestionMenuItemProps<TSuggestion>): ReactElement => (
             <PressableWithFeedback
-                style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)}
+                style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(theme, highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, hovered, index)}
                 hoverDimmingValue={1}
                 onMouseDown={(e) => e.preventDefault()}
                 onPress={() => onSelect(index)}
@@ -57,7 +59,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
                 {renderSuggestionMenuItem(item, index)}
             </PressableWithFeedback>
         ),
-        [highlightedSuggestionIndex, renderSuggestionMenuItem, onSelect, accessibilityLabelExtractor],
+        [highlightedSuggestionIndex, renderSuggestionMenuItem, onSelect, accessibilityLabelExtractor, theme],
     );
 
     const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length;
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 0052400bf51a..0e173f856593 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -81,10 +81,10 @@ function Avatar(props) {
 
     const imageStyle =
         props.imageStyles && props.imageStyles.length
-            ? [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, styles.noBorderRadius]
-            : [StyleUtils.getAvatarStyle(props.size), styles.noBorderRadius];
+            ? [StyleUtils.getAvatarStyle(theme, props.size), ...props.imageStyles, styles.noBorderRadius]
+            : [StyleUtils.getAvatarStyle(theme, props.size), styles.noBorderRadius];
 
-    const iconStyle = props.imageStyles && props.imageStyles.length ? [StyleUtils.getAvatarStyle(props.size), styles.bgTransparent, ...props.imageStyles] : undefined;
+    const iconStyle = props.imageStyles && props.imageStyles.length ? [StyleUtils.getAvatarStyle(theme, props.size), styles.bgTransparent, ...props.imageStyles] : undefined;
 
     const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name).fill : props.fill || theme.icon;
     const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(props.name) : props.fallbackIcon || Expensicons.FallbackAvatar;
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js
index de6d6b8ef6e2..9d7e6467e804 100644
--- a/src/components/AvatarWithDisplayName.js
+++ b/src/components/AvatarWithDisplayName.js
@@ -1,18 +1,19 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import DisplayNames from './DisplayNames';
 import MultipleAvatars from './MultipleAvatars';
@@ -21,8 +22,6 @@ import participantPropTypes from './participantPropTypes';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import SubscriptAvatar from './SubscriptAvatar';
 import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -45,70 +44,76 @@ const propTypes = {
 
     shouldEnableDetailPageNavigation: PropTypes.bool,
 
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
+    /* Onyx Props */
+    /** All of the actions of the report */
+    parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 };
 
 const defaultProps = {
     personalDetails: {},
     policy: {},
     report: {},
+    parentReportActions: {},
     isAnonymous: false,
     size: CONST.AVATAR_SIZE.DEFAULT,
     shouldEnableDetailPageNavigation: false,
 };
 
-const showActorDetails = (report, shouldEnableDetailPageNavigation = false) => {
-    // We should navigate to the details page if the report is a IOU/expense report
-    if (shouldEnableDetailPageNavigation) {
-        return ReportUtils.navigateToDetailsPage(report);
-    }
-
-    if (ReportUtils.isExpenseReport(report)) {
-        Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
-        return;
-    }
+function AvatarWithDisplayName({report, policy, size, isAnonymous, parentReportActions, personalDetails, shouldEnableDetailPageNavigation}) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const title = ReportUtils.getReportName(report);
+    const subtitle = ReportUtils.getChatRoomSubtitle(report);
+    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
+    const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(report) || ReportUtils.isMoneyRequest(report);
+    const icons = ReportUtils.getIcons(report, personalDetails, policy);
+    const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([report.ownerAccountID], personalDetails);
+    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
+    const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(report);
+    const isExpenseRequest = ReportUtils.isExpenseRequest(report);
+    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : size;
+    const avatarBorderColor = isAnonymous ? theme.highlightBG : theme.componentBG;
+
+    const actorAccountID = useRef(null);
+    useEffect(() => {
+        const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID], {});
+        actorAccountID.current = lodashGet(parentReportAction, 'actorAccountID', -1);
+    }, [parentReportActions, report]);
+
+    const showActorDetails = useCallback(() => {
+        // We should navigate to the details page if the report is a IOU/expense report
+        if (shouldEnableDetailPageNavigation) {
+            return ReportUtils.navigateToDetailsPage(report);
+        }
 
-    if (ReportUtils.isIOUReport(report)) {
-        Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
-        return;
-    }
+        if (ReportUtils.isExpenseReport(report)) {
+            Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
+            return;
+        }
 
-    if (ReportUtils.isChatThread(report)) {
-        const parentReportAction = ReportActionsUtils.getParentReportAction(report);
-        const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', -1);
-        // in an ideal situation account ID won't be 0
-        if (actorAccountID > 0) {
-            Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID));
+        if (ReportUtils.isIOUReport(report)) {
+            Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
             return;
         }
-    }
 
-    // report detail route is added as fallback but based on the current implementation this route won't be executed
-    Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
-};
+        if (ReportUtils.isChatThread(report)) {
+            // In an ideal situation account ID won't be 0
+            if (actorAccountID.current > 0) {
+                Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID.current));
+                return;
+            }
+        }
 
-function AvatarWithDisplayName(props) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const title = ReportUtils.getReportName(props.report);
-    const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
-    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(props.report);
-    const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(props.report) || ReportUtils.isMoneyRequest(props.report);
-    const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policy);
-    const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.ownerAccountID], props.personalDetails);
-    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
-    const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(props.report);
-    const isExpenseRequest = ReportUtils.isExpenseRequest(props.report);
-    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : props.size;
-    const avatarBorderColor = props.isAnonymous ? theme.highlightBG : theme.componentBG;
+        // Report detail route is added as fallback but based on the current implementation this route won't be executed
+        Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
+    }, [report, shouldEnableDetailPageNavigation]);
 
     const headerView = (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
-            {Boolean(props.report && title) && (
+            {Boolean(report && title) && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                     <PressableWithoutFeedback
-                        onPress={() => showActorDetails(props.report, props.shouldEnableDetailPageNavigation)}
+                        onPress={showActorDetails}
                         accessibilityLabel={title}
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                     >
@@ -122,7 +127,7 @@ function AvatarWithDisplayName(props) {
                         ) : (
                             <MultipleAvatars
                                 icons={icons}
-                                size={props.size}
+                                size={size}
                                 secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
                             />
                         )}
@@ -133,13 +138,13 @@ function AvatarWithDisplayName(props) {
                             displayNamesWithTooltips={displayNamesWithTooltips}
                             tooltipEnabled
                             numberOfLines={1}
-                            textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
-                            shouldUseFullTitle={isMoneyRequestOrReport || props.isAnonymous}
+                            textStyles={[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
+                            shouldUseFullTitle={isMoneyRequestOrReport || isAnonymous}
                         />
                         {!_.isEmpty(parentNavigationSubtitleData) && (
                             <ParentNavigationSubtitle
                                 parentNavigationSubtitleData={parentNavigationSubtitleData}
-                                parentReportID={props.report.parentReportID}
+                                parentReportID={report.parentReportID}
                             />
                         )}
                         {!_.isEmpty(subtitle) && (
@@ -156,13 +161,13 @@ function AvatarWithDisplayName(props) {
         </View>
     );
 
-    if (!props.shouldEnableDetailPageNavigation) {
+    if (!shouldEnableDetailPageNavigation) {
         return headerView;
     }
 
     return (
         <PressableWithoutFeedback
-            onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
+            onPress={() => ReportUtils.navigateToDetailsPage(report)}
             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
             accessibilityLabel={title}
             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
@@ -175,4 +180,9 @@ AvatarWithDisplayName.propTypes = propTypes;
 AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
 AvatarWithDisplayName.defaultProps = defaultProps;
 
-export default compose(withWindowDimensions, withLocalize)(AvatarWithDisplayName);
+export default withOnyx({
+    parentReportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
+        canEvict: false,
+    },
+})(AvatarWithDisplayName);
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.tsx
similarity index 62%
rename from src/components/AvatarWithIndicator.js
rename to src/components/AvatarWithIndicator.tsx
index f3607b69a73f..3ae9507350c8 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import * as UserUtils from '@libs/UserUtils';
@@ -9,38 +8,33 @@ import * as Expensicons from './Icon/Expensicons';
 import Indicator from './Indicator';
 import Tooltip from './Tooltip';
 
-const propTypes = {
+type AvatarWithIndicatorProps = {
     /** URL for the avatar */
-    source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    source: UserUtils.AvatarSource;
 
     /** To show a tooltip on hover */
-    tooltipText: PropTypes.string,
+    tooltipText?: string;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    fallbackIcon?: UserUtils.AvatarSource;
 
     /** Indicates whether the avatar is loaded or not  */
-    isLoading: PropTypes.bool,
+    isLoading?: boolean;
 };
 
-const defaultProps = {
-    tooltipText: '',
-    fallbackIcon: Expensicons.FallbackAvatar,
-    isLoading: true,
-};
-
-function AvatarWithIndicator(props) {
+function AvatarWithIndicator({source, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
     const styles = useThemeStyles();
+
     return (
-        <Tooltip text={props.tooltipText}>
+        <Tooltip text={tooltipText}>
             <View style={[styles.sidebarAvatar]}>
-                {props.isLoading ? (
+                {isLoading ? (
                     <AvatarSkeleton />
                 ) : (
                     <>
                         <Avatar
-                            source={UserUtils.getSmallSizeAvatar(props.source)}
-                            fallbackIcon={props.fallbackIcon}
+                            source={UserUtils.getSmallSizeAvatar(source)}
+                            fallbackIcon={fallbackIcon}
                         />
                         <Indicator />
                     </>
@@ -50,8 +44,6 @@ function AvatarWithIndicator(props) {
     );
 }
 
-AvatarWithIndicator.defaultProps = defaultProps;
-AvatarWithIndicator.propTypes = propTypes;
 AvatarWithIndicator.displayName = 'AvatarWithIndicator';
 
 export default AvatarWithIndicator;
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 575646f7dd9c..ff963589d80f 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -38,8 +38,8 @@ function Badge({success = false, error = false, pressable = false, text, environ
     const Wrapper = pressable ? PressableWithoutFeedback : View;
 
     const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
-        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
-        [styles.badge, styles.ml2, success, error, environment, badgeStyles],
+        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(styles, success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
+        [success, error, environment, badgeStyles, styles],
     );
 
     return (
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 1c92208a7aa2..e97d73d28c8c 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -3,6 +3,7 @@ import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
@@ -41,6 +42,7 @@ type BannerProps = {
 
 function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
 
     return (
@@ -65,7 +67,7 @@ function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRend
                                 <View style={[styles.mr3]}>
                                     <Icon
                                         src={Expensicons.Exclamation}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(shouldHighlight))}
+                                        fill={StyleUtils.getIconFillColor(theme, getButtonState(shouldHighlight))}
                                     />
                                 </View>
                             )}
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 04a569ba7f36..035d8bf4b981 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -6,6 +6,7 @@ import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
@@ -51,6 +52,7 @@ const defaultProps = {
  */
 function BaseMiniContextMenuItem(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     return (
         <Tooltip text={props.tooltipText}>
             <PressableWithoutFeedback
@@ -73,7 +75,7 @@ function BaseMiniContextMenuItem(props) {
                 accessibilityLabel={props.tooltipText}
                 style={({hovered, pressed}) => [
                     styles.reportActionContextMenuMiniButton,
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
+                    StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
                     props.isDelayButtonStateComplete && styles.cursorDefault,
                 ]}
             >
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 6ee5ed1c558f..22577ec2b7f9 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -98,7 +98,7 @@ function Checkbox(
             {children ?? (
                 <View
                     style={[
-                        StyleUtils.getCheckboxContainerStyle(containerSize, containerBorderRadius),
+                        StyleUtils.getCheckboxContainerStyle(theme, containerSize, containerBorderRadius),
                         containerStyle,
                         isChecked && styles.checkedContainer,
                         hasError && styles.borderColorDanger,
diff --git a/src/components/ColorSchemeWrapper/index.native.tsx b/src/components/ColorSchemeWrapper/index.native.tsx
new file mode 100644
index 000000000000..9f68ee97d330
--- /dev/null
+++ b/src/components/ColorSchemeWrapper/index.native.tsx
@@ -0,0 +1,5 @@
+function ColorSchemeWrapper({children}: React.PropsWithChildren) {
+    return children;
+}
+
+export default ColorSchemeWrapper;
diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx
new file mode 100644
index 000000000000..577ccf9f3794
--- /dev/null
+++ b/src/components/ColorSchemeWrapper/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import {View} from 'react-native';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+
+function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
+    const theme = useTheme();
+    const themeStyles = useThemeStyles();
+
+    return <View style={[themeStyles.flex1, themeStyles.colorSchemeStyle(theme.colorScheme)]}>{children}</View>;
+}
+
+export default ColorSchemeWrapper;
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index cbf8a6e40abd..48eb89bb0296 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -171,11 +171,10 @@ function Composer({
     const {windowWidth} = useWindowDimensions();
     const textRef = useRef(null);
     const textInput = useRef(null);
-    const initialValue = defaultValue ? `${defaultValue}` : `${value || ''}`;
     const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp);
     const [selection, setSelection] = useState({
-        start: initialValue.length,
-        end: initialValue.length,
+        start: selectionProp.start,
+        end: selectionProp.end,
     });
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index a8f7e3172c81..7059e0161001 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -5,6 +5,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
 import getContextMenuItemStyles from '@styles/getContextMenuItemStyles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
@@ -54,6 +55,7 @@ const defaultProps = {
 
 function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {windowWidth} = useWindowDimensions();
     const [isThrottledButtonActive, setThrottledButtonInactive] = useThrottledButtonState();
 
@@ -85,7 +87,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
                 <Icon
                     small
                     src={itemIcon}
-                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isThrottledButtonActive))}
+                    fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, !isThrottledButtonActive))}
                 />
             )}
         </BaseMiniContextMenuItem>
diff --git a/src/components/CustomStatusBar/CustomStatusBarContext.tsx b/src/components/CustomStatusBar/CustomStatusBarContext.tsx
new file mode 100644
index 000000000000..b2c317b05c25
--- /dev/null
+++ b/src/components/CustomStatusBar/CustomStatusBarContext.tsx
@@ -0,0 +1,11 @@
+import {createContext} from 'react';
+
+type CustomStatusBarContextType = {
+    isRootStatusBarDisabled: boolean;
+    disableRootStatusBar: (isDisabled: boolean) => void;
+};
+
+const CustomStatusBarContext = createContext<CustomStatusBarContextType>({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined});
+
+export default CustomStatusBarContext;
+export {type CustomStatusBarContextType};
diff --git a/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx b/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx
new file mode 100644
index 000000000000..27a5cac5d8cc
--- /dev/null
+++ b/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx
@@ -0,0 +1,17 @@
+import React, {useMemo, useState} from 'react';
+import CustomStatusBarContext from './CustomStatusBarContext';
+
+function CustomStatusBarContextProvider({children}: React.PropsWithChildren) {
+    const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false);
+    const value = useMemo(
+        () => ({
+            isRootStatusBarDisabled,
+            disableRootStatusBar,
+        }),
+        [isRootStatusBarDisabled],
+    );
+
+    return <CustomStatusBarContext.Provider value={value}>{children}</CustomStatusBarContext.Provider>;
+}
+
+export default CustomStatusBarContextProvider;
diff --git a/src/components/CustomStatusBar/index.android.tsx b/src/components/CustomStatusBar/index.android.tsx
deleted file mode 100644
index 81b4f1d25f67..000000000000
--- a/src/components/CustomStatusBar/index.android.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * On Android we setup the status bar in native code.
- */
-import type CustomStatusBarType from './types';
-
-// eslint-disable-next-line react/function-component-definition
-const CustomStatusBar: CustomStatusBarType = () =>
-    // Prefer to not render the StatusBar component in Android as it can cause
-    // issues with edge to edge display. We setup the status bar appearance in
-    // MainActivity.java and styles.xml.
-    null;
-
-CustomStatusBar.displayName = 'CustomStatusBar';
-
-export default CustomStatusBar;
diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx
index c5c013c2bef9..3b5022c60898 100644
--- a/src/components/CustomStatusBar/index.tsx
+++ b/src/components/CustomStatusBar/index.tsx
@@ -1,29 +1,91 @@
-import React, {useEffect} from 'react';
-import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
+import {EventListenerCallback, NavigationContainerEventMap} from '@react-navigation/native';
+import PropTypes from 'prop-types';
+import React, {useCallback, useContext, useEffect} from 'react';
+import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
-import type CustomStatusBarType from './types';
+import CustomStatusBarContext from './CustomStatusBarContext';
+import updateStatusBarAppearance from './updateStatusBarAppearance';
+
+type CustomStatusBarProps = {
+    isNested: boolean;
+};
+
+const propTypes = {
+    /** Whether the CustomStatusBar is nested within another CustomStatusBar.
+     *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
+    isNested: PropTypes.bool,
+};
+
+type CustomStatusBarType = {
+    (props: CustomStatusBarProps): React.ReactNode;
+    displayName: string;
+    propTypes: typeof propTypes;
+};
 
 // eslint-disable-next-line react/function-component-definition
-const CustomStatusBar: CustomStatusBarType = () => {
+const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
+    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext);
     const theme = useTheme();
+
+    const isDisabled = !isNested && isRootStatusBarDisabled;
+
     useEffect(() => {
-        Navigation.isNavigationReady().then(() => {
-            // Set the status bar colour depending on the current route.
-            // If we don't have any colour defined for a route, fall back to
-            // appBG color.
-            const currentRoute = navigationRef.getCurrentRoute();
-            let currentScreenBackgroundColor = theme.appBG;
-            if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_BACKGROUND_COLORS) {
-                currentScreenBackgroundColor = theme.PAGE_BACKGROUND_COLORS[currentRoute.name];
+        if (isNested) {
+            disableRootStatusBar(true);
+        }
+
+        return () => {
+            if (!isNested) {
+                return;
             }
-            StatusBar.setBarStyle('light-content', true);
-            StatusBar.setBackgroundColor(currentScreenBackgroundColor);
-        });
-    }, [theme.PAGE_BACKGROUND_COLORS, theme.appBG]);
+            disableRootStatusBar(false);
+        };
+    }, [disableRootStatusBar, isNested]);
+
+    const updateStatusBarStyle = useCallback<EventListenerCallback<NavigationContainerEventMap, 'state'>>(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        // Set the status bar colour depending on the current route.
+        // If we don't have any colour defined for a route, fall back to
+        // appBG color.
+        const currentRoute = navigationRef.getCurrentRoute();
+
+        let currentScreenBackgroundColor = theme.appBG;
+        let statusBarStyle = theme.statusBarStyle;
+        if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {
+            const screenTheme = theme.PAGE_THEMES[currentRoute.name];
+            currentScreenBackgroundColor = screenTheme.backgroundColor;
+            statusBarStyle = screenTheme.statusBarStyle;
+        }
+
+        updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle});
+    }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
+
+    useEffect(() => {
+        navigationRef.addListener('state', updateStatusBarStyle);
+
+        return () => navigationRef.removeListener('state', updateStatusBarStyle);
+    }, [updateStatusBarStyle]);
+
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        updateStatusBarAppearance({statusBarStyle: theme.statusBarStyle});
+    }, [isDisabled, theme.statusBarStyle]);
+
+    if (isDisabled) {
+        return null;
+    }
+
     return <StatusBar />;
 };
 
 CustomStatusBar.displayName = 'CustomStatusBar';
+CustomStatusBar.propTypes = propTypes;
 
 export default CustomStatusBar;
diff --git a/src/components/CustomStatusBar/types.ts b/src/components/CustomStatusBar/types.ts
deleted file mode 100644
index 7fecd02beba0..000000000000
--- a/src/components/CustomStatusBar/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-type CustomStatusBar = {
-    (): React.ReactNode;
-    displayName: string;
-};
-
-export default CustomStatusBar;
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts
new file mode 100644
index 000000000000..b7651d4549de
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts
@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    StatusBar.setBackgroundColor('transparent');
+    StatusBar.setTranslucent(true);
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts
new file mode 100644
index 000000000000..61fcb056bba5
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts
@@ -0,0 +1,10 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (!statusBarStyle) {
+        return;
+    }
+    StatusBar.setBarStyle(statusBarStyle, true);
+}
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts
new file mode 100644
index 000000000000..574efd90f0b5
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts
@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+export default function updateStatusBarAppearance({backgroundColor, statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (backgroundColor) {
+        StatusBar.setBackgroundColor(backgroundColor, true);
+    }
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
new file mode 100644
index 000000000000..3d16b5944a31
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
@@ -0,0 +1,8 @@
+import {StatusBarStyle} from '@styles/styles';
+
+type UpdateStatusBarAppearanceProps = {
+    backgroundColor?: string;
+    statusBarStyle?: StatusBarStyle;
+};
+
+export default UpdateStatusBarAppearanceProps;
diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
deleted file mode 100644
index 02d11806b8af..000000000000
--- a/src/components/DatePicker/datepickerPropTypes.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import {defaultProps as defaultFieldPropTypes, propTypes as fieldPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes';
-import CONST from '@src/CONST';
-
-const propTypes = {
-    ...fieldPropTypes,
-
-    /**
-     * The datepicker supports any value that `new Date()` can parse.
-     * `onInputChange` would always be called with a Date (or null)
-     */
-    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-
-    /**
-     * The datepicker supports any defaultValue that `new Date()` can parse.
-     * `onInputChange` would always be called with a Date (or null)
-     */
-    defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-
-    /** The earliest date allowed to select */
-    minDate: PropTypes.instanceOf(Date),
-
-    /** The latest date allowed to select */
-    maxDate: PropTypes.instanceOf(Date),
-};
-
-const defaultProps = {
-    ...defaultFieldPropTypes,
-    value: undefined,
-    minDate: new Date(CONST.DATE.MIN_DATE),
-    maxDate: new Date(CONST.DATE.MAX_DATE),
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
deleted file mode 100644
index 5e7086fb78ad..000000000000
--- a/src/components/DatePicker/index.android.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import RNDatePicker from '@react-native-community/datetimepicker';
-import {format, parseISO} from 'date-fns';
-import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
-import {Keyboard} from 'react-native';
-import TextInput from '@components/TextInput';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './datepickerPropTypes';
-
-const DatePicker = forwardRef(({value, defaultValue, label, placeholder, errorText, containerStyles, disabled, onBlur, onInputChange, maxDate, minDate}, outerRef) => {
-    const styles = useThemeStyles();
-    const ref = useRef();
-
-    const [isPickerVisible, setIsPickerVisible] = useState(false);
-
-    /**
-     * @param {Event} event
-     * @param {Date} selectedDate
-     */
-    const setDate = (event, selectedDate) => {
-        setIsPickerVisible(false);
-
-        if (event.type === 'set') {
-            onInputChange(format(selectedDate, CONST.DATE.FNS_FORMAT_STRING));
-        }
-    };
-
-    const showPicker = useCallback(() => {
-        Keyboard.dismiss();
-        setIsPickerVisible(true);
-    }, []);
-
-    useImperativeHandle(
-        outerRef,
-        () => ({
-            ...ref.current,
-            focus: showPicker,
-        }),
-        [showPicker],
-    );
-
-    const date = value || defaultValue;
-    const dateAsText = date ? format(parseISO(date), CONST.DATE.FNS_FORMAT_STRING) : '';
-
-    return (
-        <>
-            <TextInput
-                label={label}
-                accessibilityLabel={label}
-                role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                value={dateAsText}
-                forceActiveLabel
-                placeholder={placeholder}
-                errorText={errorText}
-                containerStyles={containerStyles}
-                textInputContainerStyles={isPickerVisible ? [styles.borderColorFocus] : []}
-                onPress={showPicker}
-                readOnly
-                disabled={disabled}
-                onBlur={onBlur}
-                ref={ref}
-            />
-            {isPickerVisible && (
-                <RNDatePicker
-                    value={date ? parseISO(date) : new Date()}
-                    mode="date"
-                    onChange={setDate}
-                    maximumDate={maxDate}
-                    minimumDate={minDate}
-                />
-            )}
-        </>
-    );
-});
-
-DatePicker.propTypes = propTypes;
-DatePicker.defaultProps = defaultProps;
-DatePicker.displayName = 'DatePicker';
-
-export default DatePicker;
diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
deleted file mode 100644
index 44a825aa8183..000000000000
--- a/src/components/DatePicker/index.ios.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import RNDatePicker from '@react-native-community/datetimepicker';
-import {format, parseISO} from 'date-fns';
-import isFunction from 'lodash/isFunction';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Button, Keyboard, View} from 'react-native';
-import Popover from '@components/Popover';
-import TextInput from '@components/TextInput';
-import useKeyboardState from '@hooks/useKeyboardState';
-import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './datepickerPropTypes';
-
-function DatePicker({value, defaultValue, innerRef, onInputChange, preferredLocale, minDate, maxDate, label, disabled, onBlur, placeholder, containerStyles, errorText}) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const dateValue = value || defaultValue;
-    const [isPickerVisible, setIsPickerVisible] = useState(false);
-    const [selectedDate, setSelectedDate] = useState(dateValue ? new Date(dateValue) : new Date());
-    const {isKeyboardShown} = useKeyboardState();
-    const {translate} = useLocalize();
-    const initialValue = useRef(null);
-    const inputRef = useRef(null);
-
-    const showPicker = useCallback(() => {
-        initialValue.current = selectedDate;
-
-        // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS
-        // See https://github.com/Expensify/App/issues/14084 for more context
-        if (!isKeyboardShown) {
-            setIsPickerVisible(true);
-            return;
-        }
-
-        const listener = Keyboard.addListener('keyboardDidHide', () => {
-            setIsPickerVisible(true);
-            listener.remove();
-        });
-        Keyboard.dismiss();
-    }, [isKeyboardShown, selectedDate]);
-
-    useEffect(() => {
-        if (!isFunction(innerRef)) {
-            return;
-        }
-
-        const input = inputRef.current;
-
-        if (input && input.focus && isFunction(input.focus)) {
-            innerRef({...input, focus: showPicker});
-            return;
-        }
-
-        innerRef(input);
-    }, [innerRef, showPicker]);
-
-    /**
-     * Reset the date spinner to the initial value
-     */
-    const reset = () => {
-        setSelectedDate(initialValue.current);
-    };
-
-    /**
-     * Accept the current spinner changes, close the spinner and propagate the change
-     * to the parent component (onInputChange)
-     */
-    const selectDate = () => {
-        setIsPickerVisible(false);
-        onInputChange(format(selectedDate, CONST.DATE.FNS_FORMAT_STRING));
-    };
-
-    /**
-     * @param {Event} event
-     * @param {Date} date
-     */
-    const updateLocalDate = (event, date) => {
-        setSelectedDate(date);
-    };
-
-    const dateAsText = dateValue ? format(parseISO(dateValue), CONST.DATE.FNS_FORMAT_STRING) : '';
-
-    return (
-        <>
-            <TextInput
-                forceActiveLabel
-                label={label}
-                accessibilityLabel={label}
-                role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                value={dateAsText}
-                placeholder={placeholder}
-                errorText={errorText}
-                containerStyles={containerStyles}
-                textInputContainerStyles={[isPickerVisible && styles.borderColorFocus]}
-                onPress={showPicker}
-                readOnly
-                disabled={disabled}
-                onBlur={onBlur}
-                ref={inputRef}
-            />
-            <Popover
-                isVisible={isPickerVisible}
-                onClose={selectDate}
-            >
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.borderBottom, styles.pb1, styles.ph4]}>
-                    <Button
-                        title={translate('common.reset')}
-                        color={theme.textError}
-                        onPress={reset}
-                    />
-
-                    <Button
-                        title={translate('common.done')}
-                        color={theme.link}
-                        onPress={selectDate}
-                    />
-                </View>
-                <RNDatePicker
-                    value={selectedDate}
-                    mode="date"
-                    display="spinner"
-                    themeVariant="dark"
-                    onChange={updateLocalDate}
-                    locale={preferredLocale}
-                    maximumDate={maxDate}
-                    minimumDate={minDate}
-                />
-            </Popover>
-        </>
-    );
-}
-
-DatePicker.propTypes = propTypes;
-DatePicker.defaultProps = defaultProps;
-DatePicker.displayName = 'DatePicker';
-
-/**
- * We're applying localization here because we present a modal (with buttons) ourselves
- * Furthermore we're passing the locale down so that the modal and the date spinner are in the same
- * locale. Otherwise the spinner would be present in the system locale and it would be weird if it happens
- * that the modal buttons are in one locale (app) while the (spinner) month names are another (system)
- */
-const DatePickerWithRef = React.forwardRef((props, ref) => (
-    <DatePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        innerRef={ref}
-    />
-));
-
-DatePickerWithRef.displayName = 'DatePickerWithRef';
-
-export default DatePickerWithRef;
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
deleted file mode 100644
index 16d2eb2668a3..000000000000
--- a/src/components/DatePicker/index.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import {format, isValid, parseISO} from 'date-fns';
-import React, {useEffect, useRef} from 'react';
-import _ from 'underscore';
-import TextInput from '@components/TextInput';
-import * as Browser from '@libs/Browser';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './datepickerPropTypes';
-import './styles.css';
-
-function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, placeholder, errorText, containerStyles, disabled, onBlur}) {
-    const inputRef = useRef(null);
-
-    useEffect(() => {
-        // Adds nice native datepicker on web/desktop. Not possible to set this through props
-        inputRef.current.setAttribute('type', 'date');
-        inputRef.current.setAttribute('max', format(new Date(maxDate), CONST.DATE.FNS_FORMAT_STRING));
-        inputRef.current.setAttribute('min', format(new Date(minDate), CONST.DATE.FNS_FORMAT_STRING));
-        inputRef.current.classList.add('expensify-datepicker');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    /**
-     * Trigger the `onChange` handler when the user input has a complete date or is cleared
-     * @param {String} text
-     */
-    const setDate = (text) => {
-        if (!text) {
-            onInputChange('');
-            return;
-        }
-
-        const date = parseISO(text);
-        if (isValid(date)) {
-            onInputChange(format(date, CONST.DATE.FNS_FORMAT_STRING));
-        }
-    };
-
-    /**
-     * Pops the datepicker up when we focus this field. This only works on mWeb chrome
-     * On mWeb chrome the user needs to tap on the field again in order to bring the datepicker. But our current styles
-     * don't make this very obvious. To avoid confusion we open the datepicker when the user focuses the field
-     */
-    const showDatepicker = () => {
-        if (!inputRef.current || !Browser.isMobileChrome()) {
-            return;
-        }
-
-        inputRef.current.click();
-    };
-
-    return (
-        <TextInput
-            forceActiveLabel
-            ref={(el) => {
-                inputRef.current = el;
-
-                if (_.isFunction(innerRef)) {
-                    innerRef(el);
-                }
-            }}
-            onFocus={showDatepicker}
-            label={label}
-            accessibilityLabel={label}
-            role={CONST.ACCESSIBILITY_ROLE.TEXT}
-            onInputChange={setDate}
-            value={value}
-            placeholder={placeholder}
-            errorText={errorText}
-            containerStyles={containerStyles}
-            disabled={disabled}
-            onBlur={onBlur}
-        />
-    );
-}
-
-DatePicker.displayName = 'DatePicker';
-DatePicker.propTypes = propTypes;
-DatePicker.defaultProps = defaultProps;
-
-const DatePickerWithRef = React.forwardRef((props, ref) => (
-    <DatePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        innerRef={ref}
-    />
-));
-
-DatePickerWithRef.displayName = 'DatePickerWithRef';
-
-export default DatePickerWithRef;
diff --git a/src/components/DatePicker/styles.css b/src/components/DatePicker/styles.css
deleted file mode 100644
index c9883835531a..000000000000
--- a/src/components/DatePicker/styles.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Using a .css file is a special case here, because it's impossible to target
- * pseudo-elements from js code (e.g. ::-webkit)
- * It also helps in cases like using the Datepicker in Storybook - the styles are imported
- * with the component
- */
-
-.expensify-datepicker::-webkit-calendar-picker-indicator {
-    color-scheme: dark;
-    cursor: pointer;
-    padding: 18px 13px;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-}
-.expensify-datepicker::-webkit-date-and-time-value {
-    text-align: left;
-}
diff --git a/src/components/DisplayNames/index.native.tsx b/src/components/DisplayNames/index.native.tsx
index 8d1d3d2866ed..8f1fef37a6ba 100644
--- a/src/components/DisplayNames/index.native.tsx
+++ b/src/components/DisplayNames/index.native.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
 import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
 import DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
 function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1}: DisplayNamesProps) {
+    const {translate} = useLocalize();
     return (
         <Text
             accessibilityLabel={accessibilityLabel}
             style={textStyles}
             numberOfLines={numberOfLines}
         >
-            {fullTitle}
+            {fullTitle || translate('common.hidden')}
         </Text>
     );
 }
diff --git a/src/components/DisplayNames/index.tsx b/src/components/DisplayNames/index.tsx
index f5714fcbfb8b..7ff1081937d5 100644
--- a/src/components/DisplayNames/index.tsx
+++ b/src/components/DisplayNames/index.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
+import useLocalize from '@hooks/useLocalize';
 import DisplayNamesWithoutTooltip from './DisplayNamesWithoutTooltip';
 import DisplayNamesWithToolTip from './DisplayNamesWithTooltip';
 import DisplayNamesProps from './types';
 
 function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, shouldUseFullTitle, displayNamesWithTooltips}: DisplayNamesProps) {
+    const {translate} = useLocalize();
+    const title = fullTitle || translate('common.hidden');
+
     if (!tooltipEnabled) {
         return (
             <DisplayNamesWithoutTooltip
                 textStyles={textStyles}
                 numberOfLines={numberOfLines}
-                fullTitle={fullTitle}
+                fullTitle={title}
             />
         );
     }
@@ -17,7 +21,7 @@ function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, sho
     return (
         <DisplayNamesWithToolTip
             shouldUseFullTitle={shouldUseFullTitle}
-            fullTitle={fullTitle}
+            fullTitle={title}
             displayNamesWithTooltips={displayNamesWithTooltips}
             textStyles={textStyles}
             numberOfLines={numberOfLines}
diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx
index 112feab166cf..b90093e20fc3 100644
--- a/src/components/DotIndicatorMessage.tsx
+++ b/src/components/DotIndicatorMessage.tsx
@@ -92,7 +92,7 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles}: DotIndica
                         <Text
                             // eslint-disable-next-line react/no-array-index-key
                             key={i}
-                            style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), textStyles]}
+                            style={[StyleUtils.getDotIndicatorTextStyles(styles, isErrorMessage), textStyles]}
                         >
                             {message}
                         </Text>
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index 6ced702b316c..aeb31dd87397 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -38,7 +38,11 @@ function CategoryShortcutButton(props) {
                 onPress={props.onPress}
                 onHoverIn={() => setIsHighlighted(true)}
                 onHoverOut={() => setIsHighlighted(false)}
-                style={({pressed}) => [StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.categoryShortcutButton, isHighlighted && styles.emojiItemHighlighted]}
+                style={({pressed}) => [
+                    StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(false, pressed)),
+                    styles.categoryShortcutButton,
+                    isHighlighted && styles.emojiItemHighlighted,
+                ]}
                 accessibilityLabel={`emojiPicker.headers.${props.code}`}
                 role={CONST.ACCESSIBILITY_ROLE.BUTTON}
             >
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index db1834296a52..f61c4624db32 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -7,6 +7,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 
@@ -31,6 +32,7 @@ const defaultProps = {
 
 function EmojiPickerButton(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const emojiPopoverAnchor = useRef(null);
 
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
@@ -39,7 +41,7 @@ function EmojiPickerButton(props) {
         <Tooltip text={props.translate('reportActionCompose.emoji')}>
             <PressableWithoutFeedback
                 ref={emojiPopoverAnchor}
-                style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}
+                style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed))]}
                 disabled={props.isDisabled}
                 onPress={() => {
                     if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) {
@@ -54,7 +56,7 @@ function EmojiPickerButton(props) {
                 {({hovered, pressed}) => (
                     <Icon
                         src={Expensicons.Emoji}
-                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                        fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed))}
                     />
                 )}
             </PressableWithoutFeedback>
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index 7b4f4066593c..fe659612c846 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -9,6 +9,7 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import CONST from '@src/CONST';
@@ -26,6 +27,7 @@ const defaultProps = {
 
 function EmojiPickerButtonDropdown(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const emojiPopoverAnchor = useRef(null);
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
 
@@ -64,7 +66,7 @@ function EmojiPickerButtonDropdown(props) {
                         <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled, styles.rotate90]}>
                             <Icon
                                 src={Expensicons.ArrowRight}
-                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                                fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed))}
                             />
                         </View>
                     </View>
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
index 24f876841ff7..f674d3c4fa0e 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import * as Browser from '@libs/Browser';
 import getButtonState from '@libs/getButtonState';
@@ -32,7 +33,9 @@ const propTypes = {
 
     /** Whether the menu item should be highlighted or not */
     isHighlighted: PropTypes.bool,
+
     ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 class EmojiPickerMenuItem extends PureComponent {
@@ -97,7 +100,7 @@ class EmojiPickerMenuItem extends PureComponent {
                 style={({pressed}) => [
                     this.props.isFocused ? this.props.themeStyles.emojiItemKeyboardHighlighted : {},
                     this.state.isHovered || this.props.isHighlighted ? this.props.themeStyles.emojiItemHighlighted : {},
-                    Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                    Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(false, pressed)),
                     this.props.themeStyles.emojiItem,
                 ]}
                 accessibilityLabel={this.props.emoji}
@@ -121,9 +124,11 @@ EmojiPickerMenuItem.defaultProps = {
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
 // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action.
-export default withThemeStyles(
-    React.memo(
-        EmojiPickerMenuItem,
-        (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji,
+export default withTheme(
+    withThemeStyles(
+        React.memo(
+            EmojiPickerMenuItem,
+            (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji,
+        ),
     ),
 );
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
index 151fabf85be3..ca24dde6b861 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -34,7 +35,9 @@ const propTypes = {
 
     /** Whether the emoji is highlighted by the keyboard/mouse */
     isUsingKeyboardMovement: PropTypes.bool,
+
     ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 class EmojiPickerMenuItem extends PureComponent {
@@ -72,7 +75,7 @@ class EmojiPickerMenuItem extends PureComponent {
                 onBlur={this.props.onBlur}
                 ref={(ref) => (this.ref = ref)}
                 style={({pressed}) => [
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                    StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(false, pressed)),
                     this.props.isHighlighted && this.props.isUsingKeyboardMovement ? this.props.themeStyles.emojiItemKeyboardHighlighted : {},
                     this.props.isHighlighted && !this.props.isUsingKeyboardMovement ? this.props.themeStyles.emojiItemHighlighted : {},
                     this.props.themeStyles.emojiItem,
@@ -99,10 +102,12 @@ EmojiPickerMenuItem.defaultProps = {
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
 // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action.
-export default withThemeStyles(
-    React.memo(
-        EmojiPickerMenuItem,
-        (prevProps, nextProps) =>
-            prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement,
+export default withTheme(
+    withThemeStyles(
+        React.memo(
+            EmojiPickerMenuItem,
+            (prevProps, nextProps) =>
+                prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement,
+        ),
     ),
 );
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index bb983a680af8..f141624699ed 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -1,9 +1,10 @@
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useCallback} from 'react';
 import {View} from 'react-native';
 import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
@@ -43,33 +44,37 @@ const keyExtractor = (item: SimpleEmoji, index: number): string => `${item.name}
 
 function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferredSkinToneIndex, highlightedEmojiIndex = 0, measureParentContainer = () => {}}: EmojiSuggestionsProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     /**
      * Render an emoji suggestion menu item component.
      */
-    const renderSuggestionMenuItem = (item: SimpleEmoji): ReactElement => {
-        const styledTextArray = getStyledTextArray(item.name, prefix);
+    const renderSuggestionMenuItem = useCallback(
+        (item: SimpleEmoji): ReactElement => {
+            const styledTextArray = getStyledTextArray(item.name, prefix);
 
-        return (
-            <View style={styles.autoCompleteSuggestionContainer}>
-                <Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
-                <Text
-                    numberOfLines={2}
-                    style={styles.emojiSuggestionsText}
-                >
-                    :
-                    {styledTextArray.map(({text, isColored}) => (
-                        <Text
-                            key={`${text}+${isColored}`}
-                            style={StyleUtils.getColoredBackgroundStyle(isColored)}
-                        >
-                            {text}
-                        </Text>
-                    ))}
-                    :
-                </Text>
-            </View>
-        );
-    };
+            return (
+                <View style={styles.autoCompleteSuggestionContainer}>
+                    <Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
+                    <Text
+                        numberOfLines={2}
+                        style={styles.emojiSuggestionsText}
+                    >
+                        :
+                        {styledTextArray.map(({text, isColored}) => (
+                            <Text
+                                key={`${text}+${isColored}`}
+                                style={StyleUtils.getColoredBackgroundStyle(theme, isColored)}
+                            >
+                                {text}
+                            </Text>
+                        ))}
+                        :
+                    </Text>
+                </View>
+            );
+        },
+        [styles, theme, prefix, preferredSkinToneIndex],
+    );
 
     return (
         <AutoCompleteSuggestions
diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js
index 85195864cdc3..7b0c70372579 100644
--- a/src/components/FeatureList.js
+++ b/src/components/FeatureList.js
@@ -42,6 +42,7 @@ function FeatureList({menuItems, headline, description}) {
                     iconHeight={60}
                     iconStyles={[styles.mr3, styles.ml3]}
                     interactive={false}
+                    wrapperStyle={[styles.cursorAuto]}
                 />
             ))}
         </>
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index af2511fc9f74..6908faaf3a01 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -237,6 +237,8 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     .first()
                     .value() || '';
 
+            const value = !_.isUndefined(inputValues[`${inputID}ToDisplay`]) ? inputValues[`${inputID}ToDisplay`] : inputValues[inputID];
+
             return {
                 ...propsToParse,
                 ref:
@@ -249,7 +251,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                 inputID,
                 key: propsToParse.key || inputID,
                 errorText: errors[inputID] || fieldErrorMessage,
-                value: inputValues[inputID],
+                value,
                 // As the text input is controlled, we never set the defaultValue prop
                 // as this is already happening by the value prop.
                 defaultValue: undefined,
@@ -309,13 +311,19 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                         propsToParse.onBlur(event);
                     }
                 },
-                onInputChange: (value, key) => {
+                onInputChange: (inputValue, key) => {
                     const inputKey = key || inputID;
                     setInputValues((prevState) => {
-                        const newState = {
-                            ...prevState,
-                            [inputKey]: value,
-                        };
+                        const newState = _.isFunction(propsToParse.valueParser)
+                            ? {
+                                  ...prevState,
+                                  [inputKey]: propsToParse.valueParser(inputValue),
+                                  [`${inputKey}ToDisplay`]: _.isFunction(propsToParse.displayParser) ? propsToParse.displayParser(inputValue) : inputValue,
+                              }
+                            : {
+                                  ...prevState,
+                                  [inputKey]: inputValue,
+                              };
 
                         if (shouldValidateOnChange) {
                             onValidate(newState);
@@ -328,7 +336,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     }
 
                     if (_.isFunction(propsToParse.onValueChange)) {
-                        propsToParse.onValueChange(value, inputKey);
+                        propsToParse.onValueChange(inputValue, inputKey);
                     }
                 },
             };
diff --git a/src/components/Form/InputWrapper.js b/src/components/Form/InputWrapper.js
index 9a31210195c4..11e74d2759b1 100644
--- a/src/components/Form/InputWrapper.js
+++ b/src/components/Form/InputWrapper.js
@@ -9,11 +9,15 @@ const propTypes = {
     inputID: PropTypes.string.isRequired,
     valueType: PropTypes.string,
     forwardedRef: refPropTypes,
+    valueParser: PropTypes.func,
+    displayParser: PropTypes.func,
 };
 
 const defaultProps = {
     forwardedRef: undefined,
     valueType: 'string',
+    valueParser: undefined,
+    displayParser: undefined,
 };
 
 function InputWrapper(props) {
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
index 4a2fa28082b6..1b59219f38be 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Animated} from 'react-native';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
@@ -11,14 +11,12 @@ const propTypes = {
 
 function GrowlNotificationContainer(props) {
     const styles = useThemeStyles();
+    const insets = useSafeAreaInsets;
+
     return (
-        <SafeAreaInsetsContext.Consumer>
-            {(insets) => (
-                <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
-                    {props.children}
-                </Animated.View>
-            )}
-        </SafeAreaInsetsContext.Consumer>
+        <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
+            {props.children}
+        </Animated.View>
     );
 }
 
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index eb238ec0dd7d..65c287b8e86b 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -3,15 +3,17 @@ import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
 import Text from '@components/Text';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function MentionHereRenderer(props) {
+    const theme = useTheme();
     return (
         <Text>
             <Text
                 // Passing the true value to the function as here mention is always for the current user
-                color={StyleUtils.getMentionTextColor(true)}
-                style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(true)]}
+                color={StyleUtils.getMentionTextColor(theme, true)}
+                style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(theme, true)]}
             >
                 <TNodeChildrenRenderer tnode={props.tnode} />
             </Text>
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index a60be614d9bc..fc53c8c51611 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -1,23 +1,22 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
-import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
@@ -26,23 +25,22 @@ const propTypes = {
 
     /** Current user personal details */
     currentUserPersonalDetails: personalDetailsPropType.isRequired,
-
-    /** Personal details of all users */
-    personalDetails: personalDetailsPropType.isRequired,
 };
 
 function MentionUserRenderer(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
     const htmlAttribAccountID = lodashGet(props.tnode.attributes, 'accountid');
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     let accountID;
     let displayNameOrLogin;
     let navigationRoute;
 
     if (!_.isEmpty(htmlAttribAccountID)) {
-        const user = lodashGet(props.personalDetails, htmlAttribAccountID);
+        const user = lodashGet(personalDetails, htmlAttribAccountID);
         accountID = parseInt(htmlAttribAccountID, 10);
         displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(lodashGet(user, 'login', '')) || lodashGet(user, 'displayName', '') || translate('common.hidden');
         navigationRoute = ROUTES.PROFILE.getRoute(htmlAttribAccountID);
@@ -79,7 +77,7 @@ function MentionUserRenderer(props) {
                         }}
                     >
                         <Text
-                            style={[styles.link, _.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}
+                            style={[styles.link, _.omit(props.style, 'color'), StyleUtils.getMentionStyle(theme, isOurMention), {color: StyleUtils.getMentionTextColor(theme, isOurMention)}]}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
                             testID="span"
                             href={`/${navigationRoute}`}
@@ -98,11 +96,4 @@ function MentionUserRenderer(props) {
 MentionUserRenderer.propTypes = propTypes;
 MentionUserRenderer.displayName = 'MentionUserRenderer';
 
-export default compose(
-    withCurrentUserPersonalDetails,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-    }),
-)(MentionUserRenderer);
+export default withCurrentUserPersonalDetails(MentionUserRenderer);
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index 051e18ed675e..0434bd1f9bdd 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -15,6 +15,7 @@ import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -56,6 +57,7 @@ function HeaderWithBackButton({
     shouldNavigateToTopMostReport = false,
 }) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
@@ -131,7 +133,7 @@ function HeaderWithBackButton({
                             >
                                 <Icon
                                     src={Expensicons.Download}
-                                    fill={iconFill || StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
+                                    fill={iconFill || StyleUtils.getIconFillColor(theme, getButtonState(false, false, !isDownloadButtonActive))}
                                 />
                             </PressableWithoutFeedback>
                         </Tooltip>
diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx
new file mode 100644
index 000000000000..28ae36e8a556
--- /dev/null
+++ b/src/components/Hoverable/ActiveHoverable.tsx
@@ -0,0 +1,137 @@
+import {cloneElement, forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {DeviceEventEmitter} from 'react-native';
+import assignRef from '@libs/assignRef';
+import CONST from '@src/CONST';
+import HoverableProps from './types';
+
+type ActiveHoverableProps = Omit<HoverableProps, 'disabled'>;
+
+function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: ActiveHoverableProps, outerRef: Ref<HTMLElement>) {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const elementRef = useRef<HTMLElement | null>(null);
+    const isScrollingRef = useRef(false);
+    const isHoveredRef = useRef(false);
+
+    const updateIsHovered = useCallback(
+        (hovered: boolean) => {
+            isHoveredRef.current = hovered;
+            if (shouldHandleScroll && isScrollingRef.current) {
+                return;
+            }
+            setIsHovered(hovered);
+        },
+        [shouldHandleScroll],
+    );
+
+    // Expose inner ref to parent through outerRef. This enable us to use ref both in parent and child.
+    useImperativeHandle<HTMLElement | null, HTMLElement | null>(outerRef, () => elementRef.current, []);
+
+    useEffect(() => {
+        if (isHovered) {
+            onHoverIn?.();
+        } else {
+            onHoverOut?.();
+        }
+    }, [isHovered, onHoverIn, onHoverOut]);
+
+    useEffect(() => {
+        if (!shouldHandleScroll) {
+            return;
+        }
+
+        const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => {
+            isScrollingRef.current = scrolling;
+            if (!isScrollingRef.current) {
+                setIsHovered(isHoveredRef.current);
+            }
+        });
+
+        return () => scrollingListener.remove();
+    }, [shouldHandleScroll]);
+
+    useEffect(() => {
+        // Do not mount a listener if the component is not hovered
+        if (!isHovered) {
+            return;
+        }
+
+        /**
+         * Checks the hover state of a component and updates it based on the event target.
+         * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger,
+         * such as when an element is removed before the mouseleave event is triggered.
+         * @param event The hover event object.
+         */
+        const unsetHoveredIfOutside = (event: MouseEvent) => {
+            if (!elementRef.current || elementRef.current.contains(event.target as Node)) {
+                return;
+            }
+
+            setIsHovered(false);
+        };
+
+        document.addEventListener('mouseover', unsetHoveredIfOutside);
+
+        return () => document.removeEventListener('mouseover', unsetHoveredIfOutside);
+    }, [isHovered, elementRef]);
+
+    useEffect(() => {
+        const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false);
+
+        document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
+
+        return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
+    }, []);
+
+    const child = useMemo(() => (typeof children === 'function' ? children(!isScrollingRef.current && isHovered) : children), [children, isHovered]);
+
+    const childOnMouseEnter = child.props.onMouseEnter;
+    const childOnMouseLeave = child.props.onMouseLeave;
+
+    const hoverAndForwardOnMouseEnter = useCallback(
+        (e: MouseEvent) => {
+            updateIsHovered(true);
+            childOnMouseEnter?.(e);
+        },
+        [updateIsHovered, childOnMouseEnter],
+    );
+
+    const unhoverAndForwardOnMouseLeave = useCallback(
+        (e: MouseEvent) => {
+            updateIsHovered(false);
+            childOnMouseLeave?.(e);
+        },
+        [updateIsHovered, childOnMouseLeave],
+    );
+
+    const unhoverAndForwardOnBlur = useCallback(
+        (event: MouseEvent) => {
+            // Check if the blur event occurred due to clicking outside the element
+            // and the wrapperView contains the element that caused the blur and reset isHovered
+            if (!elementRef.current?.contains(event.target as Node) && !elementRef.current?.contains(event.relatedTarget as Node)) {
+                setIsHovered(false);
+            }
+
+            child.props.onBlur?.(event);
+        },
+        [child.props],
+    );
+
+    // We need to access the ref of a children from both parent and current component
+    // So we pass it to current ref and assign it once again to the child ref prop
+    const hijackRef = (el: HTMLElement) => {
+        elementRef.current = el;
+        if (child.ref) {
+            assignRef(child.ref, el);
+        }
+    };
+
+    return cloneElement(child, {
+        ref: hijackRef,
+        onMouseEnter: hoverAndForwardOnMouseEnter,
+        onMouseLeave: unhoverAndForwardOnMouseLeave,
+        onBlur: unhoverAndForwardOnBlur,
+    });
+}
+
+export default forwardRef(ActiveHoverable);
diff --git a/src/components/Hoverable/index.tsx b/src/components/Hoverable/index.tsx
index 9c641cfc19be..1dee5a943e35 100644
--- a/src/components/Hoverable/index.tsx
+++ b/src/components/Hoverable/index.tsx
@@ -1,212 +1,27 @@
-import React, {ForwardedRef, forwardRef, MutableRefObject, ReactElement, RefAttributes, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import {DeviceEventEmitter} from 'react-native';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import CONST from '@src/CONST';
+import React, {cloneElement, forwardRef, Ref} from 'react';
+import {hasHoverSupport} from '@libs/DeviceCapabilities';
+import ActiveHoverable from './ActiveHoverable';
 import HoverableProps from './types';
 
-/**
- * Maps the children of a Hoverable component to
- * - a function that is called with the parameter
- * - the child itself if it is the only child
- * @param children The children to map.
- * @param callbackParam The parameter to pass to the children function.
- * @returns The mapped children.
- */
-function mapChildren(children: ((isHovered: boolean) => ReactElement) | ReactElement | ReactElement[], callbackParam: boolean): ReactElement & RefAttributes<HTMLElement> {
-    if (Array.isArray(children)) {
-        return children[0];
-    }
-
-    if (typeof children === 'function') {
-        return children(callbackParam);
-    }
-
-    return children;
-}
-
-/**
- * Assigns a ref to an element, either by setting the current property of the ref object or by calling the ref function
- * @param ref The ref object or function.
- * @param element The element to assign the ref to.
- */
-function assignRef(ref: ((instance: HTMLElement | null) => void) | MutableRefObject<HTMLElement | null>, element: HTMLElement) {
-    if (!ref) {
-        return;
-    }
-    if (typeof ref === 'function') {
-        ref(element);
-    } else if ('current' in ref) {
-        // eslint-disable-next-line no-param-reassign
-        ref.current = element;
-    }
-}
-
 /**
  * It is necessary to create a Hoverable component instead of relying solely on Pressable support for hover state,
  * because nesting Pressables causes issues where the hovered state of the child cannot be easily propagated to the
  * parent. https://github.com/necolas/react-native-web/issues/1875
  */
-function Hoverable(
-    {disabled = false, onHoverIn = () => {}, onHoverOut = () => {}, onMouseEnter = () => {}, onMouseLeave = () => {}, children, shouldHandleScroll = false}: HoverableProps,
-    outerRef: ForwardedRef<HTMLElement>,
-) {
-    const [isHovered, setIsHovered] = useState(false);
-
-    const isScrolling = useRef(false);
-    const isHoveredRef = useRef(false);
-    const ref = useRef<HTMLElement | null>(null);
-
-    const updateIsHoveredOnScrolling = useCallback(
-        (hovered: boolean) => {
-            if (disabled) {
-                return;
-            }
-
-            isHoveredRef.current = hovered;
-
-            if (shouldHandleScroll && isScrolling.current) {
-                return;
-            }
-            setIsHovered(hovered);
-        },
-        [disabled, shouldHandleScroll],
-    );
-
-    useEffect(() => {
-        const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false);
-
-        document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
-
-        return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
-    }, []);
-
-    useEffect(() => {
-        if (!shouldHandleScroll) {
-            return;
-        }
-
-        const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => {
-            isScrolling.current = scrolling;
-            if (!scrolling) {
-                setIsHovered(isHoveredRef.current);
-            }
-        });
-
-        return () => scrollingListener.remove();
-    }, [shouldHandleScroll]);
-
-    useEffect(() => {
-        if (!DeviceCapabilities.hasHoverSupport()) {
-            return;
-        }
-
-        /**
-         * Checks the hover state of a component and updates it based on the event target.
-         * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger,
-         * such as when an element is removed before the mouseleave event is triggered.
-         * @param event The hover event object.
-         */
-        const unsetHoveredIfOutside = (event: MouseEvent) => {
-            if (!ref.current || !isHovered) {
-                return;
-            }
-
-            if (ref.current.contains(event.target as Node)) {
-                return;
-            }
-
-            setIsHovered(false);
-        };
-
-        document.addEventListener('mouseover', unsetHoveredIfOutside);
-
-        return () => document.removeEventListener('mouseover', unsetHoveredIfOutside);
-    }, [isHovered]);
-
-    useEffect(() => {
-        if (!disabled || !isHovered) {
-            return;
-        }
-        setIsHovered(false);
-    }, [disabled, isHovered]);
-
-    useEffect(() => {
-        if (disabled) {
-            return;
-        }
-        if (onHoverIn && isHovered) {
-            return onHoverIn();
-        }
-        if (onHoverOut && !isHovered) {
-            return onHoverOut();
-        }
-    }, [disabled, isHovered, onHoverIn, onHoverOut]);
-
-    // Expose inner ref to parent through outerRef. This enable us to use ref both in parent and child.
-    useImperativeHandle<HTMLElement | null, HTMLElement | null>(outerRef, () => ref.current, []);
-
-    const child = useMemo(() => React.Children.only(mapChildren(children, isHovered)), [children, isHovered]);
-
-    const enableHoveredOnMouseEnter = useCallback(
-        (event: MouseEvent) => {
-            updateIsHoveredOnScrolling(true);
-            onMouseEnter(event);
-
-            if (typeof child.props.onMouseEnter === 'function') {
-                child.props.onMouseEnter(event);
-            }
-        },
-        [child.props, onMouseEnter, updateIsHoveredOnScrolling],
-    );
-
-    const disableHoveredOnMouseLeave = useCallback(
-        (event: MouseEvent) => {
-            updateIsHoveredOnScrolling(false);
-            onMouseLeave(event);
-
-            if (typeof child.props.onMouseLeave === 'function') {
-                child.props.onMouseLeave(event);
-            }
-        },
-        [child.props, onMouseLeave, updateIsHoveredOnScrolling],
-    );
-
-    const disableHoveredOnBlur = useCallback(
-        (event: MouseEvent) => {
-            // Check if the blur event occurred due to clicking outside the element
-            // and the wrapperView contains the element that caused the blur and reset isHovered
-            if (!ref.current?.contains(event.target as Node) && !ref.current?.contains(event.relatedTarget as Node)) {
-                setIsHovered(false);
-            }
-
-            if (typeof child.props.onBlur === 'function') {
-                child.props.onBlur(event);
-            }
-        },
-        [child.props],
-    );
-
-    // We need to access the ref of a children from both parent and current component
-    // So we pass it to current ref and assign it once again to the child ref prop
-    const hijackRef = (el: HTMLElement) => {
-        ref.current = el;
-        if (child.ref) {
-            assignRef(child.ref, el);
-        }
-    };
-
-    if (!DeviceCapabilities.hasHoverSupport()) {
-        return React.cloneElement(child, {
-            ref: hijackRef,
-        });
+function Hoverable({isDisabled, ...props}: HoverableProps, ref: Ref<HTMLElement>) {
+    // If Hoverable is disabled, just render the child without additional logic or event listeners.
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    if (isDisabled || !hasHoverSupport()) {
+        return cloneElement(typeof props.children === 'function' ? props.children(false) : props.children, {ref});
     }
 
-    return React.cloneElement(child, {
-        ref: hijackRef,
-        onMouseEnter: enableHoveredOnMouseEnter,
-        onMouseLeave: disableHoveredOnMouseLeave,
-        onBlur: disableHoveredOnBlur,
-    });
+    return (
+        <ActiveHoverable
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+        />
+    );
 }
 
 export default forwardRef(Hoverable);
diff --git a/src/components/Hoverable/types.ts b/src/components/Hoverable/types.ts
index 430b865f50c5..bea066bdb3bb 100644
--- a/src/components/Hoverable/types.ts
+++ b/src/components/Hoverable/types.ts
@@ -1,11 +1,11 @@
-import {ReactElement} from 'react';
+import {ReactElement, RefAttributes} from 'react';
 
 type HoverableProps = {
     /** Children to wrap with Hoverable. */
-    children: ((isHovered: boolean) => ReactElement) | ReactElement;
+    children: ((isHovered: boolean) => ReactElement & RefAttributes<HTMLElement>) | (ReactElement & RefAttributes<HTMLElement>);
 
     /** Whether to disable the hover action */
-    disabled?: boolean;
+    isDisabled?: boolean;
 
     /** Function that executes when the mouse moves over the children. */
     onHoverIn?: () => void;
@@ -13,12 +13,6 @@ type HoverableProps = {
     /** Function that executes when the mouse leaves the children. */
     onHoverOut?: () => void;
 
-    /** Direct pass-through of React's onMouseEnter event. */
-    onMouseEnter?: (event: MouseEvent) => void;
-
-    /** Direct pass-through of React's onMouseLeave event. */
-    onMouseLeave?: (event: MouseEvent) => void;
-
     /** Decides whether to handle the scroll behaviour to show hover once the scroll ends */
     shouldHandleScroll?: boolean;
 };
diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index 5144948c7c51..81e9075091c6 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,60 +1,14 @@
-import {CSSProperties} from 'react';
-import {ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
-import AmericanExpress from '@assets/images/bankicons/american-express.svg';
-import BankOfAmerica from '@assets/images/bankicons/bank-of-america.svg';
-import BB_T from '@assets/images/bankicons/bb-t.svg';
-import CapitalOne from '@assets/images/bankicons/capital-one.svg';
-import CharlesSchwab from '@assets/images/bankicons/charles-schwab.svg';
-import Chase from '@assets/images/bankicons/chase.svg';
-import CitiBank from '@assets/images/bankicons/citibank.svg';
-import CitizensBank from '@assets/images/bankicons/citizens-bank.svg';
-import Discover from '@assets/images/bankicons/discover.svg';
-import Fidelity from '@assets/images/bankicons/fidelity.svg';
 import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
-import HuntingtonBank from '@assets/images/bankicons/huntington-bank.svg';
-import NavyFederalCreditUnion from '@assets/images/bankicons/navy-federal-credit-union.svg';
-import PNC from '@assets/images/bankicons/pnc.svg';
-import RegionsBank from '@assets/images/bankicons/regions-bank.svg';
-import SunTrust from '@assets/images/bankicons/suntrust.svg';
-import TdBank from '@assets/images/bankicons/td-bank.svg';
-import USBank from '@assets/images/bankicons/us-bank.svg';
-import USAA from '@assets/images/bankicons/usaa.svg';
-// Card Icons
-import AmericanExpressCard from '@assets/images/cardicons/american-express.svg';
-import BankOfAmericaCard from '@assets/images/cardicons/bank-of-america.svg';
-import BB_TCard from '@assets/images/cardicons/bb-t.svg';
-import CapitalOneCard from '@assets/images/cardicons/capital-one.svg';
-import CharlesSchwabCard from '@assets/images/cardicons/charles-schwab.svg';
-import ChaseCard from '@assets/images/cardicons/chase.svg';
-import CitiBankCard from '@assets/images/cardicons/citibank.svg';
-import CitizensBankCard from '@assets/images/cardicons/citizens.svg';
-import DiscoverCard from '@assets/images/cardicons/discover.svg';
-import ExpensifyCardImage from '@assets/images/cardicons/expensify-card-dark.svg';
-import FidelityCard from '@assets/images/cardicons/fidelity.svg';
 import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
-import HuntingtonBankCard from '@assets/images/cardicons/huntington-bank.svg';
-import NavyFederalCreditUnionCard from '@assets/images/cardicons/navy-federal-credit-union.svg';
-import PNCCard from '@assets/images/cardicons/pnc.svg';
-import RegionsBankCard from '@assets/images/cardicons/regions-bank.svg';
-import SunTrustCard from '@assets/images/cardicons/suntrust.svg';
-import TdBankCard from '@assets/images/cardicons/td-bank.svg';
-import USBankCard from '@assets/images/cardicons/us-bank.svg';
-import USAACard from '@assets/images/cardicons/usaa.svg';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 import variables from '@styles/variables';
-
-type BankIcon = {
-    icon: React.FC<SvgProps>;
-    iconSize?: number;
-    iconHeight?: number;
-    iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
-};
+import CONST from '@src/CONST';
+import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
 
 type BankIconParams = {
-    themeStyles: typeof styles;
-    bankName?: string;
+    themeStyles: ThemeStyles;
+    bankName?: BankName;
     isCard?: boolean;
 };
 
@@ -62,97 +16,102 @@ type BankIconParams = {
  * Returns matching asset icon for bankName
  */
 
-function getAssetIcon(bankName: string, isCard: boolean): React.FC<SvgProps> {
-    if (bankName.includes('expensify')) {
-        return ExpensifyCardImage;
-    }
-
-    if (bankName.includes('americanexpress')) {
-        return isCard ? AmericanExpressCard : AmericanExpress;
-    }
-
-    if (bankName.includes('bank of america') || bankName.includes('bankofamerica')) {
-        return isCard ? BankOfAmericaCard : BankOfAmerica;
-    }
-
-    if (bankName.startsWith('bbt')) {
-        return isCard ? BB_TCard : BB_T;
-    }
-
-    if (bankName.startsWith('capital one') || bankName.includes('capitalone')) {
-        return isCard ? CapitalOneCard : CapitalOne;
-    }
-
-    if (bankName.startsWith('chase') || bankName.includes('chase')) {
-        return isCard ? ChaseCard : Chase;
-    }
-
-    if (bankName.includes('charles schwab') || bankName.includes('charlesschwab')) {
-        return isCard ? CharlesSchwabCard : CharlesSchwab;
-    }
-
-    if (bankName.startsWith('citibank') || bankName.includes('citibank')) {
-        return isCard ? CitiBankCard : CitiBank;
-    }
-
-    if (bankName.startsWith('citizens bank') || bankName.includes('citizensbank')) {
-        return isCard ? CitizensBankCard : CitizensBank;
-    }
-
-    if (bankName.startsWith('discover ') || bankName.includes('discover.') || bankName === 'discover') {
-        return isCard ? DiscoverCard : Discover;
-    }
-
-    if (bankName.startsWith('fidelity')) {
-        return isCard ? FidelityCard : Fidelity;
-    }
-
-    if (bankName.startsWith('huntington bank') || bankName.includes('huntingtonnational') || bankName.includes('huntington national')) {
-        return isCard ? HuntingtonBankCard : HuntingtonBank;
-    }
-
-    if (bankName.startsWith('navy federal credit union') || bankName.includes('navy federal credit union')) {
-        return isCard ? NavyFederalCreditUnionCard : NavyFederalCreditUnion;
-    }
-
-    if (bankName.startsWith('pnc') || bankName.includes('pnc')) {
-        return isCard ? PNCCard : PNC;
-    }
-
-    if (bankName.startsWith('regions bank') || bankName.includes('regionsbank')) {
-        return isCard ? RegionsBankCard : RegionsBank;
-    }
-
-    if (bankName.startsWith('suntrust') || bankName.includes('suntrust')) {
-        return isCard ? SunTrustCard : SunTrust;
-    }
-
-    if (bankName.startsWith('td bank') || bankName.startsWith('tdbank') || bankName.includes('tdbank')) {
-        return isCard ? TdBankCard : TdBank;
-    }
-
-    if (bankName.startsWith('us bank') || bankName.startsWith('usbank')) {
-        return isCard ? USBankCard : USBank;
-    }
-
-    if (bankName.includes('usaa')) {
-        return isCard ? USAACard : USAA;
-    }
+function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC<SvgProps> {
+    const bankValue = CONST.BANK_NAMES[bankNameKey];
+
+    // This maps bank names to their respective icon paths.
+    // The purpose is to avoid importing these at the app startup stage.
+    // Depending on whether 'isCard' is true, it selects either a card icon or a bank icon.
+    const iconMappings = {
+        [CONST.BANK_NAMES.EXPENSIFY]: isCard
+            ? (require('@assets/images/cardicons/expensify-card-dark.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/expensify.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.AMERICAN_EXPRESS]: isCard
+            ? (require('@assets/images/cardicons/american-express.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/american-express.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.BANK_OF_AMERICA]: isCard
+            ? (require('@assets/images/cardicons/bank-of-america.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/bank-of-america.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.BB_T]: isCard
+            ? (require('@assets/images/cardicons/bb-t.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/bb-t.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CAPITAL_ONE]: isCard
+            ? (require('@assets/images/cardicons/capital-one.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/capital-one.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CHASE]: isCard
+            ? (require('@assets/images/cardicons/chase.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/chase.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CHARLES_SCHWAB]: isCard
+            ? (require('@assets/images/cardicons/charles-schwab.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/charles-schwab.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CITIBANK]: isCard
+            ? (require('@assets/images/cardicons/citibank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/citibank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CITIZENS_BANK]: isCard
+            ? (require('@assets/images/cardicons/citizens.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/citizens-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.DISCOVER]: isCard
+            ? (require('@assets/images/cardicons/discover.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/discover.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.FIDELITY]: isCard
+            ? (require('@assets/images/cardicons/fidelity.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/fidelity.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.GENERIC_BANK]: isCard
+            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.HUNTINGTON_BANK]: isCard
+            ? (require('@assets/images/cardicons/huntington-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/huntington-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard
+            ? (require('@assets/images/cardicons/navy-federal-credit-union.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/navy-federal-credit-union.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.PNC]: isCard
+            ? (require('@assets/images/cardicons/pnc.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/pnc.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.REGIONS_BANK]: isCard
+            ? (require('@assets/images/cardicons/regions-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/regions-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.SUNTRUST]: isCard
+            ? (require('@assets/images/cardicons/suntrust.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/suntrust.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.TD_BANK]: isCard
+            ? (require('@assets/images/cardicons/td-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/td-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.US_BANK]: isCard
+            ? (require('@assets/images/cardicons/us-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/us-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.USAA]: isCard
+            ? (require('@assets/images/cardicons/usaa.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/usaa.svg').default as React.FC<SvgProps>),
+    } as const;
+
+    // Fallback to generic bank/card icon
+    const iconModule =
+        iconMappings[bankValue] ||
+        (isCard
+            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC<SvgProps>));
+    return iconModule;
+}
 
-    return isCard ? GenericBankCard : GenericBank;
+function getBankNameKey(bankName: string): BankNameKey {
+    const bank = Object.entries(CONST.BANK_NAMES).find(([, value]) => value?.toLowerCase() === bankName);
+    return (bank?.[0] as BankNameKey) ?? '';
 }
 
 /**
  * Returns Bank Icon Object that matches to existing bank icons or default icons
  */
-
 export default function getBankIcon({themeStyles, bankName, isCard = false}: BankIconParams): BankIcon {
     const bankIcon: BankIcon = {
         icon: isCard ? GenericBankCard : GenericBank,
     };
-
     if (bankName) {
-        bankIcon.icon = getAssetIcon(bankName.toLowerCase(), isCard);
+        const bankNameKey = getBankNameKey(bankName.toLowerCase());
+
+        if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) {
+            bankIcon.icon = getAssetIcon(bankNameKey, isCard);
+        }
     }
 
     // For default Credit Card icon the icon size should not be set.
@@ -167,3 +126,5 @@ export default function getBankIcon({themeStyles, bankName, isCard = false}: Ban
 
     return bankIcon;
 }
+
+export type {BankName};
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 61243eb90969..fd607a0e81a9 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -257,7 +257,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) {
             <PressableWithoutFeedback
                 style={{
                     ...StyleUtils.getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight, containerWidth, isLoading),
-                    ...StyleUtils.getZoomCursorStyle(isZoomed, isDragging),
+                    ...StyleUtils.getZoomCursorStyle(styles, isZoomed, isDragging),
                     ...(isZoomed && zoomScale >= 1 ? styles.pRelative : styles.pAbsolute),
                     ...styles.flex1,
                 }}
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 0d300c5e2179..86de188f9db8 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -10,6 +10,7 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
@@ -117,7 +118,9 @@ function LHNOptionsList({
             const transactionID = lodashGet(itemParentReportAction, ['originalMessage', 'IOUTransactionID'], '');
             const itemTransaction = transactionID ? transactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] : {};
             const itemComment = draftComments[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] || '';
-            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);
+            const participants = [ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport.ownerAccountID];
+
+            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
 
             return (
                 <OptionRowLHNData
diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
index ee12a9699c3e..4e4912322bb1 100644
--- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
+++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.js
@@ -44,14 +44,14 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr
             <View style={styles.offlineFeedback.textContainer}>
                 {isPermissionDenied ? (
                     <Text>
-                        <Text style={[StyleUtils.getDotIndicatorTextStyles()]}>{`${translate('location.permissionDenied')} ${translate('location.please')}`}</Text>
+                        <Text style={[StyleUtils.getDotIndicatorTextStyles(styles)]}>{`${translate('location.permissionDenied')} ${translate('location.please')}`}</Text>
                         <TextLink
                             onPress={onAllowLocationLinkPress}
                             style={styles.locationErrorLinkText}
                         >
                             {` ${translate('location.allowPermission')} `}
                         </TextLink>
-                        <Text style={[StyleUtils.getDotIndicatorTextStyles()]}>{translate('location.tryAgain')}</Text>
+                        <Text style={[StyleUtils.getDotIndicatorTextStyles(styles)]}>{translate('location.tryAgain')}</Text>
                     </Text>
                 ) : (
                     <Text style={styles.offlineFeedback.text}>{translate('location.notFound')}</Text>
diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js
index 1f3dd061a4bd..c40962c8e631 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -407,7 +407,7 @@ function MagicCodeInput(props) {
                         <View
                             style={[
                                 styles.textInputContainer,
-                                StyleUtils.getHeightOfMagicCodeInput(),
+                                StyleUtils.getHeightOfMagicCodeInput(styles),
                                 props.hasError || props.errorText ? styles.borderColorDanger : {},
                                 focusedIndex === index ? styles.borderColorFocus : {},
                             ]}
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index f04212ae113b..ae4b566f98ee 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -57,57 +57,60 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
     /**
      * Render a suggestion menu item component.
      */
-    const renderSuggestionMenuItem = (item: Mention) => {
-        const isIcon = item.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT;
-        const styledDisplayName = getStyledTextArray(item.text, prefix);
-        const styledHandle = item.text === item.alternateText ? undefined : getStyledTextArray(item.alternateText, prefix);
-
-        return (
-            <View style={[styles.autoCompleteSuggestionContainer, styles.ph2]}>
-                <View style={styles.mentionSuggestionsAvatarContainer}>
-                    <Avatar
-                        source={item.icons[0].source}
-                        size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
-                        name={item.icons[0].name}
-                        type={item.icons[0].type}
-                        fill={theme.success}
-                        fallbackIcon={item.icons[0].fallbackIcon}
-                    />
+    const renderSuggestionMenuItem = useCallback(
+        (item: Mention) => {
+            const isIcon = item.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT;
+            const styledDisplayName = getStyledTextArray(item.text, prefix);
+            const styledHandle = item.text === item.alternateText ? undefined : getStyledTextArray(item.alternateText, prefix);
+
+            return (
+                <View style={[styles.autoCompleteSuggestionContainer, styles.ph2]}>
+                    <View style={styles.mentionSuggestionsAvatarContainer}>
+                        <Avatar
+                            source={item.icons[0].source}
+                            size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
+                            name={item.icons[0].name}
+                            type={item.icons[0].type}
+                            fill={theme.success}
+                            fallbackIcon={item.icons[0].fallbackIcon}
+                        />
+                    </View>
+                    <Text
+                        style={[styles.mentionSuggestionsText, styles.flexShrink1]}
+                        numberOfLines={1}
+                    >
+                        {styledDisplayName?.map(({text, isColored}, i) => (
+                            <Text
+                                // eslint-disable-next-line react/no-array-index-key
+                                key={`${text}${i}`}
+                                style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsDisplayName]}
+                            >
+                                {text}
+                            </Text>
+                        ))}
+                    </Text>
+                    <Text
+                        style={[styles.mentionSuggestionsText, styles.flex1]}
+                        numberOfLines={1}
+                    >
+                        {styledHandle?.map(
+                            ({text, isColored}, i) =>
+                                Boolean(text) && (
+                                    <Text
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        key={`${text}${i}`}
+                                        style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsHandle]}
+                                    >
+                                        {text}
+                                    </Text>
+                                ),
+                        )}
+                    </Text>
                 </View>
-                <Text
-                    style={[styles.mentionSuggestionsText, styles.flexShrink1]}
-                    numberOfLines={1}
-                >
-                    {styledDisplayName?.map(({text, isColored}, i) => (
-                        <Text
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`${text}${i}`}
-                            style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsDisplayName]}
-                        >
-                            {text}
-                        </Text>
-                    ))}
-                </Text>
-                <Text
-                    style={[styles.mentionSuggestionsText, styles.flex1]}
-                    numberOfLines={1}
-                >
-                    {styledHandle?.map(
-                        ({text, isColored}, i) =>
-                            Boolean(text) && (
-                                <Text
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    key={`${text}${i}`}
-                                    style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsHandle]}
-                                >
-                                    {text}
-                                </Text>
-                            ),
-                    )}
-                </Text>
-            </View>
-        );
-    };
+            );
+        },
+        [styles, theme, prefix],
+    );
 
     return (
         <AutoCompleteSuggestions
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index ed6ea1274dfc..a551d4a9205a 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -181,7 +181,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                     style={({pressed}) => [
                         style,
                         !props.interactive && styles.cursorDefault,
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
+                        StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
                         (isHovered || pressed) && props.hoverAndPressStyle,
                         ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
                         props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
@@ -227,6 +227,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                     fill={
                                                         props.iconFill ||
                                                         StyleUtils.getIconFillColor(
+                                                            theme,
                                                             getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
                                                             true,
                                                         )
@@ -261,7 +262,11 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                 height={props.iconHeight}
                                                 fill={
                                                     props.secondaryIconFill ||
-                                                    StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true)
+                                                    StyleUtils.getIconFillColor(
+                                                        theme,
+                                                        getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
+                                                        true,
+                                                    )
                                                 }
                                             />
                                         </View>
@@ -377,7 +382,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                     <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
                                         <Icon
                                             src={props.iconRight}
-                                            fill={StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
+                                            fill={StyleUtils.getIconFillColor(theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
                                         />
                                     </View>
                                 )}
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 4945b4b62ad6..653ce910da9f 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -1,8 +1,8 @@
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import usePrevious from '@hooks/usePrevious';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
@@ -140,11 +140,12 @@ function BaseModal(
                     isSmallScreenWidth,
                 },
                 theme,
+                styles,
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
             ),
-        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth],
+        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth, styles],
     );
 
     const {
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index f760d3c0244e..bc683b6f6311 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -25,14 +25,14 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     };
 
     const showModal = () => {
-        const statusBarColor = StatusBar.getBackgroundColor();
+        const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG;
 
         const isFullScreenModal = type === CONST.MODAL.MODAL_TYPE.CENTERED || type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
 
         if (statusBarColor) {
             setPreviousStatusBarColor(statusBarColor);
             // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color
-            setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
+            setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(theme, statusBarColor));
         }
 
         onModalShow?.();
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index ebe55d9b7469..172965b45fb2 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -12,7 +12,7 @@ type PopoverAnchorPosition = {
 };
 
 type BaseModalProps = WindowDimensionsProps &
-    ModalProps & {
+    Partial<ModalProps> & {
         /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
         fullscreen?: boolean;
 
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index f203154ab3db..1b4967a9c54c 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -239,7 +239,7 @@ function MoneyRequestConfirmationList(props) {
     const policyTagList = lodashGet(policyTag, 'tags', {});
     const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
     // A flag for showing the tags field
-    const shouldShowTags = props.isPolicyExpenseChat && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
+    const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledOptions(_.values(policyTagList)));
 
     // A flag for showing the billable field
     const shouldShowBillable = !lodashGet(props.policy, 'disabledFields.defaultBillable', true);
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index 6f15612736ef..179b9bc0f5a1 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -101,7 +101,7 @@ function MultipleAvatars({
 
     const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
 
-    let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
+    let avatarContainerStyles = StyleUtils.getContainerStyles(styles, size, isInReportAction);
     const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
 
     const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
@@ -161,7 +161,7 @@ function MultipleAvatars({
         );
     }
 
-    const oneAvatarSize = StyleUtils.getAvatarStyle(size);
+    const oneAvatarSize = StyleUtils.getAvatarStyle(theme, size);
     const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
     const overlapSize = oneAvatarSize.width / 3;
 
@@ -197,6 +197,7 @@ function MultipleAvatars({
                                                 isPressed,
                                                 isInReportAction,
                                                 shouldUseCardBackground,
+                                                theme,
                                             }),
                                             StyleUtils.getAvatarBorderWidth(size),
                                         ]}
@@ -224,6 +225,7 @@ function MultipleAvatars({
                                             isPressed,
                                             isInReportAction,
                                             shouldUseCardBackground,
+                                            theme,
                                         }),
 
                                         // Set overlay background color with RGBA value so that the text will not inherit opacity
diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js
index 42904ba1a8c2..82204e095f4a 100644
--- a/src/components/NewDatePicker/CalendarPicker/index.js
+++ b/src/components/NewDatePicker/CalendarPicker/index.js
@@ -1,3 +1,4 @@
+import {withTheme} from '@storybook/theming';
 import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
@@ -8,6 +9,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
@@ -33,6 +35,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
     ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 const defaultProps = {
@@ -236,7 +239,7 @@ class CalendarPicker extends React.PureComponent {
                                             style={[
                                                 this.props.themeStyles.calendarDayContainer,
                                                 isSelected ? this.props.themeStyles.calendarDayContainerSelected : {},
-                                                !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
+                                                !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(hovered, pressed)) : {},
                                             ]}
                                         >
                                             <Text style={isDisabled ? this.props.themeStyles.buttonOpacityDisabled : this.props.themeStyles.dayText}>{day}</Text>
@@ -262,4 +265,4 @@ class CalendarPicker extends React.PureComponent {
 CalendarPicker.propTypes = propTypes;
 CalendarPicker.defaultProps = defaultProps;
 
-export default compose(withLocalize, withThemeStyles)(CalendarPicker);
+export default compose(withLocalize, withThemeStyles, withTheme)(CalendarPicker);
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
deleted file mode 100644
index 01f207b7ba97..000000000000
--- a/src/components/OfflineIndicator.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import compose from '@libs/compose';
-import stylePropTypes from '@styles/stylePropTypes';
-import * as StyleUtils from '@styles/StyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
-import variables from '@styles/variables';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import networkPropTypes from './networkPropTypes';
-import {withNetwork} from './OnyxProvider';
-import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withWindowDimensions from './withWindowDimensions';
-
-const propTypes = {
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
-    /** Optional styles for container element that will override the default styling for the offline indicator */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Optional styles for the container */
-    style: stylePropTypes,
-
-    /** Is the window width narrow, like on a mobile device */
-    isSmallScreenWidth: PropTypes.bool.isRequired,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    containerStyles: [],
-    style: [],
-};
-
-function OfflineIndicator(props) {
-    const styles = useThemeStyles();
-
-    const computedStyles = useMemo(() => {
-        if (props.containerStyles.length) {
-            return props.containerStyles;
-        }
-        return props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
-    }, [props.containerStyles, props.isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
-
-    if (!props.network.isOffline) {
-        return null;
-    }
-
-    return (
-        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
-            <Icon
-                src={Expensicons.OfflineCloud}
-                width={variables.iconSizeSmall}
-                height={variables.iconSizeSmall}
-            />
-            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{props.translate('common.youAppearToBeOffline')}</Text>
-        </View>
-    );
-}
-
-OfflineIndicator.propTypes = propTypes;
-OfflineIndicator.defaultProps = defaultProps;
-OfflineIndicator.displayName = 'OfflineIndicator';
-
-export default compose(withWindowDimensions, withLocalize, withNetwork())(OfflineIndicator);
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
new file mode 100644
index 000000000000..b402caa2c750
--- /dev/null
+++ b/src/components/OfflineIndicator.tsx
@@ -0,0 +1,52 @@
+import React, {useMemo} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import useThemeStyles from '@styles/useThemeStyles';
+import variables from '@styles/variables';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+
+type OfflineIndicatorProps = {
+    /** Optional styles for container element that will override the default styling for the offline indicator */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Optional styles for the container */
+    style?: StyleProp<ViewStyle>;
+};
+
+function OfflineIndicator({style, containerStyles}: OfflineIndicatorProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    const computedStyles = useMemo((): StyleProp<ViewStyle> => {
+        if (containerStyles) {
+            return containerStyles;
+        }
+
+        return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
+    }, [containerStyles, isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
+
+    if (!isOffline) {
+        return null;
+    }
+
+    return (
+        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, style]}>
+            <Icon
+                src={Expensicons.OfflineCloud}
+                width={variables.iconSizeSmall}
+                height={variables.iconSizeSmall}
+            />
+            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>
+        </View>
+    );
+}
+
+OfflineIndicator.displayName = 'OfflineIndicator';
+
+export default OfflineIndicator;
diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js
index 2485ad1558ac..19bb43fbcc78 100644
--- a/src/components/OptionsList/optionsListPropTypes.js
+++ b/src/components/OptionsList/optionsListPropTypes.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import SectionList from '@components/SectionList';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 
 const propTypes = {
     /** option flexStyle for the options list container */
@@ -109,7 +108,7 @@ const defaultProps = {
     optionHoveredStyle: undefined,
     contentContainerStyles: [],
     sectionHeaderStyle: undefined,
-    listContainerStyles: [styles.flex1],
+    listContainerStyles: [{flex: 1}],
     sections: [],
     focusedIndex: 0,
     selectedOptions: [],
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index ba6a3067284f..9c8b76515fe8 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -493,7 +493,7 @@ class BaseOptionsSelector extends Component {
         const optionsList = (
             <OptionsList
                 ref={(el) => (this.list = el)}
-                optionHoveredStyle={this.props.optionHoveredStyle}
+                optionHoveredStyle={this.props.optionHoveredStyle || this.props.themeStyles.hoveredComponentBG}
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
                 sections={this.state.sections}
                 focusedIndex={this.state.focusedIndex}
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index ba4f5beb55cd..8593569dfafd 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
 
 const propTypes = {
@@ -162,7 +161,7 @@ const defaultProps = {
     onConfirmSelection: () => {},
     shouldTextInputAppearBelowOptions: false,
     footerContent: undefined,
-    optionHoveredStyle: styles.hoveredComponentBG,
+    optionHoveredStyle: undefined,
     sectionHeaderStyle: undefined,
     shouldShowOptions: true,
     disableArrowKeysActions: false,
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 2a5d9265144a..1c785d4b363f 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -1,9 +1,9 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
@@ -14,6 +14,7 @@ function Popover(props) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {onOpen, close} = React.useContext(PopoverContext);
+    const insets = useSafeAreaInsets();
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
         'popover',
         {
@@ -22,11 +23,53 @@ function Popover(props) {
             isSmallScreenWidth: false,
         },
         theme,
+        styles,
         props.anchorPosition,
         props.innerContainerStyle,
         props.outerStyle,
     );
 
+    const {
+        paddingTop: safeAreaPaddingTop,
+        paddingBottom: safeAreaPaddingBottom,
+        paddingLeft: safeAreaPaddingLeft,
+        paddingRight: safeAreaPaddingRight,
+    } = useMemo(() => StyleUtils.getSafeAreaPadding(insets), [insets]);
+
+    const modalPaddingStyles = useMemo(
+        () =>
+            StyleUtils.getModalPaddingStyles({
+                safeAreaPaddingTop,
+                safeAreaPaddingBottom,
+                safeAreaPaddingLeft,
+                safeAreaPaddingRight,
+                shouldAddBottomSafeAreaMargin,
+                shouldAddTopSafeAreaMargin,
+                shouldAddBottomSafeAreaPadding,
+                shouldAddTopSafeAreaPadding,
+                modalContainerStyleMarginTop: modalContainerStyle.marginTop,
+                modalContainerStyleMarginBottom: modalContainerStyle.marginBottom,
+                modalContainerStylePaddingTop: modalContainerStyle.paddingTop,
+                modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom,
+                insets,
+            }),
+        [
+            insets,
+            modalContainerStyle.marginBottom,
+            modalContainerStyle.marginTop,
+            modalContainerStyle.paddingBottom,
+            modalContainerStyle.paddingTop,
+            safeAreaPaddingBottom,
+            safeAreaPaddingLeft,
+            safeAreaPaddingRight,
+            safeAreaPaddingTop,
+            shouldAddBottomSafeAreaMargin,
+            shouldAddBottomSafeAreaPadding,
+            shouldAddTopSafeAreaMargin,
+            shouldAddTopSafeAreaPadding,
+        ],
+    );
+
     React.useEffect(() => {
         let removeOnClose;
         if (props.isVisible) {
@@ -63,44 +106,16 @@ function Popover(props) {
             style={[modalStyle, {zIndex: 1}]}
             ref={props.withoutOverlayRef}
         >
-            <SafeAreaInsetsContext.Consumer>
-                {(insets) => {
-                    const {
-                        paddingTop: safeAreaPaddingTop,
-                        paddingBottom: safeAreaPaddingBottom,
-                        paddingLeft: safeAreaPaddingLeft,
-                        paddingRight: safeAreaPaddingRight,
-                    } = StyleUtils.getSafeAreaPadding(insets);
-
-                    const modalPaddingStyles = StyleUtils.getModalPaddingStyles({
-                        safeAreaPaddingTop,
-                        safeAreaPaddingBottom,
-                        safeAreaPaddingLeft,
-                        safeAreaPaddingRight,
-                        shouldAddBottomSafeAreaMargin,
-                        shouldAddTopSafeAreaMargin,
-                        shouldAddBottomSafeAreaPadding,
-                        shouldAddTopSafeAreaPadding,
-                        modalContainerStyleMarginTop: modalContainerStyle.marginTop,
-                        modalContainerStyleMarginBottom: modalContainerStyle.marginBottom,
-                        modalContainerStylePaddingTop: modalContainerStyle.paddingTop,
-                        modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom,
-                        insets,
-                    });
-                    return (
-                        <View
-                            style={{
-                                ...styles.defaultModalContainer,
-                                ...modalContainerStyle,
-                                ...modalPaddingStyles,
-                            }}
-                            ref={props.forwardedRef}
-                        >
-                            {props.children}
-                        </View>
-                    );
+            <View
+                style={{
+                    ...styles.defaultModalContainer,
+                    ...modalContainerStyle,
+                    ...modalPaddingStyles,
                 }}
-            </SafeAreaInsetsContext.Consumer>
+                ref={props.forwardedRef}
+            >
+                {props.children}
+            </View>
         </View>
     );
 }
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index 92affb1e862e..914b9dc674c3 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -9,6 +9,7 @@ import Tooltip from '@components/Tooltip';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps from './GenericPressable/types';
@@ -67,6 +68,7 @@ function PressableWithDelayToggle(
     ref: ForwardedRef<RNText | View>,
 ) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const [isActive, temporarilyDisableInteractions] = useThrottledButtonState();
 
     const updatePressState = () => {
@@ -120,7 +122,7 @@ function PressableWithDelayToggle(
                                 {icon && (
                                     <Icon
                                         src={!isActive ? iconChecked : icon}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isActive))}
+                                        fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, !isActive))}
                                         additionalStyles={iconStyles}
                                         width={variables.iconSizeSmall}
                                         height={variables.iconSizeSmall}
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 2fc03b466bbf..55c2c5bb04e0 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -9,6 +9,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
@@ -55,6 +56,7 @@ const defaultProps = {
 
 function AddReactionBubble(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const ref = useRef();
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
 
@@ -87,7 +89,11 @@ function AddReactionBubble(props) {
         <Tooltip text={props.translate('emojiReactions.addReactionTooltip')}>
             <PressableWithFeedback
                 ref={ref}
-                style={({hovered, pressed}) => [styles.emojiReactionBubble, styles.userSelectNone, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, false, props.isContextMenu)]}
+                style={({hovered, pressed}) => [
+                    styles.emojiReactionBubble,
+                    styles.userSelectNone,
+                    StyleUtils.getEmojiReactionBubbleStyle(theme, hovered || pressed, false, props.isContextMenu),
+                ]}
                 onPress={Session.checkIfActionIsAllowed(onPress)}
                 onMouseDown={(e) => {
                     // Allow text input blur when Add reaction is right clicked
@@ -115,7 +121,7 @@ function AddReactionBubble(props) {
                                 src={Expensicons.AddReaction}
                                 width={props.isContextMenu ? variables.iconSizeNormal : variables.iconSizeSmall}
                                 height={props.isContextMenu ? variables.iconSizeNormal : variables.iconSizeSmall}
-                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                                fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed))}
                             />
                         </View>
                     </>
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 58b66ee64719..2487f9d0c73c 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -5,6 +5,7 @@ import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
@@ -55,11 +56,12 @@ const defaultProps = {
 
 function EmojiReactionBubble(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     return (
         <PressableWithSecondaryInteraction
             style={({hovered, pressed}) => [
                 styles.emojiReactionBubble,
-                StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu),
+                StyleUtils.getEmojiReactionBubbleStyle(theme, hovered || pressed, props.hasUserReacted, props.isContextMenu),
                 props.shouldBlockReactions && styles.cursorDisabled,
                 styles.userSelectNone,
             ]}
@@ -88,7 +90,7 @@ function EmojiReactionBubble(props) {
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
         >
             <Text style={[styles.emojiReactionBubbleText, StyleUtils.getEmojiReactionBubbleTextStyle(props.isContextMenu)]}>{props.emojiCodes.join('')}</Text>
-            {props.count > 0 && <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.count}</Text>}
+            {props.count > 0 && <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(theme, props.hasUserReacted)]}>{props.count}</Text>}
         </PressableWithSecondaryInteraction>
     );
 }
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 8ddf41f4a89a..2226573a196e 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -12,6 +12,7 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
@@ -56,6 +57,7 @@ const defaultProps = {
  */
 function MiniQuickEmojiReactions(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const ref = useRef();
 
     const openEmojiPicker = () => {
@@ -105,7 +107,7 @@ function MiniQuickEmojiReactions(props) {
                     <Icon
                         small
                         src={Expensicons.AddReaction}
-                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false))}
+                        fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, false))}
                     />
                 )}
             </BaseMiniContextMenuItem>
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 466a5a6eec51..ce1c248962aa 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -220,6 +220,8 @@ function MoneyRequestPreview(props) {
             message += ` • ${props.translate('iou.approved')}`;
         } else if (props.iouReport.isWaitingOnBankAccount) {
             message += ` • ${props.translate('iou.pending')}`;
+        } else if (props.iouReport.isCancelledIOU) {
+            message += ` • ${props.translate('iou.canceled')}`;
         }
         return message;
     };
@@ -280,9 +282,9 @@ function MoneyRequestPreview(props) {
                         <View style={styles.moneyRequestPreviewBoxText}>
                             <View style={[styles.flexRow]}>
                                 <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh20, styles.mb1]}>
-                                    {getPreviewHeaderText() + (isSettled ? ` • ${getSettledMessage()}` : '')}
+                                    {getPreviewHeaderText() + (isSettled && !props.iouReport.isCancelledIOU ? ` • ${getSettledMessage()}` : '')}
                                 </Text>
-                                {hasFieldErrors && (
+                                {!isSettled && hasFieldErrors && (
                                     <Icon
                                         src={Expensicons.DotIndicator}
                                         fill={theme.danger}
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index b10b8d87cabd..0249a9f5bb11 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -109,6 +109,7 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
 
     // Flags for allowing or disallowing editing a money request
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
+    const isCancelled = moneyRequestReport && moneyRequestReport.isCancelledIOU;
     const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
     const canEditAmount = canEdit && !isSettled && !isCardTransaction;
 
@@ -133,11 +134,16 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
         if (TransactionUtils.isPending(transaction)) {
             amountDescription += ` • ${translate('iou.pending')}`;
         }
+        if (isCancelled) {
+            amountDescription += ` • ${translate('iou.canceled')}`;
+        }
     } else {
         if (!isDistanceRequest) {
             amountDescription += ` • ${translate('iou.cash')}`;
         }
-        if (isSettled) {
+        if (isCancelled) {
+            amountDescription += ` • ${translate('iou.canceled')}`;
+        } else if (isSettled) {
             amountDescription += ` • ${translate('iou.settledExpensify')}`;
         } else if (report.isWaitingOnBankAccount) {
             amountDescription += ` • ${translate('iou.pending')}`;
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 8cb8406e8a0d..615e91dc5fc4 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -218,7 +218,7 @@ function ReportPreview(props) {
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewMessage()}</Text>
                             </View>
-                            {hasErrors && (
+                            {!iouSettled && hasErrors && (
                                 <Icon
                                     src={Expensicons.DotIndicator}
                                     fill={theme.danger}
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 4e405098a2ea..5790d04845be 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -23,6 +23,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
@@ -76,6 +77,7 @@ const defaultProps = {
 
 function TaskPreview(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     // The reportAction might not contain details regarding the taskReport
     // Only the direct parent reportAction will contain details about the taskReport
@@ -128,7 +130,7 @@ function TaskPreview(props) {
                 </View>
                 <Icon
                     src={Expensicons.ArrowRight}
-                    fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
+                    fill={StyleUtils.getIconFillColor(theme, getButtonState(props.isHovered))}
                 />
             </PressableWithoutFeedback>
         </View>
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index ac82f310f3f8..de0c1774b74f 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -2,6 +2,7 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import Checkbox from '@components/Checkbox';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
@@ -9,6 +10,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
@@ -23,10 +25,12 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
@@ -43,6 +47,7 @@ const propTypes = {
 
 function TaskView(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     useEffect(() => {
         Task.setTaskReport({...props.report});
     }, [props.report]);
@@ -54,6 +59,7 @@ function TaskView(props) {
     const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID);
     const disableState = !canModifyTask;
     const isDisableInteractive = !canModifyTask || !isOpen;
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     return (
         <View>
@@ -79,7 +85,7 @@ function TaskView(props) {
                             style={({pressed}) => [
                                 styles.ph5,
                                 styles.pv2,
-                                StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true),
+                                StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true),
                                 isDisableInteractive && !disableState && styles.cursorDefault,
                             ]}
                             ref={props.forwardedRef}
@@ -119,7 +125,7 @@ function TaskView(props) {
                                                 <Icon
                                                     additionalStyles={[styles.alignItemsCenter]}
                                                     src={Expensicons.ArrowRight}
-                                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, disableState))}
+                                                    fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, false, disableState))}
                                                 />
                                             </View>
                                         )}
@@ -148,7 +154,7 @@ function TaskView(props) {
                         <MenuItem
                             label={props.translate('task.assignee')}
                             title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
-                            icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], props.personalDetails)}
+                            icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}
                             titleStyle={styles.assigneeTextStyle}
@@ -185,4 +191,13 @@ function TaskView(props) {
 TaskView.propTypes = propTypes;
 TaskView.displayName = 'TaskView';
 
-export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(TaskView);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+    }),
+)(TaskView);
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 0bb0f11d747c..bd7a24d15f1f 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -65,7 +65,7 @@ function RoomHeaderAvatars(props) {
         styles.roomHeaderAvatar,
 
         // Due to border-box box-sizing, the Avatars have to be larger when bordered to visually match size with non-bordered Avatars
-        StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
+        StyleUtils.getAvatarStyle(theme, CONST.AVATAR_SIZE.LARGE_BORDERED),
     ];
     return (
         <View style={styles.pointerEventsBoxNone}>
diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 14529d7b594a..e32c264a57cc 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -1,49 +1,24 @@
-import React, {useState} from 'react';
-import _ from 'underscore';
+import React from 'react';
+import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import getOperatingSystem from '@libs/getOperatingSystem';
 import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
 import CONST from '@src/CONST';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, onBlur, shouldDelayFocus, inputID, roomName}) {
     const {translate} = useLocalize();
 
-    const [selection, setSelection] = useState();
+    const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
 
-    /**
-     * Calls the onChangeText callback with a modified room name
-     * @param {Event} event
-     */
-    const setModifiedRoomName = (event) => {
-        const roomName = event.nativeEvent.text;
-        const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
-        onChangeText(modifiedRoomName);
-
-        // if custom component has onInputChange, use it to trigger changes (Form input)
-        if (_.isFunction(onInputChange)) {
-            onInputChange(modifiedRoomName);
-        }
-
-        // Prevent cursor jump behaviour:
-        // Check if newRoomNameWithHash is the same as modifiedRoomName
-        // If it is then the room name is valid (does not contain unallowed characters); no action required
-        // If not then the room name contains unvalid characters and we must adjust the cursor position manually
-        // Read more: https://github.com/Expensify/App/issues/12741
-        const oldRoomNameWithHash = value || '';
-        const newRoomNameWithHash = `${CONST.POLICY.ROOM_PREFIX}${roomName}`;
-        if (modifiedRoomName !== newRoomNameWithHash) {
-            const offset = modifiedRoomName.length - oldRoomNameWithHash.length;
-            const newSelection = {
-                start: selection.start + offset,
-                end: selection.end + offset,
-            };
-            setSelection(newSelection);
-        }
-    };
+    const valueParser = (innerRoomName) => RoomNameInputUtils.modifyRoomName(innerRoomName);
+    const displayParser = (innerRoomName) => RoomNameInputUtils.modifyRoomName(innerRoomName, true);
 
     return (
-        <TextInput
+        <InputWrapper
+            InputComponent={TextInput}
+            inputID={inputID}
             ref={forwardedRef}
             disabled={disabled}
             label={translate('newRoomPage.roomName')}
@@ -51,18 +26,18 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             role={CONST.ACCESSIBILITY_ROLE.TEXT}
             prefixCharacter={CONST.POLICY.ROOM_PREFIX}
             placeholder={translate('newRoomPage.social')}
-            onChange={setModifiedRoomName}
-            value={value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
-            selection={selection}
-            onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
             errorText={errorText}
+            valueParser={valueParser}
+            displayParser={displayParser}
             autoCapitalize="none"
             onBlur={(event) => isFocused && onBlur(event)}
             shouldDelayFocus={shouldDelayFocus}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
+            defaultValue={roomName}
             spellCheck={false}
             shouldInterceptSwipe
+            keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
         />
     );
 }
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
deleted file mode 100644
index a2c09996ad34..000000000000
--- a/src/components/RoomNameInput/index.native.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import _ from 'underscore';
-import TextInput from '@components/TextInput';
-import useLocalize from '@hooks/useLocalize';
-import getOperatingSystem from '@libs/getOperatingSystem';
-import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
-import CONST from '@src/CONST';
-import * as roomNameInputPropTypes from './roomNameInputPropTypes';
-
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
-    const {translate} = useLocalize();
-
-    /**
-     * Calls the onChangeText callback with a modified room name
-     * @param {Event} event
-     */
-    const setModifiedRoomName = (event) => {
-        const roomName = event.nativeEvent.text;
-        const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
-        onChangeText(modifiedRoomName);
-
-        // if custom component has onInputChange, use it to trigger changes (Form input)
-        if (_.isFunction(onInputChange)) {
-            onInputChange(modifiedRoomName);
-        }
-    };
-
-    const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
-
-    return (
-        <TextInput
-            ref={forwardedRef}
-            disabled={disabled}
-            label={translate('newRoomPage.roomName')}
-            accessibilityLabel={translate('newRoomPage.roomName')}
-            role={CONST.ACCESSIBILITY_ROLE.TEXT}
-            prefixCharacter={CONST.POLICY.ROOM_PREFIX}
-            placeholder={translate('newRoomPage.social')}
-            onChange={setModifiedRoomName}
-            value={value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
-            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={(event) => isFocused && onBlur(event)}
-            autoFocus={isFocused && autoFocus}
-            autoCapitalize="none"
-            shouldDelayFocus={shouldDelayFocus}
-        />
-    );
-}
-
-RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
-RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
-RoomNameInput.displayName = 'RoomNameInput';
-
-const RoomNameInputWithRef = React.forwardRef((props, ref) => (
-    <RoomNameInput
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-RoomNameInputWithRef.displayName = 'RoomNameInputWithRef';
-
-export default RoomNameInputWithRef;
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 7f8292f0123e..f457e4e2a494 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import refPropTypes from '@components/refPropTypes';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -14,10 +15,10 @@ const propTypes = {
     errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]),
 
     /** A ref forwarded to the TextInput */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 
     /** The ID used to uniquely identify the input in a Form */
-    inputID: PropTypes.string,
+    inputID: PropTypes.string.isRequired,
 
     /** Callback that is called when the text input is blurred */
     onBlur: PropTypes.func,
@@ -30,6 +31,8 @@ const propTypes = {
 
     /** Whether navigation is focused */
     isFocused: PropTypes.bool.isRequired,
+
+    roomName: PropTypes.string,
 };
 
 const defaultProps = {
@@ -39,10 +42,10 @@ const defaultProps = {
     errorText: '',
     forwardedRef: () => {},
 
-    inputID: undefined,
     onBlur: () => {},
     autoFocus: false,
     shouldDelayFocus: false,
+    roomName: '',
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/SafeAreaConsumer/index.android.tsx b/src/components/SafeAreaConsumer/index.android.tsx
new file mode 100644
index 000000000000..472c2f037d29
--- /dev/null
+++ b/src/components/SafeAreaConsumer/index.android.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import StatusBar from '@libs/StatusBar';
+import * as StyleUtils from '@styles/StyleUtils';
+import SafeAreaConsumerProps from './types';
+
+/**
+ * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we
+ * may need not just the insets, but the computed styles so we save a few lines of code with this.
+ */
+function SafeAreaConsumer({children}: SafeAreaConsumerProps) {
+    return (
+        <SafeAreaInsetsContext.Consumer>
+            {(insets) => {
+                const insetsWithDefault = insets ?? {
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                };
+
+                const androidInsets = {
+                    ...insetsWithDefault,
+                    top: StatusBar.currentHeight ?? insetsWithDefault.top,
+                };
+
+                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(androidInsets ?? undefined);
+                return children({
+                    paddingTop,
+                    paddingBottom,
+                    insets: androidInsets ?? undefined,
+                    safeAreaPaddingBottomStyle: {paddingBottom},
+                });
+            }}
+        </SafeAreaInsetsContext.Consumer>
+    );
+}
+
+SafeAreaConsumer.displayName = 'SafeAreaConsumer';
+
+export default SafeAreaConsumer;
diff --git a/src/components/SafeAreaConsumer.tsx b/src/components/SafeAreaConsumer/index.tsx
similarity index 69%
rename from src/components/SafeAreaConsumer.tsx
rename to src/components/SafeAreaConsumer/index.tsx
index 7df73dbdb65f..f515d6697bb4 100644
--- a/src/components/SafeAreaConsumer.tsx
+++ b/src/components/SafeAreaConsumer/index.tsx
@@ -1,20 +1,8 @@
 import React from 'react';
-import type {DimensionValue} from 'react-native';
-import {EdgeInsets, SafeAreaInsetsContext} from 'react-native-safe-area-context';
+// eslint-disable-next-line no-restricted-imports
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import * as StyleUtils from '@styles/StyleUtils';
-
-type ChildrenProps = {
-    paddingTop?: DimensionValue;
-    paddingBottom?: DimensionValue;
-    insets?: EdgeInsets;
-    safeAreaPaddingBottomStyle: {
-        paddingBottom?: DimensionValue;
-    };
-};
-
-type SafeAreaConsumerProps = {
-    children: React.FC<ChildrenProps>;
-};
+import SafeAreaConsumerProps from './types';
 
 /**
  * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we
diff --git a/src/components/SafeAreaConsumer/types.ts b/src/components/SafeAreaConsumer/types.ts
new file mode 100644
index 000000000000..bc81de96a082
--- /dev/null
+++ b/src/components/SafeAreaConsumer/types.ts
@@ -0,0 +1,17 @@
+import {DimensionValue} from 'react-native';
+import {EdgeInsets} from 'react-native-safe-area-context';
+
+type ChildrenProps = {
+    paddingTop?: DimensionValue;
+    paddingBottom?: DimensionValue;
+    insets?: EdgeInsets;
+    safeAreaPaddingBottomStyle: {
+        paddingBottom?: DimensionValue;
+    };
+};
+
+type SafeAreaConsumerProps = {
+    children: React.FC<ChildrenProps>;
+};
+
+export default SafeAreaConsumerProps;
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index a37f2fe4ddc0..3a58b63954bd 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -62,7 +62,7 @@ function BaseListItem({
                         <View style={StyleUtils.getCheckboxPressableStyle()}>
                             <View
                                 style={[
-                                    StyleUtils.getCheckboxContainerStyle(20),
+                                    StyleUtils.getCheckboxContainerStyle(theme, 20),
                                     styles.mr3,
                                     item.isSelected && styles.checkedContainer,
                                     item.isSelected && styles.borderColorFocus,
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index ab9f0dec8e57..0a244d4392e4 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -51,7 +51,7 @@ function SubscriptAvatar({mainAvatar = {}, secondaryAvatar = {}, size = CONST.AV
     const styles = useThemeStyles();
     const isSmall = size === CONST.AVATAR_SIZE.SMALL;
     const subscriptStyle = size === CONST.AVATAR_SIZE.SMALL_NORMAL ? styles.secondAvatarSubscriptSmallNormal : styles.secondAvatarSubscript;
-    const containerStyle = StyleUtils.getContainerStyles(size);
+    const containerStyle = StyleUtils.getContainerStyles(styles, size);
 
     return (
         <View style={[containerStyle, noMargin ? styles.mr0 : {}]}>
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index cdec2a7e91e1..83601dbc27d8 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -102,7 +102,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
             {_.map(state.routes, (route, index) => {
                 const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs);
                 const inactiveOpacity = getOpacity(position, state.routes.length, index, false, affectedAnimatedTabs);
-                const backgroundColor = getBackgroundColor(position, state.routes.length, index, affectedAnimatedTabs);
+                const backgroundColor = getBackgroundColor(state.routes.length, index, affectedAnimatedTabs);
                 const isFocused = index === state.index;
                 const {icon, title} = getIconAndTitle(route.name, translate);
 
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.tsx
similarity index 71%
rename from src/components/TestToolMenu.js
rename to src/components/TestToolMenu.tsx
index fd71b6cee75b..53953b861d7d 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.tsx
@@ -1,7 +1,5 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -10,34 +8,30 @@ import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
+import NetworkOnyx from '@src/types/onyx/Network';
+import UserOnyx from '@src/types/onyx/User';
 import Button from './Button';
-import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
 import Switch from './Switch';
 import TestToolRow from './TestToolRow';
 import Text from './Text';
 
-const propTypes = {
+type TestToolMenuOnyxProps = {
     /** User object in Onyx */
-    user: PropTypes.shape({
-        /** Whether we should use the staging version of the secure API server */
-        shouldUseStagingServer: PropTypes.bool,
-    }),
+    user: OnyxEntry<UserOnyx>;
+};
 
+type TestToolMenuProps = TestToolMenuOnyxProps & {
     /** Network object in Onyx */
-    network: networkPropTypes.isRequired,
+    network: OnyxEntry<NetworkOnyx>;
 };
 
-const defaultProps = {
-    user: {
-        // The default value is environment specific and can't be set with `defaultProps` (ENV is not resolved yet)
-        // When undefined (during render) STAGING defaults to `true`, other envs default to `false`
-        shouldUseStagingServer: undefined,
-    },
-};
+const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false};
 
-function TestToolMenu(props) {
+function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
+    const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
     const styles = useThemeStyles();
+
     return (
         <>
             <Text
@@ -54,8 +48,8 @@ function TestToolMenu(props) {
                 <TestToolRow title="Use Staging Server">
                     <Switch
                         accessibilityLabel="Use Staging Server"
-                        isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
-                        onToggle={() => User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+                        isOn={shouldUseStagingServer}
+                        onToggle={() => User.setShouldUseStagingServer(!shouldUseStagingServer)}
                     />
                 </TestToolRow>
             )}
@@ -64,8 +58,8 @@ function TestToolMenu(props) {
             <TestToolRow title="Force offline">
                 <Switch
                     accessibilityLabel="Force offline"
-                    isOn={Boolean(props.network.shouldForceOffline)}
-                    onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
+                    isOn={!!network?.shouldForceOffline}
+                    onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)}
                 />
             </TestToolRow>
 
@@ -73,8 +67,8 @@ function TestToolMenu(props) {
             <TestToolRow title="Simulate failing network requests">
                 <Switch
                     accessibilityLabel="Simulate failing network requests"
-                    isOn={Boolean(props.network.shouldFailAllRequests)}
-                    onToggle={() => Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
+                    isOn={!!network?.shouldFailAllRequests}
+                    onToggle={() => Network.setShouldFailAllRequests(!network?.shouldFailAllRequests)}
                 />
             </TestToolRow>
 
@@ -99,15 +93,13 @@ function TestToolMenu(props) {
     );
 }
 
-TestToolMenu.propTypes = propTypes;
-TestToolMenu.defaultProps = defaultProps;
 TestToolMenu.displayName = 'TestToolMenu';
 
 export default compose(
-    withNetwork(),
-    withOnyx({
+    withOnyx<TestToolMenuProps, TestToolMenuOnyxProps>({
         user: {
             key: ONYXKEYS.USER,
         },
     }),
+    withNetwork(),
 )(TestToolMenu);
diff --git a/src/components/TestToolsModal.js b/src/components/TestToolsModal.tsx
similarity index 56%
rename from src/components/TestToolsModal.js
rename to src/components/TestToolsModal.tsx
index 334090d98334..f555c2b0b4fe 100644
--- a/src/components/TestToolsModal.js
+++ b/src/components/TestToolsModal.tsx
@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
@@ -9,27 +8,19 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import Modal from './Modal';
 import TestToolMenu from './TestToolMenu';
 
-const propTypes = {
-    /** Details about modal */
-    modal: PropTypes.shape({
-        /** Indicates when an Alert modal is about to be visible */
-        willAlertModalBecomeVisible: PropTypes.bool,
-    }),
-
+type TestToolsModalOnyxProps = {
     /** Whether the test tools modal is open */
-    isTestToolsModalOpen: PropTypes.bool,
+    isTestToolsModalOpen: OnyxEntry<boolean>;
 };
 
-const defaultProps = {
-    modal: {},
-    isTestToolsModalOpen: false,
-};
+type TestToolsModalProps = TestToolsModalOnyxProps;
 
-function TestToolsModal(props) {
+function TestToolsModal({isTestToolsModalOpen = false}: TestToolsModalProps) {
     const styles = useThemeStyles();
+
     return (
         <Modal
-            isVisible={props.isTestToolsModalOpen}
+            isVisible={!!isTestToolsModalOpen}
             type={CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
             onClose={toggleTestToolsModal}
         >
@@ -40,14 +31,9 @@ function TestToolsModal(props) {
     );
 }
 
-TestToolsModal.propTypes = propTypes;
-TestToolsModal.defaultProps = defaultProps;
 TestToolsModal.displayName = 'TestToolsModal';
 
-export default withOnyx({
-    modal: {
-        key: ONYXKEYS.MODAL,
-    },
+export default withOnyx<TestToolsModalProps, TestToolsModalOnyxProps>({
     isTestToolsModalOpen: {
         key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN,
     },
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index a28365480c7a..9a51bf5baa68 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -333,7 +333,7 @@ function BaseTextInput(props) {
                                     !isMultiline && Browser.isMobileChrome() && {boxSizing: 'content-box', height: undefined},
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
-                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
+                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight),
                                     // Add disabled color theme when field is not editable.
                                     props.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index c30f932fb3a6..347a1b0dce4d 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -312,7 +312,7 @@ function BaseTextInput(props) {
                                     !isMultiline && {height, lineHeight: undefined},
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
-                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
+                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight),
                                     // Add disabled color theme when field is not editable.
                                     props.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
diff --git a/src/components/Tooltip/BaseTooltip.js b/src/components/Tooltip/BaseTooltip.js
index 3eb905e7a3e5..1aa5fa81e0a4 100644
--- a/src/components/Tooltip/BaseTooltip.js
+++ b/src/components/Tooltip/BaseTooltip.js
@@ -167,6 +167,16 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent,
         setIsVisible(false);
     }, []);
 
+    const updateTargetPositionOnMouseEnter = useCallback(
+        (e) => {
+            updateTargetAndMousePosition(e);
+            if (children.props.onMouseEnter) {
+                children.props.onMouseEnter(e);
+            }
+        },
+        [children.props, updateTargetAndMousePosition],
+    );
+
     // Skip the tooltip and return the children if the text is empty,
     // we don't have a render function or the device does not support hovering
     if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport) {
@@ -205,7 +215,9 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent,
                     onHoverOut={hideTooltip}
                     shouldHandleScroll={shouldHandleScroll}
                 >
-                    {children}
+                    {React.cloneElement(children, {
+                        onMouseEnter: updateTargetPositionOnMouseEnter,
+                    })}
                 </Hoverable>
             </BoundsObserver>
         </>
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index 69d06775ae2a..c3898a4fe983 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -5,6 +5,8 @@ import {Animated, View} from 'react-native';
 import Text from '@components/Text';
 import Log from '@libs/Log';
 import getTooltipStyles from '@styles/getTooltipStyles';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Window width */
@@ -59,7 +61,20 @@ const defaultProps = {
 // We also update the state on layout changes which will be triggered often.
 // There will be n number of tooltip components in the page.
 // It's good to memoize this one.
-function TooltipRenderedOnPageBody(props) {
+function TooltipRenderedOnPageBody({
+    animation,
+    windowWidth,
+    xOffset,
+    yOffset,
+    targetWidth,
+    targetHeight,
+    maxWidth,
+    shiftHorizontal,
+    shiftVertical,
+    text,
+    numberOfLines,
+    renderTooltipContent,
+}) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
     // which prevents us from measuring it correctly.
@@ -69,12 +84,15 @@ function TooltipRenderedOnPageBody(props) {
     const contentRef = useRef();
     const rootWrapper = useRef();
 
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     useEffect(() => {
-        if (!props.renderTooltipContent || !props.text) {
+        if (!renderTooltipContent || !text) {
             return;
         }
         Log.warn('Developer error: Cannot use both text and renderTooltipContent props at the same time in <TooltipRenderedOnPageBody />!');
-    }, [props.text, props.renderTooltipContent]);
+    }, [text, renderTooltipContent]);
 
     useLayoutEffect(() => {
         // Calculate the tooltip width and height before the browser repaints the screen to prevent flicker
@@ -85,49 +103,39 @@ function TooltipRenderedOnPageBody(props) {
 
     const {animationStyle, rootWrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo(
         () =>
-            getTooltipStyles(
-                rootWrapper.current,
-                props.animation,
-                props.windowWidth,
-                props.xOffset,
-                props.yOffset,
-                props.targetWidth,
-                props.targetHeight,
-                props.maxWidth,
-                contentMeasuredWidth,
-                wrapperMeasuredHeight,
-                props.shiftHorizontal,
-                props.shiftVertical,
-            ),
-        [
-            props.animation,
-            props.windowWidth,
-            props.xOffset,
-            props.yOffset,
-            props.targetWidth,
-            props.targetHeight,
-            props.maxWidth,
-            contentMeasuredWidth,
-            wrapperMeasuredHeight,
-            props.shiftHorizontal,
-            props.shiftVertical,
-        ],
+            getTooltipStyles({
+                tooltip: rootWrapper.current,
+                currentSize: animation,
+                windowWidth,
+                xOffset,
+                yOffset,
+                tooltipTargetWidth: targetWidth,
+                tooltipTargetHeight: targetHeight,
+                maxWidth,
+                tooltipContentWidth: contentMeasuredWidth,
+                tooltipWrapperHeight: wrapperMeasuredHeight,
+                theme,
+                themeStyles: styles,
+                shiftHorizontal,
+                shiftVertical,
+            }),
+        [animation, windowWidth, xOffset, yOffset, targetWidth, targetHeight, maxWidth, contentMeasuredWidth, wrapperMeasuredHeight, shiftHorizontal, shiftVertical, theme, styles],
     );
 
     let content;
-    if (props.renderTooltipContent) {
-        content = <View ref={contentRef}>{props.renderTooltipContent()}</View>;
+    if (renderTooltipContent) {
+        content = <View ref={contentRef}>{renderTooltipContent()}</View>;
     } else {
         content = (
             <Text
-                numberOfLines={props.numberOfLines}
+                numberOfLines={numberOfLines}
                 style={textStyle}
             >
                 <Text
                     style={textStyle}
                     ref={contentRef}
                 >
-                    {props.text}
+                    {text}
                 </Text>
             </Text>
         );
diff --git a/src/components/WalletStatementModal/WalletStatementModalPropTypes.js b/src/components/WalletStatementModal/WalletStatementModalPropTypes.js
deleted file mode 100644
index 06a2248151f6..000000000000
--- a/src/components/WalletStatementModal/WalletStatementModalPropTypes.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-
-const walletStatementPropTypes = {
-    /* Onyx Props */
-    /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user authToken */
-        authToken: PropTypes.string,
-    }),
-
-    /** URL for oldDot (expensify.com) statements page to display */
-    statementPageURL: PropTypes.string,
-};
-
-const walletStatementDefaultProps = {
-    session: {
-        authToken: null,
-    },
-};
-
-export {walletStatementPropTypes, walletStatementDefaultProps};
diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.tsx
similarity index 73%
rename from src/components/WalletStatementModal/index.native.js
rename to src/components/WalletStatementModal/index.native.tsx
index 9c2aea8e8ec4..f54d7c68fe95 100644
--- a/src/components/WalletStatementModal/index.native.js
+++ b/src/components/WalletStatementModal/index.native.tsx
@@ -1,31 +1,31 @@
-import lodashGet from 'lodash/get';
 import React, {useCallback, useRef} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import {WebView} from 'react-native-webview';
-import _ from 'underscore';
+import {WebView, WebViewNavigation} from 'react-native-webview';
+import {ValueOf} from 'type-fest';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
+import type {WalletStatementOnyxProps, WalletStatementProps} from './types';
+
+type WebViewMessageType = ValueOf<typeof CONST.WALLET.WEB_MESSAGE_TYPE>;
+
+type WebViewNavigationEvent = WebViewNavigation & {type?: WebViewMessageType};
 
 const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
 const renderLoading = () => <FullScreenLoadingIndicator />;
 
-function WalletStatementModal({statementPageURL, session}) {
-    const webViewRef = useRef();
-    const authToken = lodashGet(session, 'authToken', null);
+function WalletStatementModal({statementPageURL, session}: WalletStatementProps) {
+    const webViewRef = useRef<WebView>(null);
+    const authToken = session?.authToken ?? null;
 
     /**
      * Handles in-app navigation for webview links
-     *
-     * @param {String} params.type
-     * @param {String} params.url
      */
     const handleNavigationStateChange = useCallback(
-        ({type, url}) => {
+        ({type, url}: WebViewNavigationEvent) => {
             if (!webViewRef.current || (type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
                 return;
             }
@@ -36,7 +36,7 @@ function WalletStatementModal({statementPageURL, session}) {
             }
 
             if (type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && url) {
-                const iouRoute = _.find(IOU_ROUTES, (item) => url.includes(item));
+                const iouRoute = IOU_ROUTES.find((item) => url.includes(item));
 
                 if (iouRoute) {
                     webViewRef.current.stopLoading();
@@ -66,10 +66,8 @@ function WalletStatementModal({statementPageURL, session}) {
 }
 
 WalletStatementModal.displayName = 'WalletStatementModal';
-WalletStatementModal.propTypes = walletStatementPropTypes;
-WalletStatementModal.defaultProps = walletStatementDefaultProps;
 
-export default withOnyx({
+export default withOnyx<WalletStatementProps, WalletStatementOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },
diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.tsx
similarity index 64%
rename from src/components/WalletStatementModal/index.js
rename to src/components/WalletStatementModal/index.tsx
index 8ce4ee01ed30..0f1d1804df60 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.tsx
@@ -1,31 +1,25 @@
-import lodashGet from 'lodash/get';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import withLocalize from '@components/withLocalize';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
+import type {WalletStatementOnyxProps, WalletStatementProps} from './types';
 
-function WalletStatementModal({statementPageURL, session}) {
+function WalletStatementModal({statementPageURL, session}: WalletStatementProps) {
     const styles = useThemeStyles();
     const [isLoading, setIsLoading] = useState(true);
-    const authToken = lodashGet(session, 'authToken', null);
+    const authToken = session?.authToken ?? null;
 
     /**
      * Handles in-app navigation for iframe links
-     *
-     * @param {MessageEvent} event
      */
-    const navigate = (event) => {
-        if (!event.data || !event.data.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
+    const navigate = (event: MessageEvent) => {
+        if (!event.data?.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
             return;
         }
 
@@ -35,7 +29,7 @@ function WalletStatementModal({statementPageURL, session}) {
 
         if (event.data.type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.url) {
             const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
-            const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => event.data.url.includes(iouRoute));
+            const navigateToIOURoute = iouRoutes.find((iouRoute) => event.data.url.includes(iouRoute));
             if (navigateToIOURoute) {
                 Navigation.navigate(navigateToIOURoute);
             }
@@ -51,7 +45,7 @@ function WalletStatementModal({statementPageURL, session}) {
                     title="Statements"
                     height="100%"
                     width="100%"
-                    seamless="seamless"
+                    seamless
                     frameBorder="0"
                     onLoad={() => {
                         setIsLoading(false);
@@ -66,15 +60,10 @@ function WalletStatementModal({statementPageURL, session}) {
     );
 }
 
-WalletStatementModal.propTypes = walletStatementPropTypes;
-WalletStatementModal.defaultProps = walletStatementDefaultProps;
 WalletStatementModal.displayName = 'WalletStatementModal';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(WalletStatementModal);
+export default withOnyx<WalletStatementProps, WalletStatementOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(WalletStatementModal);
diff --git a/src/components/WalletStatementModal/types.ts b/src/components/WalletStatementModal/types.ts
new file mode 100644
index 000000000000..bb926b8250ae
--- /dev/null
+++ b/src/components/WalletStatementModal/types.ts
@@ -0,0 +1,14 @@
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {Session} from '@src/types/onyx';
+
+type WalletStatementOnyxProps = {
+    /** Session info for the currently logged in user. */
+    session: OnyxEntry<Session>;
+};
+
+type WalletStatementProps = WalletStatementOnyxProps & {
+    /** URL for oldDot (expensify.com) statements page to display */
+    statementPageURL: string;
+};
+
+export type {WalletStatementProps, WalletStatementOnyxProps};
diff --git a/src/components/withWindowDimensions/index.native.tsx b/src/components/withWindowDimensions/index.native.tsx
index 0c9f61a45c0b..8ba385f72e4b 100644
--- a/src/components/withWindowDimensions/index.native.tsx
+++ b/src/components/withWindowDimensions/index.native.tsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, createContext, ForwardedRef, RefAttributes, useEffect, useMemo, useState} from 'react';
 import {Dimensions} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import getWindowHeightAdjustment from '@libs/getWindowHeightAdjustment';
 import variables from '@styles/variables';
diff --git a/src/components/withWindowDimensions/index.tsx b/src/components/withWindowDimensions/index.tsx
index 1479450deec4..aa9fc2181a36 100644
--- a/src/components/withWindowDimensions/index.tsx
+++ b/src/components/withWindowDimensions/index.tsx
@@ -2,7 +2,7 @@ import lodashDebounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React, {ComponentType, createContext, ForwardedRef, RefAttributes, useEffect, useMemo, useState} from 'react';
 import {Dimensions} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import getWindowHeightAdjustment from '@libs/getWindowHeightAdjustment';
 import variables from '@styles/variables';
diff --git a/src/hooks/useKeyboardShortcut.ts b/src/hooks/useKeyboardShortcut.ts
index a5921ba37e4a..461f01a74837 100644
--- a/src/hooks/useKeyboardShortcut.ts
+++ b/src/hooks/useKeyboardShortcut.ts
@@ -18,6 +18,8 @@ type KeyboardShortcutConfig = {
     excludedNodes?: string[];
     /* Is keyboard shortcut is already active */
     isActive?: boolean;
+    /* Shuld stop propagation? */
+    shouldStopPropagation?: boolean;
 };
 
 /**
@@ -35,6 +37,9 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: G
         // Hence the use of CONST.EMPTY_ARRAY.
         excludedNodes = CONST.EMPTY_ARRAY,
         isActive = true,
+
+        // This flag is used to prevent auto submit form when press enter key on selection modal.
+        shouldStopPropagation = false,
     } = config;
 
     useEffect(() => {
@@ -52,6 +57,7 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: G
             priority,
             shouldPreventDefault,
             excludedNodes as string[],
+            shouldStopPropagation,
         );
 
         return () => {
diff --git a/src/hooks/useSafeAreaInsets/index.android.ts b/src/hooks/useSafeAreaInsets/index.android.ts
new file mode 100644
index 000000000000..55a83d425543
--- /dev/null
+++ b/src/hooks/useSafeAreaInsets/index.android.ts
@@ -0,0 +1,14 @@
+// eslint-disable-next-line no-restricted-imports
+import {EdgeInsets, useSafeAreaInsets as useSafeAreaInsetsInternal} from 'react-native-safe-area-context';
+import StatusBar from '@libs/StatusBar';
+
+function useSafeAreaInsets(): EdgeInsets {
+    const insets = useSafeAreaInsetsInternal();
+
+    return {
+        ...insets,
+        top: StatusBar.currentHeight ?? insets.top,
+    };
+}
+
+export default useSafeAreaInsets;
diff --git a/src/hooks/useSafeAreaInsets/index.ts b/src/hooks/useSafeAreaInsets/index.ts
new file mode 100644
index 000000000000..6cc2f1818fe5
--- /dev/null
+++ b/src/hooks/useSafeAreaInsets/index.ts
@@ -0,0 +1,4 @@
+/* eslint-disable no-restricted-imports */
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
+export default useSafeAreaInsets;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7deb38b47e28..8f772f1260bb 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -9,6 +9,7 @@ import type {
     BeginningOfChatHistoryAnnounceRoomPartOneParams,
     BeginningOfChatHistoryAnnounceRoomPartTwo,
     BeginningOfChatHistoryDomainRoomPartOneParams,
+    CanceledRequestParams,
     CharacterLimitParams,
     ConfirmThatParams,
     DateShouldBeAfterParams,
@@ -542,6 +543,7 @@ export default {
         pay: 'Pay',
         viewDetails: 'View details',
         pending: 'Pending',
+        canceled: 'Canceled',
         posted: 'Posted',
         deleteReceipt: 'Delete receipt',
         receiptScanning: 'Receipt scan in progress…',
@@ -572,6 +574,8 @@ export default {
         managerApproved: ({manager}: ManagerApprovedParams) => `${manager} approved:`,
         payerSettled: ({amount}: PayerSettledParams) => `paid ${amount}`,
         waitingOnBankAccount: ({submitterDisplayName}: WaitingOnBankAccountParams) => `started settling up, payment is held until ${submitterDisplayName} adds a bank account`,
+        canceledRequest: ({amount, submitterDisplayName}: CanceledRequestParams) =>
+            `Canceled the ${amount} payment, because ${submitterDisplayName} did not enable their Expensify Wallet within 30 days`,
         settledAfterAddedBankAccount: ({submitterDisplayName, amount}: SettledAfterAddedBankAccountParams) =>
             `${submitterDisplayName} added a bank account. The ${amount} payment has been made.`,
         paidElsewhereWithAmount: ({payer, amount}: PaidElsewhereWithAmountParams) => `${payer} paid ${amount} elsewhere`,
@@ -1947,19 +1951,19 @@ export default {
             buttonText1: 'Start a chat, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Start a chat, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Start a chat with a new Expensify account. Get $${CONST.REFERRAL_PROGRAM.REVENUE} once they start an annual subscription with two or more active members and make the first two payments toward their Expensify bill.`,
+            body1: `Get paid to talk to your friends! Start a chat with a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST]: {
             buttonText1: 'Request money, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Request money, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Request money from a new Expensify account. Get $${CONST.REFERRAL_PROGRAM.REVENUE} once they start an annual subscription with two or more active members and make the first two payments toward their Expensify bill.`,
+            body1: `It pays to get paid! Request money from a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY]: {
             buttonText1: 'Send money, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Send money, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Send money to a new Expensify account. Get $${CONST.REFERRAL_PROGRAM.REVENUE} once they start an annual subscription with two or more active members and make the first two payments toward their Expensify bill.`,
+            body1: `You gotta send money to make money! Send money to a new Expensify account and get $${CONST.REFERRAL_PROGRAM.REVENUE} if they become an Expensify customer.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]: {
             buttonText1: 'Refer a friend, ',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b52975496e08..3887891299df 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -8,6 +8,7 @@ import type {
     BeginningOfChatHistoryAnnounceRoomPartOneParams,
     BeginningOfChatHistoryAnnounceRoomPartTwo,
     BeginningOfChatHistoryDomainRoomPartOneParams,
+    CanceledRequestParams,
     CharacterLimitParams,
     ConfirmThatParams,
     DateShouldBeAfterParams,
@@ -534,6 +535,7 @@ export default {
         pay: 'Pagar',
         viewDetails: 'Ver detalles',
         pending: 'Pendiente',
+        canceled: 'Canceló',
         posted: 'Contabilizado',
         deleteReceipt: 'Eliminar recibo',
         receiptScanning: 'Escaneo de recibo en curso…',
@@ -564,6 +566,8 @@ export default {
         managerApproved: ({manager}: ManagerApprovedParams) => `${manager} aprobó:`,
         payerSettled: ({amount}: PayerSettledParams) => `pagó ${amount}`,
         waitingOnBankAccount: ({submitterDisplayName}: WaitingOnBankAccountParams) => `inicio el pago, pero no se procesará hasta que ${submitterDisplayName} añada una cuenta bancaria`,
+        canceledRequest: ({amount, submitterDisplayName}: CanceledRequestParams) =>
+            `Canceló el pago  ${amount}, porque ${submitterDisplayName} no habilitó su billetera Expensify en un plazo de 30 días.`,
         settledAfterAddedBankAccount: ({submitterDisplayName, amount}: SettledAfterAddedBankAccountParams) =>
             `${submitterDisplayName} añadió una cuenta bancaria. El pago de ${amount} se ha realizado.`,
         paidElsewhereWithAmount: ({payer, amount}: PaidElsewhereWithAmountParams) => `${payer} pagó ${amount} de otra forma`,
@@ -2432,19 +2436,19 @@ export default {
             buttonText1: 'Inicia un chat y ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Inicia un chat y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Inicia un chat con una cuenta nueva de Expensify. Obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} una vez que configuren una suscripción anual con dos o más miembros activos y realicen los dos primeros pagos de su factura Expensify.`,
+            body1: `¡Gana dinero por hablar con tus amigos! Inicia un chat con una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST]: {
             buttonText1: 'Pide dinero, ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Pide dinero y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Pide dinero a una cuenta nueva de Expensify. Obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} una vez que configuren una suscripción anual con dos o más miembros activos y realicen los dos primeros pagos de su factura Expensify.`,
+            body1: `¡Vale la pena cobrar! Pide dinero a una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY]: {
             buttonText1: 'Envía dinero, ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Envía dinero y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body1: `Envía dinero a una cuenta nueva de Expensify. Obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} una vez que configuren una suscripción anual con dos o más miembros activos y realicen los dos primeros pagos de su factura Expensify.`,
+            body1: `¡Hay que enviar dinero para ganar dinero! Envía dinero a una cuenta nueva de Expensify y obtiene $${CONST.REFERRAL_PROGRAM.REVENUE} si se convierten en clientes de Expensify.`,
         },
         [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND]: {
             buttonText1: 'Recomienda a un amigo y ',
diff --git a/src/languages/types.ts b/src/languages/types.ts
index a012ebdfb95b..96dd85dfb627 100644
--- a/src/languages/types.ts
+++ b/src/languages/types.ts
@@ -125,6 +125,8 @@ type PayerSettledParams = {amount: number | string};
 
 type WaitingOnBankAccountParams = {submitterDisplayName: string};
 
+type CanceledRequestParams = {amount: string; submitterDisplayName: string};
+
 type SettledAfterAddedBankAccountParams = {submitterDisplayName: string; amount: string};
 
 type PaidElsewhereWithAmountParams = {payer: string; amount: string};
@@ -282,6 +284,7 @@ export type {
     ManagerApprovedParams,
     PayerSettledParams,
     WaitingOnBankAccountParams,
+    CanceledRequestParams,
     SettledAfterAddedBankAccountParams,
     PaidElsewhereWithAmountParams,
     PaidWithExpensifyWithAmountParams,
diff --git a/src/libs/EmojiTrie.ts b/src/libs/EmojiTrie.ts
index a45d1bc45b33..100d24a01546 100644
--- a/src/libs/EmojiTrie.ts
+++ b/src/libs/EmojiTrie.ts
@@ -128,4 +128,4 @@ const emojiTrie: EmojiTrie = supportedLanguages.reduce((prev, cur) => ({...prev,
 Timing.end(CONST.TIMING.TRIE_INITIALIZATION);
 
 export default emojiTrie;
-export type {SimpleEmoji};
+export type {SimpleEmoji, SupportedLanguage};
diff --git a/src/libs/EmojiUtils.ts b/src/libs/EmojiUtils.ts
index 22e84921b1ee..22bfc83218ac 100644
--- a/src/libs/EmojiUtils.ts
+++ b/src/libs/EmojiUtils.ts
@@ -8,7 +8,7 @@ import {Emoji, HeaderEmoji, PickerEmojis} from '@assets/emojis/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {FrequentlyUsedEmoji} from '@src/types/onyx';
-import emojisTrie from './EmojiTrie';
+import {SupportedLanguage} from './EmojiTrie';
 
 type HeaderIndice = {code: string; index: number; icon: React.FC<SvgProps>};
 type EmojiSpacer = {code: string; spacer: boolean};
@@ -322,6 +322,9 @@ function getAddedEmojis(currentEmojis: Emoji[], formerEmojis: Emoji[]): Emoji[]
  * If we're on mobile, we also add a space after the emoji granted there's no text after it.
  */
 function replaceEmojis(text: string, preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE, lang: 'en' | 'es' = CONST.LOCALES.DEFAULT): ReplacedEmoji {
+    // emojisTrie is importing the emoji JSON file on the app starting and we want to avoid it
+    const emojisTrie = require('./EmojiTrie').default;
+
     const trie = emojisTrie[lang];
     if (!trie) {
         return {text, emojis: []};
@@ -396,7 +399,10 @@ function replaceAndExtractEmojis(text: string, preferredSkinTone = CONST.EMOJI_D
  * Suggest emojis when typing emojis prefix after colon
  * @param [limit] - matching emojis limit
  */
-function suggestEmojis(text: string, lang: keyof typeof emojisTrie, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS): Emoji[] | undefined {
+function suggestEmojis(text: string, lang: keyof SupportedLanguage, limit = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS): Emoji[] | undefined {
+    // emojisTrie is importing the emoji JSON file on the app starting and we want to avoid it
+    const emojisTrie = require('./EmojiTrie').default;
+
     const trie = emojisTrie[lang];
     if (!trie) {
         return [];
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index cbb2e62161f3..7c0b9ef4fc8c 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -1,12 +1,9 @@
 import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} from '@react-navigation/native';
 import React, {useEffect, useMemo, useRef} from 'react';
-import {ColorValue} from 'react-native';
-import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
-import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
@@ -42,8 +39,8 @@ function parseAndLogRoute(state: NavigationState) {
 
 function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
     useFlipper(navigationRef);
-    const theme = useTheme();
     const firstRenderRef = useRef(true);
+    const theme = useTheme();
 
     const currentReportIDValue = useCurrentReportID();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -82,46 +79,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
         navigationRef.resetRoot(navigationRef.getRootState());
     }, [isSmallScreenWidth, authenticated]);
 
-    const prevStatusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarAnimation = useSharedValue(0);
-
-    const updateStatusBarBackgroundColor = (color: ColorValue) => StatusBar.setBackgroundColor(color);
-    useAnimatedReaction(
-        () => statusBarAnimation.value,
-        (current, previous) => {
-            // Do not run if either of the animated value is null
-            // or previous animated value is greater than or equal to the current one
-            if (previous === null || current === null || current <= previous) {
-                return;
-            }
-            const color = interpolateColor(statusBarAnimation.value, [0, 1], [prevStatusBarBackgroundColor.current, statusBarBackgroundColor.current]);
-            runOnJS(updateStatusBarBackgroundColor)(color);
-        },
-    );
-
-    const animateStatusBarBackgroundColor = () => {
-        const currentRoute = navigationRef.getCurrentRoute();
-
-        const backgroundColorFromRoute =
-            currentRoute?.params && 'backgroundColor' in currentRoute.params && typeof currentRoute.params.backgroundColor === 'string' && currentRoute.params.backgroundColor;
-        const backgroundColorFallback = currentRoute?.name ? theme.PAGE_BACKGROUND_COLORS[currentRoute.name] || theme.appBG : theme.appBG;
-
-        // It's possible for backgroundColorFromRoute to be empty string, so we must use "||" to fallback to backgroundColorFallback.
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const currentScreenBackgroundColor = backgroundColorFromRoute || backgroundColorFallback;
-
-        prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
-        statusBarBackgroundColor.current = currentScreenBackgroundColor;
-
-        if (currentScreenBackgroundColor === theme.appBG && prevStatusBarBackgroundColor.current === theme.appBG) {
-            return;
-        }
-
-        statusBarAnimation.value = 0;
-        statusBarAnimation.value = withDelay(300, withTiming(1));
-    };
-
     const handleStateChange = (state: NavigationState | undefined) => {
         if (!state) {
             return;
@@ -132,7 +89,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
             currentReportIDValue?.updateCurrentReportID(state);
         }, 0);
         parseAndLogRoute(state);
-        animateStatusBarBackgroundColor();
     };
 
     return (
diff --git a/src/libs/Navigation/linkingConfig.ts b/src/libs/Navigation/linkingConfig.ts
index bb06bf7e4528..92a04778b9a6 100644
--- a/src/libs/Navigation/linkingConfig.ts
+++ b/src/libs/Navigation/linkingConfig.ts
@@ -171,7 +171,7 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
                                 path: ROUTES.SETTINGS_LOUNGE_ACCESS,
                             },
                             Settings_NewContactMethod: {
-                                path: ROUTES.SETTINGS_NEW_CONTACT_METHOD,
+                                path: ROUTES.SETTINGS_NEW_CONTACT_METHOD.route,
                                 exact: true,
                             },
                             Settings_PersonalDetails_Initial: {
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index c616587c3983..820339ebc6c4 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -350,11 +350,11 @@ function getAllReportErrors(report, reportActions) {
     if (parentReportAction.actorAccountID === currentUserAccountID && ReportActionUtils.isTransactionThread(parentReportAction)) {
         const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], '');
         const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {};
-        if (TransactionUtils.hasMissingSmartscanFields(transaction)) {
+        if (TransactionUtils.hasMissingSmartscanFields(transaction) && !ReportUtils.isSettled(transaction.reportID)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
     } else if ((ReportUtils.isIOUReport(report) || ReportUtils.isExpenseReport(report)) && report.ownerAccountID === currentUserAccountID) {
-        if (ReportUtils.hasMissingSmartscanFields(report.reportID)) {
+        if (ReportUtils.hasMissingSmartscanFields(report.reportID) && !ReportUtils.isSettled(report.reportID)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
     }
@@ -397,6 +397,8 @@ function getLastMessageTextForReport(report) {
         lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReport, true, ReportUtils.isChatReport(report));
     } else if (ReportActionUtils.isReimbursementQueuedAction(lastReportAction)) {
         lastMessageTextFromReport = ReportUtils.getReimbursementQueuedActionMessage(lastReportAction, report);
+    } else if (ReportActionUtils.isReimbursementDeQueuedAction(lastReportAction)) {
+        lastMessageTextFromReport = ReportUtils.getReimbursementDeQueuedActionMessage(report);
     } else if (ReportActionUtils.isDeletedParentAction(lastReportAction) && ReportUtils.isChatReport(report)) {
         lastMessageTextFromReport = ReportUtils.getDeletedParentActionMessageForChatReport(lastReportAction);
     } else if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml, translationKey: report.lastMessageTranslationKey})) {
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index cbeb44eb6bbc..fc2bfb6d83fb 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,5 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
@@ -40,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco
 /**
  * Get the PaymentMethods list
  */
-function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: typeof styles): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: ThemeStyles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {
@@ -50,7 +50,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
         }
 
         const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({
-            bankName: bankAccount?.accountData?.additionalData?.bankName ?? '',
+            bankName: bankAccount?.accountData?.additionalData?.bankName,
             isCard: false,
             themeStyles,
         });
@@ -66,7 +66,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
     });
 
     Object.values(fundList).forEach((card) => {
-        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank ?? '', isCard: true, themeStyles});
+        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank, isCard: true, themeStyles});
         combinedPaymentMethods.push({
             ...card,
             description: getPaymentMethodDescription(card?.accountType, card.accountData),
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index bd475a57954e..f58021e17064 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -109,6 +109,10 @@ function isChannelLogMemberAction(reportAction: OnyxEntry<ReportAction>) {
     );
 }
 
+function isReimbursementDeQueuedAction(reportAction: OnyxEntry<ReportAction>): boolean {
+    return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTDEQUEUED;
+}
+
 /**
  * Returns whether the comment is a thread parent message/the first message in a thread
  */
@@ -698,6 +702,7 @@ export {
     hasRequestFromCurrentAccount,
     getFirstVisibleReportActionID,
     isChannelLogMemberAction,
+    isReimbursementDeQueuedAction,
 };
 
 export type {LastVisibleMessage};
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 50a39f837fae..8f2382111f34 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -646,7 +646,7 @@ function isUserCreatedPolicyRoom(report: OnyxEntry<Report>): boolean {
  * Whether the provided report is a Policy Expense chat.
  */
 function isPolicyExpenseChat(report: OnyxEntry<Report>): boolean {
-    return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT;
+    return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT || (report?.isPolicyExpenseChat ?? false);
 }
 
 /** Wether the provided report belongs to a Control policy and is an epxense chat
@@ -1489,6 +1489,16 @@ function getReimbursementQueuedActionMessage(reportAction: OnyxEntry<ReportActio
     return Localize.translateLocal(messageKey, {submitterDisplayName});
 }
 
+/**
+ * Returns the preview message for `REIMBURSEMENTDEQUEUED` action
+ */
+function getReimbursementDeQueuedActionMessage(report: OnyxEntry<Report>): string {
+    const submitterDisplayName = getDisplayNameForParticipant(report?.ownerAccountID, true) ?? '';
+    const amount = CurrencyUtils.convertToDisplayString(report?.total ?? 0, report?.currency);
+
+    return Localize.translateLocal('iou.canceledRequest', {submitterDisplayName, amount});
+}
+
 /**
  * Returns the last visible message for a given report after considering the given optimistic actions
  *
@@ -1692,6 +1702,10 @@ function getMoneyRequestReportName(report: OnyxEntry<Report>, policy: OnyxEntry<
         return `${payerPaidAmountMessage} • ${Localize.translateLocal('iou.pending')}`;
     }
 
+    if (report?.isCancelledIOU) {
+        return `${payerPaidAmountMessage} • ${Localize.translateLocal('iou.canceled')}`;
+    }
+
     if (hasNonReimbursableTransactions(report?.reportID)) {
         return Localize.translateLocal('iou.payerSpentAmount', {payer: payerName, amount: formattedAmount});
     }
@@ -1866,7 +1880,8 @@ function getTransactionReportName(reportAction: OnyxEntry<ReportAction>): string
 
     const transaction = TransactionUtils.getLinkedTransaction(reportAction);
     if (!isNotEmptyObject(transaction)) {
-        return '';
+        // Transaction data might be empty on app's first load, if so we fallback to Request
+        return Localize.translateLocal('iou.request');
     }
     if (TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction)) {
         return Localize.translateLocal('iou.receiptScanning');
@@ -4403,6 +4418,7 @@ export {
     shouldUseFullTitleToDisplay,
     parseReportRouteParams,
     getReimbursementQueuedActionMessage,
+    getReimbursementDeQueuedActionMessage,
     getPersonalDetailsForAccountID,
     getChannelLogMemberMessage,
     getRoom,
diff --git a/src/libs/RoomNameInputUtils.ts b/src/libs/RoomNameInputUtils.ts
index cff0bbc30274..e6f7d420bf59 100644
--- a/src/libs/RoomNameInputUtils.ts
+++ b/src/libs/RoomNameInputUtils.ts
@@ -3,14 +3,14 @@ import CONST from '@src/CONST';
 /**
  * Replaces spaces with dashes
  */
-function modifyRoomName(roomName: string): string {
+function modifyRoomName(roomName: string, skipPolicyPrefix?: boolean): string {
     const modifiedRoomNameWithoutHash = roomName
         .replace(/ /g, '-')
 
         // Replaces the smart dash on iOS devices with two hyphens
         .replace(/—/g, '--');
 
-    return `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
+    return skipPolicyPrefix ? modifiedRoomNameWithoutHash : `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
 }
 
 export {
diff --git a/src/libs/SidebarUtils.ts b/src/libs/SidebarUtils.ts
index ff9486159947..bace29e06d28 100644
--- a/src/libs/SidebarUtils.ts
+++ b/src/libs/SidebarUtils.ts
@@ -232,7 +232,7 @@ type ActorDetails = {
  */
 function getOptionData(
     report: Report,
-    reportActions: Record<string, ReportAction[]>,
+    reportActions: Record<string, ReportAction>,
     personalDetails: Record<number, PersonalDetails>,
     preferredLocale: ValueOf<typeof CONST.LOCALES>,
     policy: Policy,
diff --git a/src/libs/StatusBar/index.android.ts b/src/libs/StatusBar/index.android.ts
index c928f0949665..6cbf1a762a0b 100644
--- a/src/libs/StatusBar/index.android.ts
+++ b/src/libs/StatusBar/index.android.ts
@@ -1,10 +1,14 @@
 import StatusBar from './types';
 
-// Only has custom web implementation
-StatusBar.getBackgroundColor = () => null;
+const setBackgroundColor = StatusBar.setBackgroundColor;
 
-// We override this because it's not used – on Android our app display edge-to-edge.
-// Also because Reanimated's interpolateColor gives Android native colors instead of hex strings, causing this to display a warning.
-StatusBar.setBackgroundColor = () => null;
+let statusBarColor: string | null = null;
+
+StatusBar.getBackgroundColor = () => statusBarColor;
+
+StatusBar.setBackgroundColor = (color, animated = false) => {
+    statusBarColor = color as string;
+    setBackgroundColor(color, animated);
+};
 
 export default StatusBar;
diff --git a/src/libs/UpdateMultilineInputRange/index.js b/src/libs/UpdateMultilineInputRange/index.js
index 66fb1889be21..7de700fe7636 100644
--- a/src/libs/UpdateMultilineInputRange/index.js
+++ b/src/libs/UpdateMultilineInputRange/index.js
@@ -1,3 +1,5 @@
+import * as Browser from '@libs/Browser';
+
 /**
  * Place the cursor at the end of the value (if there is a value in the input).
  *
@@ -10,7 +12,6 @@
  * @param {Object} input the input element
  * @param {boolean} shouldAutoFocus
  */
-// eslint-disable-next-line no-unused-vars
 export default function updateMultilineInputRange(input, shouldAutoFocus = true) {
     if (!input) {
         return;
@@ -18,7 +19,14 @@ export default function updateMultilineInputRange(input, shouldAutoFocus = true)
 
     if (input.value && input.setSelectionRange) {
         const length = input.value.length;
-        input.setSelectionRange(length, length);
+
+        // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
+        // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
+        // so we need to ensure that it is only updated after focus.
+        const shouldSetSelection = !(Browser.isMobileSafari() && !shouldAutoFocus);
+        if (shouldSetSelection) {
+            input.setSelectionRange(length, length);
+        }
         // eslint-disable-next-line no-param-reassign
         input.scrollTop = input.scrollHeight;
     }
diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts
index d091cca57df4..29a43bcf711d 100644
--- a/src/libs/UserUtils.ts
+++ b/src/libs/UserUtils.ts
@@ -105,22 +105,22 @@ function getDefaultAvatarURL(accountID: string | number = '', isNewDot = false):
 
 /**
  * Given a user's avatar path, returns true if user doesn't have an avatar or if URL points to a default avatar
- * @param [avatarURL] - the avatar source from user's personalDetails
+ * @param avatarSource - the avatar source from user's personalDetails
  */
-function isDefaultAvatar(avatarURL?: string | React.FC<SvgProps>): boolean {
-    if (typeof avatarURL === 'string') {
-        if (avatarURL.includes('images/avatars/avatar_') || avatarURL.includes('images/avatars/default-avatar_') || avatarURL.includes('images/avatars/user/default')) {
+function isDefaultAvatar(avatarSource?: AvatarSource): boolean {
+    if (typeof avatarSource === 'string') {
+        if (avatarSource.includes('images/avatars/avatar_') || avatarSource.includes('images/avatars/default-avatar_') || avatarSource.includes('images/avatars/user/default')) {
             return true;
         }
 
         // We use a hardcoded "default" Concierge avatar
-        if (avatarURL === CONST.CONCIERGE_ICON_URL_2021 || avatarURL === CONST.CONCIERGE_ICON_URL) {
+        if (avatarSource === CONST.CONCIERGE_ICON_URL_2021 || avatarSource === CONST.CONCIERGE_ICON_URL) {
             return true;
         }
     }
 
-    if (!avatarURL) {
-        // If null URL, we should also use a default avatar
+    if (!avatarSource) {
+        // If null source, we should also use a default avatar
         return true;
     }
 
@@ -128,14 +128,14 @@ function isDefaultAvatar(avatarURL?: string | React.FC<SvgProps>): boolean {
 }
 
 /**
- * Provided a source URL, if source is a default avatar, return the associated SVG.
- * Otherwise, return the URL pointing to a user-uploaded avatar.
+ * Provided an avatar source, if source is a default avatar, return the associated SVG.
+ * Otherwise, return the URL or SVG pointing to the user-uploaded avatar.
  *
- * @param avatarURL - the avatar source from user's personalDetails
+ * @param avatarSource - the avatar source from user's personalDetails
  * @param accountID - the accountID of the user
  */
-function getAvatar(avatarURL: AvatarSource, accountID: number): AvatarSource {
-    return isDefaultAvatar(avatarURL) ? getDefaultAvatar(accountID) : avatarURL;
+function getAvatar(avatarSource: AvatarSource, accountID?: number): AvatarSource {
+    return isDefaultAvatar(avatarSource) ? getDefaultAvatar(accountID) : avatarSource;
 }
 
 /**
@@ -153,8 +153,8 @@ function getAvatarUrl(avatarURL: string, accountID: number): string {
  * Avatars uploaded by users will have a _128 appended so that the asset server returns a small version.
  * This removes that part of the URL so the full version of the image can load.
  */
-function getFullSizeAvatar(avatarURL: string, accountID: number): AvatarSource {
-    const source = getAvatar(avatarURL, accountID);
+function getFullSizeAvatar(avatarSource: AvatarSource, accountID: number): AvatarSource {
+    const source = getAvatar(avatarSource, accountID);
     if (typeof source !== 'string') {
         return source;
     }
@@ -165,8 +165,8 @@ function getFullSizeAvatar(avatarURL: string, accountID: number): AvatarSource {
  * Small sized avatars end with _128.<file-type>. This adds the _128 at the end of the
  * source URL (before the file type) if it doesn't exist there already.
  */
-function getSmallSizeAvatar(avatarURL: string, accountID: number): AvatarSource {
-    const source = getAvatar(avatarURL, accountID);
+function getSmallSizeAvatar(avatarSource: AvatarSource, accountID?: number): AvatarSource {
+    const source = getAvatar(avatarSource, accountID);
     if (typeof source !== 'string') {
         return source;
     }
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index c0466f8c2604..d9de984ad12c 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -63,34 +63,6 @@ Onyx.connect({
     },
 });
 
-let allRecentlyUsedTags = {};
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            allRecentlyUsedTags = {};
-            return;
-        }
-
-        allRecentlyUsedTags = value;
-    },
-});
-
-let allPolicyTags = {};
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            allPolicyTags = {};
-            return;
-        }
-
-        allPolicyTags = value;
-    },
-});
-
 let userAccountID = '';
 let currentUserEmail = '';
 Onyx.connect({
@@ -508,21 +480,9 @@ function getMoneyRequestInformation(
         billable,
     );
 
-    let optimisticPolicyRecentlyUsedCategories = [];
-    if (category) {
-        optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, category);
-    }
+    const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, category);
 
-    const optimisticPolicyRecentlyUsedTags = {};
-    const policyTags = allPolicyTags[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${iouReport.policyID}`];
-    const recentlyUsedPolicyTags = allRecentlyUsedTags[`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`];
-
-    if (policyTags) {
-        // For now it only uses the first tag of the policy, since multi-tags are not yet supported
-        const tagListKey = _.first(_.keys(policyTags));
-        const uniquePolicyRecentlyUsedTags = recentlyUsedPolicyTags ? _.filter(recentlyUsedPolicyTags[tagListKey], (recentlyUsedPolicyTag) => recentlyUsedPolicyTag !== tag) : [];
-        optimisticPolicyRecentlyUsedTags[tagListKey] = [tag, ...uniquePolicyRecentlyUsedTags];
-    }
+    const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, tag);
 
     // If there is an existing transaction (which is the case for distance requests), then the data from the existing transaction
     // needs to be manually merged into the optimistic transaction. This is because buildOnyxDataForMoneyRequest() uses `Onyx.set()` for the transaction
@@ -781,7 +741,8 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
 
     // Optimistically modify the transaction
     optimisticData.push({
-        onyxMethod: Onyx.METHOD.MERGE,
+        // We need to use SET method to save updated waypoint instead MERGE method to avoid wrong update of waypoints. More detail: https://github.com/Expensify/App/issues/30290#issuecomment-1778957070
+        onyxMethod: Onyx.METHOD.SET,
         key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
         value: {
             ...updatedTransaction,
@@ -919,11 +880,12 @@ function requestMoney(
  * @param {String} comment
  * @param {String} currency
  * @param {String} category
+ * @param {String} tag
  * @param {String} existingSplitChatReportID - the report ID where the split bill happens, could be a group chat or a workspace chat
  *
  * @return {Object}
  */
-function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID = '') {
+function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag, existingSplitChatReportID = '') {
     const currentUserEmailForIOUSplit = OptionsListUtils.addSMSDomainIfPhoneNumber(currentUserLogin);
     const participantAccountIDs = _.map(participants, (participant) => Number(participant.accountID));
     const existingSplitChatReport =
@@ -951,6 +913,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
         undefined,
         undefined,
         category,
+        tag,
     );
 
     // Note: The created action must be optimistically generated before the IOU action so there's no chance that the created action appears after the IOU action in the chat
@@ -1141,6 +1104,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
             undefined,
             undefined,
             category,
+            tag,
         );
 
         // STEP 4: Build optimistic reportActions. We need:
@@ -1189,10 +1153,10 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
         }
 
         // Add category to optimistic policy recently used categories when a participant is a workspace
-        let optimisticPolicyRecentlyUsedCategories = [];
-        if (isPolicyExpenseChat) {
-            optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(participant.policyID, category);
-        }
+        const optimisticPolicyRecentlyUsedCategories = isPolicyExpenseChat ? Policy.buildOptimisticPolicyRecentlyUsedCategories(participant.policyID, category) : [];
+
+        // Add tag to optimistic policy recently used tags when a participant is a workspace
+        const optimisticPolicyRecentlyUsedTags = isPolicyExpenseChat ? Policy.buildOptimisticPolicyRecentlyUsedTags(participant.policyID, tag) : {};
 
         // STEP 5: Build Onyx Data
         const [oneOnOneOptimisticData, oneOnOneSuccessData, oneOnOneFailureData] = buildOnyxDataForMoneyRequest(
@@ -1205,7 +1169,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
             oneOnOnePersonalDetailListAction,
             oneOnOneReportPreviewAction,
             optimisticPolicyRecentlyUsedCategories,
-            {},
+            optimisticPolicyRecentlyUsedTags,
             isNewOneOnOneChatReport,
             shouldCreateNewOneOnOneIOUReport,
         );
@@ -1255,10 +1219,11 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
  * @param {String} comment
  * @param {String} currency
  * @param {String} category
+ * @param {String} tag
  * @param {String} existingSplitChatReportID - Either a group DM or a workspace chat
  */
-function splitBill(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID = '') {
-    const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID);
+function splitBill(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag, existingSplitChatReportID = '') {
+    const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag, existingSplitChatReportID);
     API.write(
         'SplitBill',
         {
@@ -1268,6 +1233,7 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount,
             currency,
             comment,
             category,
+            tag,
             transactionID: splitData.transactionID,
             reportActionID: splitData.reportActionID,
             createdReportActionID: splitData.createdReportActionID,
@@ -1289,10 +1255,10 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount,
  * @param {String} comment
  * @param {String} currency
  * @param {String} category
+ * @param {String} tag
  */
-function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category) {
-    const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category);
-
+function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag) {
+    const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag);
     API.write(
         'SplitBillAndOpenReport',
         {
@@ -1302,6 +1268,7 @@ function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccou
             currency,
             comment,
             category,
+            tag,
             transactionID: splitData.transactionID,
             reportActionID: splitData.reportActionID,
             createdReportActionID: splitData.createdReportActionID,
@@ -1831,16 +1798,7 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
         updatedChatReport.lastMessageHtml = messageText;
     }
 
-    const optimisticPolicyRecentlyUsedTags = {};
-    if (_.has(transactionChanges, 'tag')) {
-        const tagListName = transactionChanges.tagListName;
-        const recentlyUsedPolicyTags = allRecentlyUsedTags[`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`];
-
-        const uniquePolicyRecentlyUsedTags = recentlyUsedPolicyTags
-            ? _.filter(recentlyUsedPolicyTags[tagListName], (recentlyUsedPolicyTag) => recentlyUsedPolicyTag !== transactionChanges.tag)
-            : [];
-        optimisticPolicyRecentlyUsedTags[tagListName] = [transactionChanges.tag, ...uniquePolicyRecentlyUsedTags];
-    }
+    const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
 
     const isScanning = TransactionUtils.hasReceipt(updatedTransaction) && TransactionUtils.isReceiptBeingScanned(updatedTransaction);
 
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index bcc371b3a609..659fc96db468 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -91,6 +91,27 @@ Onyx.connect({
     callback: (val) => (allRecentlyUsedCategories = val),
 });
 
+let allPolicyTags = {};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
+    waitForCollectionCallback: true,
+    callback: (value) => {
+        if (!value) {
+            allPolicyTags = {};
+            return;
+        }
+
+        allPolicyTags = value;
+    },
+});
+
+let allRecentlyUsedTags = {};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS,
+    waitForCollectionCallback: true,
+    callback: (val) => (allRecentlyUsedTags = val),
+});
+
 let networkStatus = {};
 Onyx.connect({
     key: ONYXKEYS.NETWORK,
@@ -1471,6 +1492,27 @@ function buildOptimisticPolicyRecentlyUsedCategories(policyID, category) {
     return lodashUnion([category], policyRecentlyUsedCategories);
 }
 
+/**
+ * @param {String} policyID
+ * @param {String} tag
+ * @returns {Object}
+ */
+function buildOptimisticPolicyRecentlyUsedTags(policyID, tag) {
+    if (!policyID || !tag) {
+        return {};
+    }
+
+    const policyTags = lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
+    // For now it only uses the first tag of the policy, since multi-tags are not yet supported
+    const tagListKey = _.first(_.keys(policyTags));
+    const policyRecentlyUsedTags = lodashGet(allRecentlyUsedTags, `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, {});
+
+    return {
+        ...policyRecentlyUsedTags,
+        [tagListKey]: lodashUnion([tag], lodashGet(policyRecentlyUsedTags, [tagListKey], [])),
+    };
+}
+
 /**
  * This flow is used for bottom up flow converting IOU report to an expense report. When user takes this action,
  * we create a Collect type workspace when the person taking the action becomes an owner and an admin, while we
@@ -1900,6 +1942,7 @@ export {
     dismissAddedWithPrimaryLoginMessages,
     openDraftWorkspaceRequest,
     buildOptimisticPolicyRecentlyUsedCategories,
+    buildOptimisticPolicyRecentlyUsedTags,
     createDraftInitialWorkspace,
     setWorkspaceInviteMessageDraft,
 };
diff --git a/src/libs/assignRef.ts b/src/libs/assignRef.ts
new file mode 100644
index 000000000000..f2c2b488519f
--- /dev/null
+++ b/src/libs/assignRef.ts
@@ -0,0 +1,19 @@
+import {MutableRefObject, RefCallback} from 'react';
+
+/**
+ * Assigns an element to ref, either by setting the `current` property of the ref object or by calling the ref function
+ *
+ * @param ref The ref object or function.
+ * @param element The element to assign the ref to.
+ */
+export default function assignRef<E extends HTMLElement>(ref: RefCallback<E> | MutableRefObject<E | null> | undefined, element: E) {
+    if (!ref) {
+        return;
+    }
+    if (typeof ref === 'function') {
+        ref(element);
+    } else if ('current' in ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = element;
+    }
+}
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index 7b627a8e18d5..ba9bd783752b 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -29,7 +29,7 @@ function GenericErrorPage({translate}) {
     return (
         <SafeAreaConsumer>
             {({paddingBottom}) => (
-                <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(paddingBottom)]}>
+                <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(theme, paddingBottom)]}>
                     <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
                         <View>
                             <View style={styles.mb5}>
diff --git a/src/pages/KeyboardShortcutsPage.js b/src/pages/KeyboardShortcutsPage.js
index fde4bf5ff3df..c44c6213d3a5 100644
--- a/src/pages/KeyboardShortcutsPage.js
+++ b/src/pages/KeyboardShortcutsPage.js
@@ -36,7 +36,7 @@ function KeyboardShortcutsPage() {
             key={shortcut.displayName}
             title={shortcut.displayName}
             description={translate(`keyboardShortcutsPage.shortcuts.${shortcut.descriptionKey}`)}
-            wrapperStyle={styles.ph0}
+            wrapperStyle={[styles.ph0, styles.cursorAuto]}
             interactive={false}
         />
     );
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 442276b19a0b..88583ab15529 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -9,6 +9,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MultipleAvatars from '@components/MultipleAvatars';
+import {withNetwork} from '@components/OnyxProvider';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
 import participantPropTypes from '@components/participantPropTypes';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -76,6 +77,17 @@ function ReportDetailsPage(props) {
 
     const isGroupDMChat = useMemo(() => ReportUtils.isDM(props.report) && participants.length > 1, [props.report, participants.length]);
 
+    const isPrivateNotesFetchTriggered = !_.isUndefined(props.report.isLoadingPrivateNotes);
+
+    useEffect(() => {
+        // Do not fetch private notes if isLoadingPrivateNotes is already defined, or if network is offline.
+        if (isPrivateNotesFetchTriggered || props.network.isOffline) {
+            return;
+        }
+
+        Report.getReportPrivateNote(props.report.reportID);
+    }, [props.report.reportID, props.network.isOffline, isPrivateNotesFetchTriggered]);
+
     const menuItems = useMemo(() => {
         const items = [];
 
@@ -249,6 +261,7 @@ ReportDetailsPage.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withReportOrNotFound(),
+    withNetwork(),
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
diff --git a/src/pages/RoomMembersPage.js b/src/pages/RoomMembersPage.js
index 2b96536c9719..662bedac71a5 100644
--- a/src/pages/RoomMembersPage.js
+++ b/src/pages/RoomMembersPage.js
@@ -7,6 +7,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
@@ -27,13 +28,9 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
-import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
 
 const propTypes = {
-    /** All personal details asssociated with user */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -67,7 +64,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    personalDetails: {},
     session: {
         accountID: 0,
     },
@@ -83,6 +79,7 @@ function RoomMembersPage(props) {
     const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const [didLoadRoomMembers, setDidLoadRoomMembers] = useState(false);
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     /**
      * Get members for the current room
@@ -187,7 +184,7 @@ function RoomMembersPage(props) {
         let result = [];
 
         _.each(props.report.participantAccountIDs, (accountID) => {
-            const details = props.personalDetails[accountID];
+            const details = personalDetails[accountID];
 
             if (!details) {
                 Log.hmmm(`[RoomMembersPage] no personal details found for room member with accountID: ${accountID}`);
@@ -299,7 +296,7 @@ function RoomMembersPage(props) {
                             headerMessage={headerMessage}
                             onSelectRow={(item) => toggleUser(item.keyForList)}
                             onSelectAll={() => toggleAllUsers(data)}
-                            showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || !didLoadRoomMembers}
+                            showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(personalDetails) || !didLoadRoomMembers}
                             showScrollIndicator
                             shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}
                         />
@@ -319,9 +316,6 @@ export default compose(
     withWindowDimensions,
     withReportOrNotFound(),
     withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index d81593fb552a..c63db694159f 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -108,12 +108,6 @@ class ShareCodePage extends React.Component {
                             onPress={() => Clipboard.setString(url)}
                         />
 
-                        <MenuItem
-                            title={this.props.translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
-                            icon={Expensicons.Cash}
-                            onPress={() => Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))}
-                        />
-
                         {isNative && (
                             <MenuItem
                                 isAnonymousAction
@@ -123,6 +117,12 @@ class ShareCodePage extends React.Component {
                                 onPress={() => this.qrCodeRef.current?.download()}
                             />
                         )}
+
+                        <MenuItem
+                            title={this.props.translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
+                            icon={Expensicons.Cash}
+                            onPress={() => Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))}
+                        />
                     </View>
                 </ScrollView>
             </ScreenWrapper>
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index 6d448b6b08b1..d179b7d1db95 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -38,7 +38,7 @@ function SaveTheWorldPage(props) {
         <IllustratedHeaderPageLayout
             shouldShowBackButton
             title={translate('sidebarScreen.saveTheWorld')}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SAVE_THE_WORLD.ROOT]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SAVE_THE_WORLD.ROOT].backgroundColor}
             onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
             illustration={LottieAnimations.SaveTheWorld}
         >
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
index 4044ea2396db..051e559c34b6 100755
--- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork';
 import compose from '@libs/compose';
 import getReportActionContextMenuStyles from '@styles/getReportActionContextMenuStyles';
 import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,9 +52,10 @@ const defaultProps = {
 };
 function BaseReportActionContextMenu(props) {
     const theme = useTheme();
+    const styles = useThemeStyles();
     const menuItemRefs = useRef({});
     const [shouldKeepOpen, setShouldKeepOpen] = useState(false);
-    const wrapperStyle = getReportActionContextMenuStyles(props.isMini, props.isSmallScreenWidth, theme);
+    const wrapperStyle = getReportActionContextMenuStyles(styles, props.isMini, props.isSmallScreenWidth, theme);
     const {isOffline} = useNetwork();
 
     const reportAction = useMemo(() => {
diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
index ef28a2690af4..37901db09954 100644
--- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
+++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
@@ -8,6 +8,7 @@ import {
     propTypes as genericReportActionContextMenuPropTypes,
 } from '@pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
@@ -24,9 +25,11 @@ const defaultProps = {
 };
 
 function MiniReportActionContextMenu(props) {
+    const styles = useThemeStyles();
+
     return (
         <View
-            style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}
+            style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(styles, props.displayAsGroup)}
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.isVisible}}
         >
             <BaseReportActionContextMenu
diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
index 6dd56471af07..7184944d5902 100644
--- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
+++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
@@ -36,22 +36,20 @@ function ListBoundaryLoader({type, isLoadingOlderReportActions, isLoadingInitial
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
-    // we use two different loading components for header and footer to reduce the jumping effect when you scrolling to the newer reports
+    // We use two different loading components for the header and footer
+    // to reduce the jumping effect when the user is scrolling to the newer report actions
     if (type === CONST.LIST_COMPONENTS.FOOTER) {
         if (isLoadingOlderReportActions) {
             return <ReportActionsSkeletonView />;
         }
 
-        // Make sure the oldest report action loaded is not the first. This is so we do not show the
-        // skeleton view above the created action in a newly generated optimistic chat or one with not
+        // Make sure the report chat is not loaded till the beginning. This is so we do not show the
+        // skeleton view above the "created" action in a newly generated optimistic chat or one with not
         // that many comments.
-        if (isLoadingInitialReportActions && lastReportActionName !== CONST.REPORT.ACTIONS.TYPE.CREATED) {
-            return (
-                <ReportActionsSkeletonView
-                    shouldAnimate={!isOffline}
-                    possibleVisibleContentItems={3}
-                />
-            );
+        // Also, if we are offline and the report is not yet loaded till the beginning, we assume there are more actions to load,
+        // therefore show the skeleton view, even though the actions are not loading.
+        if (lastReportActionName !== CONST.REPORT.ACTIONS.TYPE.CREATED && (isLoadingInitialReportActions || isOffline)) {
+            return <ReportActionsSkeletonView possibleVisibleContentItems={3} />;
         }
     }
     if (type === CONST.LIST_COMPONENTS.HEADER && isLoadingNewerReportActions) {
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index c07b36d42949..59367395119c 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -7,6 +7,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import reactionPropTypes from './reactionPropTypes';
 
@@ -27,12 +28,13 @@ const defaultProps = {
 
 function HeaderReactionList(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     return (
         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.emojiReactionListHeader, !props.isSmallScreenWidth && styles.pt4]}>
             <View style={styles.flexRow}>
-                <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(false, props.hasUserReacted)]}>
+                <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(theme, false, props.hasUserReacted)]}>
                     <Text style={[styles.miniQuickEmojiReactionText, StyleUtils.getEmojiReactionBubbleTextStyle(true)]}>{props.emojiCodes.join('')}</Text>
-                    <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.emojiCount}</Text>
+                    <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(theme, props.hasUserReacted)]}>{props.emojiCount}</Text>
                 </View>
                 <Text style={styles.reactionListHeaderText}>{`:${EmojiUtils.getLocalizedEmojiName(props.emojiName, props.preferredLocale)}:`}</Text>
             </View>
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index 02f041ce092e..ea48f9cc931e 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -10,7 +10,6 @@ import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -40,11 +39,6 @@ import {defaultProps, propTypes} from './composerWithSuggestionsProps';
 
 const {RNTextInputReset} = NativeModules;
 
-// For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
-// and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
-// so we need to ensure that it is only updated after focus.
-const isMobileSafari = Browser.isMobileSafari();
-
 /**
  * Broadcast that the user is typing. Debounced to limit how often we publish client events.
  * @param {String} reportID
@@ -132,10 +126,7 @@ function ComposerWithSuggestions({
     const valueRef = useRef(value);
     valueRef.current = value;
 
-    const [selection, setSelection] = useState(() => ({
-        start: isMobileSafari && !shouldAutoFocus ? 0 : value.length,
-        end: isMobileSafari && !shouldAutoFocus ? 0 : value.length,
-    }));
+    const [selection, setSelection] = useState(() => ({start: 0, end: 0}));
 
     const [composerHeight, setComposerHeight] = useState(0);
 
@@ -498,7 +489,7 @@ function ComposerWithSuggestions({
         // We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
         // We avoid doing this on native platforms since the software keyboard popping
         // open creates a jarring and broken UX.
-        if (!(willBlurTextInputOnTapOutside && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
+        if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
             return;
         }
 
@@ -507,7 +498,8 @@ function ComposerWithSuggestions({
             return;
         }
         focus(true);
-    }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);
+    }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef, shouldAutoFocus]);
+
     useEffect(() => {
         // Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit
         updateMultilineInputRange(textInputRef.current, shouldAutoFocus);
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index f7b18b554b5a..2632324a963f 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -11,8 +11,7 @@ import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton';
 import ExceededCommentLength from '@components/ExceededCommentLength';
 import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {withNetwork} from '@components/OnyxProvider';
-import participantPropTypes from '@components/participantPropTypes';
+import {usePersonalDetails, withNetwork} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -49,9 +48,6 @@ const propTypes = {
     /** Array of report actions for this report */
     reportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)),
 
-    /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
-
     /** The report currently being looked at */
     report: reportPropTypes,
 
@@ -84,7 +80,6 @@ const propTypes = {
 const defaultProps = {
     report: {},
     blockedFromConcierge: {},
-    personalDetails: {},
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
     isComposerFullSize: false,
     pendingAction: null,
@@ -108,7 +103,6 @@ function ReportActionCompose({
     network,
     onSubmit,
     pendingAction,
-    personalDetails,
     report,
     reportID,
     reportActions,
@@ -121,7 +115,7 @@ function ReportActionCompose({
     const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
     const animatedRef = useAnimatedRef();
     const actionButtonRef = useRef(null);
-
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     /**
      * Updates the Highlight state of the composer
      */
@@ -472,9 +466,6 @@ export default compose(
         blockedFromConcierge: {
             key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         shouldShowComposeInput: {
             key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
         },
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index ae07503b6e9c..2b073d7fee34 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -34,6 +34,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import usePrevious from '@hooks/usePrevious';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import focusTextInputAfterAnimation from '@libs/focusTextInputAfterAnimation';
 import Navigation from '@libs/Navigation/Navigation';
@@ -134,6 +135,8 @@ const defaultProps = {
 };
 
 function ReportActionItem(props) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(props.action.reportActionID));
     const [isHidden, setIsHidden] = useState(false);
@@ -142,15 +145,13 @@ function ReportActionItem(props) {
     const {updateHiddenAttachments} = useContext(ReportAttachmentsContext);
     const textInputRef = useRef();
     const popoverAnchorRef = useRef();
-    const styles = useThemeStyles();
-    const theme = useTheme();
     const downloadedPreviews = useRef([]);
     const prevDraftMessage = usePrevious(props.draftMessage);
     const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action);
     const originalReport = props.report.reportID === originalReportID ? props.report : ReportUtils.getReport(originalReportID);
     const isReportActionLinked = props.linkedReportActionID === props.action.reportActionID;
 
-    const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}), [isReportActionLinked, theme.highlightBG]);
+    const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}), [isReportActionLinked, theme]);
     const originalMessage = lodashGet(props.action, 'originalMessage', {});
 
     // IOUDetails only exists when we are sending money
@@ -415,6 +416,11 @@ function ReportActionItem(props) {
                     </>
                 </ReportActionItemBasicMessage>
             );
+        } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTDEQUEUED) {
+            const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [props.report.ownerAccountID, 'displayName']);
+            const amount = CurrencyUtils.convertToDisplayString(props.report.total, props.report.currency);
+
+            children = <ReportActionItemBasicMessage message={props.translate('iou.canceledRequest', {submitterDisplayName, amount})} />;
         } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
             children = <ReportActionItemBasicMessage message={ReportUtils.getModifiedExpenseMessage(props.action)} />;
         } else {
@@ -672,7 +678,7 @@ function ReportActionItem(props) {
         >
             <Hoverable
                 shouldHandleScroll
-                disabled={Boolean(props.draftMessage)}
+                isDisabled={Boolean(props.draftMessage)}
             >
                 {(hovered) => (
                     <View style={highlightedBackgroundColorIfNeeded}>
@@ -687,7 +693,7 @@ function ReportActionItem(props) {
                             draftMessage={props.draftMessage}
                             isChronosReport={ReportUtils.chatIncludesChronos(originalReport)}
                         />
-                        <View style={StyleUtils.getReportActionItemStyle(hovered || isWhisper || isContextMenuActive || props.draftMessage)}>
+                        <View style={StyleUtils.getReportActionItemStyle(theme, styles, hovered || isWhisper || isContextMenuActive || props.draftMessage)}>
                             <OfflineWithFeedback
                                 onClose={() => ReportActions.clearReportActionErrors(props.report.reportID, props.action)}
                                 pendingAction={props.draftMessage ? null : props.action.pendingAction}
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index e1230d7219db..317fa86f23f3 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -71,7 +71,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    personalDetails: {},
     onScroll: () => {},
     mostRecentIOUReportActionID: '',
     isLoadingInitialReportActions: false,
@@ -338,8 +337,9 @@ function ReportActionsList({
                 const nextMessage = sortedReportActions[index + 1];
                 const isCurrentMessageUnread = isMessageUnread(reportAction, lastReadTimeRef.current);
                 shouldDisplay = isCurrentMessageUnread && (!nextMessage || !isMessageUnread(nextMessage, lastReadTimeRef.current));
-                if (!messageManuallyMarkedUnread) {
-                    shouldDisplay = shouldDisplay && reportAction.actorAccountID !== Report.getCurrentUserAccountID();
+                if (shouldDisplay && !messageManuallyMarkedUnread) {
+                    const isWithinVisibleThreshold = scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD ? reportAction.created < userActiveSince.current : true;
+                    shouldDisplay = reportAction.actorAccountID !== Report.getCurrentUserAccountID() && isWithinVisibleThreshold;
                 }
                 if (shouldDisplay) {
                     cacheUnreadMarkers.set(report.reportID, reportAction.reportActionID);
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index d1fe21d8cf4e..46734b223150 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -101,6 +101,7 @@ function SplitBillDetailsPage(props) {
         merchant: splitMerchant,
         created: splitCreated,
         category: splitCategory,
+        tag: splitTag,
     } = isEditingSplitBill && props.draftTransaction ? ReportUtils.getTransactionDetails(props.draftTransaction) : ReportUtils.getTransactionDetails(props.transaction);
 
     const onConfirm = useCallback(
@@ -131,6 +132,7 @@ function SplitBillDetailsPage(props) {
                             iouCreated={splitCreated}
                             iouMerchant={splitMerchant}
                             iouCategory={splitCategory}
+                            iouTag={splitTag}
                             iouType={CONST.IOU.TYPE.SPLIT}
                             isReadOnly={!isEditingSplitBill}
                             shouldShowSmartScanFields
@@ -144,6 +146,7 @@ function SplitBillDetailsPage(props) {
                             transactionID={props.transaction.transactionID}
                             onConfirm={onConfirm}
                             isPolicyExpenseChat={ReportUtils.isPolicyExpenseChat(props.report)}
+                            policyID={ReportUtils.isPolicyExpenseChat(props.report) && props.report.policyID}
                         />
                     )}
                 </View>
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index a69abeb94089..44995e6ec3d8 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -7,6 +7,7 @@ import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MoneyRequestConfirmationList from '@components/MoneyRequestConfirmationList';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize from '@components/withLocalize';
@@ -20,7 +21,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
@@ -47,15 +47,11 @@ const propTypes = {
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: iouPropTypes,
 
-    /** Personal details of all users */
-    personalDetails: personalDetailsPropType,
-
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     report: {},
-    personalDetails: {},
     iou: iouDefaultProps,
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -70,16 +66,15 @@ function MoneyRequestConfirmPage(props) {
     const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType, props.selectedTab);
     const isScanRequest = MoneyRequestUtils.isScanRequest(props.selectedTab);
     const [receiptFile, setReceiptFile] = useState();
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
+
     const participants = useMemo(
         () =>
-            _.chain(props.iou.participants)
-                .map((participant) => {
-                    const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
-                    return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, props.personalDetails);
-                })
-                .filter((participant) => !!participant.login || !!participant.text)
-                .value(),
-        [props.iou.participants, props.personalDetails],
+            _.map(props.iou.participants, (participant) => {
+                const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
+                return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
+            }),
+        [props.iou.participants, personalDetails],
     );
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(props.report)), [props.report]);
     const isManualRequestDM = props.selectedTab === CONST.TAB.MANUAL && iouType === CONST.IOU.TYPE.REQUEST;
@@ -239,6 +234,7 @@ function MoneyRequestConfirmPage(props) {
                     trimmedComment,
                     props.iou.currency,
                     props.iou.category,
+                    props.iou.tag,
                     reportID,
                 );
                 return;
@@ -254,6 +250,7 @@ function MoneyRequestConfirmPage(props) {
                     trimmedComment,
                     props.iou.currency,
                     props.iou.category,
+                    props.iou.tag,
                 );
                 return;
             }
@@ -277,6 +274,7 @@ function MoneyRequestConfirmPage(props) {
             props.currentUserPersonalDetails.accountID,
             props.iou.currency,
             props.iou.category,
+            props.iou.tag,
             props.iou.receiptPath,
             props.iou.receiptFilename,
             isDistanceRequest,
@@ -419,9 +417,6 @@ export default compose(
                 return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
             },
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         selectedTab: {
             key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
         },
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 61950e14337f..8ca1f96b3796 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -381,7 +381,7 @@ function InitialSettingsPage(props) {
             title={translate('common.settings')}
             headerContent={headerContent}
             headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentCenter]}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.ROOT]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ROOT].backgroundColor}
         >
             <View style={styles.w100}>
                 {getMenuItems}
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 4dbc5fda9198..b010c3790056 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -46,7 +46,7 @@ function PreferencesPage(props) {
         <IllustratedHeaderPageLayout
             title={translate('common.preferences')}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES].backgroundColor}
             illustration={LottieAnimations.PreferencesDJ}
         >
             <View style={styles.mb6}>
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 6e0663a41a72..a17dd8f2c17e 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -1,7 +1,7 @@
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useCallback} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -111,6 +111,14 @@ function ContactMethodsPage(props) {
         );
     });
 
+    const onNewContactMethodButtonPress = useCallback(() => {
+        if (navigateBackTo === ROUTES.SETTINGS_PROFILE) {
+            Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.route);
+            return;
+        }
+        Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
+    }, [navigateBackTo]);
+
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
@@ -136,7 +144,7 @@ function ContactMethodsPage(props) {
                     <Button
                         success
                         text={props.translate('contacts.newContactMethod')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
+                        onPress={onNewContactMethodButtonPress}
                         pressOnEnter
                     />
                 </FixedFooter>
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 718c414bac87..70d137d2a5fd 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -1,7 +1,7 @@
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useRef} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -61,6 +61,8 @@ function NewContactMethodPage(props) {
     const styles = useThemeStyles();
     const loginInputRef = useRef(null);
 
+    const navigateBackTo = lodashGet(props.route, 'params.backTo', ROUTES.SETTINGS_PROFILE);
+
     const validate = React.useCallback(
         (values) => {
             const phoneLogin = LoginUtils.getPhoneLogin(values.phoneOrEmail);
@@ -89,6 +91,14 @@ function NewContactMethodPage(props) {
         [],
     );
 
+    const onBackButtonPress = useCallback(() => {
+        if (navigateBackTo === ROUTES.SETTINGS_PROFILE) {
+            Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.route);
+            return;
+        }
+        Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(navigateBackTo));
+    }, [navigateBackTo]);
+
     return (
         <ScreenWrapper
             onEntryTransitionEnd={() => {
@@ -104,7 +114,7 @@ function NewContactMethodPage(props) {
         >
             <HeaderWithBackButton
                 title={props.translate('contacts.newContactMethod')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.route)}
+                onBackButtonPress={onBackButtonPress}
             />
             <FormProvider
                 formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 3bb999261d44..f0aea2301383 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -209,7 +209,7 @@ function BaseValidateCodeForm(props) {
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
                     >
-                        <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
+                        <Text style={[StyleUtils.getDisabledLinkStyles(theme, styles, shouldDisableResendValidateCode)]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
                     </PressableWithFeedback>
                     {props.hasMagicCodeBeenSent && (
                         <DotIndicatorMessage
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index 285a3072f859..6850684cfda2 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -91,7 +91,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
                 />
             }
             headerContainerStyles={[styles.staticHeaderImage]}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.STATUS]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.STATUS].backgroundColor}
             footer={footerComponent}
         >
             <View style={[styles.mh5, styles.mb5]}>
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index 7916043c7e20..f8b6568733c7 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -4,7 +4,7 @@ import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import RoomNameInput from '@components/RoomNameInput';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -42,13 +42,8 @@ const defaultProps = {
     policy: {},
 };
 
-function RoomNamePage(props) {
+function RoomNamePage({policy, report, reports, translate}) {
     const styles = useThemeStyles();
-    const policy = props.policy;
-    const report = props.report;
-    const reports = props.reports;
-    const translate = props.translate;
-
     const roomNameInputRef = useRef(null);
     const isFocused = useIsFocused();
 
@@ -91,7 +86,7 @@ function RoomNamePage(props) {
                     title={translate('newRoomPage.roomName')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID))}
                 />
-                <Form
+                <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.ROOM_NAME_FORM}
                     onSubmit={(values) => Report.updatePolicyRoomNameAndNavigate(report, values.roomName)}
@@ -101,13 +96,14 @@ function RoomNamePage(props) {
                 >
                     <View style={styles.mb4}>
                         <RoomNameInput
-                            ref={(ref) => (roomNameInputRef.current = ref)}
+                            ref={roomNameInputRef}
                             inputID="roomName"
                             defaultValue={report.reportName}
                             isFocused={isFocused}
+                            roomName={report.reportName.slice(1)}
                         />
                     </View>
-                </Form>
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index bf1edd7b806d..95a0efa2fc39 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -69,7 +69,7 @@ function SecuritySettingsPage(props) {
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             shouldShowBackButton
             illustration={LottieAnimations.Safe}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.SECURITY]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
index 3534ef5c064c..e45b4ad67f4e 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -134,7 +134,7 @@ function ActivatePhysicalCardPage({
         <IllustratedHeaderPageLayout
             title={translate('activateCardPage.activateCard')}
             onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES].backgroundColor}
             illustration={LottieAnimations.Magician}
             scrollViewContainerStyles={[styles.mnh100]}
             childrenContainerStyles={[styles.flex1]}
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 79a7c5480954..d956e10e1384 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -22,6 +22,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
@@ -207,6 +208,7 @@ function PaymentMethodList({
     style,
 }) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
@@ -264,14 +266,14 @@ function PaymentMethodList({
             return {
                 ...paymentMethod,
                 onPress: (e) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID),
-                iconFill: isMethodActive ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
-                wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
+                iconFill: isMethodActive ? StyleUtils.getIconFillColor(theme, CONST.BUTTON_STATES.PRESSED) : null,
+                wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(theme, CONST.BUTTON_STATES.PRESSED)] : null,
                 disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
             };
         });
 
         return combinedPaymentMethods;
-    }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles]);
+    }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles, theme]);
 
     /**
      * Render placeholder when there are no payments methods
diff --git a/src/pages/settings/Wallet/WalletEmptyState.js b/src/pages/settings/Wallet/WalletEmptyState.js
index 8eacd322d695..f2235dfafef2 100644
--- a/src/pages/settings/Wallet/WalletEmptyState.js
+++ b/src/pages/settings/Wallet/WalletEmptyState.js
@@ -36,7 +36,7 @@ function WalletEmptyState({onAddPaymentMethod}) {
     const {translate} = useLocalize();
     return (
         <IllustratedHeaderPageLayout
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.WALLET]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WALLET].backgroundColor}
             illustration={LottieAnimations.FastMoney}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             title={translate('common.wallet')}
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index e48446360605..e7ac249582a9 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
@@ -14,7 +15,6 @@ import GoogleSignIn from '@components/SignInButtons/GoogleSignIn';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withNavigationFocus from '@components/withNavigationFocus';
 import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
@@ -75,9 +75,6 @@ const propTypes = {
 
     isVisible: PropTypes.bool.isRequired,
 
-    /** Whether navigation is focused */
-    isFocused: PropTypes.bool.isRequired,
-
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -101,6 +98,7 @@ function LoginForm(props) {
     const [formError, setFormError] = useState(false);
     const prevIsVisible = usePrevious(props.isVisible);
     const firstBlurred = useRef(false);
+    const isFocused = useIsFocused();
 
     const {translate} = props;
 
@@ -204,10 +202,11 @@ function LoginForm(props) {
     useEffect(() => {
         // Just call clearAccountMessages on the login page (home route), because when the user is in the transition route and not yet authenticated,
         // this component will also be mounted, resetting account.isLoading will cause the app to briefly display the session expiration page.
-        if (props.isFocused && props.isVisible) {
+
+        if (isFocused && props.isVisible) {
             Session.clearAccountMessages();
         }
-        if (!canFocusInputOnScreenFocus() || !input.current || !props.isVisible) {
+        if (!canFocusInputOnScreenFocus() || !input.current || !props.isVisible || !isFocused) {
             return;
         }
         let focusTimeout;
@@ -346,7 +345,6 @@ const LoginFormWithRef = forwardRef((props, ref) => (
 LoginFormWithRef.displayName = 'LoginFormWithRef';
 
 export default compose(
-    withNavigationFocus,
     withOnyx({
         account: {key: ONYXKEYS.ACCOUNT},
         credentials: {key: ONYXKEYS.CREDENTIALS},
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index b0ced580b30e..24b16177e6ff 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import _ from 'underscore';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
+import CustomStatusBar from '@components/CustomStatusBar';
 import useLocalize from '@hooks/useLocalize';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import getPlatform from '@libs/getPlatform';
@@ -279,10 +281,13 @@ function SignInPage(props) {
     return (
         <ThemeProvider theme={CONST.THEME.DARK}>
             <ThemeStylesProvider>
-                <SignInPageInner
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...props}
-                />
+                <ColorSchemeWrapper>
+                    <CustomStatusBar isNested />
+                    <SignInPageInner
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...props}
+                    />
+                </ColorSchemeWrapper>
             </ThemeStylesProvider>
         </ThemeProvider>
     );
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index f5651e45aeb8..e409836005c4 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -383,7 +383,7 @@ function BaseValidateCodeForm(props) {
                                 role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                 accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
                             >
-                                <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>
+                                <Text style={[StyleUtils.getDisabledLinkStyles(theme, styles, shouldDisableResendValidateCode)]}>
                                     {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')}
                                 </Text>
                             </PressableWithFeedback>
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index 818ae4440842..aa4f86d40268 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -100,6 +100,7 @@ function NewTaskDetailsPage(props) {
                         accessibilityLabel={props.translate('task.title')}
                         value={taskTitle}
                         onValueChange={(value) => setTaskTitle(value)}
+                        autoCorrect={false}
                     />
                 </View>
                 <View style={styles.mb5}>
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 0dd2b65480a0..c61990b1c347 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -7,6 +7,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
@@ -16,7 +17,6 @@ import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
@@ -28,9 +28,6 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** All of the personal details for everyone */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
@@ -65,7 +62,6 @@ const propTypes = {
 
 const defaultProps = {
     betas: [],
-    personalDetails: {},
     reports: {},
     session: {},
     route: {},
@@ -81,13 +77,14 @@ function TaskAssigneeSelectorModal(props) {
     const [filteredUserToInvite, setFilteredUserToInvite] = useState(null);
     const [filteredCurrentUserOption, setFilteredCurrentUserOption] = useState(null);
     const [isLoading, setIsLoading] = React.useState(true);
+    const allPersonalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     const {inputCallbackRef} = useAutoFocusInput();
 
     const updateOptions = useCallback(() => {
         const {recentReports, personalDetails, userToInvite, currentUserOption} = OptionsListUtils.getFilteredOptions(
             props.reports,
-            props.personalDetails,
+            allPersonalDetails,
             props.betas,
             searchValue.trim(),
             [],
@@ -112,7 +109,7 @@ function TaskAssigneeSelectorModal(props) {
         if (isLoading) {
             setIsLoading(false);
         }
-    }, [props, searchValue, isLoading]);
+    }, [props, searchValue, allPersonalDetails, isLoading]);
 
     useEffect(() => {
         const debouncedSearch = _.debounce(updateOptions, 200);
@@ -253,9 +250,6 @@ export default compose(
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         betas: {
             key: ONYXKEYS.BETAS,
         },
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index df78539bf665..2abc6c3d13fa 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -4,7 +4,8 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RoomNameInput from '@components/RoomNameInput';
@@ -181,7 +182,7 @@ function WorkspaceNewRoomPage(props) {
                         // This is because when wrapping whole screen the screen was freezing when changing Tabs.
                         keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                     >
-                        <Form
+                        <FormProvider
                             formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
                             submitButtonText={translate('newRoomPage.createRoom')}
                             style={[styles.mh5, styles.flexGrow1]}
@@ -199,7 +200,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={styles.mb5}>
-                                <TextInput
+                                <InputWrapper
+                                    InputComponent={TextInput}
                                     inputID="welcomeMessage"
                                     label={translate('welcomeMessagePage.welcomeMessageOptional')}
                                     accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
@@ -212,7 +214,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={[styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="policyID"
                                     label={translate('workspace.common.workspace')}
                                     items={workspaceOptions}
@@ -221,7 +224,8 @@ function WorkspaceNewRoomPage(props) {
                             </View>
                             {isPolicyAdmin && (
                                 <View style={styles.mhn5}>
-                                    <ValuePicker
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
                                         inputID="writeCapability"
                                         label={translate('writeCapabilityPage.label')}
                                         items={writeCapabilityOptions}
@@ -231,7 +235,8 @@ function WorkspaceNewRoomPage(props) {
                                 </View>
                             )}
                             <View style={[styles.mb1, styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="visibility"
                                     label={translate('newRoomPage.visibility')}
                                     items={visibilityOptions}
@@ -240,7 +245,7 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                        </Form>
+                        </FormProvider>
                         {isSmallScreenWidth && <OfflineIndicator />}
                     </KeyboardAvoidingView>
                 )}
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index 2749ccb52b96..cf258b462285 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -183,7 +183,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
 
     return (
         <IllustratedHeaderPageLayout
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.WORKSPACES]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WORKSPACES].backgroundColor}
             illustration={LottieAnimations.WorkspacePlanet}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             title={translate('common.workspaces')}
diff --git a/src/stories/Datepicker.stories.js b/src/stories/Datepicker.stories.js
deleted file mode 100644
index 65bbec9d7f39..000000000000
--- a/src/stories/Datepicker.stories.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import DatePicker from '@components/DatePicker';
-
-/**
- * We use the Component Story Format for writing stories. Follow the docs here:
- *
- * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
- */
-export default {
-    title: 'Components/Datepicker',
-    component: DatePicker,
-    argTypes: {
-        onChange: {action: 'date changed'},
-    },
-    args: {
-        defaultValue: '',
-        label: 'Select Date',
-        placeholder: 'Date Placeholder',
-        errorText: '',
-        hasError: false,
-    },
-};
-
-function Template(args) {
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <DatePicker {...args} />;
-}
-
-// Arguments can be passed to the component by binding
-// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
-const PreFilled = Template.bind({});
-Default.args = {
-    label: 'Select Date',
-};
-
-PreFilled.args = {
-    label: 'Select Date',
-    defaultValue: new Date(2018, 7, 21),
-};
-
-export {Default, PreFilled};
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index e09ec755b68d..6b73ce6d38fb 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import Picker from '@components/Picker';
@@ -30,7 +29,6 @@ const story = {
         CheckboxWithLabel,
         Picker,
         StatePicker,
-        DatePicker,
     },
 };
 
@@ -69,12 +67,6 @@ function Template(args) {
                 containerStyles={[styles.mt4]}
                 hint="No PO box"
             />
-            <InputWrapper
-                InputComponent={DatePicker}
-                label="Date of birth"
-                inputID="dob"
-                containerStyles={[styles.mt4]}
-            />
             <View>
                 <InputWrapper
                     InputComponent={Picker}
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index aada3a1f70e4..9a131dad48cd 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -8,8 +8,8 @@ import CONST from '@src/CONST';
 import {Transaction} from '@src/types/onyx';
 import colors from './colors';
 import fontFamily from './fontFamily';
-import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeStyles} from './styles';
+import {ThemeColors} from './themes/types';
 import cursor from './utilities/cursor';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
@@ -46,7 +46,6 @@ type AvatarSizeValue = ValueOf<
     >
 >;
 type ButtonSizeValue = ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
-type EmptyAvatarSizeName = ValueOf<Pick<typeof CONST.AVATAR_SIZE, 'SMALL' | 'MEDIUM' | 'LARGE'>>;
 type ButtonStateName = ValueOf<typeof CONST.BUTTON_STATES>;
 type AvatarSize = {width: number};
 
@@ -74,6 +73,7 @@ type AvatarBorderStyleParams = {
     isPressed: boolean;
     isInReportAction: boolean;
     shouldUseCardBackground: boolean;
+    theme: ThemeColors;
 };
 
 type GetBaseAutoCompleteSuggestionContainerStyleParams = {
@@ -152,12 +152,6 @@ const avatarSizes: Record<AvatarSizeName, AvatarSizeValue> = {
     [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.avatarSizeSmallNormal,
 };
 
-const emptyAvatarStyles: Record<EmptyAvatarSizeName, ViewStyle> = {
-    [CONST.AVATAR_SIZE.SMALL]: styles.emptyAvatarSmall,
-    [CONST.AVATAR_SIZE.MEDIUM]: styles.emptyAvatarMedium,
-    [CONST.AVATAR_SIZE.LARGE]: styles.emptyAvatarLarge,
-};
-
 const avatarFontSizes: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.DEFAULT]: variables.fontSizeNormal,
     [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.fontSizeExtraSmall,
@@ -192,17 +186,10 @@ function getAvatarSize(size: AvatarSizeName): number {
 /**
  * Return the height of magic code input container
  */
-function getHeightOfMagicCodeInput(): ViewStyle {
+function getHeightOfMagicCodeInput(styles: ThemeStyles): ViewStyle {
     return {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth};
 }
 
-/**
- * Return the style from an empty avatar size constant
- */
-function getEmptyAvatarStyle(size: EmptyAvatarSizeName): ViewStyle | undefined {
-    return emptyAvatarStyles[size];
-}
-
 /**
  * Return the width style from an avatar size constant
  */
@@ -216,13 +203,13 @@ function getAvatarWidthStyle(size: AvatarSizeName): ViewStyle {
 /**
  * Return the style from an avatar size constant
  */
-function getAvatarStyle(size: AvatarSizeName): AvatarStyle {
+function getAvatarStyle(theme: ThemeColors, size: AvatarSizeName): AvatarStyle {
     const avatarSize = getAvatarSize(size);
     return {
         height: avatarSize,
         width: avatarSize,
         borderRadius: avatarSize,
-        backgroundColor: themeColors.offline,
+        backgroundColor: theme.offline,
     };
 }
 
@@ -320,7 +307,7 @@ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle {
     return {marginBottom: (insets?.bottom ?? 0) * variables.safeInsertPercentage};
 }
 
-function getZoomCursorStyle(isZoomed: boolean, isDragging: boolean): ViewStyle {
+function getZoomCursorStyle(styles: ThemeStyles, isZoomed: boolean, isDragging: boolean): ViewStyle {
     if (!isZoomed) {
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -401,7 +388,7 @@ function getWidthStyle(width: number): ViewStyle {
 /**
  * Returns auto grow height text input style
  */
-function getAutoGrowHeightInputStyle(textInputHeight: number, maxHeight: number): ViewStyle {
+function getAutoGrowHeightInputStyle(styles: ThemeStyles, textInputHeight: number, maxHeight: number): ViewStyle {
     if (textInputHeight > maxHeight) {
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -507,7 +494,7 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu
 /**
  * Generate a style for the background color of the Badge
  */
-function getBadgeColorStyle(isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false): ViewStyle {
+function getBadgeColorStyle(styles: ThemeStyles, isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false): ViewStyle {
     if (isSuccess) {
         if (isAdHoc) {
             // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
@@ -532,12 +519,12 @@ function getBadgeColorStyle(isSuccess: boolean, isError: boolean, isPressed = fa
  * @param buttonState - One of {'default', 'hovered', 'pressed'}
  * @param isMenuItem - whether this button is apart of a list
  */
-function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle {
+function getButtonBackgroundColorStyle(theme: ThemeColors, buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle {
     switch (buttonState) {
         case CONST.BUTTON_STATES.PRESSED:
-            return {backgroundColor: themeColors.buttonPressedBG};
+            return {backgroundColor: theme.buttonPressedBG};
         case CONST.BUTTON_STATES.ACTIVE:
-            return isMenuItem ? {backgroundColor: themeColors.border} : {backgroundColor: themeColors.buttonHoveredBG};
+            return isMenuItem ? {backgroundColor: theme.border} : {backgroundColor: theme.buttonHoveredBG};
         case CONST.BUTTON_STATES.DISABLED:
         case CONST.BUTTON_STATES.DEFAULT:
         default:
@@ -551,20 +538,20 @@ function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTT
  * @param buttonState - One of {'default', 'hovered', 'pressed'}
  * @param isMenuIcon - whether this icon is apart of a list
  */
-function getIconFillColor(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuIcon = false): string {
+function getIconFillColor(theme: ThemeColors, buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuIcon = false): string {
     switch (buttonState) {
         case CONST.BUTTON_STATES.ACTIVE:
         case CONST.BUTTON_STATES.PRESSED:
-            return themeColors.iconHovered;
+            return theme.iconHovered;
         case CONST.BUTTON_STATES.COMPLETE:
-            return themeColors.iconSuccessFill;
+            return theme.iconSuccessFill;
         case CONST.BUTTON_STATES.DEFAULT:
         case CONST.BUTTON_STATES.DISABLED:
         default:
             if (isMenuIcon) {
-                return themeColors.iconMenu;
+                return theme.iconMenu;
             }
-            return themeColors.icon;
+            return theme.icon;
     }
 }
 
@@ -661,16 +648,16 @@ function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle {
 /**
  * Generate the styles for the ReportActionItem wrapper view.
  */
-function getReportActionItemStyle(isHovered = false): ViewStyle {
+function getReportActionItemStyle(theme: ThemeColors, styles: ThemeStyles, isHovered = false): ViewStyle {
     // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
         display: 'flex',
         justifyContent: 'space-between',
         backgroundColor: isHovered
-            ? themeColors.hoverComponentBG
+            ? theme.hoverComponentBG
             : // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android
-              themeColors.transparent,
+              theme.transparent,
         opacity: 1,
         ...styles.cursorInitial,
     };
@@ -679,7 +666,7 @@ function getReportActionItemStyle(isHovered = false): ViewStyle {
 /**
  * Generate the wrapper styles for the mini ReportActionContextMenu.
  */
-function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped: boolean): ViewStyle {
+function getMiniReportActionContextMenuWrapperStyle(styles: ThemeStyles, isReportActionItemGrouped: boolean): ViewStyle {
     // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
@@ -761,11 +748,11 @@ function extractValuesFromRGB(color: string): number[] | null {
  * @param bgColor - theme background color
  * @returns The theme color as an RGB value.
  */
-function getThemeBackgroundColor(bgColor: string = themeColors.appBG): string {
+function getThemeBackgroundColor(theme: ThemeColors, bgColor: string): string {
     const backdropOpacity = variables.overlayOpacity;
 
     const [backgroundRed, backgroundGreen, backgroundBlue] = extractValuesFromRGB(bgColor) ?? hexadecimalToRGBArray(bgColor) ?? [];
-    const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.overlay) ?? [];
+    const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(theme.overlay) ?? [];
     const normalizedBackdropRGB = convertRGBToUnitValues(backdropRed, backdropGreen, backdropBlue);
     const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue);
     const [red, green, blue] = convertRGBAToRGB(normalizedBackdropRGB, normalizedBackgroundRGB, backdropOpacity);
@@ -870,15 +857,15 @@ function fade(fadeAnimation: Animated.Value): Animated.WithAnimatedValue<ViewSty
     };
 }
 
-function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false}: AvatarBorderStyleParams): ViewStyle {
-    let borderColor = shouldUseCardBackground ? themeColors.cardBG : themeColors.appBG;
+function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false, theme}: AvatarBorderStyleParams): ViewStyle {
+    let borderColor = shouldUseCardBackground ? theme.cardBG : theme.appBG;
 
     if (isHovered) {
-        borderColor = isInReportAction ? themeColors.highlightBG : themeColors.border;
+        borderColor = isInReportAction ? theme.highlightBG : theme.border;
     }
 
     if (isPressed) {
-        borderColor = isInReportAction ? themeColors.highlightBG : themeColors.buttonPressedBG;
+        borderColor = isInReportAction ? theme.highlightBG : theme.buttonPressedBG;
     }
 
     return {borderColor};
@@ -907,9 +894,9 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv
     };
 }
 
-function getErrorPageContainerStyle(safeAreaPaddingBottom = 0): ViewStyle {
+function getErrorPageContainerStyle(theme: ThemeColors, safeAreaPaddingBottom = 0): ViewStyle {
     return {
-        backgroundColor: themeColors.componentBG,
+        backgroundColor: theme.componentBG,
         paddingBottom: 40 + safeAreaPaddingBottom,
     };
 }
@@ -992,13 +979,13 @@ function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean, isMoneyRepo
 /**
  * Gets styles for AutoCompleteSuggestion row
  */
-function getAutoCompleteSuggestionItemStyle(highlightedEmojiIndex: number, rowHeight: number, isHovered: boolean, currentEmojiIndex: number): ViewStyle[] {
+function getAutoCompleteSuggestionItemStyle(theme: ThemeColors, highlightedEmojiIndex: number, rowHeight: number, isHovered: boolean, currentEmojiIndex: number): ViewStyle[] {
     let backgroundColor;
 
     if (currentEmojiIndex === highlightedEmojiIndex) {
-        backgroundColor = themeColors.activeComponentBG;
+        backgroundColor = theme.activeComponentBG;
     } else if (isHovered) {
-        backgroundColor = themeColors.hoverComponentBG;
+        backgroundColor = theme.hoverComponentBG;
     }
 
     return [
@@ -1048,19 +1035,19 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle
 /**
  * Select the correct color for text.
  */
-function getColoredBackgroundStyle(isColored: boolean): StyleProp<TextStyle> {
-    return {backgroundColor: isColored ? themeColors.link : undefined};
+function getColoredBackgroundStyle(theme: ThemeColors, isColored: boolean): StyleProp<TextStyle> {
+    return {backgroundColor: isColored ? theme.link : undefined};
 }
 
-function getEmojiReactionBubbleStyle(isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle {
-    let backgroundColor = themeColors.border;
+function getEmojiReactionBubbleStyle(theme: ThemeColors, isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle {
+    let backgroundColor = theme.border;
 
     if (isHovered) {
-        backgroundColor = themeColors.buttonHoveredBG;
+        backgroundColor = theme.buttonHoveredBG;
     }
 
     if (hasUserReacted) {
-        backgroundColor = themeColors.reactionActiveBackground;
+        backgroundColor = theme.reactionActiveBackground;
     }
 
     if (isContextMenu) {
@@ -1092,12 +1079,12 @@ function getEmojiReactionBubbleTextStyle(isContextMenu = false): TextStyle {
     };
 }
 
-function getEmojiReactionCounterTextStyle(hasUserReacted: boolean): TextStyle {
+function getEmojiReactionCounterTextStyle(theme: ThemeColors, hasUserReacted: boolean): TextStyle {
     if (hasUserReacted) {
-        return {color: themeColors.reactionActiveText};
+        return {color: theme.reactionActiveText};
     }
 
-    return {color: themeColors.text};
+    return {color: theme.text};
 }
 
 /**
@@ -1120,7 +1107,7 @@ function displayIfTrue(condition: boolean): ViewStyle {
     return {display: condition ? 'flex' : 'none'};
 }
 
-function getGoogleListViewStyle(shouldDisplayBorder: boolean): ViewStyle {
+function getGoogleListViewStyle(styles: ThemeStyles, shouldDisplayBorder: boolean): ViewStyle {
     if (shouldDisplayBorder) {
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -1160,8 +1147,8 @@ function getEmojiPickerListHeight(hasAdditionalSpace: boolean, windowHeight: num
 /**
  * Returns style object for the user mention component based on whether the mention is ours or not.
  */
-function getMentionStyle(isOurMention: boolean): ViewStyle {
-    const backgroundColor = isOurMention ? themeColors.ourMentionBG : themeColors.mentionBG;
+function getMentionStyle(theme: ThemeColors, isOurMention: boolean): ViewStyle {
+    const backgroundColor = isOurMention ? theme.ourMentionBG : theme.mentionBG;
     return {
         backgroundColor,
         borderRadius: variables.componentBorderRadiusSmall,
@@ -1172,8 +1159,8 @@ function getMentionStyle(isOurMention: boolean): ViewStyle {
 /**
  * Returns text color for the user mention text based on whether the mention is ours or not.
  */
-function getMentionTextColor(isOurMention: boolean): string {
-    return isOurMention ? themeColors.ourMentionText : themeColors.mentionText;
+function getMentionTextColor(theme: ThemeColors, isOurMention: boolean): string {
+    return isOurMention ? theme.ourMentionText : theme.mentionText;
 }
 
 /**
@@ -1225,9 +1212,9 @@ function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu: boolean): Vie
 /**
  * Returns link styles based on whether the link is disabled or not
  */
-function getDisabledLinkStyles(isDisabled = false): ViewStyle {
+function getDisabledLinkStyles(theme: ThemeColors, styles: ThemeStyles, isDisabled = false): ViewStyle {
     const disabledLinkStyles = {
-        color: themeColors.textSupporting,
+        color: theme.textSupporting,
         ...cursor.cursorDisabled,
     };
 
@@ -1262,12 +1249,12 @@ function getCheckboxPressableStyle(borderRadius = 6): ViewStyle {
 /**
  * Returns the checkbox container style
  */
-function getCheckboxContainerStyle(size: number, borderRadius = 4): ViewStyle {
+function getCheckboxContainerStyle(theme: ThemeColors, size: number, borderRadius = 4): ViewStyle {
     return {
-        backgroundColor: themeColors.componentBG,
+        backgroundColor: theme.componentBG,
         height: size,
         width: size,
-        borderColor: themeColors.borderLighter,
+        borderColor: theme.borderLighter,
         borderWidth: 2,
         justifyContent: 'center',
         alignItems: 'center',
@@ -1353,7 +1340,7 @@ function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth
 /**
  * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
  */
-function getContainerStyles(size: string, isInReportAction = false): ViewStyle[] {
+function getContainerStyles(styles: ThemeStyles, size: string, isInReportAction = false): ViewStyle[] {
     let containerStyles: ViewStyle[];
 
     switch (size) {
@@ -1386,7 +1373,7 @@ function getTransparentColor(color: string) {
 /**
  * Get the styles of the text next to dot indicators
  */
-function getDotIndicatorTextStyles(isErrorText = true): TextStyle {
+function getDotIndicatorTextStyles(styles: ThemeStyles, isErrorText = true): TextStyle {
     return isErrorText ? {...styles.offlineFeedback.text, color: styles.formError.color} : {...styles.offlineFeedback.text};
 }
 
@@ -1441,7 +1428,6 @@ export {
     getEmojiReactionBubbleStyle,
     getEmojiReactionBubbleTextStyle,
     getEmojiReactionCounterTextStyle,
-    getEmptyAvatarStyle,
     getErrorPageContainerStyle,
     getFontFamilyMonospace,
     getCodeFontSize,
diff --git a/src/styles/addOutlineWidth/index.ts b/src/styles/addOutlineWidth/index.ts
index 5d99e369b79a..7063d610cf11 100644
--- a/src/styles/addOutlineWidth/index.ts
+++ b/src/styles/addOutlineWidth/index.ts
@@ -2,17 +2,16 @@
  * Web and desktop platforms support the "addOutlineWidth" property, so it
  * can be added to the object
  */
-import themeDefault from '@styles/themes/default';
 import AddOutlineWidth from './types';
 
 /**
  * Adds the addOutlineWidth property to an object to be used when styling
  */
-const addOutlineWidth: AddOutlineWidth = (obj, val, hasError = false) => ({
+const addOutlineWidth: AddOutlineWidth = (obj, theme, val, hasError = false) => ({
     ...obj,
     outlineWidth: val,
     outlineStyle: val ? 'auto' : 'none',
-    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? themeDefault.danger : themeDefault.borderFocus}` : 'none',
+    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? theme?.danger : theme?.borderFocus}` : 'none',
 });
 
 export default addOutlineWidth;
diff --git a/src/styles/addOutlineWidth/types.ts b/src/styles/addOutlineWidth/types.ts
index 7a3a86506959..35b6bc97a631 100644
--- a/src/styles/addOutlineWidth/types.ts
+++ b/src/styles/addOutlineWidth/types.ts
@@ -1,5 +1,6 @@
 import {TextStyle} from 'react-native';
+import {ThemeColors} from '@styles/themes/types';
 
-type AddOutlineWidth = (obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
+type AddOutlineWidth = (obj: TextStyle, theme?: ThemeColors, val?: number, hasError?: boolean) => TextStyle;
 
 export default AddOutlineWidth;
diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/getContextMenuItemStyles/types.ts
index 5393a630b79a..6a101fdae413 100644
--- a/src/styles/getContextMenuItemStyles/types.ts
+++ b/src/styles/getContextMenuItemStyles/types.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 
-type GetContextMenuItemStyle = (themeStyles: typeof styles, windowWidth?: number) => ViewStyle[];
+type GetContextMenuItemStyle = (themeStyles: ThemeStyles, windowWidth?: number) => ViewStyle[];
 
 export default GetContextMenuItemStyle;
diff --git a/src/styles/getModalStyles.ts b/src/styles/getModalStyles.ts
index eb87cc005f8b..1c28de3bb5e2 100644
--- a/src/styles/getModalStyles.ts
+++ b/src/styles/getModalStyles.ts
@@ -2,11 +2,11 @@ import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
-import styles from './styles';
+import {ThemeStyles} from './styles';
 import {ThemeColors} from './themes/types';
 import variables from './variables';
 
-function getCenteredModalStyles(windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
+function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
 
     return {
@@ -40,6 +40,7 @@ export default function getModalStyles(
     type: ModalType | undefined,
     windowDimensions: WindowDimensions,
     theme: ThemeColors,
+    styles: ThemeStyles,
     popoverAnchorPosition: ViewStyle = {},
     innerContainerStyle: ViewStyle = {},
     outerStyle: ViewStyle = {},
@@ -102,7 +103,7 @@ export default function getModalStyles(
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth),
+                ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth),
             };
 
             // Allow this modal to be dismissed with a swipe down or swipe right
@@ -129,7 +130,7 @@ export default function getModalStyles(
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth, true),
+                ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth, true),
             };
             swipeDirection = undefined;
             animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts
index e26f8de94919..781d0cc11549 100644
--- a/src/styles/getReportActionContextMenuStyles.ts
+++ b/src/styles/getReportActionContextMenuStyles.ts
@@ -1,5 +1,5 @@
 import {ViewStyle} from 'react-native';
-import styles from './styles';
+import {ThemeStyles} from './styles';
 import {ThemeColors} from './themes/types';
 import variables from './variables';
 
@@ -7,7 +7,7 @@ const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
     backgroundColor: theme.componentBG,
 });
 
-const getMiniWrapperStyle = (theme: ThemeColors): ViewStyle[] => [
+const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle[] => [
     styles.flexRow,
     getDefaultWrapperStyle(theme),
     {
@@ -27,9 +27,9 @@ const getMiniWrapperStyle = (theme: ThemeColors): ViewStyle[] => [
  * @param isSmallScreenWidth
  * @param theme
  */
-function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] {
+function getReportActionContextMenuStyles(styles: ThemeStyles, isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] {
     if (isMini) {
-        return getMiniWrapperStyle(theme);
+        return getMiniWrapperStyle(theme, styles);
     }
 
     return [
diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts
index 5c90027e10fd..c47659c4f80c 100644
--- a/src/styles/getTooltipStyles.ts
+++ b/src/styles/getTooltipStyles.ts
@@ -1,8 +1,8 @@
 import {TextStyle, View, ViewStyle} from 'react-native';
 import fontFamily from './fontFamily';
 import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
-import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeStyles} from './styles';
+import {ThemeColors} from './themes/types';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
 import variables from './variables';
@@ -101,6 +101,23 @@ type TooltipStyles = {
     pointerStyle: ViewStyle;
 };
 
+type TooltipParams = {
+    tooltip: View | HTMLDivElement;
+    currentSize: number;
+    windowWidth: number;
+    xOffset: number;
+    yOffset: number;
+    tooltipTargetWidth: number;
+    tooltipTargetHeight: number;
+    maxWidth: number;
+    tooltipContentWidth: number;
+    tooltipWrapperHeight: number;
+    theme: ThemeColors;
+    themeStyles: ThemeStyles;
+    manualShiftHorizontal?: number;
+    manualShiftVertical?: number;
+};
+
 /**
  * Generate styles for the tooltip component.
  *
@@ -122,20 +139,22 @@ type TooltipStyles = {
  * @param [manualShiftVertical] - Any additional amount to manually shift the tooltip up or down.
  *                                       A positive value shifts it down, and a negative value shifts it up.
  */
-export default function getTooltipStyles(
-    tooltip: View | HTMLDivElement,
-    currentSize: number,
-    windowWidth: number,
-    xOffset: number,
-    yOffset: number,
-    tooltipTargetWidth: number,
-    tooltipTargetHeight: number,
-    maxWidth: number,
-    tooltipContentWidth: number,
-    tooltipWrapperHeight: number,
+export default function getTooltipStyles({
+    tooltip,
+    currentSize,
+    windowWidth,
+    xOffset,
+    yOffset,
+    tooltipTargetWidth,
+    tooltipTargetHeight,
+    maxWidth,
+    tooltipContentWidth,
+    tooltipWrapperHeight,
+    theme,
+    themeStyles,
     manualShiftHorizontal = 0,
     manualShiftVertical = 0,
-): TooltipStyles {
+}: TooltipParams): TooltipStyles {
     const tooltipVerticalPadding = spacing.pv1;
 
     // We calculate tooltip width based on the tooltip's content width
@@ -226,7 +245,7 @@ export default function getTooltipStyles(
         //      at the center of the hovered component.
         pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - POINTER_WIDTH / 2);
 
-        pointerAdditionalStyle = shouldShowBelow ? styles.flipUpsideDown : {};
+        pointerAdditionalStyle = shouldShowBelow ? themeStyles.flipUpsideDown : {};
     }
 
     return {
@@ -238,7 +257,7 @@ export default function getTooltipStyles(
         },
         rootWrapperStyle: {
             ...positioning.pFixed,
-            backgroundColor: themeColors.heading,
+            backgroundColor: theme.heading,
             borderRadius: variables.componentBorderRadiusSmall,
             ...tooltipVerticalPadding,
             ...spacing.ph2,
@@ -249,11 +268,11 @@ export default function getTooltipStyles(
             left: rootWrapperLeft,
 
             // We are adding this to prevent the tooltip text from being selected and copied on CTRL + A.
-            ...styles.userSelectNone,
-            ...styles.pointerEventsNone,
+            ...themeStyles.userSelectNone,
+            ...themeStyles.pointerEventsNone,
         },
         textStyle: {
-            color: themeColors.textReversed,
+            color: theme.textReversed,
             fontFamily: fontFamily.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             overflow: 'hidden',
@@ -268,14 +287,14 @@ export default function getTooltipStyles(
         pointerStyle: {
             width: 0,
             height: 0,
-            backgroundColor: themeColors.transparent,
+            backgroundColor: theme.transparent,
             borderStyle: 'solid',
             borderLeftWidth: POINTER_WIDTH / 2,
             borderRightWidth: POINTER_WIDTH / 2,
             borderTopWidth: POINTER_HEIGHT,
-            borderLeftColor: themeColors.transparent,
-            borderRightColor: themeColors.transparent,
-            borderTopColor: themeColors.heading,
+            borderLeftColor: theme.transparent,
+            borderRightColor: theme.transparent,
+            borderTopColor: theme.heading,
             ...pointerAdditionalStyle,
         },
     };
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts
index a9f9358521b8..68eb91975f8e 100644
--- a/src/styles/optionRowStyles/types.ts
+++ b/src/styles/optionRowStyles/types.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 
-type CompactContentContainerStyles = (themeStyles: typeof styles) => ViewStyle;
+type CompactContentContainerStyles = (themeStyles: ThemeStyles) => ViewStyle;
 
 export default CompactContentContainerStyles;
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 45736295d4be..983f1ba82caa 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -40,6 +40,9 @@ import wordBreak from './utilities/wordBreak';
 import writingDirection from './utilities/writingDirection';
 import variables from './variables';
 
+type ColorScheme = (typeof CONST.COLOR_SCHEME)[keyof typeof CONST.COLOR_SCHEME];
+type StatusBarStyle = (typeof CONST.STATUS_BAR_STYLE)[keyof typeof CONST.STATUS_BAR_STYLE];
+
 type AnchorPosition = {
     horizontal: number;
     vertical: number;
@@ -1013,7 +1016,7 @@ const styles = (theme: ThemeColors) =>
             flexDirection: 'row',
         },
 
-        textInputDesktop: addOutlineWidth({}, 0),
+        textInputDesktop: addOutlineWidth({}, theme, 0),
 
         textInputIconContainer: {
             paddingHorizontal: 11,
@@ -1130,7 +1133,7 @@ const styles = (theme: ThemeColors) =>
             color: theme.icon,
         },
 
-        noOutline: addOutlineWidth({}, 0),
+        noOutline: addOutlineWidth({}, theme, 0),
 
         textLabelSupporting: {
             fontFamily: fontFamily.EXP_NEUE,
@@ -1796,6 +1799,7 @@ const styles = (theme: ThemeColors) =>
                 alignSelf: 'center',
                 verticalAlign: 'middle',
             },
+            theme,
             0,
         ),
 
@@ -2622,6 +2626,7 @@ const styles = (theme: ThemeColors) =>
                 padding: 0,
                 lineHeight: undefined,
             },
+            theme,
             0,
         ),
 
@@ -3984,12 +3989,14 @@ const styles = (theme: ThemeColors) =>
         singleOptionSelectorCircle: {
             borderColor: theme.icon,
         },
+
+        colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}),
     } satisfies Styles);
 
+type ThemeStyles = ReturnType<typeof styles>;
+
 const stylesGenerator = styles;
 const defaultStyles = styles(defaultTheme);
 
-type ThemeStyle = typeof defaultStyles;
-
 export default defaultStyles;
-export {stylesGenerator, type Styles, type ThemeStyle};
+export {stylesGenerator, type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 8dd76a4776a4..519e818054e0 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -1,4 +1,5 @@
 import colors from '@styles/colors';
+import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
 import {ThemeColors} from './types';
 
@@ -89,16 +90,47 @@ const darkTheme = {
     // Note that it needs to be a screen name, not a route url.
     // The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
     // The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
-    PAGE_BACKGROUND_COLORS: {
-        [SCREENS.HOME]: colors.darkHighlightBackground,
-        [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
-        [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
-        [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-        [SCREENS.SETTINGS.WALLET]: colors.darkAppBackground,
-        [SCREENS.SETTINGS.SECURITY]: colors.ice500,
-        [SCREENS.SETTINGS.STATUS]: colors.green700,
-        [SCREENS.SETTINGS.ROOT]: colors.darkHighlightBackground,
+    PAGE_THEMES: {
+        [SCREENS.HOME]: {
+            backgroundColor: colors.darkHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.REPORT]: {
+            backgroundColor: colors.darkAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SAVE_THE_WORLD.ROOT]: {
+            backgroundColor: colors.tangerine800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.PREFERENCES]: {
+            backgroundColor: colors.blue500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WORKSPACES]: {
+            backgroundColor: colors.pink800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WALLET]: {
+            backgroundColor: colors.darkAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.SECURITY]: {
+            backgroundColor: colors.ice500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.SETTINGS.STATUS]: {
+            backgroundColor: colors.green700,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.ROOT]: {
+            backgroundColor: colors.darkHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
     },
+
+    statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+    colorScheme: CONST.COLOR_SCHEME.DARK,
 } satisfies ThemeColors;
 
 export default darkTheme;
diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts
index cbaadcf196ba..2f6eda2f70dc 100644
--- a/src/styles/themes/light.ts
+++ b/src/styles/themes/light.ts
@@ -1,4 +1,5 @@
 import colors from '@styles/colors';
+import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
 import {ThemeColors} from './types';
 
@@ -89,16 +90,47 @@ const lightTheme = {
     // Note that it needs to be a screen name, not a route url.
     // The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
     // The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
-    PAGE_BACKGROUND_COLORS: {
-        [SCREENS.HOME]: colors.lightHighlightBackground,
-        [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
-        [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
-        [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-        [SCREENS.SETTINGS.WALLET]: colors.darkAppBackground,
-        [SCREENS.SETTINGS.SECURITY]: colors.ice500,
-        [SCREENS.SETTINGS.STATUS]: colors.green700,
-        [SCREENS.SETTINGS.ROOT]: colors.lightHighlightBackground,
+    PAGE_THEMES: {
+        [SCREENS.HOME]: {
+            backgroundColor: colors.lightHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.REPORT]: {
+            backgroundColor: colors.lightAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.SAVE_THE_WORLD.ROOT]: {
+            backgroundColor: colors.tangerine800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.PREFERENCES]: {
+            backgroundColor: colors.blue500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WORKSPACES]: {
+            backgroundColor: colors.pink800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WALLET]: {
+            backgroundColor: colors.darkAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.SECURITY]: {
+            backgroundColor: colors.ice500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.SETTINGS.STATUS]: {
+            backgroundColor: colors.green700,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.ROOT]: {
+            backgroundColor: colors.lightHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
     },
+
+    statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+    colorScheme: CONST.COLOR_SCHEME.LIGHT,
 } satisfies ThemeColors;
 
 export default lightTheme;
diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts
index d6d1dcea0833..c674b6057d0f 100644
--- a/src/styles/themes/types.ts
+++ b/src/styles/themes/types.ts
@@ -1,3 +1,4 @@
+import {type ColorScheme, type StatusBarStyle} from '@styles/styles';
 import CONST from '@src/CONST';
 
 type Color = string;
@@ -88,7 +89,13 @@ type ThemeColors = {
     mapAttributionText: Color;
     white: Color;
 
-    PAGE_BACKGROUND_COLORS: Record<string, Color>;
+    PAGE_THEMES: Record<string, {backgroundColor: Color; statusBarStyle: StatusBarStyle}>;
+
+    // Status bar and scroll bars need to adapt their theme based on the active user theme for good contrast
+    // Therefore, we need to define specific themes for these elements
+    // e.g. the StatusBar displays either "light-content" or "dark-content" based on the theme
+    statusBarStyle: StatusBarStyle;
+    colorScheme: ColorScheme;
 };
 
 export {type ThemePreference, type ThemePreferenceWithoutSystem, type ThemeColors, type Color};
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.js b/src/styles/utilities/overscrollBehaviorContain/index.js
deleted file mode 100644
index 1377e4b47d28..000000000000
--- a/src/styles/utilities/overscrollBehaviorContain/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-    overscrollBehavior: 'contain',
-};
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.native.js b/src/styles/utilities/overscrollBehaviorContain/index.native.js
deleted file mode 100644
index ff8b4c56321a..000000000000
--- a/src/styles/utilities/overscrollBehaviorContain/index.native.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.native.ts b/src/styles/utilities/overscrollBehaviorContain/index.native.ts
new file mode 100644
index 000000000000..fd6b2f496912
--- /dev/null
+++ b/src/styles/utilities/overscrollBehaviorContain/index.native.ts
@@ -0,0 +1,5 @@
+import OverscrollBehaviorStyles from './types';
+
+const overscrollBehaviorContain: OverscrollBehaviorStyles = {};
+
+export default overscrollBehaviorContain;
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.ts b/src/styles/utilities/overscrollBehaviorContain/index.ts
new file mode 100644
index 000000000000..18cbe810d336
--- /dev/null
+++ b/src/styles/utilities/overscrollBehaviorContain/index.ts
@@ -0,0 +1,7 @@
+import OverscrollBehaviorStyles from './types';
+
+const overscrollBehaviorContain: OverscrollBehaviorStyles = {
+    overscrollBehavior: 'contain',
+};
+
+export default overscrollBehaviorContain;
diff --git a/src/styles/utilities/overscrollBehaviorContain/types.ts b/src/styles/utilities/overscrollBehaviorContain/types.ts
new file mode 100644
index 000000000000..1e806eb60642
--- /dev/null
+++ b/src/styles/utilities/overscrollBehaviorContain/types.ts
@@ -0,0 +1,5 @@
+import {ViewStyle} from 'react-native';
+
+type OverscrollBehaviorStyles = Pick<ViewStyle, 'overscrollBehavior'>;
+
+export default OverscrollBehaviorStyles;
diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts
index 79484e7886af..601e82cde836 100644
--- a/src/types/onyx/AccountData.ts
+++ b/src/types/onyx/AccountData.ts
@@ -1,10 +1,11 @@
+import {BankName} from './Bank';
 import * as OnyxCommon from './OnyxCommon';
 
 type AdditionalData = {
     isP2PDebitCard?: boolean;
     beneficialOwners?: string[];
     currency?: string;
-    bankName?: string;
+    bankName?: BankName;
     fieldsType?: string;
     country?: string;
 };
diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts
new file mode 100644
index 000000000000..b6312e039079
--- /dev/null
+++ b/src/types/onyx/Bank.ts
@@ -0,0 +1,18 @@
+import {CSSProperties} from 'react';
+import {ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+
+type BankIcon = {
+    icon: React.FC<SvgProps>;
+    iconSize?: number;
+    iconHeight?: number;
+    iconWidth?: number;
+    iconStyles?: Array<ViewStyle | CSSProperties>;
+};
+
+type BankName = ValueOf<typeof CONST.BANK_NAMES>;
+type BankNameKey = keyof typeof CONST.BANK_NAMES;
+
+export type {BankIcon, BankName, BankNameKey};
diff --git a/src/types/onyx/Fund.ts b/src/types/onyx/Fund.ts
index 4e6cbc695a8d..82c15c5089d7 100644
--- a/src/types/onyx/Fund.ts
+++ b/src/types/onyx/Fund.ts
@@ -1,4 +1,5 @@
 import CONST from '@src/CONST';
+import {BankName} from './Bank';
 import * as OnyxCommon from './OnyxCommon';
 
 type AdditionalData = {
@@ -21,7 +22,7 @@ type AccountData = {
     created?: string;
     currency?: string;
     fundID?: number;
-    bank?: string;
+    bank?: BankName;
 };
 
 type Fund = {
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index 0dc532ebeded..f76fbd5ffd7d 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -197,6 +197,11 @@ type OriginalMessageReimbursementQueued = {
     originalMessage: unknown;
 };
 
+type OriginalMessageReimbursementDequeued = {
+    actionName: typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTDEQUEUED;
+    originalMessage: unknown;
+};
+
 type OriginalMessageMoved = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.MOVED;
     originalMessage: {
@@ -222,6 +227,7 @@ type OriginalMessage =
     | OriginalMessagePolicyTask
     | OriginalMessageModifiedExpense
     | OriginalMessageReimbursementQueued
+    | OriginalMessageReimbursementDequeued
     | OriginalMessageMoved;
 
 export default OriginalMessage;
diff --git a/src/types/onyx/Report.ts b/src/types/onyx/Report.ts
index 2b84f3946bc3..b49599913543 100644
--- a/src/types/onyx/Report.ts
+++ b/src/types/onyx/Report.ts
@@ -19,6 +19,9 @@ type Report = {
     /** Whether the user is not an admin of policyExpenseChat chat */
     isOwnPolicyExpenseChat?: boolean;
 
+    /** Whether the report is policyExpenseChat */
+    isPolicyExpenseChat?: boolean;
+
     /** Indicates if the report is pinned to the LHN or not */
     isPinned?: boolean;
 
@@ -118,6 +121,9 @@ type Report = {
     /** Whether the report is waiting on a bank account */
     isWaitingOnBankAccount?: boolean;
 
+    /** Whether the report is cancelled */
+    isCancelledIOU?: boolean;
+
     /** Whether the last message was deleted */
     isLastMessageDeletedParentAction?: boolean;
 
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index 891a0ffcb7b8..64e1eb0b7c88 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -1,5 +1,5 @@
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
+import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import * as OnyxCommon from './OnyxCommon';
 import OriginalMessage, {Decision, Reaction} from './OriginalMessage';
@@ -85,7 +85,7 @@ type ReportActionBase = {
     /** accountIDs of the people to which the whisper was sent to (if any). Returns empty array if it is not a whisper */
     whisperedToAccountIDs?: number[];
 
-    avatar?: string | React.FC<SvgProps>;
+    avatar?: AvatarSource;
 
     automatic?: boolean;
 
@@ -145,4 +145,4 @@ type ReportAction = ReportActionBase & OriginalMessage;
 type ReportActions = Record<string, ReportAction>;
 
 export default ReportAction;
-export type {ReportActions, Message};
+export type {Message, ReportActions};
diff --git a/tests/perf-test/ReportActionsUtils.perf-test.js b/tests/perf-test/ReportActionsUtils.perf-test.js
deleted file mode 100644
index 8e9f5570d5d8..000000000000
--- a/tests/perf-test/ReportActionsUtils.perf-test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import Onyx from 'react-native-onyx';
-import {measureFunction} from 'reassure';
-import _ from 'underscore';
-import CONST from '../../src/CONST';
-import * as ReportActionsUtils from '../../src/libs/ReportActionsUtils';
-import ONYXKEYS from '../../src/ONYXKEYS';
-import * as LHNTestUtils from '../utils/LHNTestUtils';
-import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
-
-beforeAll(() =>
-    Onyx.init({
-        keys: ONYXKEYS,
-        safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        registerStorageEventListener: () => {},
-    }),
-);
-
-// Clear out Onyx after each test so that each test starts with a clean slate
-afterEach(() => {
-    Onyx.clear();
-});
-
-const getMockedReportActionsMap = (reportsLength = 10, actionsPerReportLength = 100) => {
-    const mockReportActions = Array.from({length: actionsPerReportLength}, (_reportAction, i) => {
-        const reportActionKey = i + 1;
-        const email = `actor+${reportActionKey}@mail.com`;
-        const reportAction = LHNTestUtils.getFakeReportAction(email);
-
-        return {[reportActionKey]: reportAction};
-    });
-
-    const reportKeysMap = Array.from({length: reportsLength}, (_report, i) => {
-        const key = i + 1;
-
-        return {[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${key}`]: _.assign({}, ...mockReportActions)};
-    });
-
-    return _.assign({}, ...reportKeysMap);
-};
-
-const mockedReportActionsMap = getMockedReportActionsMap(2, 10000);
-
-/**
- * This function will be executed 20 times and the average time will be used on the comparison.
- * It will fail based on the CI configuration around Reassure:
- * @see /.github/workflows/reassurePerformanceTests.yml
- *
- * Max deviation on the duration is set to 20% at the time of writing.
- *
- * More on the measureFunction API:
- * @see https://callstack.github.io/reassure/docs/api#measurefunction-function
- */
-test('getLastVisibleAction on 10k reportActions', async () => {
-    const reportId = '1';
-
-    await Onyx.multiSet({
-        ...mockedReportActionsMap,
-    });
-    await waitForBatchedUpdates();
-    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId), {runs: 20});
-});
-
-test('getLastVisibleAction on 10k reportActions with actionsToMerge', async () => {
-    const reportId = '1';
-    const parentReportActionId = '1';
-    const fakeParentAction = mockedReportActionsMap[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportId}`][parentReportActionId];
-    const actionsToMerge = {
-        [parentReportActionId]: {
-            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
-            previousMessage: fakeParentAction.message,
-            message: [
-                {
-                    translationKey: '',
-                    type: 'COMMENT',
-                    html: '',
-                    text: '',
-                    isEdited: true,
-                    isDeletedParentAction: true,
-                },
-            ],
-            errors: null,
-            linkMetaData: [],
-        },
-    };
-
-    await Onyx.multiSet({
-        ...mockedReportActionsMap,
-    });
-    await waitForBatchedUpdates();
-    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId, actionsToMerge), {runs: 20});
-});
diff --git a/tests/perf-test/ReportActionsUtils.perf-test.ts b/tests/perf-test/ReportActionsUtils.perf-test.ts
new file mode 100644
index 000000000000..a52e75c8b75f
--- /dev/null
+++ b/tests/perf-test/ReportActionsUtils.perf-test.ts
@@ -0,0 +1,167 @@
+import Onyx from 'react-native-onyx';
+import {measureFunction} from 'reassure';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
+import createCollection from '../utils/collections/createCollection';
+import createRandomReportAction from '../utils/collections/reportActions';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+beforeAll(() =>
+    Onyx.init({
+        keys: ONYXKEYS,
+        safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+    }),
+);
+
+// Clear out Onyx after each test so that each test starts with a clean slate
+afterEach(() => {
+    Onyx.clear();
+});
+
+const getMockedReportActionsMap = (reportsLength = 10, actionsPerReportLength = 100) => {
+    const mockReportActions = Array.from({length: actionsPerReportLength}, (v, i) => {
+        const reportActionKey = i + 1;
+        const reportAction = createRandomReportAction(reportActionKey);
+
+        return {[reportActionKey]: reportAction};
+    });
+
+    const reportKeysMap = Array.from({length: reportsLength}, (v, i) => {
+        const key = i + 1;
+
+        return {[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${key}`]: Object.assign({}, ...mockReportActions)};
+    });
+
+    return Object.assign({}, ...reportKeysMap) as Partial<ReportAction>;
+};
+
+const mockedReportActionsMap = getMockedReportActionsMap(2, 10000);
+
+const reportActions = createCollection<ReportAction>(
+    (item) => `${item.reportActionID}`,
+    (index) => createRandomReportAction(index),
+);
+
+const reportId = '1';
+
+const runs = CONST.PERFORMANCE_TESTS.RUNS;
+
+/**
+ * This function will be executed 20 times and the average time will be used on the comparison.
+ * It will fail based on the CI configuration around Reassure:
+ * @see /.github/workflows/reassurePerformanceTests.yml
+ *
+ * Max deviation on the duration is set to 20% at the time of writing.
+ *
+ * More on the measureFunction API:
+ * @see https://callstack.github.io/reassure/docs/api#measurefunction-function
+ */
+test('getLastVisibleAction on 10k reportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId), {runs});
+});
+
+test('getLastVisibleAction on 10k reportActions with actionsToMerge', async () => {
+    const parentReportActionId = '1';
+    const fakeParentAction = reportActions[parentReportActionId];
+    const actionsToMerge = {
+        [parentReportActionId]: {
+            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+            previousMessage: fakeParentAction.message,
+            message: [
+                {
+                    translationKey: '',
+                    type: 'COMMENT',
+                    html: '',
+                    text: '',
+                    isEdited: true,
+                    isDeletedParentAction: true,
+                },
+            ],
+            errors: null,
+            linkMetaData: [],
+        },
+    } as unknown as ReportActions;
+
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId, actionsToMerge), {runs});
+});
+
+test('getMostRecentIOURequestActionID on 10k ReportActions', async () => {
+    const reportActionsArray = ReportActionsUtils.getSortedReportActionsForDisplay(reportActions);
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getMostRecentIOURequestActionID(reportActionsArray), {runs});
+});
+
+test('getLastVisibleMessage on 10k ReportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleMessage(reportId), {runs});
+});
+
+test('getLastVisibleMessage on 10k ReportActions with actionsToMerge', async () => {
+    const parentReportActionId = '1';
+    const fakeParentAction = reportActions[parentReportActionId];
+    const actionsToMerge = {
+        [parentReportActionId]: {
+            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+            previousMessage: fakeParentAction.message,
+            message: [
+                {
+                    translationKey: '',
+                    type: 'COMMENT',
+                    html: '',
+                    text: '',
+                    isEdited: true,
+                    isDeletedParentAction: true,
+                },
+            ],
+            errors: null,
+            linkMetaData: [],
+        },
+    } as unknown as ReportActions;
+
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleMessage(reportId, actionsToMerge), {runs});
+});
+
+test('getSortedReportActionsForDisplay on 10k ReportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions), {runs});
+});
+
+test('getLastClosedReportAction on 10k ReportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastClosedReportAction(reportActions), {runs});
+});
+
+test('getMostRecentReportActionLastModified', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getMostRecentReportActionLastModified(), {runs});
+});
diff --git a/tests/perf-test/ReportScreen.perf-test.js b/tests/perf-test/ReportScreen.perf-test.js
index 20af5603d177..b901888bba0f 100644
--- a/tests/perf-test/ReportScreen.perf-test.js
+++ b/tests/perf-test/ReportScreen.perf-test.js
@@ -155,7 +155,7 @@ test('should render ReportScreen with composer interactions', () => {
     };
 
     const report = LHNTestUtils.getFakeReport();
-    const reportActions = ReportTestUtils.getMockedReportsMap(1000);
+    const reportActions = ReportTestUtils.getMockedReportActionsMap(1000);
     const mockRoute = {params: {reportID: '1'}};
 
     return waitForBatchedUpdates()
@@ -198,7 +198,7 @@ test('should press of the report item', () => {
     };
 
     const report = LHNTestUtils.getFakeReport();
-    const reportActions = ReportTestUtils.getMockedReportsMap(1000);
+    const reportActions = ReportTestUtils.getMockedReportActionsMap(1000);
     const mockRoute = {params: {reportID: '2'}};
 
     return waitForBatchedUpdates()
diff --git a/tests/perf-test/SidebarUtils.perf-test.ts b/tests/perf-test/SidebarUtils.perf-test.ts
new file mode 100644
index 000000000000..7f9957232cfb
--- /dev/null
+++ b/tests/perf-test/SidebarUtils.perf-test.ts
@@ -0,0 +1,97 @@
+import Onyx, {OnyxCollection} from 'react-native-onyx';
+import {measureFunction} from 'reassure';
+import SidebarUtils from '@libs/SidebarUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {PersonalDetails} from '@src/types/onyx';
+import Policy from '@src/types/onyx/Policy';
+import Report from '@src/types/onyx/Report';
+import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
+import createCollection from '../utils/collections/createCollection';
+import createPersonalDetails from '../utils/collections/personalDetails';
+import createRandomPolicy from '../utils/collections/policies';
+import createRandomReportAction from '../utils/collections/reportActions';
+import createRandomReport from '../utils/collections/reports';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+beforeAll(() =>
+    Onyx.init({
+        keys: ONYXKEYS,
+        safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+    }),
+);
+
+// Clear out Onyx after each test so that each test starts with a clean slate
+afterEach(() => {
+    Onyx.clear();
+});
+
+const getMockedReports = (length = 500) =>
+    createCollection<Report>(
+        (item) => `${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`,
+        (index) => createRandomReport(index),
+        length,
+    );
+
+const reportActions = createCollection<ReportAction>(
+    (item) => `${item.reportActionID}`,
+    (index) => createRandomReportAction(index),
+);
+
+const personalDetails = createCollection<PersonalDetails>(
+    (item) => item.accountID,
+    (index) => createPersonalDetails(index),
+);
+
+const mockedResponseMap = getMockedReports(5000) as Record<`${typeof ONYXKEYS.COLLECTION.REPORT}`, Report>;
+const runs = CONST.PERFORMANCE_TESTS.RUNS;
+
+test('getOptionData on 5k reports', async () => {
+    const report = createRandomReport(1);
+    const preferredLocale = 'en';
+    const policy = createRandomPolicy(1);
+    const parentReportAction = createRandomReportAction(1);
+
+    Onyx.multiSet({
+        ...mockedResponseMap,
+    });
+
+    await waitForBatchedUpdates();
+    await measureFunction(() => SidebarUtils.getOptionData(report, reportActions, personalDetails, preferredLocale, policy, parentReportAction), {runs});
+});
+
+test('getOrderedReportIDs on 5k reports', async () => {
+    const currentReportId = '1';
+    const allReports = getMockedReports();
+    const betas = [CONST.BETAS.DEFAULT_ROOMS, CONST.BETAS.POLICY_ROOMS];
+
+    const policies = createCollection<Policy>(
+        (item) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`,
+        (index) => createRandomPolicy(index),
+    );
+
+    const allReportActions = Object.fromEntries(
+        Object.keys(reportActions).map((key) => [
+            key,
+            [
+                {
+                    errors: reportActions[key].errors ?? [],
+                    message: [
+                        {
+                            moderationDecision: {
+                                decision: reportActions[key].message?.[0]?.moderationDecision?.decision,
+                            },
+                        },
+                    ],
+                },
+            ],
+        ]),
+    ) as unknown as OnyxCollection<ReportActions>;
+
+    Onyx.multiSet({
+        ...mockedResponseMap,
+    });
+
+    await waitForBatchedUpdates();
+    await measureFunction(() => SidebarUtils.getOrderedReportIDs(currentReportId, allReports, betas, policies, CONST.PRIORITY_MODE.DEFAULT, allReportActions), {runs});
+});
diff --git a/tests/unit/CalendarPickerTest.js b/tests/unit/CalendarPickerTest.js
index 92092acc4cd7..4e564b970832 100644
--- a/tests/unit/CalendarPickerTest.js
+++ b/tests/unit/CalendarPickerTest.js
@@ -1,5 +1,5 @@
 import {fireEvent, render, within} from '@testing-library/react-native';
-import {addYears, subYears} from 'date-fns';
+import {addMonths, addYears, subYears} from 'date-fns';
 import CalendarPicker from '../../src/components/NewDatePicker/CalendarPicker';
 import CONST from '../../src/CONST';
 import DateUtils from '../../src/libs/DateUtils';
@@ -64,7 +64,7 @@ describe('CalendarPicker', () => {
 
         fireEvent.press(getByTestId('next-month-arrow'));
 
-        const nextMonth = new Date().getMonth() + 1;
+        const nextMonth = addMonths(new Date(), 1).getMonth();
         expect(getByText(monthNames[nextMonth])).toBeTruthy();
     });
 
diff --git a/tests/utils/ReportTestUtils.js b/tests/utils/ReportTestUtils.js
index 48e5ebfaa56d..910f2200876b 100644
--- a/tests/utils/ReportTestUtils.js
+++ b/tests/utils/ReportTestUtils.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 
-const actionNames = ['ADDCOMMENT', 'IOU', 'REPORTPREVIEW'];
+const actionNames = ['ADDCOMMENT', 'IOU', 'REPORTPREVIEW', 'CLOSED'];
 
 const getFakeReportAction = (index, actionName) => ({
     actionName,
@@ -47,7 +47,7 @@ const getFakeReportAction = (index, actionName) => ({
 
 const getMockedSortedReportActions = (length = 100) => Array.from({length}, (__, i) => getFakeReportAction(i));
 
-const getMockedReportsMap = (length = 100) => {
+const getMockedReportActionsMap = (length = 100) => {
     const mockReports = Array.from({length}, (__, i) => {
         const reportID = i + 1;
         const actionName = i === 0 ? 'CREATED' : actionNames[i % actionNames.length];
@@ -58,4 +58,4 @@ const getMockedReportsMap = (length = 100) => {
     return _.assign({}, ...mockReports);
 };
 
-export {getFakeReportAction, getMockedSortedReportActions, getMockedReportsMap};
+export {getFakeReportAction, getMockedSortedReportActions, getMockedReportActionsMap};
diff --git a/tests/utils/collections/createCollection.ts b/tests/utils/collections/createCollection.ts
index 565957b7649e..848ef8f81f47 100644
--- a/tests/utils/collections/createCollection.ts
+++ b/tests/utils/collections/createCollection.ts
@@ -1,4 +1,4 @@
-export default function createCollection<T>(createKey: (item: T, index: number) => string, createItem: (index: number) => T, length = 500): Record<string, T> {
+export default function createCollection<T>(createKey: (item: T, index: number) => string | number, createItem: (index: number) => T, length = 500): Record<string, T> {
     const map: Record<string, T> = {};
 
     for (let i = 0; i < length; i++) {
diff --git a/tests/utils/collections/personalDetails.ts b/tests/utils/collections/personalDetails.ts
new file mode 100644
index 000000000000..4fa8586aa08c
--- /dev/null
+++ b/tests/utils/collections/personalDetails.ts
@@ -0,0 +1,12 @@
+import {randAvatar, randEmail, randWord} from '@ngneat/falso';
+import type {PersonalDetails} from '@src/types/onyx';
+
+export default function createPersonalDetails(index: number): PersonalDetails {
+    return {
+        accountID: index,
+        avatar: randAvatar(),
+        displayName: randWord(),
+        lastName: randWord(),
+        login: randEmail(),
+    };
+}
diff --git a/tests/utils/collections/reportActions.ts b/tests/utils/collections/reportActions.ts
new file mode 100644
index 000000000000..abc83eb82abe
--- /dev/null
+++ b/tests/utils/collections/reportActions.ts
@@ -0,0 +1,72 @@
+import {rand, randAggregation, randBoolean, randPastDate, randWord} from '@ngneat/falso';
+import CONST from '@src/CONST';
+import {ReportAction} from '@src/types/onyx';
+
+type ActionType = keyof typeof CONST.REPORT.ACTIONS.TYPE;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const flattenActionNamesValues = (actionNames: any) => {
+    let result = [] as ActionType[];
+    Object.keys(actionNames).forEach((key) => {
+        if (typeof actionNames[key] === 'object') {
+            result = result.concat(flattenActionNamesValues(actionNames[key]));
+        } else {
+            result.push(actionNames[key]);
+        }
+    });
+    return result;
+};
+
+export default function createRandomReportAction(index: number): ReportAction {
+    return {
+        // we need to add any here because of the way we are generating random values
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        actionName: rand(flattenActionNamesValues(CONST.REPORT.ACTIONS.TYPE)) as any,
+        reportActionID: index.toString(),
+        previousReportActionID: index.toString(),
+        actorAccountID: index,
+        person: [
+            {
+                type: randWord(),
+                style: randWord(),
+                text: randWord(),
+            },
+        ],
+        created: randPastDate().toISOString(),
+        message: [
+            {
+                type: randWord(),
+                html: randWord(),
+                style: randWord(),
+                text: randWord(),
+                isEdited: randBoolean(),
+                isDeletedParentAction: randBoolean(),
+                whisperedTo: randAggregation(),
+                reactions: [
+                    {
+                        emoji: randWord(),
+                        users: [
+                            {
+                                accountID: index,
+                                skinTone: index,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        originalMessage: {
+            html: randWord(),
+            type: rand(Object.values(CONST.IOU.REPORT_ACTION_TYPE)),
+        },
+        whisperedToAccountIDs: randAggregation(),
+        avatar: randWord(),
+        automatic: randBoolean(),
+        shouldShow: randBoolean(),
+        lastModified: randPastDate().toISOString(),
+        pendingAction: rand(Object.values(CONST.RED_BRICK_ROAD_PENDING_ACTION)),
+        delegateAccountID: index.toString(),
+        errors: {},
+        isAttachment: randBoolean(),
+    };
+}