diff --git a/.github/workflows/e2ePerformanceTests.yml b/.github/workflows/e2ePerformanceTests.yml
index 016fe89ccfce..92b4e52c159c 100644
--- a/.github/workflows/e2ePerformanceTests.yml
+++ b/.github/workflows/e2ePerformanceTests.yml
@@ -211,7 +211,9 @@ jobs:
           test_spec_file: tests/e2e/TestSpec.yml
           test_spec_type: APPIUM_NODE_TEST_SPEC
           remote_src: false
-          file_artifacts: Customer Artifacts.zip
+          file_artifacts: |
+            Customer Artifacts.zip
+            Test spec output.txt
           log_artifacts: debug.log
           cleanup: true
           timeout: 5400
@@ -220,6 +222,7 @@ jobs:
         if: failure()
         run: |
           echo ${{ steps.schedule-awsdf-main.outputs.data }}
+          cat "./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/Test spec output.txt"
           unzip "Customer Artifacts.zip" -d mainResults
           cat ./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/debug.log
 
diff --git a/.github/workflows/platformDeploy.yml b/.github/workflows/platformDeploy.yml
index 291bd80816b9..bf27006e34a2 100644
--- a/.github/workflows/platformDeploy.yml
+++ b/.github/workflows/platformDeploy.yml
@@ -56,6 +56,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+      
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         with:
diff --git a/.github/workflows/testBuild.yml b/.github/workflows/testBuild.yml
index 6f222398d04b..94a51a2d11bd 100644
--- a/.github/workflows/testBuild.yml
+++ b/.github/workflows/testBuild.yml
@@ -84,6 +84,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         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 301a76c353e2..28c983297c8b 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 1001040403
-        versionName "1.4.4-3"
+        versionCode 1001040602
+        versionName "1.4.6-2"
     }
 
     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/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 22d035368c42..8c74ebfd1686 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -66,7 +66,8 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             template: 'web/index.html',
             filename: 'index.html',
             splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),
-            usePolyfillIO: platform === 'web',
+            isWeb: platform === 'web',
+            isProduction: envFile === '.env.production',
             isStaging: envFile === '.env.staging',
         }),
         new FontPreloadPlugin({
diff --git a/docs/articles/expensify-classic/account-settings/Account-Details.md b/docs/articles/expensify-classic/account-settings/Account-Details.md
index 8f80a35f3525..bc4b94bf8a51 100644
--- a/docs/articles/expensify-classic/account-settings/Account-Details.md
+++ b/docs/articles/expensify-classic/account-settings/Account-Details.md
@@ -59,3 +59,11 @@ Is your Secondary Login (personal email) invalidated in your company account? If
 3. You will be presented with a confirmation message saying Expensify sent you an email with a validation link
 4. Head to your personal email account and follow the prompts
 5. You'll receive a link in the email to click that will unlink the two accounts
+
+# FAQ
+## The profile picture on my account updated automatically. Why did this happen? 
+Our focus is always on making your experience user-friendly and saving you valuable time. One of the ways we achieve this is by utilizing a public API to retrieve public data linked to your email address.
+
+This tool searches for public accounts or profiles associated with your email address, such as on LinkedIn. When it identifies one, it pulls in the uploaded profile picture and name to Expensify.
+
+While this automated process is generally accurate, there may be instances where it's not entirely correct. If this happens, we apologize for any inconvenience caused. The good news is that rectifying such situations is a straightforward process. You can quickly update your information manually by following the directions provided above, ensuring your data is accurate and up to date in no time. 
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/account-settings/Notification-Troubbleshooting.md b/docs/articles/expensify-classic/account-settings/Notification-Troubbleshooting.md
new file mode 100644
index 000000000000..22df0dc7f6ca
--- /dev/null
+++ b/docs/articles/expensify-classic/account-settings/Notification-Troubbleshooting.md
@@ -0,0 +1,75 @@
+---
+title: Notification Troubleshooting
+description: This article is about how to troubleshoot notifications from Expensify. 
+--- 
+
+# Overview 
+Sometimes, members may have trouble receiving important email notifications from Expensify, such as Expensify Magic Code emails, account validation emails, secondary login validations, integration emails, or report action notifications (rejections, approvals, etc.). 
+
+# Here's how to troubleshoot missing Expensify notifications:
+
+1. **No error message, but the email is never received**
+The email might be delayed; give it 30-60 minutes to arrive in your inbox.
+Check **Email Preferences** on the web via **Settings > Your Account > Preferences**In the **Contact Preferences** section. Ensure that the relevant boxes are checked for the email type you're missing. Check your email spam and trash folders, as Expensify messages might end up there inadvertently.
+Check to make sure you haven't unintentionally blocked Expensify emails and whitelist [expensify.com](https://community.expensify.com/home/leaving?allowTrusted=1&target=http%3A%2F%2Fexpensify.com%2F), mg.expensify.com, and [amazonSES.com](https://community.expensify.com/home/leaving?allowTrusted=1&target=http%3A%2F%2Famazonses.com%2F) with your email provider.
+
+2. **A "We're having trouble emailing you" banner at the top of your screen**
+Verify that your email address in your account settings is correct and is a real deliverable email address. 
+Re-send Verification Email: Look for an option to re-send a verification email, usually provided when this banner appears.
+
+![ExpensifyHelp_EmailError]({{site.url}}/assets/images/ExpensifyHelp_EmailError.png){:width="100%"}
+
+# Deep Dive 
+
+**For Private Domains**:
+
+If your organization uses a private domain, consult your IT department or IT person to ensure that the following domains are whitelisted to receive our emails: expensify.com, mg.expensify.com, and amazonSES.com. These domains are the sources of various notification emails, so make sure they aren't being blocked.
+
+**For Public Domains (e.g., Gmail, Yahoo, Hotmail)**:
+
+To whitelist our emails on public email services:
+
+1. Check your Spam Folder: Search for messages from expensify.com in your Spam folder, open them, and click "Not Spam" at the top of the message.
+2. Create a Filter: Set up a filter that identifies the entire expensify.com domain and directs all incoming messages to your inbox, preventing them from going to Spam.
+3. Add Specific Contacts: While optional, adding specific email addresses from Expensify as contacts can further prevent emails from going to Spam.
+
+Please note that even if you receive emails from our Concierge support communication, ensure that both expensify.com and mg.expensify.com are whitelisted as they use different servers.
+
+**Email Server Blocking**:
+Your email server may be blocking our emails due to spam filters or other services. Check with your IT department to investigate and resolve any server-level email blocking issues.
+
+**Mimecast**:
+If your company uses Mimecast, a service that can affect email deliverability, check with your IT department. If Mimecast is in use, reach out to us at concierge@expensify.com through a new email, as this should ensure delivery to your inbox. Mimecast should eventually recognize the Expensify domain, preventing future filtering.
+
+**For Outlook Users**:
+For Outlook users specifically:
+
+1. Click the gear icon in Outlook and select "View all Outlook settings."
+2. Choose "Mail" from the settings menu.
+3. Under the "Junk email" submenu, click "Add" under "Safe senders and domains."
+4. Enter the email address you want to whitelist.
+5. Click "Save."
+
+When you click the "Settings" link in the banner in Expensify, you'll be directed to your account settings page, where you may encounter a few different scenarios:
+
+- "Temporarily Suspended Emails": If the message mentions "temporarily suspended emails to," follow the steps provided in the yellow box. This situation typically occurs when we can't find a valid inbox to send our emails to. Possible reasons include:
+     - A misspelled email address during account creation.
+     - Use of a distribution list email (acting as an "alias" email) without a linked inbox.
+     - An auto-responder that has been responding to our emails for an extended period.
+- To resolve this issue, confirm that the email address is indeed associated with an active inbox. Then, click the link that says "here," and your email should be unblocked shortly.
+- SMTP Error (Gray Box): In some cases, you might encounter a gray box with an SMTP error message. This error can vary, but it typically looks something like this:
+
+![ExpensifyHelp_SMTPError]({{site.url}}/assets/images/ExpensifyHelp_SMTPError.png){:width="100%"}
+
+**These look a bit cryptic, yes, but hang in there!** 
+
+The error messages you see are the raw message text received from your email provider's server to Amazon. These messages can vary in text, but the best course of action is to follow the link provided (by copying and pasting) in the text for the next steps.
+
+**Scenario 1**: If the message in the gray box includes "mimecast.com": It means that our emails are being blocked by the server. In this case, you should contact your IT person or team to address the issue.
+
+**Scenario 2**: If the message in the gray box mentions "blacklist at org/.com/.net," or resembles the screenshot provided, it indicates that your IT team has configured your email to use a third-party email reputation or blacklisting service. Here's what you need to know:
+- All our emails are SPF and DKIM-signed, meaning they are cryptographically signed as coming from us and are not spam.
+- The problem arises because we send mail from a cloud-based service. This means that the sender's IP serves multiple vendors, including Expensify. If one of those vendors is marked as spam, it can block all messages from that IP, even if they're from different vendors (including us).
+- The better approach is for the server to flag spam via DKIM and SPF (rather than solely relying on the sender's IP address), as our messages are correctly signed and encrypted to prevent spoofing.
+
+To resolve these issues, consider discussing them with your IT team, as they can help implement the necessary changes to ensure you receive our emails without interruption.
diff --git a/docs/articles/expensify-classic/account-settings/Preferences.md b/docs/articles/expensify-classic/account-settings/Preferences.md
index 532da4d8a986..8131cd0e80c5 100644
--- a/docs/articles/expensify-classic/account-settings/Preferences.md
+++ b/docs/articles/expensify-classic/account-settings/Preferences.md
@@ -1,5 +1,28 @@
 ---
-title: Preferences
-description: Preferences
+title: Account Preferences
+description: Expensify Account Preferences
 ---
-## Resource Coming Soon!
+
+# Overview
+Customize your Expensify experience by updating your account details and preferences. Here you can update your profile picture, adjust contact preferences, and perform other actions to personalize your account.
+
+# How to manage contact preferences
+To edit your notification preferences or unsubscribe from Expensify updates: 
+- On the web, navigate to **Settings > Account > Preferences**
+Scroll down to find the ‘Contact Preferences’ section. To stop receiving a specific type of email, uncheck the corresponding box.
+
+# How to set your time zone
+Wherever you are, we'll time-stamp your report actions according to your local time. This helps you keep track of when submissions or approvals occurred. Setting your time zone in Expensify is simple and ensures accurate time-stamping for your report actions, especially in the comments section of the expense report you're reviewing.
+
+To set your time zone:
+Navigate to **Settings > Account > Preferences > Scroll down to Time Zone**
+
+![ExpensifyHelp_Timezone]({{site.url}}/assets/images/ExpensifyHelp_Timezone.png){:width="100%"}
+
+ **Note:** To set your time zone automatically based on your location, tick the box that says **Set my time zone automatically**.
+
+If you prefer to set your time zone manually, leave the box unticked and select your time zone from the searchable list of locations.
+
+When you add a comment to a report, all the report actions will be time-stamped in your local time. Adjusting your time zone to the appropriate location makes tracking and understanding submission and approval times much easier.
+
+![ExpensifyHelp_Time]({{site.url}}/assets/images/ExpensifyHelp_Time.png){:width="100%"}
diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Desktop.md b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Desktop.md
index d8c7c145a670..958e423273ce 100644
--- a/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Desktop.md
+++ b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Desktop.md
@@ -76,6 +76,7 @@ Expensify's integration with QuickBooks brings in your Chart of Accounts as Cate
 3. Expensify offers Auto-Categorization to automatically assign expenses to the appropriate expense categories.
 4. If needed, you can edit the names of the imported Categories to simplify expense coding for your employees. Keep in mind that if you make changes to these accounts in QuickBooks Desktop, the category names in Expensify will update to match them during the next sync.
 5. _**Important:**_ Each expense must have a category selected to export to QuickBooks Desktop. The selected category must be one imported from QuickBooks Desktop; you cannot manually create categories within Expensify policy settings.
+
 ## Classes
 Classes can be imported from QuickBooks as either tags (line-item level) or report fields (header level).
 
diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md
index 9d17160d3a36..4075aaf18016 100644
--- a/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md
+++ b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md
@@ -14,6 +14,8 @@ It's crucial to understand the requirements based on your specific QuickBooks su
 - An error will occur if you try to export to QuickBooks with a feature enabled that isn't part of your subscription.
 - Please be aware that Expensify does not support the Self-Employed subscription in QuickBooks Online.
 
+![QuickBooks Online - Subscription types]({{site.url}}/assets/images/QBO1.png){:width="100%"}
+
 # How to connect to QuickBooks Online
 
 ## Step 1: Setup employees in QuickBooks Online
@@ -79,14 +81,20 @@ This is a single itemized vendor bill for each Expensify report. If the accounti
 
 The submitter will be listed as the vendor in the vendor bill.
 
+![Vendor Bill]({{site.url}}/assets/images/QBO2-Bill.png){:width="100%"}
+
 ## Check
 
 This is a single itemized check for each Expensify report. You can mark a check to be printed later in QuickBooks Online.
 
+![Check to print]({{site.url}}/assets/images/QBO3-Checktoprint.png){:width="100%"}
+
 ## Journal entry
 
 This is a single itemized journal entry for each Expensify report.
 
+![Journal Entry]({{site.url}}/assets/images/QBO4-JournalEntry.png){:width="100%"}
+
 # Non-reimbursable expenses
 
 Non-reimbursable expenses export to QuickBooks Online as:
@@ -102,7 +110,9 @@ Using Credit/Debit Card Transactions:
 - Each expense will be exported as a bank transaction with its transaction date.
 - If you split an expense in Expensify, we'll consolidate it into a single credit card transaction in QuickBooks with multiple line items posted to the corresponding General Ledger accounts.
 
-Pro-Tip: To ensure the payee field in QuickBooks Online reflects the merchant name for Credit Card expenses, ensure there's a matching Vendor in QuickBooks Online. Expensify checks for an exact match during export. If none are found, the payee will be mapped to a vendor we create and labeled as Credit Card Misc. or Debit Card Misc. 
+Pro-Tip: To ensure the payee field in QuickBooks Online reflects the merchant name for Credit Card expenses, ensure there's a matching Vendor in QuickBooks Online. Expensify checks for an exact match during export. If none are found, the payee will be mapped to a vendor we create and labeled as Credit Card Misc. or Debit Card Misc.
+
+![Expense]({{site.url}}/assets/images/QBO5-Expense.png){:width="100%"}
 
 If you centrally manage your company cards through Domains, you can export expenses from each card to a specific account in QuickBooks.
 
@@ -224,6 +234,8 @@ Step 3: Importing Your Credit Card Transactions into QuickBooks Online
 
 - After completing Steps 1 and 2, you can import your credit card transactions into QuickBooks Online. These imported banking transactions will align with the ones brought in from Expensify. QuickBooks Online will guide you through the process of matching these transactions, similar to the example below:
 
+![Transactions]({{site.url}}/assets/images/QBO7-Transactions.png){:width="100%"}
+
 ## Tax in QuickBooks Online
 
 If your country applies taxes on sales (like GST, HST, or VAT), you can utilize Expensify's Tax Tracking along with your QuickBooks Online tax rates. Please note: Tax Tracking is not available for Workspaces linked to the US version of QuickBooks Online. If you need assistance applying taxes after reports are exported, contact QuickBooks.
@@ -247,6 +259,8 @@ When working with QuickBooks Online Multi-Currency, there are some things to rem
 
 In QuickBooks Online, the currency conversion rates are not applied when exporting. All transactions will be exported with a 1:1 conversion rate, so for example, if a vendor's currency is CAD (Canadian Dollar) and the home currency is USD (US Dollar), the export will show these currencies without applying conversion rates.
 
+![Check]({{site.url}}/assets/images/QBO6-Check.png){:width="100%"}
+
 To correct this, you must manually update the conversion rate after the report has been exported to QuickBooks Online. 
 
 Specifically for Vendor Bills:
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/assets/images/ExpensifyHelp_EmailError.png b/docs/assets/images/ExpensifyHelp_EmailError.png
new file mode 100644
index 000000000000..203f0cfe2b76
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_EmailError.png differ
diff --git a/docs/assets/images/ExpensifyHelp_SMTPError.png b/docs/assets/images/ExpensifyHelp_SMTPError.png
new file mode 100644
index 000000000000..b95ea70a9dfa
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_SMTPError.png differ
diff --git a/docs/assets/images/ExpensifyHelp_Time.png b/docs/assets/images/ExpensifyHelp_Time.png
new file mode 100644
index 000000000000..f4d91b1e8aeb
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_Time.png differ
diff --git a/docs/assets/images/ExpensifyHelp_Timezone.png b/docs/assets/images/ExpensifyHelp_Timezone.png
new file mode 100644
index 000000000000..d2afc9e693e7
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_Timezone.png differ
diff --git a/docs/assets/images/QBO1.png b/docs/assets/images/QBO1.png
new file mode 100644
index 000000000000..4037db44d3bb
Binary files /dev/null and b/docs/assets/images/QBO1.png differ
diff --git a/docs/assets/images/QBO2-Bill.png b/docs/assets/images/QBO2-Bill.png
new file mode 100644
index 000000000000..f75716a85079
Binary files /dev/null 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
new file mode 100644
index 000000000000..732141a74353
Binary files /dev/null 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
new file mode 100644
index 000000000000..342d20e49608
Binary files /dev/null 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
new file mode 100644
index 000000000000..5d71f3955557
Binary files /dev/null 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
new file mode 100644
index 000000000000..087720a76875
Binary files /dev/null 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
new file mode 100644
index 000000000000..c7752c42870b
Binary files /dev/null and b/docs/assets/images/QBO7-Transactions.png differ
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index c8e8ab5a09f1..c05fe7fbfeba 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.4</string>
+	<string>1.4.6</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.4.3</string>
+	<string>1.4.6.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index fc779f5a711c..4c875f6d7ba2 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.4</string>
+	<string>1.4.6</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.4.3</string>
+	<string>1.4.6.2</string>
 </dict>
 </plist>
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 7f1ca6b3290c..390511397b0e 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -256,7 +256,7 @@ PODS:
     - Onfido (~> 28.3.0)
     - React
   - OpenSSL-Universal (1.1.1100)
-  - Plaid (4.1.0)
+  - Plaid (4.7.0)
   - PromisesObjC (2.2.0)
   - RCT-Folly (2021.07.22.00):
     - boost
@@ -569,7 +569,7 @@ PODS:
     - react-native-config/App (= 1.4.6)
   - react-native-config/App (1.4.6):
     - React-Core
-  - react-native-document-picker (8.1.1):
+  - react-native-document-picker (8.2.1):
     - React-Core
   - react-native-flipper (0.159.0):
     - React-Core
@@ -589,8 +589,8 @@ PODS:
     - React-Core
   - react-native-performance (5.1.0):
     - React-Core
-  - react-native-plaid-link-sdk (10.0.0):
-    - Plaid (~> 4.1.0)
+  - react-native-plaid-link-sdk (10.8.0):
+    - Plaid (~> 4.7.0)
     - React-Core
   - react-native-quick-sqlite (8.0.0-beta.2):
     - React
@@ -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:
@@ -1212,7 +1207,7 @@ SPEC CHECKSUMS:
   Onfido: c7d010d9793790d44a07799d9be25aa8e3814ee7
   onfido-react-native-sdk: b346a620af5669f9fecb6dc3052314a35a94ad9f
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
+  Plaid: 431ef9be5314a1345efb451bc5e6b067bfb3b4c6
   PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: c0569ecc035894e4a68baecb30fe6a7ea6e399f9
@@ -1233,7 +1228,7 @@ SPEC CHECKSUMS:
   react-native-blob-util: 99f4d79189252f597fe0d810c57a3733b1b1dea6
   react-native-cameraroll: 8ffb0af7a5e5de225fd667610e2979fc1f0c2151
   react-native-config: 7cd105e71d903104e8919261480858940a6b9c0e
-  react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
+  react-native-document-picker: 69ca2094d8780cfc1e7e613894d15290fdc54bba
   react-native-flipper: dc5290261fbeeb2faec1bdc57ae6dd8d562e1de4
   react-native-geolocation: 0f7fe8a4c2de477e278b0365cce27d089a8c5903
   react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56
@@ -1243,7 +1238,7 @@ SPEC CHECKSUMS:
   react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
   react-native-pdf: b4ca3d37a9a86d9165287741c8b2ef4d8940c00e
   react-native-performance: cef2b618d47b277fb5c3280b81a3aad1e72f2886
-  react-native-plaid-link-sdk: 9eb0f71dad94b3bdde649c7a384cba93024af46c
+  react-native-plaid-link-sdk: df1618a85a615d62ff34e34b76abb7a56497fbc1
   react-native-quick-sqlite: bcc7a7a250a40222f18913a97cd356bf82d0a6c4
   react-native-render-html: 96c979fe7452a0a41559685d2f83b12b93edac8c
   react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
@@ -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 d532c0d3e9b2..b3a8c47f853c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.4-3",
+  "version": "1.4.6-2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.4-3",
+      "version": "1.4.6-2",
       "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",
@@ -78,7 +77,7 @@
         "react-native-config": "^1.4.5",
         "react-native-dev-menu": "^4.1.1",
         "react-native-device-info": "^10.3.0",
-        "react-native-document-picker": "^8.0.0",
+        "react-native-document-picker": "^8.2.1",
         "react-native-draggable-flatlist": "^4.0.1",
         "react-native-fast-image": "^8.6.3",
         "react-native-fs": "^2.20.0",
@@ -98,7 +97,7 @@
         "react-native-performance": "^5.1.0",
         "react-native-permissions": "^3.9.3",
         "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
-        "react-native-plaid-link-sdk": "^10.0.0",
+        "react-native-plaid-link-sdk": "10.8.0",
         "react-native-qrcode-svg": "^6.2.0",
         "react-native-quick-sqlite": "^8.0.0-beta.2",
         "react-native-reanimated": "3.5.4",
@@ -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",
@@ -44224,8 +44214,9 @@
       }
     },
     "node_modules/react-native-document-picker": {
-      "version": "8.1.1",
-      "license": "MIT",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-8.2.1.tgz",
+      "integrity": "sha512-luH2hKdq4cUwE651OscyGderLMsCusOsBzw4MBca91CgprlAGVMm1/pDwJDV5t9LIewVK8DIgXGXzgrsusKVhA==",
       "dependencies": {
         "invariant": "^2.2.4"
       },
@@ -44535,8 +44526,12 @@
       }
     },
     "node_modules/react-native-plaid-link-sdk": {
-      "version": "10.0.0",
-      "license": "MIT",
+      "version": "10.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-plaid-link-sdk/-/react-native-plaid-link-sdk-10.8.0.tgz",
+      "integrity": "sha512-rhyI19SZdwKCsHtkJ0ZOCD/r0vNLS1vqUAS3HPPa97IIN6nS2ln9krLA7lFfMKtWxY5Z5d73SqTmqhd1qqdNuA==",
+      "dependencies": {
+        "react-native-plaid-link-sdk": "^10.4.0"
+      },
       "peerDependencies": {
         "react": "*",
         "react-native": ">=0.66.0"
@@ -58707,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",
@@ -84699,7 +84686,9 @@
       "requires": {}
     },
     "react-native-document-picker": {
-      "version": "8.1.1",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-8.2.1.tgz",
+      "integrity": "sha512-luH2hKdq4cUwE651OscyGderLMsCusOsBzw4MBca91CgprlAGVMm1/pDwJDV5t9LIewVK8DIgXGXzgrsusKVhA==",
       "requires": {
         "invariant": "^2.2.4"
       }
@@ -84873,8 +84862,12 @@
       }
     },
     "react-native-plaid-link-sdk": {
-      "version": "10.0.0",
-      "requires": {}
+      "version": "10.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-plaid-link-sdk/-/react-native-plaid-link-sdk-10.8.0.tgz",
+      "integrity": "sha512-rhyI19SZdwKCsHtkJ0ZOCD/r0vNLS1vqUAS3HPPa97IIN6nS2ln9krLA7lFfMKtWxY5Z5d73SqTmqhd1qqdNuA==",
+      "requires": {
+        "react-native-plaid-link-sdk": "^10.4.0"
+      }
     },
     "react-native-qrcode-svg": {
       "version": "6.2.0",
diff --git a/package.json b/package.json
index 204784c14db1..6412fd588bde 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.4-3",
+  "version": "1.4.6-2",
   "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",
@@ -125,7 +124,7 @@
     "react-native-config": "^1.4.5",
     "react-native-dev-menu": "^4.1.1",
     "react-native-device-info": "^10.3.0",
-    "react-native-document-picker": "^8.0.0",
+    "react-native-document-picker": "^8.2.1",
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",
@@ -145,7 +144,7 @@
     "react-native-performance": "^5.1.0",
     "react-native-permissions": "^3.9.3",
     "react-native-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
-    "react-native-plaid-link-sdk": "^10.0.0",
+    "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
     "react-native-reanimated": "3.5.4",
diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh
index 88ab17e7a2bd..025559dc4671 100755
--- a/scripts/build-desktop.sh
+++ b/scripts/build-desktop.sh
@@ -25,4 +25,4 @@ npx webpack --config config/webpack/webpack.desktop.js --env envFile=$ENV_FILE
 title "Building Desktop App Archive Using Electron"
 info ""
 shift 1
-npx electron-builder --config config/electronBuilder.config.js "$@"
+npx electron-builder --config config/electronBuilder.config.js --publish always "$@"
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 dd6eafc7f0e6..5751c588ead8 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -600,6 +600,7 @@ const CONST = {
             ADMINS: '#admins',
         },
         STATE: {
+            OPEN: 'OPEN',
             SUBMITTED: 'SUBMITTED',
             PROCESSING: 'PROCESSING',
         },
@@ -698,6 +699,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',
@@ -1359,7 +1368,6 @@ const CONST = {
         TIME_STARTS_01: /^01:\d{2} [AP]M$/,
         TIME_FORMAT: /^\d{2}:\d{2} [AP]M$/,
         DATE_TIME_FORMAT: /^\d{2}-\d{2} \d{2}:\d{2} [AP]M$/,
-        ATTACHMENT_ROUTE: /\/r\/(\d*)\/attachment/,
         ILLEGAL_FILENAME_CHARACTERS: /\/|<|>|\*|"|:|\?|\\|\|/g,
 
         ENCODE_PERCENT_CHARACTER: /%(25)+/g,
@@ -2844,6 +2852,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 a96b229ef4c1..a3aa28c44609 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -130,8 +130,14 @@ 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_2FA: 'settings/security/two-factor-auth',
+    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),
+    },
     SETTINGS_STATUS: 'settings/profile/status',
     SETTINGS_STATUS_SET: 'settings/profile/status/set',
 
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index 0b23704b5b26..c18b706e1acf 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -168,7 +168,7 @@ function AddPlaidBankAccount({
         value: account.plaidAccountID,
         label: `${account.addressName} ${account.mask}`,
     }));
-    const {icon, iconSize, iconStyles} = getBankIcon();
+    const {icon, iconSize, iconStyles} = getBankIcon({themeStyles: styles});
     const plaidErrors = lodashGet(plaidData, 'errors');
     const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : '';
     const bankName = lodashGet(plaidData, 'bankName');
diff --git a/src/components/AddressForm.js b/src/components/AddressForm.js
index dfea017692ef..98650f94232b 100644
--- a/src/components/AddressForm.js
+++ b/src/components/AddressForm.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';
@@ -63,6 +63,7 @@ const defaultProps = {
 };
 
 function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldSaveDraft, state, street1, street2, submitButtonText, zip}) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const zipSampleFormat = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, [country, 'samples'], '');
     const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});
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/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 763ca4615c6e..33d6cb014df2 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -51,7 +51,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
         linkProps.href = href;
     }
     const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer};
-    const isEmail = Str.isValidEmailMarkdown(href.replace(/mailto:/i, ''));
+    const isEmail = Str.isValidEmail(href.replace(/mailto:/i, ''));
 
     return (
         <PressableWithSecondaryInteraction
diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
index 607f4f0a4b11..1a87592cba9b 100644
--- a/src/components/AnimatedStep/index.tsx
+++ b/src/components/AnimatedStep/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import useNativeDriver from '@libs/useNativeDriver';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import {AnimationDirection} from './AnimatedStepContext';
@@ -18,18 +18,15 @@ type AnimatedStepProps = ChildrenProps & {
     onAnimationEnd: () => void;
 };
 
-function getAnimationStyle(direction: AnimationDirection) {
-    let transitionValue;
+function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style, children}: AnimatedStepProps) {
+    const styles = useThemeStyles();
 
-    if (direction === 'in') {
-        transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    } else {
-        transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    }
-    return styles.makeSlideInTranslation('translateX', transitionValue);
-}
+    const animationStyle = useMemo(() => {
+        const transitionValue = direction === 'in' ? CONST.ANIMATED_TRANSITION_FROM_VALUE : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+
+        return styles.makeSlideInTranslation('translateX', transitionValue);
+    }, [direction, styles]);
 
-function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) {
     return (
         <Animatable.View
             onAnimationEnd={() => {
@@ -39,7 +36,7 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN,
                 onAnimationEnd();
             }}
             duration={CONST.ANIMATED_TRANSITION}
-            animation={getAnimationStyle(direction)}
+            animation={animationStyle}
             useNativeDriver={useNativeDriver}
             style={style}
         >
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/AttachmentModal.js b/src/components/AttachmentModal.js
index d346f271b36d..356e75b1e1bb 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -363,7 +363,9 @@ function AttachmentModal(props) {
         const menuItems = [];
         const parentReportAction = props.parentReportActions[props.report.parentReportActionID];
 
-        const canEdit = ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, props.parentReport.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT);
+        const canEdit =
+            ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, props.parentReport.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT) &&
+            !TransactionUtils.isDistanceRequest(props.transaction);
         if (canEdit) {
             menuItems.push({
                 icon: Expensicons.Camera,
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
index 46afd23daa4c..b9dd65e2716b 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
@@ -3,11 +3,12 @@ import {StyleSheet, View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {useSharedValue} from 'react-native-reanimated';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
 function AttachmentViewPdf(props) {
+    const styles = useThemeStyles();
     const {onScaleChanged, ...restProps} = props;
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const scaleRef = useSharedValue(1);
@@ -41,7 +42,7 @@ function AttachmentViewPdf(props) {
     return (
         <View
             collapsable={false}
-            style={[styles.flex1]}
+            style={styles.flex1}
         >
             <GestureDetector gesture={Pan}>
                 <Animated.View
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/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 340fc9dfedbf..eabcd3aa85c5 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -8,8 +8,8 @@ import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
@@ -142,6 +142,8 @@ function AvatarWithImagePicker({
     onImageSelected,
     editorMaskImage,
 }) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const [isMenuVisible, setIsMenuVisible] = useState(false);
     const [errorData, setErrorData] = useState({
         validationError: null,
@@ -319,7 +321,7 @@ function AvatarWithImagePicker({
                                     src={Expensicons.Camera}
                                     width={variables.iconSizeSmall}
                                     height={variables.iconSizeSmall}
-                                    fill={themeColors.textLight}
+                                    fill={theme.textLight}
                                 />
                             </View>
                         </PressableWithoutFeedback>
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/Button/index.tsx b/src/components/Button/index.tsx
index 71bce9777174..8d5833a121ca 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -9,7 +9,6 @@ import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
-import themeColors from '@styles/themes/default';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
@@ -118,7 +117,7 @@ function Button(
         allowBubble = false,
 
         iconRight = Expensicons.ArrowRight,
-        iconFill = themeColors.textLight,
+        iconFill,
         iconStyles = [],
         iconRightStyles = [],
 
@@ -214,7 +213,7 @@ function Button(
                             <View style={[styles.mr1, iconStyles]}>
                                 <Icon
                                     src={icon}
-                                    fill={iconFill || theme.textLight}
+                                    fill={iconFill ?? theme.textLight}
                                     small={small}
                                 />
                             </View>
@@ -225,7 +224,7 @@ function Button(
                         <View style={[styles.justifyContentCenter, styles.ml1, iconRightStyles]}>
                             <Icon
                                 src={iconRight}
-                                fill={iconFill || theme.textLight}
+                                fill={iconFill ?? theme.textLight}
                                 small={small}
                             />
                         </View>
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/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 0f106b856522..92cd7ea38eea 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -34,7 +34,7 @@ const propTypes = {
     isChecked: PropTypes.bool,
 
     /** Called when the checkbox or label is pressed */
-    onInputChange: PropTypes.func.isRequired,
+    onInputChange: PropTypes.func,
 
     /** Container styles */
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
@@ -77,10 +77,11 @@ const defaultProps = {
     errorText: '',
     shouldSaveDraft: false,
     isChecked: false,
-    value: false,
+    value: undefined,
     defaultValue: false,
     forwardedRef: () => {},
     accessibilityLabel: undefined,
+    onInputChange: () => {},
 };
 
 function CheckboxWithLabel(props) {
diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx
index 434017f2a547..570d00559af8 100644
--- a/src/components/CollapsibleSection/index.tsx
+++ b/src/components/CollapsibleSection/index.tsx
@@ -4,7 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Collapsible from './Collapsible';
@@ -15,6 +15,7 @@ type CollapsibleSectionProps = ChildrenProps & {
 };
 
 function CollapsibleSection({title, children}: CollapsibleSectionProps) {
+    const styles = useThemeStyles();
     const [isExpanded, setIsExpanded] = useState(false);
 
     /**
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.android.js b/src/components/Composer/index.android.js
index 278965cbc81a..698c68cc78e9 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -4,7 +4,8 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -65,6 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
+    const theme = useTheme();
+    const styles = useThemeStyles();
 
     /**
      * Set the TextInput Ref
@@ -110,9 +113,9 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
     return (
         <RNTextInput
             autoComplete="off"
-            placeholderTextColor={themeColors.placeholderText}
+            placeholderTextColor={theme.placeholderText}
             ref={setTextInputRef}
-            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e)}
+            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)}
             rejectResponderTermination={false}
             // Setting a really high number here fixes an issue with the `maxNumberOfLines` prop on TextInput, where on Android the text input would collapse to only one line,
             // when it should actually expand to the container (https://github.com/Expensify/App/issues/11694#issuecomment-1560520670)
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index a1b8c1a4ffe6..eb227de36a54 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -4,8 +4,8 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
@@ -66,6 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
+    const styles = useThemeStyles();
+    const theme = useTheme();
 
     /**
      * Set the TextInput Ref
@@ -115,9 +117,9 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
     return (
         <RNTextInput
             autoComplete="off"
-            placeholderTextColor={themeColors.placeholderText}
+            placeholderTextColor={theme.placeholderText}
             ref={setTextInputRef}
-            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e)}
+            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)}
             rejectResponderTermination={false}
             smartInsertDelete={false}
             maxNumberOfLines={maxNumberOfLines}
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/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 656e419449b3..4c4c34851afb 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -1,13 +1,13 @@
 import lodashGet from 'lodash/get';
 import lodashIsNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import styles from '@styles/styles';
-import theme from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -37,46 +37,53 @@ const defaultProps = {
     },
 };
 
-const getWaypointMarkers = (waypoints) => {
-    const numberOfWaypoints = _.size(waypoints);
-    const lastWaypointIndex = numberOfWaypoints - 1;
-    return _.filter(
-        _.map(waypoints, (waypoint, key) => {
-            if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
-                return;
-            }
-
-            const index = TransactionUtils.getWaypointIndex(key);
-            let MarkerComponent;
-            if (index === 0) {
-                MarkerComponent = Expensicons.DotIndicatorUnfilled;
-            } else if (index === lastWaypointIndex) {
-                MarkerComponent = Expensicons.Location;
-            } else {
-                MarkerComponent = Expensicons.DotIndicator;
-            }
-
-            return {
-                id: `${waypoint.lng},${waypoint.lat},${index}`,
-                coordinate: [waypoint.lng, waypoint.lat],
-                markerComponent: () => (
-                    <MarkerComponent
-                        width={CONST.MAP_MARKER_SIZE}
-                        height={CONST.MAP_MARKER_SIZE}
-                        fill={theme.icon}
-                    />
-                ),
-            };
-        }),
-        (waypoint) => waypoint,
-    );
-};
-
 function ConfirmedRoute({mapboxAccessToken, transaction}) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction.routes || {};
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const coordinates = lodashGet(route, 'geometry.coordinates', []);
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const getWaypointMarkers = useCallback(
+        (waypointsData) => {
+            const numberOfWaypoints = _.size(waypointsData);
+            const lastWaypointIndex = numberOfWaypoints - 1;
+
+            return _.filter(
+                _.map(waypointsData, (waypoint, key) => {
+                    if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
+                        return;
+                    }
+
+                    const index = TransactionUtils.getWaypointIndex(key);
+                    let MarkerComponent;
+                    if (index === 0) {
+                        MarkerComponent = Expensicons.DotIndicatorUnfilled;
+                    } else if (index === lastWaypointIndex) {
+                        MarkerComponent = Expensicons.Location;
+                    } else {
+                        MarkerComponent = Expensicons.DotIndicator;
+                    }
+
+                    return {
+                        id: `${waypoint.lng},${waypoint.lat},${index}`,
+                        coordinate: [waypoint.lng, waypoint.lat],
+                        markerComponent: () => (
+                            <MarkerComponent
+                                width={CONST.MAP_MARKER_SIZE}
+                                height={CONST.MAP_MARKER_SIZE}
+                                fill={theme.icon}
+                            />
+                        ),
+                    };
+                }),
+                (waypoint) => waypoint,
+            );
+        },
+        [theme],
+    );
+
     const waypointMarkers = getWaypointMarkers(waypoints);
 
     useEffect(() => {
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index d0a43badc5e3..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>
@@ -98,7 +100,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
             success={!isThrottledButtonActive}
             description={description}
             descriptionTextStyle={styles.breakAll}
-            style={getContextMenuItemStyles(windowWidth)}
+            style={getContextMenuItemStyles(styles, windowWidth)}
             isAnonymousAction={isAnonymousAction}
             focused={isFocused}
             interactive={isThrottledButtonActive}
diff --git a/src/components/CustomDevMenu/index.tsx b/src/components/CustomDevMenu/index.tsx
index 8384a9804fb4..c8eae861b676 100644
--- a/src/components/CustomDevMenu/index.tsx
+++ b/src/components/CustomDevMenu/index.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import CustomDevMenuElement from './types';
 
 const CustomDevMenu: CustomDevMenuElement = Object.assign(() => <></>, {displayName: 'CustomDevMenu'});
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..2e4994378264 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';
+
+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;
+        }
+
+        StatusBar.setBackgroundColor(currentScreenBackgroundColor, true);
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
+
+    useEffect(() => {
+        navigationRef.addListener('state', updateStatusBarStyle);
+
+        return () => navigationRef.removeListener('state', updateStatusBarStyle);
+    }, [updateStatusBarStyle]);
+
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        StatusBar.setBarStyle(theme.statusBarStyle, true);
+    }, [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/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/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 0ee12579733d..25a534b94758 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -18,8 +18,8 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,6 +51,8 @@ const throttleTime = Browser.isMobile() ? 200 : 50;
 function EmojiPickerMenu(props) {
     const {forwardedRef, frequentlyUsedEmojis, preferredSkinTone, onEmojiSelected, preferredLocale, translate} = props;
 
+    const styles = useThemeStyles();
+
     const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
 
     // Ref for the emoji search input
@@ -462,7 +464,7 @@ function EmojiPickerMenu(props) {
                 />
             );
         },
-        [isUsingKeyboardMovement, highlightedIndex, onEmojiSelected, preferredSkinTone, translate, highlightFirstEmoji],
+        [preferredSkinTone, highlightedIndex, isUsingKeyboardMovement, highlightFirstEmoji, styles, translate, onEmojiSelected],
     );
 
     const isFiltered = emojis.current.length !== filteredEmojis.length;
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..1f14a63462bd 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -4,6 +4,7 @@ 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,6 +44,7 @@ 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.
      */
@@ -60,7 +62,7 @@ function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferr
                     {styledTextArray.map(({text, isColored}) => (
                         <Text
                             key={`${text}+${isColored}`}
-                            style={StyleUtils.getColoredBackgroundStyle(isColored)}
+                            style={StyleUtils.getColoredBackgroundStyle(theme, isColored)}
                         >
                             {text}
                         </Text>
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/FixedFooter.tsx b/src/components/FixedFooter.tsx
index 34bce2133a89..475de82fac35 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -7,12 +7,12 @@ type FixedFooterProps = {
     children: ReactNode;
 
     /** Styles to be assigned to Container */
-    style: Array<StyleProp<ViewStyle>>;
+    style?: StyleProp<ViewStyle>;
 };
 
 function FixedFooter({style = [], children}: FixedFooterProps) {
     const styles = useThemeStyles();
-    return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, ...style]}>{children}</View>;
+    return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, style]}>{children}</View>;
 }
 
 FixedFooter.displayName = 'FixedFooter';
diff --git a/src/components/FlatList/index.android.js b/src/components/FlatList/index.android.js
index fdb3a24667aa..f7c3da39ed84 100644
--- a/src/components/FlatList/index.android.js
+++ b/src/components/FlatList/index.android.js
@@ -1,7 +1,8 @@
 import {useFocusEffect} from '@react-navigation/native';
 import PropTypes from 'prop-types';
-import React, {forwardRef, useCallback, useState} from 'react';
+import React, {forwardRef, useCallback, useContext} from 'react';
 import {FlatList} from 'react-native';
+import {ActionListContext} from '@pages/home/ReportScreenContext';
 
 const propTypes = {
     /** Same as for FlatList */
@@ -32,7 +33,7 @@ const defaultProps = {
 // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android).
 // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen.
 function CustomFlatList(props) {
-    const [scrollPosition, setScrollPosition] = useState({});
+    const {scrollPosition, setScrollPosition} = useContext(ActionListContext);
 
     const onScreenFocus = useCallback(() => {
         if (!props.innerRef.current || !scrollPosition.offset) {
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/FormWrapper.js b/src/components/Form/FormWrapper.js
index 4f7346a94a2d..638b6e5f8d19 100644
--- a/src/components/Form/FormWrapper.js
+++ b/src/components/Form/FormWrapper.js
@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import FormSubmit from '@components/FormSubmit';
+import refPropTypes from '@components/refPropTypes';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -64,7 +65,7 @@ const propTypes = {
 
     errors: errorsPropType.isRequired,
 
-    inputRefs: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])).isRequired,
+    inputRefs: PropTypes.objectOf(refPropTypes).isRequired,
 };
 
 const defaultProps = {
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/index.js b/src/components/GrowlNotification/index.js
index 5fdbe205f87b..86850a8af96d 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -7,26 +7,11 @@ import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
 import * as Growl from '@libs/Growl';
 import useNativeDriver from '@libs/useNativeDriver';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 
-const types = {
-    [CONST.GROWL.SUCCESS]: {
-        icon: Expensicons.Checkmark,
-        iconColor: themeColors.success,
-    },
-    [CONST.GROWL.ERROR]: {
-        icon: Expensicons.Exclamation,
-        iconColor: themeColors.danger,
-    },
-    [CONST.GROWL.WARNING]: {
-        icon: Expensicons.Exclamation,
-        iconColor: themeColors.warning,
-    },
-};
-
 const INACTIVE_POSITION_Y = -255;
 
 const PressableWithoutFeedback = Pressables.PressableWithoutFeedback;
@@ -36,6 +21,23 @@ function GrowlNotification(_, ref) {
     const [bodyText, setBodyText] = useState('');
     const [type, setType] = useState('success');
     const [duration, setDuration] = useState();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const types = {
+        [CONST.GROWL.SUCCESS]: {
+            icon: Expensicons.Checkmark,
+            iconColor: theme.success,
+        },
+        [CONST.GROWL.ERROR]: {
+            icon: Expensicons.Exclamation,
+            iconColor: theme.danger,
+        },
+        [CONST.GROWL.WARNING]: {
+            icon: Expensicons.Exclamation,
+            iconColor: theme.warning,
+        },
+    };
 
     /**
      * Show the growl notification
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index c4eed0134008..8cddd3c017de 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -4,7 +4,7 @@ import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvide
 import _ from 'underscore';
 import convertToLTR from '@libs/convertToLTR';
 import singleFontFamily from '@styles/fontFamily/singleFontFamily';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
 
@@ -24,45 +24,49 @@ const defaultProps = {
     enableExperimentalBRCollapsing: false,
 };
 
-// Declare nonstandard tags and their content model here
-const customHTMLElementModels = {
-    edited: defaultHTMLElementModels.span.extend({
-        tagName: 'edited',
-    }),
-    'alert-text': defaultHTMLElementModels.div.extend({
-        tagName: 'alert-text',
-        mixedUAStyles: {...styles.formError, ...styles.mb0},
-    }),
-    'muted-text': defaultHTMLElementModels.div.extend({
-        tagName: 'muted-text',
-        mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
-    }),
-    comment: defaultHTMLElementModels.div.extend({
-        tagName: 'comment',
-        mixedUAStyles: {whiteSpace: 'pre'},
-    }),
-    'email-comment': defaultHTMLElementModels.div.extend({
-        tagName: 'email-comment',
-        mixedUAStyles: {whiteSpace: 'normal'},
-    }),
-    strong: defaultHTMLElementModels.span.extend({
-        tagName: 'strong',
-        mixedUAStyles: {whiteSpace: 'pre'},
-    }),
-    'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
-    'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
-};
-
-const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
-
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing
 // context to RenderHTMLSource components. See https://git.io/JRcZb
 // Beware that each prop should be referentialy stable between renders to avoid
 // costly invalidations and commits.
 function BaseHTMLEngineProvider(props) {
+    const styles = useThemeStyles();
+
+    // Declare nonstandard tags and their content model here
+    const customHTMLElementModels = useMemo(
+        () => ({
+            edited: defaultHTMLElementModels.span.extend({
+                tagName: 'edited',
+            }),
+            'alert-text': defaultHTMLElementModels.div.extend({
+                tagName: 'alert-text',
+                mixedUAStyles: {...styles.formError, ...styles.mb0},
+            }),
+            'muted-text': defaultHTMLElementModels.div.extend({
+                tagName: 'muted-text',
+                mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
+            }),
+            comment: defaultHTMLElementModels.div.extend({
+                tagName: 'comment',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
+            'email-comment': defaultHTMLElementModels.div.extend({
+                tagName: 'email-comment',
+                mixedUAStyles: {whiteSpace: 'normal'},
+            }),
+            strong: defaultHTMLElementModels.span.extend({
+                tagName: 'strong',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
+            'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
+            'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
+        }),
+        [styles.colorMuted, styles.formError, styles.mb0],
+    );
+
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
+    const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
 
     return (
         <TRenderEngineProvider
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 5d17e7f0c991..81e9075091c6 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,163 +1,130 @@
-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';
+import CONST from '@src/CONST';
+import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
 
-type BankIcon = {
-    icon: React.FC<SvgProps>;
-    iconSize?: number;
-    iconHeight?: number;
-    iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
+type BankIconParams = {
+    themeStyles: ThemeStyles;
+    bankName?: BankName;
+    isCard?: boolean;
 };
 
 /**
  * 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(bankName: string, isCard = false): BankIcon {
+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.
     if (!isCard) {
         bankIcon.iconSize = variables.iconSizeExtraLarge;
-        bankIcon.iconStyles = [styles.bankIconContainer];
+        bankIcon.iconStyles = [themeStyles.bankIconContainer];
     } else {
         bankIcon.iconHeight = variables.bankCardHeight;
         bankIcon.iconWidth = variables.bankCardWidth;
-        bankIcon.iconStyles = [styles.assignedCardsIconContainer];
+        bankIcon.iconStyles = [themeStyles.assignedCardsIconContainer];
     }
 
     return bankIcon;
 }
+
+export type {BankName};
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 022c740907ea..98449c838b67 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,8 +1,8 @@
 import React, {PureComponent} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import withTheme, {ThemeProps} from '@components/withTheme';
+import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import IconWrapperStyles from './IconWrapperStyles';
 
@@ -41,7 +41,8 @@ type IconProps = {
 
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
-};
+} & ThemeStylesProps &
+    ThemeProps;
 
 // We must use a class component to create an animatable component with the Animated API
 // eslint-disable-next-line react/prefer-stateless-function
@@ -50,7 +51,7 @@ class Icon extends PureComponent<IconProps> {
     public static defaultProps = {
         width: variables.iconSizeNormal,
         height: variables.iconSizeNormal,
-        fill: themeColors.icon,
+        fill: undefined,
         small: false,
         inline: false,
         additionalStyles: [],
@@ -61,19 +62,20 @@ class Icon extends PureComponent<IconProps> {
     render() {
         const width = this.props.small ? variables.iconSizeSmall : this.props.width;
         const height = this.props.small ? variables.iconSizeSmall : this.props.height;
-        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, this.props.additionalStyles];
+        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
+        const fill = this.props.fill ?? this.props.theme.icon;
 
         if (this.props.inline) {
             return (
                 <View
                     testID={`${this.props.src.name} Icon`}
-                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
+                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), this.props.themeStyles.bgTransparent, this.props.themeStyles.overflowVisible]}
                 >
                     <View style={iconStyles}>
                         <this.props.src
                             width={width}
                             height={height}
-                            fill={this.props.fill}
+                            fill={fill}
                             hovered={this.props.hovered?.toString()}
                             pressed={this.props.pressed?.toString()}
                         />
@@ -90,7 +92,7 @@ class Icon extends PureComponent<IconProps> {
                 <this.props.src
                     width={width}
                     height={height}
-                    fill={this.props.fill}
+                    fill={fill}
                     hovered={this.props.hovered?.toString()}
                     pressed={this.props.pressed?.toString()}
                 />
@@ -99,4 +101,4 @@ class Icon extends PureComponent<IconProps> {
     }
 }
 
-export default Icon;
+export default withTheme(withThemeStyles(Icon));
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/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index e9de0111cd23..6e6423a19a35 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
-import theme from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
@@ -12,6 +12,9 @@ type InlineSystemMessageProps = {
 };
 
 function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     if (!message) {
         return null;
     }
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 0d300c5e2179..accf26cac6c1 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,7 @@ 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 participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(ReportUtils.getParticipantsIDs(itemFullReport), personalDetails);
 
             return (
                 <OptionRowLHNData
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 4e01ee4d7830..3b2de574ba17 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -103,7 +103,7 @@ function OptionRowLHN(props) {
         props.style,
     );
     const contentContainerStyles =
-        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] : [styles.flex1];
+        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles(styles)] : [styles.flex1];
     const sidebarInnerRowStyle = StyleSheet.flatten(
         props.viewMode === CONST.OPTION_MODE.COMPACT
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
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/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index db3e076eacca..91f9d9930079 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -6,7 +6,7 @@ import {withOnyx} from 'react-native-onyx';
 import setUserLocation from '@libs/actions/UserLocation';
 import compose from '@libs/compose';
 import getCurrentPosition from '@libs/getCurrentPosition';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
@@ -23,6 +23,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const navigation = useNavigation();
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
+        const styles = useThemeStyles();
 
         const cameraRef = useRef<Mapbox.Camera>(null);
         const [isIdle, setIsIdle] = useState(false);
diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index 1880049b3542..f32413cbc15d 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -10,14 +10,14 @@ import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import setUserLocation from '@userActions/UserLocation';
 import CONST from '@src/CONST';
 import useLocalize from '@src/hooks/useLocalize';
 import useNetwork from '@src/hooks/useNetwork';
 import getCurrentPosition from '@src/libs/getCurrentPosition';
 import ONYXKEYS from '@src/ONYXKEYS';
-import styles from '@src/styles/styles';
 import Direction from './Direction';
 import './mapbox.css';
 import {MapViewHandle} from './MapViewTypes';
@@ -43,6 +43,9 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const {isOffline} = useNetwork();
         const {translate} = useLocalize();
 
+        const theme = useTheme();
+        const styles = useThemeStyles();
+
         const [mapRef, setMapRef] = useState<MapRef | null>(null);
         const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
@@ -179,7 +182,7 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
                                 latitude: currentPosition?.latitude,
                                 zoom: initialState.zoom,
                             }}
-                            style={StyleUtils.getTextColorStyle(themeColors.mapAttributionText) as React.CSSProperties}
+                            style={StyleUtils.getTextColorStyle(theme.mapAttributionText) as React.CSSProperties}
                             mapStyle={styleURL}
                         >
                             {waypoints?.map(({coordinate, markerComponent, id}) => {
diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
index eed879596888..2acdb59d3782 100644
--- a/src/components/MapView/PendingMapView.tsx
+++ b/src/components/MapView/PendingMapView.tsx
@@ -4,13 +4,13 @@ import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import {PendingMapViewProps} from './MapViewTypes';
 
 function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) {
     const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
-
+    const styles = useThemeStyles();
     return (
         <View style={[styles.mapPendingView, style]}>
             {hasTextContent ? (
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index f04212ae113b..6692e7c3e4dd 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -82,7 +82,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                         <Text
                             // eslint-disable-next-line react/no-array-index-key
                             key={`${text}${i}`}
-                            style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsDisplayName]}
+                            style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsDisplayName]}
                         >
                             {text}
                         </Text>
@@ -98,7 +98,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                                 <Text
                                     // eslint-disable-next-line react/no-array-index-key
                                     key={`${text}${i}`}
-                                    style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsHandle]}
+                                    style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsHandle]}
                                 >
                                     {text}
                                 </Text>
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 9883672976e8..a551d4a9205a 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -7,9 +7,9 @@ import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
@@ -38,11 +38,11 @@ const defaultProps = {
     shouldShowHeaderTitle: false,
     shouldParseTitle: false,
     wrapperStyle: [],
-    style: styles.popoverMenuItem,
+    style: undefined,
     titleStyle: {},
     shouldShowTitleIcon: false,
     titleIcon: () => {},
-    descriptionTextStyle: styles.breakWord,
+    descriptionTextStyle: undefined,
     success: false,
     icon: undefined,
     secondaryIcon: undefined,
@@ -86,10 +86,13 @@ const defaultProps = {
 };
 
 const MenuItem = React.forwardRef((props, ref) => {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const style = StyleUtils.combineStyles(props.style, styles.popoverMenuItem);
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = React.useState('');
 
-    const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
+    const isDeleted = _.contains(style, styles.offlineFeedback.deleted);
     const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const titleTextStyle = StyleUtils.combineStyles(
         [
@@ -109,7 +112,7 @@ const MenuItem = React.forwardRef((props, ref) => {
         styles.textLabelSupporting,
         props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
         props.title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
-        props.descriptionTextStyle,
+        props.descriptionTextStyle || styles.breakWord,
         isDeleted ? styles.offlineFeedback.deleted : undefined,
     ]);
 
@@ -176,9 +179,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={props.onSecondaryInteraction}
                     style={({pressed}) => [
-                        props.style,
+                        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,
@@ -206,9 +209,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             icons={props.icon}
                                             size={props.avatarSize}
                                             secondAvatarStyle={[
-                                                StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
-                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
-                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
+                                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.buttonPressedBG) : undefined,
+                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.border) : undefined,
                                             ]}
                                         />
                                     )}
@@ -224,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,
                                                         )
@@ -258,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>
@@ -291,7 +299,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                 <View style={[styles.ml2]}>
                                                     <Icon
                                                         src={props.titleIcon}
-                                                        fill={themeColors.iconSuccessFill}
+                                                        fill={theme.iconSuccessFill}
                                                     />
                                                 </View>
                                             )}
@@ -342,7 +350,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}
                                 {(props.subtitle || props.subtitle === 0) && (
                                     <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                        <Text style={[styles.textLabelSupporting, style]}>{props.subtitle}</Text>
                                     </View>
                                 )}
                                 {!_.isEmpty(props.floatRightAvatars) && (
@@ -361,7 +369,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            fill={props.brickRoadIndicator === 'error' ? themeColors.danger : themeColors.success}
+                                            fill={props.brickRoadIndicator === 'error' ? theme.danger : theme.success}
                                         />
                                     </View>
                                 )}
@@ -374,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 95a7f3adc279..7aeef4d97e31 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -139,11 +139,13 @@ function BaseModal(
                     windowHeight,
                     isSmallScreenWidth,
                 },
+                theme,
+                styles,
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
             ),
-        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, 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 3fa60e6ac765..ebe55d9b7469 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -64,3 +64,4 @@ type BaseModalProps = WindowDimensionsProps &
     };
 
 export default BaseModalProps;
+export type {PopoverAnchorPosition};
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
index bf8bc7719316..880e46b2592a 100644
--- a/src/components/MoneyReportHeader.js
+++ b/src/components/MoneyReportHeader.js
@@ -77,7 +77,7 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
     const isPolicyAdmin = policyType !== CONST.POLICY.TYPE.PERSONAL && lodashGet(policy, 'role') === CONST.POLICY.ROLE.ADMIN;
     const isManager = ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(session, 'accountID', null) === moneyRequestReport.managerID;
     const isPayer = policyType === CONST.POLICY.TYPE.CORPORATE ? isPolicyAdmin && isApproved : isPolicyAdmin || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && isManager);
-    const isDraft = ReportUtils.isReportDraft(moneyRequestReport);
+    const isDraft = ReportUtils.isDraftExpenseReport(moneyRequestReport);
     const shouldShowSettlementButton = useMemo(
         () => isPayer && !isDraft && !isSettled && !moneyRequestReport.isWaitingOnBankAccount && reimbursableTotal !== 0 && !ReportUtils.isArchivedRoom(chatReport),
         [isPayer, isDraft, isSettled, moneyRequestReport, reimbursableTotal, chatReport],
@@ -89,7 +89,8 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
         return isManager && !isDraft && !isApproved && !isSettled;
     }, [policyType, isManager, isDraft, isApproved, isSettled]);
     const shouldShowSubmitButton = isDraft && reimbursableTotal !== 0;
-    const shouldShowNextSteps = isDraft && nextStep && (!_.isEmpty(nextStep.message) || !_.isEmpty(nextStep.expenseMessage));
+    const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
+    const shouldShowNextSteps = isFromPaidPolicy && nextStep && !_.isEmpty(nextStep.message);
     const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextSteps;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
     const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableTotal, moneyRequestReport.currency);
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js
index 362a2dc22b9f..3f2c06be78cf 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/src/components/MoneyReportHeaderStatusBar.js
@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react';
 import {Text, View} from 'react-native';
-import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import * as NextStepUtils from '@libs/NextStepUtils';
 import nextStepPropTypes from '@pages/nextStepPropTypes';
@@ -21,9 +20,9 @@ function MoneyReportHeaderStatusBar({nextStep}) {
     const {translate} = useLocalize();
 
     const messageContent = useMemo(() => {
-        const messageArray = _.isEmpty(nextStep.expenseMessage) ? nextStep.message : nextStep.expenseMessage;
+        const messageArray = nextStep.message;
         return NextStepUtils.parseMessage(messageArray);
-    }, [nextStep.expenseMessage, nextStep.message]);
+    }, [nextStep.message]);
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index febe18f30c7d..179b9bc0f5a1 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import {AvatarSource} from '@libs/UserUtils';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
@@ -63,26 +63,11 @@ type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_S
 
 type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
 
-const avatarSizeToStylesMap: AvatarSizeToStylesMap = {
-    [CONST.AVATAR_SIZE.SMALL]: {
-        singleAvatarStyle: styles.singleAvatarSmall,
-        secondAvatarStyles: styles.secondAvatarSmall,
-    },
-    [CONST.AVATAR_SIZE.LARGE]: {
-        singleAvatarStyle: styles.singleAvatarMedium,
-        secondAvatarStyles: styles.secondAvatarMedium,
-    },
-    [CONST.AVATAR_SIZE.DEFAULT]: {
-        singleAvatarStyle: styles.singleAvatar,
-        secondAvatarStyles: styles.secondAvatar,
-    },
-};
-
 function MultipleAvatars({
     fallbackIcon,
     icons = [],
     size = CONST.AVATAR_SIZE.DEFAULT,
-    secondAvatarStyle = [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
+    secondAvatarStyle: secondAvatarStyleProp,
     shouldStackHorizontally = false,
     shouldDisplayAvatarsInRows = false,
     isHovered = false,
@@ -93,8 +78,31 @@ function MultipleAvatars({
     shouldUseCardBackground = false,
     maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
 }: MultipleAvatarsProps) {
-    let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
-    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
+        () => ({
+            [CONST.AVATAR_SIZE.SMALL]: {
+                singleAvatarStyle: styles.singleAvatarSmall,
+                secondAvatarStyles: styles.secondAvatarSmall,
+            },
+            [CONST.AVATAR_SIZE.LARGE]: {
+                singleAvatarStyle: styles.singleAvatarMedium,
+                secondAvatarStyles: styles.secondAvatarMedium,
+            },
+            [CONST.AVATAR_SIZE.DEFAULT]: {
+                singleAvatarStyle: styles.singleAvatar,
+                secondAvatarStyles: styles.secondAvatar,
+            },
+        }),
+        [styles],
+    );
+
+    const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
+
+    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]);
     const avatarSize = useMemo(() => {
@@ -143,7 +151,7 @@ function MultipleAvatars({
                     <Avatar
                         source={icons[0].source}
                         size={size}
-                        fill={themeColors.iconSuccessFill}
+                        fill={theme.iconSuccessFill}
                         name={icons[0].name}
                         type={icons[0].type}
                         fallbackIcon={icons[0].fallbackIcon}
@@ -153,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;
 
@@ -189,11 +197,12 @@ function MultipleAvatars({
                                                 isPressed,
                                                 isInReportAction,
                                                 shouldUseCardBackground,
+                                                theme,
                                             }),
                                             StyleUtils.getAvatarBorderWidth(size),
                                         ]}
                                         source={icon.source ?? fallbackIcon}
-                                        fill={themeColors.iconSuccessFill}
+                                        fill={theme.iconSuccessFill}
                                         size={size}
                                         name={icon.name}
                                         type={icon.type}
@@ -216,10 +225,11 @@ function MultipleAvatars({
                                             isPressed,
                                             isInReportAction,
                                             shouldUseCardBackground,
+                                            theme,
                                         }),
 
                                         // Set overlay background color with RGBA value so that the text will not inherit opacity
-                                        StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
+                                        StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
                                         StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
                                         icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[3].type) : {},
                                     ]}
@@ -256,7 +266,7 @@ function MultipleAvatars({
                             <View>
                                 <Avatar
                                     source={icons[0].source ?? fallbackIcon}
-                                    fill={themeColors.iconSuccessFill}
+                                    fill={theme.iconSuccessFill}
                                     size={avatarSize}
                                     imageStyles={[singleAvatarStyle]}
                                     name={icons[0].name}
@@ -277,7 +287,7 @@ function MultipleAvatars({
                                     <View>
                                         <Avatar
                                             source={icons[1].source ?? fallbackIcon}
-                                            fill={themeColors.iconSuccessFill}
+                                            fill={theme.iconSuccessFill}
                                             size={avatarSize}
                                             imageStyles={[singleAvatarStyle]}
                                             name={icons[1].name}
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
index 9cacc3621790..01f207b7ba97 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import compose from '@libs/compose';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 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';
@@ -36,20 +36,22 @@ const defaultProps = {
     style: [],
 };
 
-const setStyles = (containerStyles, isSmallScreenWidth) => {
-    if (containerStyles.length) {
-        return containerStyles;
-    }
-    return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
-};
-
 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={[setStyles(props.containerStyles, props.isSmallScreenWidth), styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
+        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
             <Icon
                 src={Expensicons.OfflineCloud}
                 width={variables.iconSizeSmall}
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index ba893aeb2fe4..7a2dfbd2b6da 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -5,8 +5,8 @@ import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import MessagesRow from './MessagesRow';
 
@@ -76,22 +76,24 @@ const defaultProps = {
 /**
  * This method applies the strikethrough to all the children passed recursively
  * @param {Array} children
+ * @param {Object} styles
  * @return {Array}
  */
-function applyStrikeThrough(children) {
+function applyStrikeThrough(children, styles) {
     return React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
             return child;
         }
         const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
         if (child.props.children) {
-            props.children = applyStrikeThrough(child.props.children);
+            props.children = applyStrikeThrough(child.props.children, styles);
         }
         return React.cloneElement(child, props);
     });
 }
 
 function OfflineWithFeedback(props) {
+    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
     const hasErrors = !_.isEmpty(props.errors);
@@ -109,7 +111,7 @@ function OfflineWithFeedback(props) {
 
     // Apply strikethrough to children if needed, but skip it if we are not going to render them
     if (needsStrikeThrough && !hideChildren) {
-        children = applyStrikeThrough(children);
+        children = applyStrikeThrough(children, styles);
     }
     return (
         <View style={props.style}>
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index 5c0f83902e55..7a3b90945a5c 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -6,13 +6,13 @@ import useLocalize from '@hooks/useLocalize';
 import Log from '@libs/Log';
 import fontFamily from '@styles/fontFamily';
 import fontWeightBold from '@styles/fontWeight/bold';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import './index.css';
 import onfidoPropTypes from './onfidoPropTypes';
 
-function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate}) {
+function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate, theme}) {
     OnfidoSDK.init({
         token: sdkToken,
         containerId: CONST.ONFIDO.CONTAINER_ID,
@@ -25,35 +25,35 @@ function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLo
             fontWeightTitle: fontWeightBold,
             fontWeightSubtitle: 400,
             fontSizeSubtitle: `${variables.fontSizeNormal}px`,
-            colorContentTitle: themeColors.text,
-            colorContentSubtitle: themeColors.text,
-            colorContentBody: themeColors.text,
+            colorContentTitle: theme.text,
+            colorContentSubtitle: theme.text,
+            colorContentBody: theme.text,
             borderRadiusButton: `${variables.buttonBorderRadius}px`,
-            colorBackgroundSurfaceModal: themeColors.appBG,
-            colorBorderDocTypeButton: themeColors.border,
-            colorBorderDocTypeButtonHover: themeColors.transparent,
-            colorBorderButtonPrimaryHover: themeColors.transparent,
-            colorBackgroundButtonPrimary: themeColors.success,
-            colorBackgroundButtonPrimaryHover: themeColors.successHover,
-            colorBackgroundButtonPrimaryActive: themeColors.successHover,
-            colorBorderButtonPrimary: themeColors.success,
-            colorContentButtonSecondaryText: themeColors.text,
-            colorBackgroundButtonSecondary: themeColors.border,
-            colorBackgroundButtonSecondaryHover: themeColors.icon,
-            colorBackgroundButtonSecondaryActive: themeColors.icon,
-            colorBorderButtonSecondary: themeColors.border,
-            colorBackgroundIcon: themeColors.transparent,
-            colorContentLinkTextHover: themeColors.appBG,
-            colorBorderLinkUnderline: themeColors.link,
-            colorBackgroundLinkHover: themeColors.link,
-            colorBackgroundLinkActive: themeColors.link,
-            authAccentColor: themeColors.link,
-            colorBackgroundInfoPill: themeColors.link,
-            colorBackgroundSelector: themeColors.appBG,
-            colorBackgroundDocTypeButton: themeColors.success,
-            colorBackgroundDocTypeButtonHover: themeColors.successHover,
-            colorBackgroundButtonIconHover: themeColors.transparent,
-            colorBackgroundButtonIconActive: themeColors.transparent,
+            colorBackgroundSurfaceModal: theme.appBG,
+            colorBorderDocTypeButton: theme.border,
+            colorBorderDocTypeButtonHover: theme.transparent,
+            colorBorderButtonPrimaryHover: theme.transparent,
+            colorBackgroundButtonPrimary: theme.success,
+            colorBackgroundButtonPrimaryHover: theme.successHover,
+            colorBackgroundButtonPrimaryActive: theme.successHover,
+            colorBorderButtonPrimary: theme.success,
+            colorContentButtonSecondaryText: theme.text,
+            colorBackgroundButtonSecondary: theme.border,
+            colorBackgroundButtonSecondaryHover: theme.icon,
+            colorBackgroundButtonSecondaryActive: theme.icon,
+            colorBorderButtonSecondary: theme.border,
+            colorBackgroundIcon: theme.transparent,
+            colorContentLinkTextHover: theme.appBG,
+            colorBorderLinkUnderline: theme.link,
+            colorBackgroundLinkHover: theme.link,
+            colorBackgroundLinkActive: theme.link,
+            authAccentColor: theme.link,
+            colorBackgroundInfoPill: theme.link,
+            colorBackgroundSelector: theme.appBG,
+            colorBackgroundDocTypeButton: theme.success,
+            colorBackgroundDocTypeButtonHover: theme.successHover,
+            colorBackgroundButtonIconHover: theme.transparent,
+            colorBackgroundButtonIconActive: theme.transparent,
         },
         steps: [
             {
@@ -120,6 +120,7 @@ function logOnFidoEvent(event) {
 
 const Onfido = forwardRef((props, ref) => {
     const {preferredLocale, translate} = useLocalize();
+    const theme = useTheme();
 
     useEffect(() => {
         initializeOnfido({
@@ -129,6 +130,7 @@ const Onfido = forwardRef((props, ref) => {
             onUserExit: props.onUserExit,
             preferredLocale,
             translate,
+            theme,
         });
 
         window.addEventListener('userAnalyticsEvent', logOnFidoEvent);
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 be89132a0731..9c8b76515fe8 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -16,13 +16,13 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigationFocus from '@components/withNavigationFocus';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
+import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
 import getPlatform from '@libs/getPlatform';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
 import setSelection from '@libs/setSelection';
-import colors from '@styles/colors';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import {defaultProps as optionsSelectorDefaultProps, propTypes as optionsSelectorPropTypes} from './optionsSelectorPropTypes';
@@ -51,6 +51,8 @@ const propTypes = {
 
     ...optionsSelectorPropTypes,
     ...withLocalizePropTypes,
+    ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 const defaultProps = {
@@ -59,7 +61,7 @@ const defaultProps = {
     referralContentType: CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND,
     safeAreaPaddingBottomStyle: {},
     contentContainerStyles: [],
-    listContainerStyles: [styles.flex1],
+    listContainerStyles: undefined,
     listStyles: [],
     ...optionsSelectorDefaultProps,
 };
@@ -460,6 +462,8 @@ class BaseOptionsSelector extends Component {
         const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText;
         const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
         const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle;
+        const listContainerStyles = this.props.listContainerStyles || [this.props.themeStyles.flex1];
+
         const textInput = (
             <TextInput
                 ref={(el) => (this.textInput = el)}
@@ -489,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}
@@ -516,7 +520,7 @@ class BaseOptionsSelector extends Component {
                 }}
                 contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]}
                 sectionHeaderStyle={this.props.sectionHeaderStyle}
-                listContainerStyles={this.props.listContainerStyles}
+                listContainerStyles={listContainerStyles}
                 listStyles={this.props.listStyles}
                 isLoading={!this.props.shouldShowOptions}
                 showScrollIndicator={this.props.showScrollIndicator}
@@ -528,7 +532,7 @@ class BaseOptionsSelector extends Component {
                 renderFooterContent={() =>
                     shouldShowShowMoreButton && (
                         <ShowMoreButton
-                            containerStyle={{...styles.mt2, ...styles.mb5}}
+                            containerStyle={{...this.props.themeStyles.mt2, ...this.props.themeStyles.mb5}}
                             currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage}
                             totalCount={this.state.allOptions.length}
                             onPress={this.incrementPage}
@@ -540,8 +544,24 @@ class BaseOptionsSelector extends Component {
 
         const optionsAndInputsBelowThem = (
             <>
-                <View style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100, styles.flexRow]}>{optionsList}</View>
-                <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0] : []}>
+                <View
+                    style={[
+                        this.props.themeStyles.flexGrow0,
+                        this.props.themeStyles.flexShrink1,
+                        this.props.themeStyles.flexBasisAuto,
+                        this.props.themeStyles.w100,
+                        this.props.themeStyles.flexRow,
+                    ]}
+                >
+                    {optionsList}
+                </View>
+                <View
+                    style={
+                        this.props.shouldUseStyleForChildren
+                            ? [this.props.themeStyles.ph5, this.props.themeStyles.pv5, this.props.themeStyles.flexGrow1, this.props.themeStyles.flexShrink0]
+                            : []
+                    }
+                >
                     {this.props.children}
                     {this.props.shouldShowTextInput && textInput}
                 </View>
@@ -556,18 +576,18 @@ class BaseOptionsSelector extends Component {
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
                 shouldResetIndexOnEndReached={false}
             >
-                <View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto]}>
+                <View style={[this.props.themeStyles.flexGrow1, this.props.themeStyles.flexShrink1, this.props.themeStyles.flexBasisAuto]}>
                     {/*
                      * The OptionsList component uses a SectionList which uses a VirtualizedList internally.
                      * VirtualizedList cannot be directly nested within ScrollViews of the same orientation.
                      * To work around this, we wrap the OptionsList component with a horizontal ScrollView.
                      */}
                     {this.props.shouldTextInputAppearBelowOptions && this.props.shouldAllowScrollingChildren && (
-                        <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+                        <ScrollView contentContainerStyle={[this.props.themeStyles.flexGrow1]}>
                             <ScrollView
                                 horizontal
                                 bounces={false}
-                                contentContainerStyle={[styles.flex1, styles.flexColumn]}
+                                contentContainerStyle={[this.props.themeStyles.flex1, this.props.themeStyles.flexColumn]}
                             >
                                 {optionsAndInputsBelowThem}
                             </ScrollView>
@@ -578,13 +598,13 @@ class BaseOptionsSelector extends Component {
 
                     {!this.props.shouldTextInputAppearBelowOptions && (
                         <>
-                            <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pb3] : []}>
+                            <View style={this.props.shouldUseStyleForChildren ? [this.props.themeStyles.ph5, this.props.themeStyles.pb3] : []}>
                                 {this.props.children}
                                 {this.props.shouldShowTextInput && textInput}
                                 {Boolean(this.props.textInputAlert) && (
                                     <FormHelpMessage
                                         message={this.props.textInputAlert}
-                                        style={[styles.mb3]}
+                                        style={[this.props.themeStyles.mb3]}
                                         isError={false}
                                     />
                                 )}
@@ -594,20 +614,29 @@ class BaseOptionsSelector extends Component {
                     )}
                 </View>
                 {this.props.shouldShowReferralCTA && (
-                    <View style={[styles.ph5, styles.pb5, styles.flexShrink0]}>
+                    <View style={[this.props.themeStyles.ph5, this.props.themeStyles.pb5, this.props.themeStyles.flexShrink0]}>
                         <PressableWithoutFeedback
                             onPress={() => {
                                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(this.props.referralContentType));
                             }}
-                            style={[styles.p5, styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10}]}
+                            style={[
+                                this.props.themeStyles.p5,
+                                this.props.themeStyles.w100,
+                                this.props.themeStyles.br2,
+                                this.props.themeStyles.highlightBG,
+                                this.props.themeStyles.flexRow,
+                                this.props.themeStyles.justifyContentBetween,
+                                this.props.themeStyles.alignItemsCenter,
+                                {gap: 10},
+                            ]}
                             accessibilityLabel="referral"
                             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         >
                             <Text>
                                 {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText1`)}
                                 <Text
-                                    color={colors.green400}
-                                    style={styles.textStrong}
+                                    color={this.props.theme.success}
+                                    style={this.props.themeStyles.textStrong}
                                 >
                                     {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText2`)}
                                 </Text>
@@ -626,7 +655,7 @@ class BaseOptionsSelector extends Component {
                         {shouldShowDefaultConfirmButton && (
                             <Button
                                 success
-                                style={[styles.w100]}
+                                style={[this.props.themeStyles.w100]}
                                 text={defaultConfirmButtonText}
                                 onPress={this.props.onConfirmSelection}
                                 pressOnEnter
@@ -644,4 +673,4 @@ class BaseOptionsSelector extends Component {
 BaseOptionsSelector.defaultProps = defaultProps;
 BaseOptionsSelector.propTypes = propTypes;
 
-export default compose(withLocalize, withNavigationFocus)(BaseOptionsSelector);
+export default compose(withLocalize, withNavigationFocus, withThemeStyles, withTheme)(BaseOptionsSelector);
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/PDFView/index.js b/src/components/PDFView/index.js
index fd01176d9fb2..50e737ba54d3 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -10,10 +10,10 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize from '@components/withLocalize';
+import withThemeStyles from '@components/withThemeStyles';
 import withWindowDimensions from '@components/withWindowDimensions';
 import compose from '@libs/compose';
 import Log from '@libs/Log';
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import * as CanvasSize from '@userActions/CanvasSize';
 import CONST from '@src/CONST';
@@ -262,6 +262,7 @@ class PDFView extends Component {
     }
 
     renderPDFView() {
+        const styles = this.props.themeStyles;
         const pageWidth = this.calculatePageWidth();
         const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter];
 
@@ -323,6 +324,7 @@ class PDFView extends Component {
     }
 
     render() {
+        const styles = this.props.themeStyles;
         return this.props.onPress ? (
             <PressableWithoutFeedback
                 onPress={this.props.onPress}
@@ -344,6 +346,7 @@ PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 export default compose(
     withLocalize,
     withWindowDimensions,
+    withThemeStyles,
     withOnyx({
         maxCanvasArea: {
             key: ONYXKEYS.MAX_CANVAS_AREA,
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 61ebcc001854..546f9b1a8933 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import stylePropTypes from '@styles/stylePropTypes';
 
@@ -31,6 +32,8 @@ const propTypes = {
     errorLabelStyles: stylePropTypes,
 
     ...windowDimensionsPropTypes,
+
+    ...withThemeStylesPropTypes,
 };
 
 const defaultProps = {
diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js
index 1cd3fe89112a..084cabc02234 100644
--- a/src/components/Picker/BasePicker.js
+++ b/src/components/Picker/BasePicker.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useContext, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import RNPickerSelect from 'react-native-picker-select';
 import _ from 'underscore';
@@ -9,8 +9,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import refPropTypes from '@components/refPropTypes';
 import {ScrollContext} from '@components/ScrollViewWithContext';
 import Text from '@components/Text';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** A forwarded ref */
@@ -97,19 +97,16 @@ const defaultProps = {
     value: undefined,
     placeholder: {},
     size: 'normal',
-    icon: (size) => (
-        <Icon
-            src={Expensicons.DownArrow}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...(size === 'small' ? {width: styles.pickerSmall().icon.width, height: styles.pickerSmall().icon.height} : {})}
-        />
-    ),
+    icon: undefined,
     shouldFocusPicker: false,
     onBlur: () => {},
     additionalPickerEvents: () => {},
 };
 
 function BasePicker(props) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
     const [isHighlighted, setIsHighlighted] = useState(false);
 
     // reference to the root View
@@ -124,7 +121,7 @@ function BasePicker(props) {
         ? {}
         : {
               ...props.placeholder,
-              color: themeColors.pickerOptionsTextColor,
+              color: theme.pickerOptionsTextColor,
           };
 
     useEffect(() => {
@@ -164,6 +161,28 @@ function BasePicker(props) {
         setIsHighlighted(false);
     };
 
+    const {icon, size} = props;
+
+    const iconToRender = useMemo(() => {
+        if (icon) {
+            return () => icon(size);
+        }
+
+        // eslint-disable-next-line react/display-name
+        return () => (
+            <Icon
+                src={Expensicons.DownArrow}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(size === 'small'
+                    ? {
+                          width: styles.pickerSmall().icon.width,
+                          height: styles.pickerSmall().icon.height,
+                      }
+                    : {})}
+            />
+        );
+    }, [icon, size, styles]);
+
     useImperativeHandle(props.forwardedRef, () => ({
         /**
          * Focuses the picker (if configured to do so)
@@ -236,12 +255,12 @@ function BasePicker(props) {
                 <RNPickerSelect
                     onValueChange={onInputChange}
                     // We add a text color to prevent white text on white background dropdown items on Windows
-                    items={_.map(props.items, (item) => ({...item, color: themeColors.pickerOptionsTextColor}))}
-                    style={props.size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)}
+                    items={_.map(props.items, (item) => ({...item, color: theme.pickerOptionsTextColor}))}
+                    style={size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)}
                     useNativeAndroidPickerStyle={false}
                     placeholder={placeholder}
                     value={props.value}
-                    Icon={() => props.icon(props.size)}
+                    Icon={iconToRender}
                     disabled={props.isDisabled}
                     fixAndroidTouchableBug
                     onOpen={enableHighlight}
diff --git a/src/components/PlaidLink/index.native.tsx b/src/components/PlaidLink/index.native.tsx
index 02d4669bc861..c46a9df2076e 100644
--- a/src/components/PlaidLink/index.native.tsx
+++ b/src/components/PlaidLink/index.native.tsx
@@ -1,11 +1,10 @@
 import {useEffect} from 'react';
-import {dismissLink, LinkEvent, openLink, useDeepLinkRedirector, usePlaidEmitter} from 'react-native-plaid-link-sdk';
+import {dismissLink, LinkEvent, openLink, usePlaidEmitter} from 'react-native-plaid-link-sdk';
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
 import PlaidLinkProps from './types';
 
 function PlaidLink({token, onSuccess = () => {}, onExit = () => {}, onEvent}: PlaidLinkProps) {
-    useDeepLinkRedirector();
     usePlaidEmitter((event: LinkEvent) => {
         Log.info('[PlaidLink] Handled Plaid Event: ', false, {...event});
         onEvent(event.eventName, event.metadata);
diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
deleted file mode 100644
index c8d37c2ad61c..000000000000
--- a/src/components/Popover/index.native.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import _ from 'underscore';
-import Modal from '@components/Modal';
-import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes as popoverPropTypes} from './popoverPropTypes';
-
-const propTypes = {
-    ..._.omit(popoverPropTypes, _.keys(windowDimensionsPropTypes)),
-};
-
-/*
- * This is a convenience wrapper around the Modal component for a responsive Popover.
- * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
- */
-function Popover(props) {
-    const propsWithoutAnimation = _.omit(props, ['animationIn', 'animationOut', 'popoverAnchorPosition', 'disableAnimation']);
-    return (
-        <Modal
-            type={props.fromSidebarMediumScreen ? CONST.MODAL.MODAL_TYPE.POPOVER : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
-            popoverAnchorPosition={props.fromSidebarMediumScreen ? props.anchorPosition : undefined}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...propsWithoutAnimation}
-            // Mobile will always has fullscreen menu
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            fullscreen
-        />
-    );
-}
-
-Popover.propTypes = propTypes;
-Popover.defaultProps = defaultProps;
-Popover.displayName = 'Popover';
-
-export default Popover;
diff --git a/src/components/Popover/index.native.tsx b/src/components/Popover/index.native.tsx
new file mode 100644
index 000000000000..3fff04d00d2f
--- /dev/null
+++ b/src/components/Popover/index.native.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Modal from '@components/Modal';
+import CONST from '@src/CONST';
+import {PopoverProps} from './types';
+
+/*
+ * This is a convenience wrapper around the Modal component for a responsive Popover.
+ * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
+ */
+function Popover({animationIn, animationOut, popoverAnchorPosition, disableAnimation, anchorPosition = {}, fromSidebarMediumScreen, ...propsWithoutAnimation}: PopoverProps) {
+    return (
+        <Modal
+            type={fromSidebarMediumScreen ? CONST.MODAL.MODAL_TYPE.POPOVER : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+            popoverAnchorPosition={fromSidebarMediumScreen ? anchorPosition : undefined}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...propsWithoutAnimation}
+            // Mobile will always has fullscreen menu
+            fullscreen
+            animationIn="slideInUp"
+            animationOut="slideOutDown"
+        />
+    );
+}
+
+Popover.displayName = 'Popover';
+
+export default Popover;
diff --git a/src/components/Popover/index.js b/src/components/Popover/index.tsx
similarity index 78%
rename from src/components/Popover/index.js
rename to src/components/Popover/index.tsx
index b8889e806629..bf79415d4794 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.tsx
@@ -5,14 +5,30 @@ import {PopoverContext} from '@components/PopoverProvider';
 import PopoverWithoutOverlay from '@components/PopoverWithoutOverlay';
 import withWindowDimensions from '@components/withWindowDimensions';
 import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './popoverPropTypes';
+import {PopoverWithWindowDimensionsProps} from './types';
 
 /*
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
-function Popover(props) {
-    const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition, anchorRef} = props;
+
+function Popover(props: PopoverWithWindowDimensionsProps) {
+    const {
+        isVisible,
+        onClose,
+        isSmallScreenWidth,
+        fullscreen,
+        animationInTiming = CONST.ANIMATED_TRANSITION,
+        onLayout,
+        animationOutTiming,
+        disableAnimation = true,
+        withoutOverlay,
+        anchorPosition = {},
+        anchorRef = () => {},
+        animationIn = 'fadeIn',
+        animationOut = 'fadeOut',
+    } = props;
+
     const withoutOverlayRef = useRef(null);
     const {close, popover} = React.useContext(PopoverContext);
 
@@ -33,7 +49,7 @@ function Popover(props) {
     }, [onClose, isVisible]);
 
     const onCloseWithPopoverContext = () => {
-        if (popover) {
+        if (popover && 'current' in anchorRef) {
             close(anchorRef);
         }
         onClose();
@@ -51,6 +67,8 @@ function Popover(props) {
                 animationOutTiming={disableAnimation ? 1 : animationOutTiming}
                 shouldCloseOnOutsideClick
                 onLayout={onLayout}
+                animationIn={animationIn}
+                animationOut={animationOut}
             />,
             document.body,
         );
@@ -62,6 +80,8 @@ function Popover(props) {
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
                 withoutOverlayRef={withoutOverlayRef}
+                animationIn={animationIn}
+                animationOut={animationOut}
             />,
             document.body,
         );
@@ -78,12 +98,12 @@ function Popover(props) {
             animationInTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationInTiming}
             animationOutTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationOutTiming}
             onLayout={onLayout}
+            animationIn={animationIn}
+            animationOut={animationOut}
         />
     );
 }
 
-Popover.propTypes = propTypes;
-Popover.defaultProps = defaultProps;
 Popover.displayName = 'Popover';
 
 export default withWindowDimensions(Popover);
diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts
new file mode 100644
index 000000000000..7f7e2829770c
--- /dev/null
+++ b/src/components/Popover/types.ts
@@ -0,0 +1,42 @@
+import BaseModalProps, {PopoverAnchorPosition} from '@components/Modal/types';
+import {WindowDimensionsProps} from '@components/withWindowDimensions/types';
+
+type AnchorAlignment = {horizontal: string; vertical: string};
+
+type PopoverDimensions = {
+    width: number;
+    height: number;
+};
+
+type PopoverProps = BaseModalProps & {
+    /** The anchor position of the popover */
+    anchorPosition?: PopoverAnchorPosition;
+
+    /** The anchor alignment of the popover */
+    anchorAlignment: AnchorAlignment;
+
+    /** The anchor ref of the popover */
+    anchorRef: React.RefObject<HTMLElement>;
+
+    /** Whether disable the animations */
+    disableAnimation: boolean;
+
+    /** Whether we don't want to show overlay */
+    withoutOverlay: boolean;
+
+    /** The dimensions of the popover */
+    popoverDimensions?: PopoverDimensions;
+
+    /** The ref of the popover */
+    withoutOverlayRef?: React.RefObject<HTMLElement>;
+
+    /** Whether we want to show the popover on the right side of the screen */
+    fromSidebarMediumScreen?: boolean;
+
+    /** The popover children */
+    children: React.ReactNode;
+};
+
+type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;
+
+export type {PopoverProps, PopoverWithWindowDimensionsProps};
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 8b9dd4ac7a61..fd162c78fe2c 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -6,10 +6,12 @@ import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
 function Popover(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {onOpen, close} = React.useContext(PopoverContext);
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
@@ -19,6 +21,8 @@ function Popover(props) {
             windowHeight: props.windowHeight,
             isSmallScreenWidth: false,
         },
+        theme,
+        styles,
         props.anchorPosition,
         props.innerContainerStyle,
         props.outerStyle,
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
index 1576fe18da54..692733a7fe0c 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -1,30 +1,15 @@
 import React, {ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import {GestureResponderEvent, Pressable, View, ViewStyle} from 'react-native';
+import {GestureResponderEvent, Pressable, View} from 'react-native';
 import useSingleExecution from '@hooks/useSingleExecution';
 import Accessibility from '@libs/Accessibility';
 import HapticFeedback from '@libs/HapticFeedback';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableProps from './types';
 
-/**
- * Returns the cursor style based on the state of Pressable
- */
-function getCursorStyle(isDisabled: boolean, isText: boolean): Pick<ViewStyle, 'cursor'> {
-    if (isDisabled) {
-        return styles.cursorDisabled;
-    }
-
-    if (isText) {
-        return styles.cursorText;
-    }
-
-    return styles.cursorPointer;
-}
-
 function GenericPressable(
     {
         children,
@@ -51,6 +36,7 @@ function GenericPressable(
     }: PressableProps,
     ref: ForwardedRef<View>,
 ) {
+    const styles = useThemeStyles();
     const {isExecuting, singleExecution} = useSingleExecution();
     const isScreenReaderActive = Accessibility.useScreenReaderStatus();
     const [hitSlop, onLayout] = Accessibility.useAutoHitSlop();
@@ -71,6 +57,19 @@ function GenericPressable(
 
     const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]);
 
+    /**
+     * Returns the cursor style based on the state of Pressable
+     */
+    const cursorStyle = useMemo(() => {
+        if (shouldUseDisabledCursor) {
+            return styles.cursorDisabled;
+        }
+        if ([rest.accessibilityRole, rest.role].includes('text')) {
+            return styles.cursorText;
+        }
+        return styles.cursorPointer;
+    }, [styles, shouldUseDisabledCursor, rest.accessibilityRole, rest.role]);
+
     const onLongPressHandler = useCallback(
         (event: GestureResponderEvent) => {
             if (isDisabled) {
@@ -132,7 +131,7 @@ function GenericPressable(
             onPressIn={!isDisabled ? onPressIn : undefined}
             onPressOut={!isDisabled ? onPressOut : undefined}
             style={(state) => [
-                getCursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')),
+                cursorStyle,
                 StyleUtils.parseStyleFromFunction(style, state),
                 isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state),
                 state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state),
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index 7ded9320b802..914b9dc674c3 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -8,8 +8,9 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
-import styles from '@styles/styles';
 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';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
@@ -66,6 +67,8 @@ function PressableWithDelayToggle(
     }: PressableWithDelayToggleProps,
     ref: ForwardedRef<RNText | View>,
 ) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const [isActive, temporarilyDisableInteractions] = useThrottledButtonState();
 
     const updatePressState = () => {
@@ -119,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/RadioButtons.tsx b/src/components/RadioButtons.tsx
index f8f9b345f855..b83710bd85bf 100644
--- a/src/components/RadioButtons.tsx
+++ b/src/components/RadioButtons.tsx
@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 
@@ -21,7 +20,7 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
-        <View>
+        <>
             {items.map((item) => (
                 <RadioButtonWithLabel
                     key={item.value}
@@ -34,10 +33,11 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
                     label={item.label}
                 />
             ))}
-        </View>
+        </>
     );
 }
 
 RadioButtons.displayName = 'RadioButtons';
 
+export type {Choice};
 export default RadioButtons;
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 652fb5a84e76..466a5a6eec51 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -170,7 +170,8 @@ function MoneyRequestPreview(props) {
     const isDeleted = lodashGet(props.action, 'pendingAction', null) === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 
     // Show the merchant for IOUs and expenses only if they are custom or not related to scanning smartscan
-    const shouldShowMerchant = !_.isEmpty(requestMerchant) && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
+    const shouldShowMerchant =
+        !_.isEmpty(requestMerchant) && !props.isBillSplit && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
     const shouldShowDescription = !_.isEmpty(description) && !shouldShowMerchant && !isScanning;
 
     const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction)] : [];
@@ -321,7 +322,7 @@ function MoneyRequestPreview(props) {
                                     </View>
                                 )}
                             </View>
-                            {shouldShowMerchant && !props.isBillSplit && (
+                            {shouldShowMerchant && (
                                 <View style={[styles.flexRow]}>
                                     <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>
                                         {hasPendingWaypoints ? requestMerchant.replace(CONST.REGEX.FIRST_SPACE, props.translate('common.tbd')) : requestMerchant}
@@ -333,9 +334,7 @@ function MoneyRequestPreview(props) {
                                     {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
                                         <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
                                     )}
-                                    {(shouldShowDescription || (shouldShowMerchant && props.isBillSplit)) && (
-                                        <Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>
-                                    )}
+                                    {shouldShowDescription && <Text style={[styles.colorMuted]}>{description}</Text>}
                                 </View>
                                 {props.isBillSplit && !_.isEmpty(participantAccountIDs) && requestAmount > 0 && (
                                     <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index f04029182d45..8cb8406e8a0d 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -120,7 +120,7 @@ function ReportPreview(props) {
     const numberOfRequests = ReportActionUtils.getNumberOfMoneyRequests(props.action);
     const moneyRequestComment = lodashGet(props.action, 'childLastMoneyRequestComment', '');
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.chatReport);
-    const isReportDraft = isPolicyExpenseChat && ReportUtils.isReportDraft(props.iouReport);
+    const isDraftExpenseReport = isPolicyExpenseChat && ReportUtils.isDraftExpenseReport(props.iouReport);
 
     const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(props.iouReportID);
     const numberOfScanningReceipts = _.filter(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction)).length;
@@ -143,7 +143,7 @@ function ReportPreview(props) {
             scanningReceipts: numberOfScanningReceipts,
         });
 
-    const shouldShowSubmitButton = isReportDraft && reimbursableSpend !== 0;
+    const shouldShowSubmitButton = isDraftExpenseReport && reimbursableSpend !== 0;
 
     const getDisplayAmount = () => {
         if (hasPendingWaypoints) {
@@ -189,7 +189,7 @@ function ReportPreview(props) {
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowSettlementButton = ReportUtils.isControlPolicyExpenseChat(props.chatReport)
         ? props.policy.role === CONST.POLICY.ROLE.ADMIN && ReportUtils.isReportApproved(props.iouReport) && !iouSettled && !iouCanceled
-        : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isReportDraft && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0;
+        : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isDraftExpenseReport && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0;
 
     return (
         <View style={[styles.chatItemMessage, ...props.containerStyles]}>
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..448cb5008cf3 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -9,6 +9,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,6 +24,7 @@ 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';
@@ -43,6 +45,7 @@ const propTypes = {
 
 function TaskView(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     useEffect(() => {
         Task.setTaskReport({...props.report});
     }, [props.report]);
@@ -54,6 +57,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 +83,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 +123,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 +152,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}
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/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index f9173c15da7d..16bf9ba0761c 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -16,7 +16,7 @@ import useKeyboardState from '@hooks/useKeyboardState';
 import useNetwork from '@hooks/useNetwork';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './propTypes';
@@ -44,6 +44,7 @@ const ScreenWrapper = React.forwardRef(
     ) => {
         const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
         const {initialHeight} = useInitialDimensions();
+        const styles = useThemeStyles();
         const keyboardState = useKeyboardState();
         const {isDevelopment} = useEnvironment();
         const {isOffline} = useNetwork();
@@ -59,14 +60,14 @@ const ScreenWrapper = React.forwardRef(
 
         const panResponder = useRef(
             PanResponder.create({
-                onStartShouldSetPanResponderCapture: (e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS,
+                onStartShouldSetPanResponderCapture: (_e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS,
                 onPanResponderRelease: toggleTestToolsModal,
             }),
         ).current;
 
         const keyboardDissmissPanResponder = useRef(
             PanResponder.create({
-                onMoveShouldSetPanResponderCapture: (e, gestureState) => {
+                onMoveShouldSetPanResponderCapture: (_e, gestureState) => {
                     const isHorizontalSwipe = Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
                     const shouldDismissKeyboard = shouldDismissKeyboardBeforeClose && isKeyboardShown && Browser.isMobile();
 
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
index cf8ee6af975d..7a7e23388722 100644
--- a/src/components/SelectCircle.tsx
+++ b/src/components/SelectCircle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import globalStyles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 
@@ -10,16 +10,19 @@ type SelectCircleProps = {
     isChecked: boolean;
 
     /** Additional styles to pass to SelectCircle */
-    styles?: StyleProp<ViewStyle>;
+    selectCircleStyles?: StyleProp<ViewStyle>;
 };
 
-function SelectCircle({isChecked = false, styles}: SelectCircleProps) {
+function SelectCircle({isChecked = false, selectCircleStyles}: SelectCircleProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     return (
-        <View style={[globalStyles.selectCircle, globalStyles.alignSelfCenter, styles]}>
+        <View style={[styles.selectCircle, styles.alignSelfCenter, selectCircleStyles]}>
             {isChecked && (
                 <Icon
                     src={Expensicons.Checkmark}
-                    fill={themeColors.iconSuccessFill}
+                    fill={theme.iconSuccessFill}
                 />
             )}
         </View>
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/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
index f983a468cc1c..5f1620ac7c88 100644
--- a/src/components/ShowMoreButton/index.js
+++ b/src/components/ShowMoreButton/index.js
@@ -7,8 +7,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
 import * as NumberFormatUtils from '@libs/NumberFormatUtils';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Additional styles for container */
@@ -32,6 +32,8 @@ const defaultProps = {
 
 function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
     const {translate, preferredLocale} = useLocalize();
+    const theme = useTheme();
+    const styles = useThemeStyles();
 
     const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount);
 
@@ -51,7 +53,7 @@ function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
                     style={styles.mh0}
                     small
                     shouldShowRightIcon
-                    iconFill={themeColors.icon}
+                    iconFill={theme.icon}
                     iconRight={Expensicons.DownArrow}
                     text={translate('common.showMore')}
                     accessibilityLabel={translate('common.showMore')}
diff --git a/src/components/SingleChoiceQuestion.tsx b/src/components/SingleChoiceQuestion.tsx
new file mode 100644
index 000000000000..07d4dfe817dd
--- /dev/null
+++ b/src/components/SingleChoiceQuestion.tsx
@@ -0,0 +1,39 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import {Text as RNText} from 'react-native';
+import useThemeStyles from '@styles/useThemeStyles';
+import FormHelpMessage from './FormHelpMessage';
+import RadioButtons, {Choice} from './RadioButtons';
+import Text from './Text';
+
+type SingleChoiceQuestionProps = {
+    prompt: string;
+    errorText?: string | string[];
+    possibleAnswers: Choice[];
+    currentQuestionIndex: number;
+    onInputChange: (value: string) => void;
+};
+
+function SingleChoiceQuestion({prompt, errorText, possibleAnswers, currentQuestionIndex, onInputChange}: SingleChoiceQuestionProps, ref: ForwardedRef<RNText>) {
+    const styles = useThemeStyles();
+
+    return (
+        <>
+            <Text
+                ref={ref}
+                style={[styles.textStrong, styles.mb5]}
+            >
+                {prompt}
+            </Text>
+            <RadioButtons
+                items={possibleAnswers}
+                key={currentQuestionIndex}
+                onPress={onInputChange}
+            />
+            <FormHelpMessage message={errorText} />
+        </>
+    );
+}
+
+SingleChoiceQuestion.displayName = 'SingleChoiceQuestion';
+
+export default forwardRef(SingleChoiceQuestion);
diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js
index 967ae5443a81..9567ad2331ef 100644
--- a/src/components/SingleOptionSelector.js
+++ b/src/components/SingleOptionSelector.js
@@ -51,7 +51,7 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption, trans
                     >
                         <SelectCircle
                             isChecked={selectedOptionKey ? selectedOptionKey === option.key : false}
-                            styles={[styles.ml0, styles.singleOptionSelectorCircle]}
+                            selectCircleStyles={[styles.ml0, styles.singleOptionSelectorCircle]}
                         />
                         <Text>{translate(option.label)}</Text>
                     </PressableWithoutFeedback>
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 b6ee359dc4ca..83601dbc27d8 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import React, {useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import TabSelectorItem from './TabSelectorItem';
 
@@ -68,24 +68,28 @@ const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => {
     return activeValue;
 };
 
-const getBackgroundColor = (position, routesLength, tabIndex, affectedTabs) => {
-    if (routesLength > 1) {
-        const inputRange = Array.from({length: routesLength}, (v, i) => i);
-
-        return position.interpolate({
-            inputRange,
-            outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? themeColors.border : themeColors.appBG)),
-        });
-    }
-    return themeColors.border;
-};
-
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]);
     const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs);
 
+    const getBackgroundColor = useCallback(
+        (routesLength, tabIndex, affectedTabs) => {
+            if (routesLength > 1) {
+                const inputRange = Array.from({length: routesLength}, (v, i) => i);
+
+                return position.interpolate({
+                    inputRange,
+                    outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG)),
+                });
+            }
+            return theme.border;
+        },
+        [theme, position],
+    );
+
     React.useEffect(() => {
         // It is required to wait transition end to reset affectedAnimatedTabs because tabs style is still animating during transition.
         setTimeout(() => {
@@ -98,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/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 60863cfb5771..347a1b0dce4d 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -28,6 +28,7 @@ function BaseTextInput(props) {
     const styles = useThemeStyles();
     const initialValue = props.value || props.defaultValue || '';
     const initialActiveLabel = props.forceActiveLabel || initialValue.length > 0 || Boolean(props.prefixCharacter);
+    const isMultiline = props.multiline || props.autoGrowHeight;
 
     const [isFocused, setIsFocused] = useState(false);
     const [passwordHidden, setPasswordHidden] = useState(props.secureTextEntry);
@@ -172,10 +173,12 @@ function BaseTextInput(props) {
     /**
      * Set Value & activateLabel
      *
-     * @param {String} value
+     * @param {String} val
      * @memberof BaseTextInput
      */
-    const setValue = (value) => {
+    const setValue = (val) => {
+        const value = isMultiline ? val : val.replace(/\n/g, ' ');
+
         if (props.onInputChange) {
             props.onInputChange(value);
         }
@@ -184,7 +187,7 @@ function BaseTextInput(props) {
 
         if (value && value.length > 0) {
             hasValueRef.current = true;
-            // When the componment is uncontrolled, we need to manually activate the label:
+            // When the component is uncontrolled, we need to manually activate the label
             if (props.value === undefined) {
                 activateLabel();
             }
@@ -227,7 +230,6 @@ function BaseTextInput(props) {
         (props.hasError || props.errorText) && styles.borderColorDanger,
         props.autoGrowHeight && {scrollPaddingTop: 2 * maxHeight},
     ]);
-    const isMultiline = props.multiline || props.autoGrowHeight;
 
     return (
         <>
@@ -310,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/UnorderedList.js b/src/components/UnorderedList.js
deleted file mode 100644
index c3300c11aae0..000000000000
--- a/src/components/UnorderedList.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
-import Text from './Text';
-
-const propTypes = {
-    /** An array of strings to display as an unordered list */
-    items: PropTypes.arrayOf(PropTypes.string),
-};
-const defaultProps = {
-    items: [],
-};
-
-function UnorderedList(props) {
-    const styles = useThemeStyles();
-    return (
-        <>
-            {_.map(props.items, (itemText) => (
-                <View
-                    key={itemText}
-                    style={[styles.flexRow, styles.alignItemsStart, styles.ml2]}
-                >
-                    <Text style={[styles.mr2]}>{'\u2022'}</Text>
-                    <Text>{itemText}</Text>
-                </View>
-            ))}
-        </>
-    );
-}
-
-UnorderedList.displayName = 'UnorderedList';
-UnorderedList.propTypes = propTypes;
-UnorderedList.defaultProps = defaultProps;
-
-export default UnorderedList;
diff --git a/src/components/UnorderedList.tsx b/src/components/UnorderedList.tsx
new file mode 100644
index 000000000000..a51cefce9ce6
--- /dev/null
+++ b/src/components/UnorderedList.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {View} from 'react-native';
+import useThemeStyles from '@styles/useThemeStyles';
+import Text from './Text';
+
+type UnorderedListProps = {
+    /** An array of strings to display as an unordered list */
+    items?: string[];
+};
+
+function UnorderedList({items = []}: UnorderedListProps) {
+    const styles = useThemeStyles();
+
+    return items.map((itemText) => (
+        <View
+            key={itemText}
+            style={[styles.flexRow, styles.alignItemsStart, styles.ml2]}
+        >
+            <Text style={[styles.mr2]}>{'\u2022'}</Text>
+            <Text>{itemText}</Text>
+        </View>
+    ));
+}
+
+UnorderedList.displayName = 'UnorderedList';
+export default UnorderedList;
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/transactionPropTypes.js b/src/components/transactionPropTypes.js
index 049fe60630e5..a26cf9a76cf5 100644
--- a/src/components/transactionPropTypes.js
+++ b/src/components/transactionPropTypes.js
@@ -31,25 +31,28 @@ export default PropTypes.shape({
     modifiedMerchant: PropTypes.string,
 
     /** The comment object on the transaction */
-    comment: PropTypes.shape({
-        /** The text of the comment */
-        comment: PropTypes.string,
+    comment: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            /** The text of the comment */
+            comment: PropTypes.string,
 
-        /** The waypoints defining the distance request */
-        waypoints: PropTypes.shape({
-            /** The latitude of the waypoint */
-            lat: PropTypes.number,
+            /** The waypoints defining the distance request */
+            waypoints: PropTypes.shape({
+                /** The latitude of the waypoint */
+                lat: PropTypes.number,
 
-            /** The longitude of the waypoint */
-            lng: PropTypes.number,
+                /** The longitude of the waypoint */
+                lng: PropTypes.number,
 
-            /** The address of the waypoint */
-            address: PropTypes.string,
+                /** The address of the waypoint */
+                address: PropTypes.string,
 
-            /** The name of the waypoint */
-            name: PropTypes.string,
+                /** The name of the waypoint */
+                name: PropTypes.string,
+            }),
         }),
-    }),
+    ]),
 
     /** The type of transaction */
     type: PropTypes.oneOf(_.values(CONST.TRANSACTION.TYPE)),
diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx
index d78742b7036b..451292f1a66f 100644
--- a/src/components/withTheme.tsx
+++ b/src/components/withTheme.tsx
@@ -29,4 +29,4 @@ export default function withTheme<TProps extends ThemeProps, TRef>(
     return forwardRef(WithTheme);
 }
 
-export {withThemePropTypes};
+export {withThemePropTypes, type ThemeProps};
diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx
index d95122c3e2ba..8ea55c5fbef8 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -29,4 +29,4 @@ export default function withThemeStyles<TProps extends ThemeStylesProps, TRef>(
     return forwardRef(WithThemeStyles);
 }
 
-export {withThemeStylesPropTypes};
+export {withThemeStylesPropTypes, type ThemeStylesProps};
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/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts
index 0d4c956b7bd8..24de5d8da63a 100644
--- a/src/hooks/useReportScrollManager/index.native.ts
+++ b/src/hooks/useReportScrollManager/index.native.ts
@@ -3,7 +3,7 @@ import {ActionListContext} from '@pages/home/ReportScreenContext';
 import ReportScrollManagerData from './types';
 
 function useReportScrollManager(): ReportScrollManagerData {
-    const flatListRef = useContext(ActionListContext);
+    const {flatListRef, setScrollPosition} = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index.
@@ -24,8 +24,10 @@ function useReportScrollManager(): ReportScrollManagerData {
             return;
         }
 
-        flatListRef.current.scrollToOffset({animated: false, offset: 0});
-    }, [flatListRef]);
+        setScrollPosition({offset: 0});
+
+        flatListRef.current?.scrollToOffset({animated: false, offset: 0});
+    }, [flatListRef, setScrollPosition]);
 
     return {ref: flatListRef, scrollToIndex, scrollToBottom};
 }
diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts
index 081844fc8c79..032417ed9fde 100644
--- a/src/hooks/useReportScrollManager/index.ts
+++ b/src/hooks/useReportScrollManager/index.ts
@@ -3,7 +3,7 @@ import {ActionListContext} from '@pages/home/ReportScreenContext';
 import ReportScrollManagerData from './types';
 
 function useReportScrollManager(): ReportScrollManagerData {
-    const flatListRef = useContext(ActionListContext);
+    const {flatListRef} = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
diff --git a/src/hooks/useReportScrollManager/types.ts b/src/hooks/useReportScrollManager/types.ts
index a10238d51f74..a0d7f14f7b84 100644
--- a/src/hooks/useReportScrollManager/types.ts
+++ b/src/hooks/useReportScrollManager/types.ts
@@ -1,7 +1,7 @@
-import {ActionListContextType} from '@pages/home/ReportScreenContext';
+import {FlatListRefType} from '@pages/home/ReportScreenContext';
 
 type ReportScrollManagerData = {
-    ref: ActionListContextType;
+    ref: FlatListRefType;
     scrollToIndex: (index: number, isEditing?: boolean) => void;
     scrollToBottom: () => void;
 };
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7bc9c985ad66..2d7af9236e56 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1191,7 +1191,7 @@ export default {
             noBankAccountAvailable: 'Sorry, no bank account is available',
             noBankAccountSelected: 'Please choose an account',
             taxID: 'Please enter a valid tax ID number',
-            website: 'Please enter a valid website',
+            website: 'Please enter a valid website. The website should be in lowercase.',
             zipCode: `Incorrect zip code format. Acceptable format: ${CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}`,
             phoneNumber: 'Please enter a valid phone number',
             companyName: 'Please enter a valid legal business name',
@@ -1673,6 +1673,7 @@ export default {
         genericCreateTaskFailureMessage: 'Unexpected error create task, please try again later.',
     },
     statementPage: {
+        title: (year, monthName) => `${monthName} ${year} statement`,
         generatingPDF: "We're generating your PDF right now. Please come back later!",
     },
     keyboardShortcutsPage: {
@@ -1946,19 +1947,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 6ea01dc4bd14..b84fa57b4470 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1208,7 +1208,7 @@ export default {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
             noBankAccountSelected: 'Por favor, elige una cuenta bancaria',
             taxID: 'Por favor, introduce un número de identificación fiscal válido',
-            website: 'Por favor, introduce un sitio web válido',
+            website: 'Por favor, introduce un sitio web válido. El sitio web debe estar en minúsculas.',
             zipCode: `Formato de código postal incorrecto. Formato aceptable: ${CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}`,
             phoneNumber: 'Por favor, introduce un teléfono válido',
             companyName: 'Por favor, introduce un nombre comercial legal válido',
@@ -1697,6 +1697,7 @@ export default {
         genericCreateTaskFailureMessage: 'Error inesperado al crear el tarea, por favor, inténtalo más tarde.',
     },
     statementPage: {
+        title: (year, monthName) => `Estado de cuenta de ${monthName} ${year}`,
         generatingPDF: 'Estamos generando tu PDF ahora mismo. ¡Por favor, vuelve más tarde!',
     },
     keyboardShortcutsPage: {
@@ -2431,19 +2432,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/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
index df9292ecd690..6f87edaf2475 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
@@ -1,13 +1,12 @@
 import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
-import styles from '@styles/styles';
 import UpdateNumberOfLines from './types';
 
 /**
  * Check the current scrollHeight of the textarea (minus any padding) and
  * divide by line height to get the total number of rows for the textarea.
  */
-const updateNumberOfLines: UpdateNumberOfLines = (props, event) => {
+const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => {
     const lineHeight = styles.textInputCompose.lineHeight ?? 0;
     const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2;
     const inputHeight = event?.nativeEvent?.contentSize?.height ?? null;
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
index b0f9ba48ddc2..cef7d7ef6a80 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
@@ -1,6 +1,7 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
 import ComposerProps from '@libs/ComposerUtils/types';
+import themeStyles from '@styles/styles';
 
-type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
+type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: typeof themeStyles) => void;
 
 export default UpdateNumberOfLines;
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/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index aedb2fa8d741..4c610bc12099 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -144,7 +144,7 @@ const defaultProps = {
 function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, session, lastOpenedPublicRoomID, demoInfo}) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth);
+    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 01573cb434b4..be803e62a98b 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -1,15 +1,9 @@
 import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack';
-import React from 'react';
+import React, {useMemo} from 'react';
 import _ from 'underscore';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 
-const defaultSubRouteOptions = {
-    cardStyle: styles.navigationScreenCardStyle,
-    headerShown: false,
-    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-};
-
 /**
  * Create a modal stack navigator with an array of sub-screens.
  *
@@ -20,6 +14,17 @@ function createModalStackNavigator(screens) {
     const ModalStackNavigator = createStackNavigator();
 
     function ModalStack() {
+        const styles = useThemeStyles();
+
+        const defaultSubRouteOptions = useMemo(
+            () => ({
+                cardStyle: styles.navigationScreenCardStyle,
+                headerShown: false,
+                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+            }),
+            [styles],
+        );
+
         return (
             <ModalStackNavigator.Navigator screenOptions={defaultSubRouteOptions}>
                 {_.map(screens, (getComponent, name) => (
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js
index a1646011e560..d23b03c8c73e 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js
@@ -2,7 +2,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 
 const Stack = createStackNavigator();
@@ -11,6 +11,7 @@ const url = getCurrentUrl();
 const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;
 
 function BaseCentralPaneNavigator() {
+    const styles = useThemeStyles();
     return (
         <Stack.Navigator>
             <Stack.Screen
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index b8e04a6ff9e8..c5786a0fcfe4 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -1,6 +1,6 @@
 import {createStackNavigator} from '@react-navigation/stack';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -21,12 +21,13 @@ const propTypes = {
 function RightModalNavigator(props) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]);
 
     return (
         <NoDropZone>
             {!isSmallScreenWidth && <Overlay onPress={props.navigation.goBack} />}
             <View style={styles.RHPNavigatorContainer(isSmallScreenWidth)}>
-                <Stack.Navigator screenOptions={RHPScreenOptions}>
+                <Stack.Navigator screenOptions={screenOptions}>
                     <Stack.Screen
                         name="Settings"
                         component={ModalStackNavigators.SettingsModalStackNavigator}
diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.js b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
index 6adf5bd2b507..02354b90591f 100644
--- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
@@ -1,12 +1,17 @@
 import {CardStyleInterpolators} from '@react-navigation/stack';
-import styles from '@styles/styles';
 
-const RHPScreenOptions = {
+/**
+ * RHP stack navigator screen options generator function
+ * @function
+ * @param {Object} styles - The styles object
+ * @returns {Object} - The screen options object
+ */
+const RHPScreenOptions = (styles) => ({
     headerShown: false,
     animationEnabled: true,
     gestureDirection: 'horizontal',
     cardStyle: styles.navigationScreenCardStyle,
     cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-};
+});
 
 export default RHPScreenOptions;
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
index 70a33ee34a67..bb7acddb188c 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import usePermissions from '@hooks/usePermissions';
-import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as App from '@userActions/App';
@@ -61,12 +60,6 @@ const defaultProps = {
  * @returns {Number}
  */
 const getLastAccessedReportID = (reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom) => {
-    // If deeplink url contains reportID params, we should show the report that has this reportID.
-    const currentRoute = Navigation.getActiveRoute();
-    const {reportID} = ReportUtils.parseReportRouteParams(currentRoute);
-    if (reportID) {
-        return reportID;
-    }
     const lastReport = ReportUtils.findLastAccessedReport(reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom);
     return lodashGet(lastReport, 'reportID');
 };
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
index 04784fb9d0e1..44fa7b6c0b09 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
@@ -1,5 +1,4 @@
 import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles';
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import CONFIG from '@src/CONFIG';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
@@ -12,7 +11,7 @@ const commonScreenOptions = {
     animationTypeForReplace: 'push',
 };
 
-export default (isSmallScreenWidth) => ({
+export default (isSmallScreenWidth, styles) => ({
     rightModalNavigator: {
         ...commonScreenOptions,
         cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index b498bcdfdf4d..7c0b9ef4fc8c 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -1,26 +1,14 @@
 import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} from '@react-navigation/native';
-import React, {useEffect, useRef} from 'react';
-import {ColorValue} from 'react-native';
-import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
+import React, {useEffect, useMemo, useRef} from 'react';
 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 themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
 import Navigation, {navigationRef} from './Navigation';
 
-// https://reactnavigation.org/docs/themes
-const navigationTheme = {
-    ...DefaultTheme,
-    colors: {
-        ...DefaultTheme.colors,
-        background: themeColors.appBG,
-    },
-};
-
 type NavigationRootProps = {
     /** Whether the current user is logged in with an authToken */
     authenticated: boolean;
@@ -52,10 +40,23 @@ function parseAndLogRoute(state: NavigationState) {
 function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
     useFlipper(navigationRef);
     const firstRenderRef = useRef(true);
+    const theme = useTheme();
 
     const currentReportIDValue = useCurrentReportID();
     const {isSmallScreenWidth} = useWindowDimensions();
 
+    // https://reactnavigation.org/docs/themes
+    const navigationTheme = useMemo(
+        () => ({
+            ...DefaultTheme,
+            colors: {
+                ...DefaultTheme.colors,
+                background: theme.appBG,
+            },
+        }),
+        [theme],
+    );
+
     useEffect(() => {
         if (firstRenderRef.current) {
             // we don't want to make the report back button go back to LHN if the user
@@ -78,46 +79,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
         navigationRef.resetRoot(navigationRef.getRootState());
     }, [isSmallScreenWidth, authenticated]);
 
-    const prevStatusBarBackgroundColor = useRef(themeColors.appBG);
-    const statusBarBackgroundColor = useRef(themeColors.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 = themeColors.PAGE_BACKGROUND_COLORS[currentRoute?.name as keyof typeof themeColors.PAGE_BACKGROUND_COLORS] || themeColors.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 === themeColors.appBG && prevStatusBarBackgroundColor.current === themeColors.appBG) {
-            return;
-        }
-
-        statusBarAnimation.value = 0;
-        statusBarAnimation.value = withDelay(300, withTiming(1));
-    };
-
     const handleStateChange = (state: NavigationState | undefined) => {
         if (!state) {
             return;
@@ -128,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 ae48d8e49201..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: {
@@ -195,7 +195,7 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
                                 exact: true,
                             },
                             Settings_TwoFactorAuth: {
-                                path: ROUTES.SETTINGS_2FA,
+                                path: ROUTES.SETTINGS_2FA.route,
                                 exact: true,
                             },
                             Settings_Share_Code: {
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index 5bd70fee4d83..fc2bfb6d83fb 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,4 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
+import {ThemeStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
@@ -39,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco
 /**
  * Get the PaymentMethods list
  */
-function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: ThemeStyles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {
@@ -48,7 +49,11 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
             return;
         }
 
-        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(bankAccount?.accountData?.additionalData?.bankName ?? '', false);
+        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({
+            bankName: bankAccount?.accountData?.additionalData?.bankName,
+            isCard: false,
+            themeStyles,
+        });
         combinedPaymentMethods.push({
             ...bankAccount,
             description: getPaymentMethodDescription(bankAccount?.accountType, bankAccount.accountData),
@@ -61,7 +66,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
     });
 
     Object.values(fundList).forEach((card) => {
-        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(card?.accountData?.bank ?? '', true);
+        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/ReportUtils.ts b/src/libs/ReportUtils.ts
index d93661778b83..599963b6a9aa 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1,6 +1,7 @@
 import {format} from 'date-fns';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
+import {isEmpty} from 'lodash';
 import lodashEscape from 'lodash/escape';
 import lodashFindLastIndex from 'lodash/findLastIndex';
 import lodashIntersection from 'lodash/intersection';
@@ -14,7 +15,7 @@ import CONST from '@src/CONST';
 import {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Transaction} from '@src/types/onyx';
+import {Beta, Login, PersonalDetails, Policy, PolicyTags, Report, ReportAction, Session, Transaction} from '@src/types/onyx';
 import {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import {ChangeLog, IOUMessage, OriginalMessageActionName} from '@src/types/onyx/OriginalMessage';
 import {Message, ReportActions} from '@src/types/onyx/ReportAction';
@@ -110,6 +111,7 @@ type OptimisticExpenseReport = Pick<
     | 'reportName'
     | 'state'
     | 'stateNum'
+    | 'statusNum'
     | 'total'
     | 'notificationPreference'
     | 'parentReportID'
@@ -545,6 +547,13 @@ function isReportApproved(report: OnyxEntry<Report>): boolean {
     return report?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report?.statusNum === CONST.REPORT.STATUS.APPROVED;
 }
 
+/**
+ * Checks if the supplied report is an expense report in Open state and status.
+ */
+function isDraftExpenseReport(report: OnyxEntry<Report>): boolean {
+    return isExpenseReport(report) && report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS.OPEN;
+}
+
 /**
  * Given a collection of reports returns them sorted by last read
  */
@@ -1669,7 +1678,6 @@ function getPolicyExpenseChatName(report: OnyxEntry<Report>, policy: OnyxEntry<P
 
 /**
  * Get the title for an IOU or expense chat which will be showing the payer and the amount
- *
  */
 function getMoneyRequestReportName(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> | undefined = undefined): string {
     const moneyRequestTotal = getMoneyRequestReimbursableTotal(report);
@@ -1688,7 +1696,7 @@ function getMoneyRequestReportName(report: OnyxEntry<Report>, policy: OnyxEntry<
         return Localize.translateLocal('iou.payerSpentAmount', {payer: payerName, amount: formattedAmount});
     }
 
-    if (!!report?.hasOutstandingIOU || moneyRequestTotal === 0) {
+    if (!!report?.hasOutstandingIOU || isDraftExpenseReport(report) || moneyRequestTotal === 0) {
         return Localize.translateLocal('iou.payerOwesAmount', {payer: payerName, amount: formattedAmount});
     }
 
@@ -1858,7 +1866,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');
@@ -2545,9 +2554,16 @@ function buildOptimisticExpenseReport(chatReportID: string, policyID: string, pa
     const storedTotal = total * -1;
     const policyName = getPolicyName(allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`]);
     const formattedTotal = CurrencyUtils.convertToDisplayString(storedTotal, currency);
+    const policy = getPolicy(policyID);
 
     // The expense report is always created with the policy's output currency
-    const outputCurrency = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`]?.outputCurrency ?? CONST.CURRENCY.USD;
+    const outputCurrency = policy?.outputCurrency ?? CONST.CURRENCY.USD;
+    const isFree = policy?.type === CONST.POLICY.TYPE.FREE;
+
+    // Define the state and status of the report based on whether the policy is free or paid
+    const state = isFree ? CONST.REPORT.STATE.SUBMITTED : CONST.REPORT.STATE.OPEN;
+    const stateNum = isFree ? CONST.REPORT.STATE_NUM.PROCESSING : CONST.REPORT.STATE_NUM.OPEN;
+    const statusNum = isFree ? CONST.REPORT.STATUS.SUBMITTED : CONST.REPORT.STATUS.OPEN;
 
     return {
         reportID: generateReportID(),
@@ -2560,8 +2576,9 @@ function buildOptimisticExpenseReport(chatReportID: string, policyID: string, pa
 
         // We don't translate reportName because the server response is always in English
         reportName: `${policyName} owes ${formattedTotal}`,
-        state: CONST.REPORT.STATE.SUBMITTED,
-        stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
+        state,
+        stateNum,
+        statusNum,
         total: storedTotal,
         notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
         parentReportID: chatReportID,
@@ -4134,10 +4151,6 @@ function getIOUReportActionDisplayMessage(reportAction: OnyxEntry<ReportAction>)
     });
 }
 
-function isReportDraft(report: OnyxEntry<Report>): boolean {
-    return isExpenseReport(report) && report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS.OPEN;
-}
-
 /**
  * Return room channel log display message
  */
@@ -4216,6 +4229,21 @@ function shouldDisableWelcomeMessage(report: OnyxEntry<Report>, policy: OnyxEntr
     return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy);
 }
 
+/**
+ * Navigates to the appropriate screen based on the presence of a private note for the current user.
+ */
+function navigateToPrivateNotes(report: Report, session: Session) {
+    if (isEmpty(report) || isEmpty(session)) {
+        return;
+    }
+    const currentUserPrivateNote = report.privateNotes?.[String(session.accountID)]?.note ?? '';
+    if (isEmpty(currentUserPrivateNote)) {
+        Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, String(session.accountID)));
+        return;
+    }
+    Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -4372,7 +4400,7 @@ export {
     getIOUReportActionDisplayMessage,
     isWaitingForAssigneeToCompleteTask,
     isGroupChat,
-    isReportDraft,
+    isDraftExpenseReport,
     shouldUseFullTitleToDisplay,
     parseReportRouteParams,
     getReimbursementQueuedActionMessage,
@@ -4380,6 +4408,7 @@ export {
     getChannelLogMemberMessage,
     getRoom,
     shouldDisableWelcomeMessage,
+    navigateToPrivateNotes,
     canEditWriteCapability,
 };
 
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/StringUtils.ts b/src/libs/StringUtils.ts
index f1dd5a06e828..2fb918c7a233 100644
--- a/src/libs/StringUtils.ts
+++ b/src/libs/StringUtils.ts
@@ -63,4 +63,13 @@ function removeInvisibleCharacters(value: string): string {
     return result.trim();
 }
 
-export default {sanitizeString, isEmptyString, removeInvisibleCharacters};
+/**
+ *  Replace all CRLF with LF
+ *  @param value - The input string
+ *  @returns The string with all CRLF replaced with LF
+ */
+function normalizeCRLF(value?: string): string | undefined {
+    return value?.replace(/\r\n/g, '\n');
+}
+
+export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeCRLF};
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/ValidationUtils.ts b/src/libs/ValidationUtils.ts
index 7c49006c10a5..388020bc0d6d 100644
--- a/src/libs/ValidationUtils.ts
+++ b/src/libs/ValidationUtils.ts
@@ -200,7 +200,8 @@ function getAgeRequirementError(date: string, minimumAge: number, maximumAge: nu
  * http/https/ftp URL scheme required.
  */
 function isValidWebsite(url: string): boolean {
-    return new RegExp(`^${URL_REGEX_WITH_REQUIRED_PROTOCOL}$`, 'i').test(url);
+    const isLowerCase = url === url.toLowerCase();
+    return new RegExp(`^${URL_REGEX_WITH_REQUIRED_PROTOCOL}$`, 'i').test(url) && isLowerCase;
 }
 
 function validateIdentity(identity: Record<string, string>): Record<string, boolean> {
@@ -296,6 +297,13 @@ function isValidLegalName(name: string): boolean {
     return CONST.REGEX.ALPHABETIC_AND_LATIN_CHARS.test(name);
 }
 
+/**
+ * Checks that the provided name doesn't contain special characters or numbers
+ */
+function isValidPersonName(value: string) {
+    return /^[^\d^!#$%*=<>;{}"]+$/.test(value);
+}
+
 /**
  * Checks if the provided string includes any of the provided reserved words
  */
@@ -406,4 +414,5 @@ export {
     isValidAccountRoute,
     isValidRecoveryCode,
     prepareValues,
+    isValidPersonName,
 };
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 939a11dad511..91ec0cd6471b 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -459,6 +459,15 @@ function getMoneyRequestInformation(
     const isNewIOUReport = !chatReport.iouReportID || ReportUtils.hasIOUWaitingOnCurrentUserBankAccount(chatReport);
     let iouReport = isNewIOUReport ? null : allReports[`${ONYXKEYS.COLLECTION.REPORT}${chatReport.iouReportID}`];
 
+    // If the linked expense report on paid policy is not draft, we need to create a new draft expense report
+    if (isPolicyExpenseChat && iouReport) {
+        const policyType = ReportUtils.getPolicy(iouReport.policyID).type || '';
+        const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
+        if (isFromPaidPolicy && !ReportUtils.isDraftExpenseReport(iouReport)) {
+            iouReport = null;
+        }
+    }
+
     if (iouReport) {
         if (isPolicyExpenseChat) {
             iouReport = {...iouReport};
@@ -772,7 +781,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,
@@ -860,6 +870,7 @@ function requestMoney(
     const currentChatReport = isMoneyRequestReport ? ReportUtils.getReport(report.chatReportID) : report;
     const {payerAccountID, payerEmail, iouReport, chatReport, transaction, iouAction, createdChatReportActionID, createdIOUReportActionID, reportPreviewAction, onyxData} =
         getMoneyRequestInformation(currentChatReport, participant, comment, amount, currency, created, merchant, payeeAccountID, payeeEmail, receipt, undefined, category, tag, billable);
+    const activeReportID = isMoneyRequestReport ? report.reportID : chatReport.reportID;
 
     API.write(
         'RequestMoney',
@@ -887,8 +898,8 @@ function requestMoney(
         onyxData,
     );
     resetMoneyRequestInfo();
-    Navigation.dismissModal(isMoneyRequestReport ? report.reportID : chatReport.reportID);
-    Report.notifyNewAction(chatReport.reportID, payeeAccountID);
+    Navigation.dismissModal(activeReportID);
+    Report.notifyNewAction(activeReportID, payeeAccountID);
 }
 
 /**
@@ -2658,30 +2669,46 @@ function approveMoneyRequest(expenseReport) {
  */
 function submitReport(expenseReport) {
     const optimisticSubmittedReportAction = ReportUtils.buildOptimisticSubmittedReportAction(expenseReport.total, expenseReport.currency, expenseReport.reportID);
+    const parentReport = ReportUtils.getReport(expenseReport.parentReportID);
 
-    const optimisticReportActionsData = {
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
-        value: {
-            [optimisticSubmittedReportAction.reportActionID]: {
-                ...optimisticSubmittedReportAction,
-                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
+            value: {
+                [optimisticSubmittedReportAction.reportActionID]: {
+                    ...optimisticSubmittedReportAction,
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+                },
             },
         },
-    };
-    const optimisticIOUReportData = {
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`,
-        value: {
-            ...expenseReport,
-            lastMessageText: optimisticSubmittedReportAction.message[0].text,
-            lastMessageHtml: optimisticSubmittedReportAction.message[0].html,
-            state: CONST.REPORT.STATE.SUBMITTED,
-            stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
-            statusNum: CONST.REPORT.STATUS.SUBMITTED,
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`,
+            value: {
+                ...expenseReport,
+                lastMessageText: lodashGet(optimisticSubmittedReportAction, 'message.0.text', ''),
+                lastMessageHtml: lodashGet(optimisticSubmittedReportAction, 'message.0.html', ''),
+                state: CONST.REPORT.STATE.SUBMITTED,
+                stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
+                statusNum: CONST.REPORT.STATUS.SUBMITTED,
+            },
         },
-    };
-    const optimisticData = [optimisticIOUReportData, optimisticReportActionsData];
+        ...(parentReport.reportID
+            ? [
+                  {
+                      onyxMethod: Onyx.METHOD.MERGE,
+                      key: `${ONYXKEYS.COLLECTION.REPORT}${parentReport.reportID}`,
+                      value: {
+                          ...parentReport,
+                          hasOutstandingIOU: false,
+                          hasOutstandingChildRequest: false,
+                          iouReportID: null,
+                      },
+                  },
+              ]
+            : []),
+    ];
 
     const successData = [
         {
@@ -2713,6 +2740,19 @@ function submitReport(expenseReport) {
                 stateNum: CONST.REPORT.STATE_NUM.OPEN,
             },
         },
+        ...(parentReport.reportID
+            ? [
+                  {
+                      onyxMethod: Onyx.METHOD.MERGE,
+                      key: `${ONYXKEYS.COLLECTION.REPORT}${parentReport.reportID}`,
+                      value: {
+                          hasOutstandingIOU: parentReport.hasOutstandingIOU,
+                          hasOutstandingChildRequest: parentReport.hasOutstandingChildRequest,
+                          iouReportID: expenseReport.reportID,
+                      },
+                  },
+              ]
+            : []),
     ];
 
     API.write(
diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index 1794a3524c98..bf816d0a62a7 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -366,7 +366,7 @@ function reopenTask(taskReport) {
  * @param {object} report
  * @param {Object} editedTask
  */
-function editTaskAndNavigate(report, {title, description}) {
+function editTask(report, {title, description}) {
     // Create the EditedReportAction on the task
     const editTaskReportAction = ReportUtils.buildOptimisticEditedTaskReportAction(currentUserEmail);
 
@@ -433,11 +433,9 @@ function editTaskAndNavigate(report, {title, description}) {
         },
         {optimisticData, successData, failureData},
     );
-
-    Navigation.dismissModal(report.reportID);
 }
 
-function editTaskAssigneeAndNavigate(report, ownerAccountID, assigneeEmail, assigneeAccountID = 0, assigneeChatReport = null) {
+function editTaskAssignee(report, ownerAccountID, assigneeEmail, assigneeAccountID = 0, assigneeChatReport = null) {
     // Create the EditedReportAction on the task
     const editTaskReportAction = ReportUtils.buildOptimisticEditedTaskReportAction(currentUserEmail);
     const reportName = report.reportName.trim();
@@ -525,8 +523,6 @@ function editTaskAssigneeAndNavigate(report, ownerAccountID, assigneeEmail, assi
         },
         {optimisticData, successData, failureData},
     );
-
-    Navigation.dismissModal(report.reportID);
 }
 
 /**
@@ -628,9 +624,9 @@ function setAssigneeValue(assigneeEmail, assigneeAccountID, shareDestination, is
     // This is only needed for creation of a new task and so it should only be stored locally
     Onyx.merge(ONYXKEYS.TASK, {assignee: assigneeEmail, assigneeAccountID});
 
-    // When we're editing the assignee, we immediately call EditTaskAndNavigate. Since setting the assignee is async,
-    // the chatReport is not yet set when EditTaskAndNavigate is called. So we return the chatReport here so that
-    // EditTaskAndNavigate can use it.
+    // When we're editing the assignee, we immediately call editTaskAssignee. Since setting the assignee is async,
+    // the chatReport is not yet set when editTaskAssignee is called. So we return the chatReport here so that
+    // editTaskAssignee can use it.
     return chatReport;
 }
 
@@ -941,8 +937,8 @@ function getTaskReportActionMessage(actionName, reportID, isCreateTaskAction) {
 
 export {
     createTaskAndNavigate,
-    editTaskAndNavigate,
-    editTaskAssigneeAndNavigate,
+    editTask,
+    editTaskAssignee,
     setTitleValue,
     setDescriptionValue,
     setTaskReport,
diff --git a/src/libs/actions/TwoFactorAuthActions.ts b/src/libs/actions/TwoFactorAuthActions.ts
index ccd4e2baf662..26e402096aa6 100644
--- a/src/libs/actions/TwoFactorAuthActions.ts
+++ b/src/libs/actions/TwoFactorAuthActions.ts
@@ -1,14 +1,14 @@
 import Onyx from 'react-native-onyx';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
+import ROUTES, {Route} from '@src/ROUTES';
 import {TwoFactorAuthStep} from '@src/types/onyx/Account';
 
 /**
  * Clear 2FA data if the flow is interrupted without finishing
  */
 function clearTwoFactorAuthData() {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: '', twoFactorAuthSecretKey: '', twoFactorAuthStep: '', codesAreCopied: false});
+    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: null, twoFactorAuthSecretKey: null, twoFactorAuthStep: null, codesAreCopied: false});
 }
 function setTwoFactorAuthStep(twoFactorAuthStep: TwoFactorAuthStep) {
     Onyx.merge(ONYXKEYS.ACCOUNT, {twoFactorAuthStep});
@@ -18,9 +18,10 @@ function setCodesAreCopied() {
     Onyx.merge(ONYXKEYS.ACCOUNT, {codesAreCopied: true});
 }
 
-function quitAndNavigateBackToSettings() {
+function quitAndNavigateBack(backTo?: Route) {
     clearTwoFactorAuthData();
-    Navigation.goBack(ROUTES.SETTINGS_SECURITY);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    Navigation.goBack(backTo || ROUTES.SETTINGS_SECURITY);
 }
 
-export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBackToSettings, setCodesAreCopied};
+export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBack, setCodesAreCopied};
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/libs/migrations/PersonalDetailsByAccountID.js b/src/libs/migrations/PersonalDetailsByAccountID.js
index 38c992a6a375..c08ec6fb2c43 100644
--- a/src/libs/migrations/PersonalDetailsByAccountID.js
+++ b/src/libs/migrations/PersonalDetailsByAccountID.js
@@ -257,6 +257,18 @@ export default function () {
                     delete newReport.participants;
                 }
 
+                if (lodashHas(newReport, ['ownerEmail'])) {
+                    reportWasModified = true;
+                    Log.info(`[Migrate Onyx] PersonalDetailsByAccountID migration: removing ownerEmail from report ${newReport.reportID}`);
+                    delete newReport.ownerEmail;
+                }
+
+                if (lodashHas(newReport, ['managerEmail'])) {
+                    reportWasModified = true;
+                    Log.info(`[Migrate Onyx] PersonalDetailsByAccountID migration: removing managerEmail from report ${newReport.reportID}`);
+                    delete newReport.managerEmail;
+                }
+
                 if (reportWasModified) {
                     onyxData[onyxKey] = newReport;
                 }
diff --git a/src/libs/models/BankAccount.js b/src/libs/models/BankAccount.ts
similarity index 51%
rename from src/libs/models/BankAccount.js
rename to src/libs/models/BankAccount.ts
index c4366a48aa6a..6fd77b161aa9 100644
--- a/src/libs/models/BankAccount.js
+++ b/src/libs/models/BankAccount.ts
@@ -1,10 +1,24 @@
 import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
-import lodashHas from 'lodash/has';
-import _ from 'underscore';
+import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
+import BankAccountJSON, {AdditionalData} from '@src/types/onyx/BankAccount';
+
+type State = ValueOf<typeof BankAccount.STATE>;
+
+type ACHData = {
+    routingNumber: string;
+    accountNumber: string;
+    addressName: string;
+    isSavings: boolean;
+    bankAccountID: number;
+    state: State;
+    validateCodeExpectedDate: string;
+    needsToUpgrade: boolean;
+};
 
 class BankAccount {
+    json: BankAccountJSON;
+
     static STATE = {
         PENDING: 'PENDING',
         OPEN: 'OPEN',
@@ -14,14 +28,12 @@ class BankAccount {
         VERIFYING: 'VERIFYING',
     };
 
-    constructor(accountJSON) {
+    constructor(accountJSON: BankAccountJSON) {
         this.json = accountJSON;
     }
 
     /**
      * Return the ID of the reimbursement account
-     *
-     * @returns {Number}
      */
     getID() {
         return this.json.methodID;
@@ -30,61 +42,43 @@ class BankAccount {
     /**
      * Return the account number, which has been obfuscated by the back end
      * example "XXXXXX3956"
-     *
-     * @returns {String}
      */
     getMaskedAccountNumber() {
-        return this.json.accountData.accountNumber;
+        return this.json.accountData?.accountNumber;
     }
 
     /**
      * Used as the display name for the account...
-     * @returns {String}
      */
     getAddressName() {
-        return this.json.accountData.addressName;
+        return this.json.accountData?.addressName;
     }
 
-    /**
-     * @returns {String}
-     */
     getProcessor() {
-        return this.json.accountData.processor;
+        return this.json.accountData?.processor;
     }
 
-    /**
-     * @returns {String}
-     */
     getRoutingNumber() {
-        return this.json.accountData.routingNumber;
+        return this.json.accountData?.routingNumber;
     }
 
     /**
      * Get all user emails that have access to this bank account
-     * @return {String[]}
      */
     getSharees() {
-        return this.json.accountData.sharees;
+        return this.json.accountData?.sharees;
     }
 
-    /**
-     * @returns {String}
-     * @private
-     */
     getState() {
-        return this.json.accountData.state;
+        return this.json.accountData?.state;
     }
 
-    /**
-     * @returns {Boolean}
-     */
     isOpen() {
         return this.getState() === BankAccount.STATE.OPEN;
     }
 
     /**
      * @deprecated Use !isPending instead.
-     * @returns {Boolean}
      */
     isVerified() {
         return !this.isPending();
@@ -92,7 +86,6 @@ class BankAccount {
 
     /**
      * If the user still needs to enter the 3 micro deposit amounts.
-     * @returns {Boolean}
      */
     isPending() {
         return this.getState() === BankAccount.STATE.PENDING;
@@ -100,7 +93,6 @@ class BankAccount {
 
     /**
      * If success team is currently verifying the bank account data provided by the user.
-     * @returns {Boolean}
      */
     isVerifying() {
         return this.getState() === BankAccount.STATE.VERIFYING;
@@ -108,158 +100,132 @@ class BankAccount {
 
     /**
      * If the user didn't finish entering all their info.
-     * @returns {Boolean}
      */
     isInSetup() {
         return this.getState() === BankAccount.STATE.SETUP;
     }
 
-    /**
-     * @returns {Boolean}
-     */
     isLocked() {
         return this.getState() === BankAccount.STATE.LOCKED;
     }
 
     /**
      * Is it the account to use by default to receive money?
-     *
-     * @returns {Boolean}
      */
     isDefaultCredit() {
-        return this.json.accountData.defaultCredit === true;
+        return this.json.accountData?.defaultCredit === true;
     }
 
     /**
      * Can we use this account to pay other people?
-     *
-     * @returns {Boolean}
      */
     isWithdrawal() {
-        return this.json.accountData.allowDebit === true;
+        return this.json.accountData?.allowDebit === true;
     }
 
     getType() {
-        return this.json.accountData.type;
+        return this.json.accountData?.type;
     }
 
     /**
      * Return the client ID of this bank account
      *
      * @NOTE WARNING KEEP IN SYNC WITH THE PHP
-     * @returns {String}
      */
     getClientID() {
         // eslint-disable-next-line max-len
-        return `${Str.makeID(this.getMaskedAccountNumber())}${Str.makeID(this.getAddressName())}${Str.makeID(this.getRoutingNumber())}${this.getTransactionType()}`;
+        return `${Str.makeID(this.getMaskedAccountNumber() ?? '')}${Str.makeID(this.getAddressName() ?? '')}${Str.makeID(this.getRoutingNumber() ?? '')}${this.getTransactionType()}`;
     }
 
-    /**
-     * @returns {String}
-     * @private
-     */
-    getTransactionType() {
+    private getTransactionType() {
         return this.isWithdrawal() ? 'withdrawal' : 'direct-deposit';
     }
 
     /**
      * Return the internal json data structure used by auth
-     * @returns {Object}
      */
     getJSON() {
         return this.json;
     }
 
     /**
-     * Return whether or not this bank account has been risk checked
-     * @returns {Boolean}
+     * Return whether this bank account has been risk checked
      */
     isRiskChecked() {
-        return Boolean(this.json.accountData.riskChecked);
+        return Boolean(this.json.accountData?.riskChecked);
     }
 
     /**
      * Return when the 3 micro amounts for validation were supposed to reach the bank account.
-     * @returns {String}
      */
     getValidateCodeExpectedDate() {
-        return this.json.validateCodeExpectedDate || '';
+        return this.json.validateCodeExpectedDate ?? '';
     }
 
     /**
      * In which country is the bank account?
-     * @returns {string}
      */
     getCountry() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'country'], CONST.COUNTRY.US);
+        return this.json.accountData?.additionalData?.country ?? CONST.COUNTRY.US;
     }
 
     /**
      * In which currency is the bank account?
-     * @returns {String}
      */
     getCurrency() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'currency'], 'USD');
+        return this.json.accountData?.additionalData?.currency ?? 'USD';
     }
 
     /**
      * In which bank is the bank account?
-     * @returns {String}
      */
     getBankName() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'bankName'], '');
+        return this.json.accountData?.additionalData?.bankName ?? '';
     }
 
     /**
      * Did we get bank account details for local transfer or international wire?
-     * @returns {Boolean}
      */
     hasInternationalWireDetails() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'fieldsType'], 'local') === 'international';
+        return (this.json.accountData?.additionalData?.fieldsType ?? 'local') === 'international';
     }
 
     /**
      * Get the additional data of a bankAccount
-     * @returns {Object}
      */
-    getAdditionalData() {
-        return this.json.accountData.additionalData || {};
+    getAdditionalData(): Partial<AdditionalData> {
+        return this.json.accountData?.additionalData ?? {};
     }
 
     /**
      * Get the pending action of the bank account
-     * @returns {String}
      */
     getPendingAction() {
-        return lodashGet(this.json, 'pendingAction', '');
+        return this.json.pendingAction ?? '';
     }
 
     /**
-     * Return a map needed to setup a withdrawal account
-     * @returns {Object}
+     * Return a map needed to set up a withdrawal account
      */
-    toACHData() {
-        return _.extend(
-            {
-                routingNumber: this.getRoutingNumber(),
-                accountNumber: this.getMaskedAccountNumber(),
-                addressName: this.getAddressName(),
-                isSavings: this.json.isSavings,
-                bankAccountID: this.getID(),
-                state: this.getState(),
-                validateCodeExpectedDate: this.getValidateCodeExpectedDate(),
-                needsToUpgrade: this.needsToUpgrade(),
-            },
-            this.getAdditionalData(),
-        );
+    toACHData(): Partial<ACHData> {
+        return {
+            routingNumber: this.getRoutingNumber(),
+            accountNumber: this.getMaskedAccountNumber(),
+            addressName: this.getAddressName(),
+            isSavings: this.json.isSavings,
+            bankAccountID: this.getID(),
+            state: this.getState(),
+            validateCodeExpectedDate: this.getValidateCodeExpectedDate(),
+            needsToUpgrade: this.needsToUpgrade(),
+            ...this.getAdditionalData(),
+        } as ACHData;
     }
 
     /**
      * Check if user hasn't upgraded their bank account yet.
-     * @return {Boolean}
      */
     needsToUpgrade() {
-        return !this.isInSetup() && !lodashHas(this.json, ['accountData', 'additionalData', 'beneficialOwners']);
+        return !this.isInSetup() && this.json.accountData?.additionalData?.beneficialOwners === undefined;
     }
 }
 
diff --git a/src/pages/EnablePayments/IdologyQuestions.js b/src/pages/EnablePayments/IdologyQuestions.js
index 97c0f55f27c6..9e4f9d697fca 100644
--- a/src/pages/EnablePayments/IdologyQuestions.js
+++ b/src/pages/EnablePayments/IdologyQuestions.js
@@ -1,17 +1,14 @@
 import PropTypes from 'prop-types';
-import React, {useRef, useState} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import FixedFooter from '@components/FixedFooter';
-import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
-import FormScrollView from '@components/FormScrollView';
-import OfflineIndicator from '@components/OfflineIndicator';
-import RadioButtons from '@components/RadioButtons';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
-import * as ErrorUtils from '@libs/ErrorUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,15 +48,13 @@ const defaultProps = {
     walletAdditionalDetails: {},
 };
 
-function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
+function IdologyQuestions({questions, idNumber}) {
     const styles = useThemeStyles();
-    const formRef = useRef();
     const {translate} = useLocalize();
 
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
     const [shouldHideSkipAnswer, setShouldHideSkipAnswer] = useState(false);
     const [userAnswers, setUserAnswers] = useState([]);
-    const [error, setError] = useState('');
 
     const currentQuestion = questions[currentQuestionIndex] || {};
     const possibleAnswers = _.filter(
@@ -74,7 +69,6 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
             };
         }),
     );
-    const errorMessage = ErrorUtils.getLatestErrorMessage(walletAdditionalDetails) || error;
 
     /**
      * Put question answer in the state.
@@ -86,7 +80,6 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
         tempAnswers[currentQuestionIndex] = {question: currentQuestion.type, answer};
 
         setUserAnswers(tempAnswers);
-        setError('');
     };
 
     /**
@@ -94,32 +87,39 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
      */
     const submitAnswers = () => {
         if (!userAnswers[currentQuestionIndex]) {
-            setError(translate('additionalDetailsStep.selectAnswer'));
-        } else {
-            // Get the number of questions that were skipped by the user.
-            const skippedQuestionsCount = _.filter(userAnswers, (answer) => answer.answer === SKIP_QUESTION_TEXT).length;
-
-            // We have enough answers, let's call expectID KBA to verify them
-            if (userAnswers.length - skippedQuestionsCount >= questions.length - MAX_SKIP) {
-                const tempAnswers = _.map(userAnswers, _.clone);
-
-                // Auto skip any remaining questions
-                if (tempAnswers.length < questions.length) {
-                    for (let i = tempAnswers.length; i < questions.length; i++) {
-                        tempAnswers[i] = {question: questions[i].type, answer: SKIP_QUESTION_TEXT};
-                    }
-                }
+            return;
+        }
+        // Get the number of questions that were skipped by the user.
+        const skippedQuestionsCount = _.filter(userAnswers, (answer) => answer.answer === SKIP_QUESTION_TEXT).length;
 
-                BankAccounts.answerQuestionsForWallet(tempAnswers, idNumber);
-                setUserAnswers(tempAnswers);
-            } else {
-                // Else, show next question
-                setCurrentQuestionIndex(currentQuestionIndex + 1);
-                setShouldHideSkipAnswer(skippedQuestionsCount >= MAX_SKIP);
+        // We have enough answers, let's call expectID KBA to verify them
+        if (userAnswers.length - skippedQuestionsCount >= questions.length - MAX_SKIP) {
+            const tempAnswers = _.map(userAnswers, _.clone);
+
+            // Auto skip any remaining questions
+            if (tempAnswers.length < questions.length) {
+                for (let i = tempAnswers.length; i < questions.length; i++) {
+                    tempAnswers[i] = {question: questions[i].type, answer: SKIP_QUESTION_TEXT};
+                }
             }
+
+            BankAccounts.answerQuestionsForWallet(tempAnswers, idNumber);
+            setUserAnswers(tempAnswers);
+        } else {
+            // Else, show next question
+            setCurrentQuestionIndex(currentQuestionIndex + 1);
+            setShouldHideSkipAnswer(skippedQuestionsCount >= MAX_SKIP);
         }
     };
 
+    const validate = (values) => {
+        const errors = {};
+        if (!values.answer) {
+            errors.answer = translate('additionalDetailsStep.selectAnswer');
+        }
+        return errors;
+    };
+
     return (
         <View style={styles.flex1}>
             <View style={styles.ph5}>
@@ -131,33 +131,24 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
                     {translate('additionalDetailsStep.helpLink')}
                 </TextLink>
             </View>
-            <FormScrollView ref={formRef}>
-                <View
-                    style={styles.m5}
-                    key={currentQuestion.type}
-                >
-                    <Text style={[styles.textStrong, styles.mb5]}>{currentQuestion.prompt}</Text>
-                    <RadioButtons
-                        items={possibleAnswers}
-                        key={currentQuestionIndex}
-                        onPress={chooseAnswer}
-                    />
-                </View>
-            </FormScrollView>
-            <FixedFooter>
-                <FormAlertWithSubmitButton
-                    isAlertVisible={Boolean(errorMessage)}
-                    onSubmit={submitAnswers}
-                    onFixTheErrorsLinkPressed={() => {
-                        formRef.current.scrollTo({y: 0, animated: true});
-                    }}
-                    message={errorMessage}
-                    isLoading={walletAdditionalDetails.isLoading}
-                    buttonText={translate('common.saveAndContinue')}
-                    containerStyles={[styles.mh0, styles.mv0, styles.mb0]}
+            <FormProvider
+                formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
+                onSubmit={submitAnswers}
+                key={currentQuestionIndex}
+                validate={validate}
+                scrollContextEnabled
+                style={[styles.flexGrow1, styles.ph5]}
+                submitButtonText={translate('common.saveAndContinue')}
+            >
+                <InputWrapper
+                    InputComponent={SingleChoiceQuestion}
+                    inputID="answer"
+                    prompt={currentQuestion.prompt}
+                    possibleAnswers={possibleAnswers}
+                    currentQuestionIndex={currentQuestionIndex}
+                    onValueChange={chooseAnswer}
                 />
-                <OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />
-            </FixedFooter>
+            </FormProvider>
         </View>
     );
 }
diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
index 5a925ad4e7c3..2ed7854ee6ba 100644
--- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
@@ -7,7 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import * as Localize from '@libs/Localize';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const termsData = [
@@ -58,7 +58,7 @@ const termsData = [
     },
 ];
 
-const getLongTermsSections = () =>
+const getLongTermsSections = (styles) =>
     _.map(termsData, (section, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <View key={section.title + index}>
@@ -77,9 +77,10 @@ const getLongTermsSections = () =>
     ));
 
 function LongTermsForm() {
+    const styles = useThemeStyles();
     return (
         <>
-            <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections()}</CollapsibleSection>
+            <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections(styles)}</CollapsibleSection>
 
             <Text style={[styles.mb4, styles.mt6, styles.textMicroSupporting]}>
                 {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID}{' '}
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/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index c4946d3c07b4..2c3064d199ef 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -18,6 +18,7 @@ import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
@@ -94,9 +95,9 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
 
     const savePrivateNote = () => {
         const originalNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '');
-
+        let editedNote = '';
         if (privateNote.trim() !== originalNote.trim()) {
-            const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
+            editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
             Report.updatePrivateNotes(report.reportID, route.params.accountID, editedNote);
         }
 
@@ -104,9 +105,11 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
         debouncedSavePrivateNote('');
 
         Keyboard.dismiss();
-
-        // Take user back to the PrivateNotesView page
-        Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID));
+        if (!_.some({...report.privateNotes, [route.params.accountID]: {note: editedNote}}, (item) => item.note)) {
+            ReportUtils.navigateToDetailsPage(report);
+        } else {
+            Navigation.goBack(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
+        }
     };
 
     return (
@@ -117,7 +120,6 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
         >
             <HeaderWithBackButton
                 title={translate('privateNotes.title')}
-                subtitle={translate('privateNotes.myNote')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID))}
                 shouldShowBackButton
                 onCloseButtonPress={() => Navigation.dismissModal()}
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index 7bcf9c22690b..e9a4f11a7202 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -1,19 +1,20 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import * as UserUtils from '@libs/UserUtils';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -57,6 +58,20 @@ const defaultProps = {
 function PrivateNotesListPage({report, personalDetailsList, session}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const isFocused = useIsFocused();
+
+    useEffect(() => {
+        const navigateToEditPageTimeout = setTimeout(() => {
+            if (_.some(report.privateNotes, (item) => item.note) || !isFocused) {
+                return;
+            }
+            Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, session.accountID));
+        }, CONST.ANIMATED_TRANSITION);
+
+        return () => {
+            clearTimeout(navigateToEditPageTimeout);
+        };
+    }, [report.privateNotes, report.reportID, session.accountID, isFocused]);
 
     /**
      * Gets the menu item for each workspace
@@ -67,7 +82,6 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
      */
     function getMenuItem(item, index) {
         const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;
-
         return (
             <OfflineWithFeedback
                 key={`${keyTitle}_${index}`}
@@ -76,14 +90,16 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
                 onClose={item.dismissError}
                 errors={item.errors}
             >
-                <MenuItem
-                    title={keyTitle}
-                    icon={item.icon}
-                    iconType={CONST.ICON_TYPE_WORKSPACE}
+                <MenuItemWithTopDescription
+                    description={item.title}
+                    title={item.note}
                     onPress={item.action}
-                    shouldShowRightIcon
-                    fallbackIcon={item.fallbackIcon}
+                    shouldShowRightIcon={!item.disabled}
+                    numberOfLinesTitle={0}
+                    shouldRenderAsHTML
                     brickRoadIndicator={item.brickRoadIndicator}
+                    disabled={item.disabled}
+                    shouldGreyOutWhenDisabled={false}
                 />
             </OfflineWithFeedback>
         );
@@ -98,10 +114,10 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
         return _.chain(lodashGet(report, 'privateNotes', {}))
             .map((privateNote, accountID) => ({
                 title: Number(lodashGet(session, 'accountID', null)) === Number(accountID) ? translate('privateNotes.myNote') : lodashGet(personalDetailsList, [accountID, 'login'], ''),
-                icon: UserUtils.getAvatar(lodashGet(personalDetailsList, [accountID, 'avatar'], UserUtils.getDefaultAvatar(accountID)), accountID),
-                iconType: CONST.ICON_TYPE_AVATAR,
-                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, accountID)),
+                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, accountID)),
                 brickRoadIndicator: privateNoteBrickRoadIndicator(accountID),
+                note: lodashGet(privateNote, 'note', ''),
+                disabled: Number(session.accountID) !== Number(accountID),
             }))
             .value();
     }, [report, personalDetailsList, session, translate]);
@@ -116,6 +132,7 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
                 shouldShowBackButton
                 onCloseButtonPress={() => Navigation.dismissModal()}
             />
+            <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
             <ScrollView contentContainerStyle={styles.flexGrow1}>{_.map(privateNotes, (item, index) => getMenuItem(item, index))}</ScrollView>
         </ScreenWrapper>
     );
@@ -132,6 +149,9 @@ export default compose(
         personalDetailsList: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
     withNetwork(),
 )(PrivateNotesListPage);
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index ffe8271629f4..97ec3f99da3c 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -254,7 +254,7 @@ function ProfilePage(props) {
                                 title={`${props.translate('privateNotes.title')}`}
                                 titleStyle={styles.flex1}
                                 icon={Expensicons.Pencil}
-                                onPress={() => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID))}
+                                onPress={() => ReportUtils.navigateToPrivateNotes(props.report, props.session)}
                                 wrapperStyle={styles.breakAll}
                                 shouldShowRightIcon
                                 brickRoadIndicator={Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
index c2aa706bb252..60b5d23b39da 100644
--- a/src/pages/ReferralDetailsPage.js
+++ b/src/pages/ReferralDetailsPage.js
@@ -14,7 +14,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -40,6 +40,7 @@ const defaultProps = {
 };
 
 function ReferralDetailsPage({route, account}) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     let {contentType} = route.params;
 
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index 3cbb3111e089..d91c8df7bed0 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -5,39 +6,39 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import Navigation from '@navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
-import * as Link from '@userActions/Link';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
     ...withLocalizePropTypes,
+
+    /** policyID of the workspace where user is setting up bank account */
+    policyID: PropTypes.string.isRequired,
 };
-function Enable2FAPrompt(props) {
+
+function Enable2FAPrompt({translate, policyID}) {
     const styles = useThemeStyles();
-    const secureYourAccountUrl = encodeURI(
-        `settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute()}","isFromNewDot":"true"}`,
-    );
 
     return (
         <Section
-            title={props.translate('validationStep.enable2FATitle')}
+            title={translate('validationStep.enable2FATitle')}
             icon={Illustrations.ShieldYellow}
             menuItems={[
                 {
-                    title: props.translate('validationStep.secureYourAccount'),
+                    title: translate('validationStep.secureYourAccount'),
                     onPress: () => {
-                        Link.openOldDotLink(secureYourAccountUrl);
+                        Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID)));
                     },
                     icon: Expensicons.Shield,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
                     wrapperStyle: [styles.cardMenuItem],
-                    link: () => Link.buildOldDotURL(secureYourAccountUrl),
                 },
             ]}
         >
             <View style={[styles.mv3]}>
-                <Text>{props.translate('validationStep.enable2FAText')}</Text>
+                <Text>{translate('validationStep.enable2FAText')}</Text>
             </View>
         </Section>
     );
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 4f4285d1a62b..13ab2794ea09 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -50,7 +50,7 @@ function EnableStep(props) {
     const styles = useThemeStyles();
     const isUsingExpensifyCard = props.user.isUsingExpensifyCard;
     const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
-    const {icon, iconSize} = getBankIcon(achData.bankName);
+    const {icon, iconSize} = getBankIcon({bankName: achData.bankName, themeStyles: styles});
     const formattedBankAccountNumber = achData.accountNumber ? `${props.translate('paymentMethodList.accountLastFour')} ${achData.accountNumber.slice(-4)}` : '';
     const bankName = achData.addressName;
 
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 284c48c1609a..4620ab1ddcae 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -520,6 +520,7 @@ class ReimbursementAccountPage extends React.Component {
                 <ValidationStep
                     reimbursementAccount={this.props.reimbursementAccount}
                     onBackButtonPress={this.goBack}
+                    policyID={policyID}
                 />
             );
         }
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index 69de88f12327..31f5f0f4d315 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -52,6 +52,14 @@ const validate = (values) => {
         }
     }
 
+    if (values.firstName && !ValidationUtils.isValidPersonName(values.firstName)) {
+        errors.firstName = 'bankAccount.error.firstName';
+    }
+
+    if (values.lastName && !ValidationUtils.isValidPersonName(values.lastName)) {
+        errors.lastName = 'bankAccount.error.lastName';
+    }
+
     if (values.ssnLast4 && !ValidationUtils.isValidSSNLastFour(values.ssnLast4)) {
         errors.ssnLast4 = 'bankAccount.error.ssnLast4';
     }
@@ -77,6 +85,7 @@ const validate = (values) => {
  */
 const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido, onBackButtonPress, getDefaultStateForField}, ref) => {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
     const defaultValues = useMemo(
         () => ({
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 17a66e84e055..b64f8e098a8a 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -43,6 +43,9 @@ const propTypes = {
         /** If user has two-factor authentication enabled */
         requiresTwoFactorAuth: PropTypes.bool,
     }),
+
+    /** policyID of the workspace where user is setting up bank account */
+    policyID: PropTypes.string.isRequired,
 };
 
 const defaultProps = {
@@ -73,7 +76,7 @@ const filterInput = (amount) => {
     return value;
 };
 
-function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account}) {
+function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account, policyID}) {
     const styles = useThemeStyles();
     /**
      * @param {Object} values - form input values passed by the Form component
@@ -180,7 +183,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                     </View>
                     {!requiresTwoFactorAuth && (
                         <View style={[styles.mln5, styles.mrn5]}>
-                            <Enable2FAPrompt />
+                            <Enable2FAPrompt policyID={policyID} />
                         </View>
                     )}
                 </Form>
@@ -211,7 +214,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                         />
                     </Section>
                     {reimbursementAccount.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={reimbursementAccount} />}
-                    {!requiresTwoFactorAuth && <Enable2FAPrompt />}
+                    {!requiresTwoFactorAuth && <Enable2FAPrompt policyID={policyID} />}
                 </ScrollView>
             )}
         </ScreenWrapper>
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 6d1a1e4db077..442276b19a0b 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -137,13 +137,13 @@ function ReportDetailsPage(props) {
                 translationKey: 'privateNotes.title',
                 icon: Expensicons.Pencil,
                 isAnonymousAction: false,
-                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID)),
+                action: () => ReportUtils.navigateToPrivateNotes(props.report, props.session),
                 brickRoadIndicator: Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
             });
         }
 
         return items;
-    }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom]);
+    }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom, props.session]);
 
     const displayNamesWithTooltips = useMemo(() => {
         const hasMultipleParticipants = participants.length > 1;
@@ -256,5 +256,8 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(ReportDetailsPage);
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/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/ReportScreen.js b/src/pages/home/ReportScreen.js
index 33646e7129cd..68d2af8beb63 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -162,6 +162,7 @@ function ReportScreen({
     const prevUserLeavingStatus = usePrevious(userLeavingStatus);
     const [isBannerVisible, setIsBannerVisible] = useState(true);
     const [listHeight, setListHeight] = useState(0);
+    const [scrollPosition, setScrollPosition] = useState({});
 
     const reportID = getReportID(route);
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
@@ -371,8 +372,10 @@ function ReportScreen({
         [report, reportMetadata, isLoading, shouldHideReport, isOptimisticDelete, userLeavingStatus],
     );
 
+    const actionListValue = useMemo(() => ({flatListRef, scrollPosition, setScrollPosition}), [flatListRef, scrollPosition, setScrollPosition]);
+
     return (
-        <ActionListContext.Provider value={flatListRef}>
+        <ActionListContext.Provider value={actionListValue}>
             <ReactionListContext.Provider value={reactionListRef}>
                 <ScreenWrapper
                     style={screenWrapperStyle}
diff --git a/src/pages/home/ReportScreenContext.ts b/src/pages/home/ReportScreenContext.ts
index ab85c9e3afb9..49681d46e4be 100644
--- a/src/pages/home/ReportScreenContext.ts
+++ b/src/pages/home/ReportScreenContext.ts
@@ -7,11 +7,17 @@ type ReactionListRef = {
     isActiveReportAction: (actionID: number | string) => boolean;
 };
 
-type ActionListContextType = RefObject<FlatList<unknown>> | null;
+type FlatListRefType = RefObject<FlatList<unknown>> | null;
+
+type ActionListContextType = {
+    flatListRef: FlatListRefType;
+    scrollPosition: {offset: number} | null;
+    setScrollPosition: (position: {offset: number}) => void;
+};
 type ReactionListContextType = RefObject<ReactionListRef> | null;
 
-const ActionListContext = createContext<ActionListContextType>(null);
+const ActionListContext = createContext<ActionListContextType>({flatListRef: null, scrollPosition: null, setScrollPosition: () => {}});
 const ReactionListContext = createContext<ReactionListContextType>(null);
 
 export {ActionListContext, ReactionListContext};
-export type {ReactionListRef, ActionListContextType, ReactionListContextType};
+export type {ReactionListRef, ActionListContextType, ReactionListContextType, FlatListRefType};
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
index 18351f86a400..051e559c34b6 100755
--- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js
@@ -13,6 +13,8 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 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';
@@ -49,9 +51,11 @@ const defaultProps = {
     ...GenericReportActionContextMenuDefaultProps,
 };
 function BaseReportActionContextMenu(props) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const menuItemRefs = useRef({});
     const [shouldKeepOpen, setShouldKeepOpen] = useState(false);
-    const wrapperStyle = getReportActionContextMenuStyles(props.isMini, props.isSmallScreenWidth);
+    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 663db82a6067..f3075cb6b698 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);
 
@@ -535,7 +526,7 @@ function ComposerWithSuggestions({
 
     return (
         <>
-            <View style={[containerComposeStyles, styles.textInputComposeBorder]}>
+            <View style={[containerComposeStyles(styles), styles.textInputComposeBorder]}>
                 <Composer
                     checkComposerVisibility={checkComposerVisibility}
                     autoFocus={shouldAutoFocus}
@@ -546,7 +537,7 @@ function ComposerWithSuggestions({
                     onChangeText={(commentValue) => updateComment(commentValue, true)}
                     onKeyPress={triggerHotkeyActions}
                     textAlignVertical="top"
-                    style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
+                    style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose]}
                     maxLines={maxComposerLines}
                     onFocus={onFocus}
                     onBlur={onBlur}
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index 7bce37dc3826..89e1ecb6156b 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
      */
@@ -474,9 +468,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/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
index 4aedc3e7737a..e55b96ad99f5 100644
--- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js
+++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
@@ -149,7 +149,8 @@ function SuggestionMention({
                 if (!detail.login || detail.isOptimisticPersonalDetail) {
                     return false;
                 }
-                if (searchValue && !`${detail.displayName} ${detail.login}`.toLowerCase().includes(searchValue.toLowerCase())) {
+                const displayText = detail.displayName === formatPhoneNumber(detail.login) ? detail.displayName : `${detail.displayName} ${detail.login}`;
+                if (searchValue && !displayText.toLowerCase().includes(searchValue.toLowerCase())) {
                     return false;
                 }
                 return true;
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 17d49bd0f486..85f016b79f7f 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -45,9 +45,9 @@ import SelectionScraper from '@libs/SelectionScraper';
 import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as store from '@userActions/ReimbursementAccount/store';
@@ -134,6 +134,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);
@@ -148,7 +150,7 @@ function ReportActionItem(props) {
     const originalReport = props.report.reportID === originalReportID ? props.report : ReportUtils.getReport(originalReportID);
     const isReportActionLinked = props.linkedReportActionID === props.action.reportActionID;
 
-    const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(themeColors.highlightBG) : {}), [isReportActionLinked]);
+    const highlightedBackgroundColorIfNeeded = useMemo(() => (isReportActionLinked ? StyleUtils.getBackgroundColorStyle(theme.highlightBG) : {}), [isReportActionLinked, theme]);
     const originalMessage = lodashGet(props.action, 'originalMessage', {});
 
     // IOUDetails only exists when we are sending money
@@ -544,7 +546,7 @@ function ReportActionItem(props) {
                 <ReportActionItemSingle
                     action={props.action}
                     showHeader={!props.draftMessage}
-                    wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}
+                    wrapperStyle={isWhisper ? styles.pt1 : {}}
                     shouldShowSubscriptAvatar={props.shouldShowSubscriptAvatar}
                     report={props.report}
                     iouReport={props.iouReport}
@@ -556,7 +558,7 @@ function ReportActionItem(props) {
             );
         }
 
-        return <ReportActionItemGrouped wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}>{content}</ReportActionItemGrouped>;
+        return <ReportActionItemGrouped wrapperStyle={isWhisper ? styles.pt1 : {}}>{content}</ReportActionItemGrouped>;
     };
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
@@ -586,7 +588,6 @@ function ReportActionItem(props) {
                             <ReportActionItemSingle
                                 action={parentReportAction}
                                 showHeader={!props.draftMessage}
-                                wrapperStyles={[styles.chatItem]}
                                 report={props.report}
                             >
                                 <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
@@ -671,7 +672,7 @@ function ReportActionItem(props) {
         >
             <Hoverable
                 shouldHandleScroll
-                disabled={Boolean(props.draftMessage)}
+                isDisabled={Boolean(props.draftMessage)}
             >
                 {(hovered) => (
                     <View style={highlightedBackgroundColorIfNeeded}>
@@ -686,7 +687,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/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
index 2d55ecbbe037..8c8c51bda3c2 100644
--- a/src/pages/home/report/ReportActionItemGrouped.js
+++ b/src/pages/home/report/ReportActionItemGrouped.js
@@ -1,25 +1,26 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
+import stylePropTypes from '@styles/stylePropTypes';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Children view component for this action item */
     children: PropTypes.node.isRequired,
 
     /** Styles for the outermost View */
-    // eslint-disable-next-line react/forbid-prop-types
-    wrapperStyles: PropTypes.arrayOf(PropTypes.object),
+    wrapperStyle: stylePropTypes,
 };
 
 const defaultProps = {
-    wrapperStyles: [styles.chatItem],
+    wrapperStyle: undefined,
 };
 
-function ReportActionItemGrouped(props) {
+function ReportActionItemGrouped({wrapperStyle, children}) {
+    const styles = useThemeStyles();
     return (
-        <View style={props.wrapperStyles}>
-            <View style={[styles.chatItemRightGrouped]}>{props.children}</View>
+        <View style={[styles.chatItem, wrapperStyle]}>
+            <View style={styles.chatItemRightGrouped}>{children}</View>
         </View>
     );
 }
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index c8ea0d5e3514..1ed5db385f7a 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -397,7 +397,7 @@ function ReportActionItemMessageEdit(props) {
                             </PressableWithFeedback>
                         </Tooltip>
                     </View>
-                    <View style={[containerComposeStyles, styles.textInputComposeBorder]}>
+                    <View style={[containerComposeStyles(styles), styles.textInputComposeBorder]}>
                         <Composer
                             multiline
                             ref={(el) => {
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index e69531e2cc53..c50f868cae99 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -19,9 +19,10 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
+import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
@@ -33,8 +34,7 @@ const propTypes = {
     action: PropTypes.shape(reportActionPropTypes).isRequired,
 
     /** Styles for the outermost View */
-    // eslint-disable-next-line react/forbid-prop-types
-    wrapperStyles: PropTypes.arrayOf(PropTypes.object),
+    wrapperStyle: stylePropTypes,
 
     /** Children view component for this action item */
     children: PropTypes.node.isRequired,
@@ -61,7 +61,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    wrapperStyles: [styles.chatItem],
+    wrapperStyle: undefined,
     showHeader: true,
     shouldShowSubscriptAvatar: false,
     hasBeenFlagged: false,
@@ -79,6 +79,8 @@ const showWorkspaceDetails = (reportID) => {
 };
 
 function ReportActionItemSingle(props) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
@@ -165,10 +167,7 @@ function ReportActionItemSingle(props) {
                     icons={[icon, secondaryAvatar]}
                     isInReportAction
                     shouldShowTooltip
-                    secondAvatarStyle={[
-                        StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG),
-                        props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG) : undefined,
-                    ]}
+                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.highlightBG) : undefined]}
                 />
             );
         }
@@ -207,7 +206,7 @@ function ReportActionItemSingle(props) {
     const statusTooltipText = formattedDate ? `${statusText} (${formattedDate})` : statusText;
 
     return (
-        <View style={props.wrapperStyles}>
+        <View style={[styles.chatItem, props.wrapperStyle]}>
             <PressableWithoutFeedback
                 style={[styles.alignSelfStart, styles.mr3]}
                 onPressIn={ControlSelection.block}
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/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index a69abeb94089..29257d9201fa 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;
@@ -419,9 +414,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/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index 3b8a1edf48c3..b468607ed8f3 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -266,6 +266,9 @@ class ContactMethodDetailsPage extends Component {
                         onCancel={() => this.toggleDeleteModal(false)}
                         onModalHide={() => {
                             InteractionManager.runAfterInteractions(() => {
+                                if (!this.validateCodeFormRef.current) {
+                                    return;
+                                }
                                 this.validateCodeFormRef.current.focusLastSelected();
                             });
                         }}
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 db2be7f5b681..95a0efa2fc39 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -44,7 +44,7 @@ function SecuritySettingsPage(props) {
             {
                 translationKey: 'twoFactorAuth.headerTitle',
                 icon: Expensicons.Shield,
-                action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_2FA)),
+                action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute())),
             },
             {
                 translationKey: 'closeAccountPage.closeAccount',
@@ -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/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index bd1068693785..69d662ba6e81 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -11,7 +11,7 @@ import StepWrapperPropTypes from './StepWrapperPropTypes';
 function StepWrapper({
     title = '',
     stepCounter = null,
-    onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings,
+    onBackButtonPress = () => TwoFactorAuthActions.quitAndNavigateBack(),
     children = null,
     shouldEnableKeyboardAvoidingView = true,
     onEntryTransitionEnd,
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index bc85b01cd3da..86d218ec63ae 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -24,7 +24,7 @@ import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
-function CodesStep({account = defaultAccount}) {
+function CodesStep({account = defaultAccount, backTo}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -50,6 +50,7 @@ function CodesStep({account = defaultAccount}) {
                 text: translate('twoFactorAuth.stepCodes'),
                 total: 3,
             }}
+            onBackButtonPress={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <Section
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
index 72b005122a33..9de25ecb8f4b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
@@ -26,7 +26,7 @@ function DisabledStep() {
                 <Button
                     success
                     text={translate('common.buttonConfirm')}
-                    onPress={TwoFactorAuthActions.quitAndNavigateBackToSettings}
+                    onPress={() => TwoFactorAuthActions.quitAndNavigateBack()}
                 />
             </FixedFooter>
         </StepWrapper>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index c1cb9dc460ea..de36888f30b8 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,13 +1,24 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
+import Navigation from '@navigation/Navigation';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 
-function SuccessStep() {
+const propTypes = {
+    /** The route where user needs to be redirected after setting up 2FA */
+    backTo: PropTypes.string,
+};
+
+const defaultProps = {
+    backTo: '',
+};
+
+function SuccessStep({backTo}) {
     const {setStep} = useTwoFactorAuthContext();
 
     const {translate} = useLocalize();
@@ -29,10 +40,16 @@ function SuccessStep() {
                 onButtonPress={() => {
                     TwoFactorAuthActions.clearTwoFactorAuthData();
                     setStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
+                    if (backTo) {
+                        Navigation.navigate(backTo);
+                    }
                 }}
             />
         </StepWrapper>
     );
 }
 
+SuccessStep.propTypes = propTypes;
+SuccessStep.defaultProps = defaultProps;
+
 export default SuccessStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
index 31a33efa3996..720c2e02b3c0 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
@@ -1,3 +1,5 @@
+import {useRoute} from '@react-navigation/native';
+import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
@@ -13,6 +15,8 @@ import TwoFactorAuthContext from './TwoFactorAuthContext';
 import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
 
 function TwoFactorAuthSteps({account = defaultAccount}) {
+    const route = useRoute();
+    const backTo = lodashGet(route.params, 'backTo', '');
     const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
     const {setAnimationDirection} = useAnimatedStepContext();
@@ -45,17 +49,17 @@ function TwoFactorAuthSteps({account = defaultAccount}) {
     const renderStep = () => {
         switch (currentStep) {
             case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
-                return <CodesStep />;
+                return <CodesStep backTo={backTo} />;
             case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
                 return <VerifyStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
-                return <SuccessStep />;
+                return <SuccessStep backTo={backTo} />;
             case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED:
                 return <EnabledStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED:
                 return <DisabledStep />;
             default:
-                return <CodesStep />;
+                return <CodesStep backTo={backTo} />;
         }
     };
 
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/Card/BaseGetPhysicalCard.js b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
index bc37cf78d6be..4176393e92dd 100644
--- a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
+++ b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
@@ -13,7 +13,7 @@ import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import assignedCardPropTypes from '@pages/settings/Wallet/assignedCardPropTypes';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -113,7 +113,7 @@ const defaultProps = {
     session: {},
     loginList: {},
     isConfirmation: false,
-    renderContent: (onSubmit, submitButtonText, children = () => {}, onValidate = () => ({})) => (
+    renderContent: (onSubmit, submitButtonText, styles, children = () => {}, onValidate = () => ({})) => (
         <Form
             formID={ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM}
             submitButtonText={submitButtonText}
@@ -144,6 +144,7 @@ function BaseGetPhysicalCard({
     title,
     onValidate,
 }) {
+    const styles = useThemeStyles();
     const isRouteSet = useRef(false);
 
     useEffect(() => {
@@ -208,7 +209,7 @@ function BaseGetPhysicalCard({
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
             />
             <Text style={[styles.textHeadline, styles.mh5, styles.mb5]}>{headline}</Text>
-            {renderContent(onSubmit, submitButtonText, children, onValidate)}
+            {renderContent(onSubmit, submitButtonText, styles, children, onValidate)}
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
index 10069bceb1c4..0ae83cd28b5c 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
@@ -8,7 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -71,6 +71,7 @@ function GetPhysicalCardConfirm({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     return (
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
index 1ab573c51875..3c87bed424ba 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
@@ -6,7 +6,7 @@ import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -43,6 +43,7 @@ function GetPhysicalCardName({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const onValidate = (values) => {
         const errors = {};
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
index d03bfe74c059..82b684332491 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -42,6 +42,7 @@ function GetPhysicalCardPhone({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const onValidate = (values) => {
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index ef11f8c7dc6e..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();
 
@@ -222,7 +224,7 @@ function PaymentMethodList({
 
             return _.map(assignedCards, (card) => {
                 const isExpensifyCard = CardUtils.isExpensifyCard(card.cardID);
-                const icon = getBankIcon(card.bank, true);
+                const icon = getBankIcon({bankName: card.bank, isCard: true, themeStyles: styles});
 
                 // In the case a user has been assigned multiple physical Expensify Cards under one domain, display the Card with PAN
                 const expensifyCardDescription = numberPhysicalExpensifyCards > 1 ? CardUtils.getCardDescription(card.cardID) : translate('walletPage.expensifyCard');
@@ -245,7 +247,7 @@ function PaymentMethodList({
 
         // Hide any billing cards that are not P2P debit cards for now because you cannot make them your default method, or delete them
         const filteredCardList = _.filter(paymentCardList, (card) => card.accountData.additionalData.isP2PDebitCard);
-        let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList);
+        let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList, styles);
 
         if (!_.isEmpty(filterType)) {
             combinedPaymentMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterType);
@@ -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]);
+    }, [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/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js
index 59704e323eb6..2414edb29087 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.js
@@ -94,7 +94,7 @@ function TransferBalancePage(props) {
      * @returns {Object|undefined}
      */
     function getSelectedPaymentMethodAccount() {
-        const paymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList);
+        const paymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles);
 
         const defaultAccount = _.find(paymentMethods, (method) => method.isDefault);
         const selectedAccount = _.find(
@@ -111,7 +111,7 @@ function TransferBalancePage(props) {
         PaymentMethods.saveWalletTransferMethodType(filterPaymentMethodType);
 
         // If we only have a single option for the given paymentMethodType do not force the user to make a selection
-        const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList);
+        const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles);
 
         const filteredMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterPaymentMethodType);
         if (filteredMethods.length === 1) {
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/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index ecff9af83dbf..6f452eed3629 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -223,7 +223,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
         // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors
-        const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, paymentCardList);
+        const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, paymentCardList, styles);
 
         const previousPaymentMethod = _.find(paymentMethods, (method) => method.isDefault);
         const currentPaymentMethod = _.find(paymentMethods, (method) => method.methodID === paymentMethod.methodID);
@@ -239,6 +239,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
         paymentMethod.selectedPaymentMethodType,
         bankAccountList,
         fundList,
+        styles,
     ]);
 
     const deletePaymentMethod = useCallback(() => {
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 1efab943d33d..639d6a24f2b4 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -5,6 +5,8 @@ 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 useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
@@ -284,10 +286,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/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 1b5ac55c9da2..b6c82fc843cd 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
+import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import SignInGradient from '@assets/images/home-fade-gradient.svg';
@@ -93,6 +93,8 @@ function SignInPageLayout(props) {
         scrollPageToTop();
     }, [props.welcomeHeader, props.welcomeText, prevPreferredLocale, props.preferredLocale]);
 
+    const scrollViewStyles = useMemo(() => scrollViewContentContainerStyles(styles), [styles]);
+
     return (
         <View style={containerStyles}>
             {!props.shouldShowSmallScreen ? (
@@ -152,7 +154,7 @@ function SignInPageLayout(props) {
                 </View>
             ) : (
                 <ScrollView
-                    contentContainerStyle={scrollViewContentContainerStyles}
+                    contentContainerStyle={scrollViewStyles}
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index b058c78aca86..ac9b7b66851a 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -1,6 +1,4 @@
-import styles from '@styles/styles';
-
 // On web, we can use flex to fit the content to fit the viewport within a ScrollView.
-const scrollViewContentContainerStyles = styles.flex1;
+const scrollViewContentContainerStyles = (styles) => styles.flex1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
index 76f847f638b9..1c474ab6c722 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
@@ -1,7 +1,5 @@
-import styles from '@styles/styles';
-
 // Using flexGrow on mobile allows the ScrollView container to grow to fit the content.
 // This is necessary because making the sign-in content fit exactly the viewheight causes the scroll to stop working on mobile.
-const scrollViewContentContainerStyles = styles.flexGrow1;
+const scrollViewContentContainerStyles = (styles) => styles.flexGrow1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
index 13af9829305d..44e024208fc8 100644
--- a/src/pages/signin/Terms.js
+++ b/src/pages/signin/Terms.js
@@ -1,15 +1,22 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
-const linkStyles = [styles.textExtraSmallSupporting, styles.link];
-
 function Terms(props) {
+    const styles = useThemeStyles();
+    const [linkStyles, containerStyles] = useMemo(
+        () => [
+            [styles.textExtraSmallSupporting, styles.link],
+            [styles.textExtraSmallSupporting, styles.mb4],
+        ],
+        [styles],
+    );
+
     return (
-        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
+        <Text style={containerStyles}>
             {props.translate('termsOfUse.phrase1')}
             <TextLink
                 style={linkStyles}
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index 9d6f2fbac202..7c48d557cd16 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -378,7 +378,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 a817b4f94e9b..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);
@@ -196,10 +193,13 @@ function TaskAssigneeSelectorModal(props) {
 
         // Check to see if we're editing a task and if so, update the assignee
         if (report) {
-            const assigneeChatReport = Task.setAssigneeValue(option.login, option.accountID, props.route.params.reportID, OptionsListUtils.isCurrentUser(option));
+            if (option.accountID !== report.managerID) {
+                const assigneeChatReport = Task.setAssigneeValue(option.login, option.accountID, props.route.params.reportID, OptionsListUtils.isCurrentUser(option));
 
-            // Pass through the selected assignee
-            Task.editTaskAssigneeAndNavigate(report, props.session.accountID, option.login, option.accountID, assigneeChatReport);
+                // Pass through the selected assignee
+                Task.editTaskAssignee(report, props.session.accountID, option.login, option.accountID, assigneeChatReport);
+            }
+            return Navigation.dismissModal(report.reportID);
         }
     };
 
@@ -250,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/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 9069c7acdb68..6901f2562ee3 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -15,6 +15,7 @@ import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -42,9 +43,14 @@ function TaskDescriptionPage(props) {
 
     const submit = useCallback(
         (values) => {
-            // Set the description of the report in the store and then call Task.editTaskReport
-            // to update the description of the report on the server
-            Task.editTaskAndNavigate(props.report, {description: values.description});
+            // props.report.description might contain CRLF from the server
+            if (StringUtils.normalizeCRLF(values.description) !== StringUtils.normalizeCRLF(props.report.description)) {
+                // Set the description of the report in the store and then call EditTask API
+                // to update the description of the report on the server
+                Task.editTask(props.report, {description: values.description});
+            }
+
+            Navigation.dismissModal(props.report.reportID);
         },
         [props],
     );
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index a7e762e277e1..0e6326b21e7b 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -51,9 +51,13 @@ function TaskTitlePage(props) {
 
     const submit = useCallback(
         (values) => {
-            // Set the title of the report in the store and then call Task.editTaskReport
-            // to update the title of the report on the server
-            Task.editTaskAndNavigate(props.report, {title: values.title});
+            if (values.title !== props.report.reportName) {
+                // Set the title of the report in the store and then call EditTask API
+                // to update the title of the report on the server
+                Task.editTask(props.report, {title: values.title});
+            }
+
+            Navigation.dismissModal(props.report.reportID);
         },
         [props],
     );
diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js
index 0d33be70f1b7..e79a2add5213 100644
--- a/src/pages/wallet/WalletStatementPage.js
+++ b/src/pages/wallet/WalletStatementPage.js
@@ -87,8 +87,8 @@ function WalletStatementPage(props) {
 
     const year = yearMonth.substring(0, 4) || getYear(new Date());
     const month = yearMonth.substring(4) || getMonth(new Date());
-    const monthName = format(new Date(year, month), CONST.DATE.MONTH_FORMAT);
-    const title = `${monthName} ${year} statement`;
+    const monthName = format(new Date(year, month - 1), CONST.DATE.MONTH_FORMAT);
+    const title = props.translate('statementPage.title', year, monthName);
     const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${yearMonth}`;
 
     return (
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/containerComposeStyles/index.native.ts b/src/styles/containerComposeStyles/index.native.ts
index 9e1398b8176f..3104b6878b2a 100644
--- a/src/styles/containerComposeStyles/index.native.ts
+++ b/src/styles/containerComposeStyles/index.native.ts
@@ -1,6 +1,5 @@
-import styles from '@styles/styles';
 import ContainerComposeStyles from './types';
 
-const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing];
+const containerComposeStyles: ContainerComposeStyles = (styles) => [styles.textInputComposeSpacing];
 
 export default containerComposeStyles;
diff --git a/src/styles/containerComposeStyles/index.ts b/src/styles/containerComposeStyles/index.ts
index 0e40adda571e..c6161fd2d9df 100644
--- a/src/styles/containerComposeStyles/index.ts
+++ b/src/styles/containerComposeStyles/index.ts
@@ -1,7 +1,6 @@
-import styles from '@styles/styles';
 import ContainerComposeStyles from './types';
 
 // We need to set paddingVertical = 0 on web to avoid displaying a normal pointer on some parts of compose box when not in focus
-const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing, {paddingVertical: 0}];
+const containerComposeStyles: ContainerComposeStyles = (styles) => [styles.textInputComposeSpacing, {paddingVertical: 0}];
 
 export default containerComposeStyles;
diff --git a/src/styles/containerComposeStyles/types.ts b/src/styles/containerComposeStyles/types.ts
index 278039691b8a..0b2305f52b56 100644
--- a/src/styles/containerComposeStyles/types.ts
+++ b/src/styles/containerComposeStyles/types.ts
@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import themeStyles from '@styles/styles';
 
-type ContainerComposeStyles = ViewStyle[];
+type ContainerComposeStyles = (styles: typeof themeStyles) => ViewStyle[];
 
 export default ContainerComposeStyles;
diff --git a/src/styles/getContextMenuItemStyles/index.native.ts b/src/styles/getContextMenuItemStyles/index.native.ts
index 798e64fb348c..c8c1a828a0f3 100644
--- a/src/styles/getContextMenuItemStyles/index.native.ts
+++ b/src/styles/getContextMenuItemStyles/index.native.ts
@@ -1,6 +1,5 @@
-import styles from '@styles/styles';
 import GetContextMenuItemStyle from './types';
 
-const getContextMenuItemStyle: GetContextMenuItemStyle = () => [styles.popoverMenuItem];
+const getContextMenuItemStyles: GetContextMenuItemStyle = (styles) => [styles.popoverMenuItem];
 
-export default getContextMenuItemStyle;
+export default getContextMenuItemStyles;
diff --git a/src/styles/getContextMenuItemStyles/index.ts b/src/styles/getContextMenuItemStyles/index.ts
index 3f5a8049d31d..42635033a244 100644
--- a/src/styles/getContextMenuItemStyles/index.ts
+++ b/src/styles/getContextMenuItemStyles/index.ts
@@ -1,12 +1,11 @@
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import GetContextMenuItemStyle from './types';
 
-const GetContextMenuItemStyles: GetContextMenuItemStyle = (windowWidth) => {
+const getContextMenuItemStyles: GetContextMenuItemStyle = (styles, windowWidth) => {
     if (windowWidth && windowWidth > variables.mobileResponsiveWidthBreakpoint) {
         return [styles.popoverMenuItem, styles.contextMenuItemPopoverMaxWidth];
     }
     return [styles.popoverMenuItem];
 };
 
-export default GetContextMenuItemStyles;
+export default getContextMenuItemStyles;
diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/getContextMenuItemStyles/types.ts
index 102f63575bd9..6a101fdae413 100644
--- a/src/styles/getContextMenuItemStyles/types.ts
+++ b/src/styles/getContextMenuItemStyles/types.ts
@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import {ThemeStyles} from '@styles/styles';
 
-type GetContextMenuItemStyle = (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 c250bdf9498d..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 themeColors from './themes/default';
+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 {
@@ -39,6 +39,8 @@ type GetModalStyles = {
 export default function getModalStyles(
     type: ModalType | undefined,
     windowDimensions: WindowDimensions,
+    theme: ThemeColors,
+    styles: ThemeStyles,
     popoverAnchorPosition: ViewStyle = {},
     innerContainerStyle: ViewStyle = {},
     outerStyle: ViewStyle = {},
@@ -101,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
@@ -128,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';
@@ -196,7 +198,7 @@ export default function getModalStyles(
             modalContainerStyle = {
                 borderRadius: 12,
                 borderWidth: 1,
-                borderColor: themeColors.border,
+                borderColor: theme.border,
                 justifyContent: 'center',
                 overflow: 'hidden',
                 boxShadow: variables.popoverMenuShadow,
diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts
index cd3843169a43..781d0cc11549 100644
--- a/src/styles/getReportActionContextMenuStyles.ts
+++ b/src/styles/getReportActionContextMenuStyles.ts
@@ -1,42 +1,40 @@
 import {ViewStyle} from 'react-native';
-import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeStyles} from './styles';
+import {ThemeColors} from './themes/types';
 import variables from './variables';
 
-const defaultWrapperStyle: ViewStyle = {
-    backgroundColor: themeColors.componentBG,
-};
+const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
+    backgroundColor: theme.componentBG,
+});
 
-const miniWrapperStyle: ViewStyle[] = [
+const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle[] => [
     styles.flexRow,
-    defaultWrapperStyle,
+    getDefaultWrapperStyle(theme),
     {
         borderRadius: variables.buttonBorderRadius,
         borderWidth: 1,
-        borderColor: themeColors.border,
+        borderColor: theme.border,
         // In Safari, when welcome messages use a code block (triple backticks), they would overlap the context menu below when there is no scrollbar without the transform style.
         // NOTE: asserting "transform" to a valid type, because it isn't possible to augment "transform".
         transform: 'translateZ(0)' as unknown as ViewStyle['transform'],
     },
 ];
 
-const bigWrapperStyle: ViewStyle[] = [styles.flexColumn, defaultWrapperStyle];
-
 /**
  * Generate the wrapper styles for the ReportActionContextMenu.
  *
  * @param isMini
  * @param isSmallScreenWidth
+ * @param theme
  */
-function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean): ViewStyle[] {
+function getReportActionContextMenuStyles(styles: ThemeStyles, isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] {
     if (isMini) {
-        return miniWrapperStyle;
+        return getMiniWrapperStyle(theme, styles);
     }
 
-    // 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 [
-        ...bigWrapperStyle,
+        styles.flexColumn,
+        getDefaultWrapperStyle(theme),
 
         // Small screens use a bottom-docked modal that already has vertical padding.
         isSmallScreenWidth ? {} : styles.pv3,
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/index.native.ts b/src/styles/optionRowStyles/index.native.ts
index 6198def8219a..334017ba3374 100644
--- a/src/styles/optionRowStyles/index.native.ts
+++ b/src/styles/optionRowStyles/index.native.ts
@@ -1,4 +1,3 @@
-import styles from '@styles/styles';
 import CompactContentContainerStyles from './types';
 
 /**
@@ -7,7 +6,7 @@ import CompactContentContainerStyles from './types';
  *  keeping compactContentContainerStyles as it is.
  *  https://github.com/Expensify/App/issues/14148
  */
-const compactContentContainerStyles: CompactContentContainerStyles = styles.alignItemsCenter;
+const compactContentContainerStyles: CompactContentContainerStyles = (styles) => styles.alignItemsCenter;
 
 export {
     // eslint-disable-next-line import/prefer-default-export
diff --git a/src/styles/optionRowStyles/index.ts b/src/styles/optionRowStyles/index.ts
index d0351be24553..ce8f542a13ca 100644
--- a/src/styles/optionRowStyles/index.ts
+++ b/src/styles/optionRowStyles/index.ts
@@ -1,7 +1,6 @@
-import styles from '@styles/styles';
 import CompactContentContainerStyles from './types';
 
-const compactContentContainerStyles: CompactContentContainerStyles = styles.alignItemsBaseline;
+const compactContentContainerStyles: CompactContentContainerStyles = (styles) => styles.alignItemsBaseline;
 
 export {
     // eslint-disable-next-line import/prefer-default-export
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts
index fcce41f6bc28..68eb91975f8e 100644
--- a/src/styles/optionRowStyles/types.ts
+++ b/src/styles/optionRowStyles/types.ts
@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import {ThemeStyles} from '@styles/styles';
 
-type CompactContentContainerStyles = ViewStyle;
+type CompactContentContainerStyles = (themeStyles: ThemeStyles) => ViewStyle;
 
 export default CompactContentContainerStyles;
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index c1b78a224eb3..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,
         ),
 
@@ -1806,6 +1810,11 @@ const styles = (theme: ThemeColors) =>
             verticalAlign: 'top',
         },
 
+        textInputCollapseCompose: {
+            maxHeight: '100%',
+            flex: 4,
+        },
+
         // composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669
         textInputComposeSpacing: {
             paddingVertical: 5,
@@ -2617,6 +2626,7 @@ const styles = (theme: ThemeColors) =>
                 padding: 0,
                 lineHeight: undefined,
             },
+            theme,
             0,
         ),
 
@@ -3979,10 +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);
 
 export default defaultStyles;
-export {stylesGenerator, type Styles};
+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/BankAccount.ts b/src/types/onyx/BankAccount.ts
index 2b2bee7df6b0..4dd46c82f800 100644
--- a/src/types/onyx/BankAccount.ts
+++ b/src/types/onyx/BankAccount.ts
@@ -2,6 +2,15 @@ import CONST from '@src/CONST';
 import AccountData from './AccountData';
 import * as OnyxCommon from './OnyxCommon';
 
+type AdditionalData = {
+    isP2PDebitCard?: boolean;
+    beneficialOwners?: string[];
+    currency?: string;
+    bankName?: string;
+    fieldsType?: string;
+    country?: string;
+};
+
 type BankAccount = {
     /** The bank account type */
     accountType?: typeof CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT;
@@ -11,6 +20,12 @@ type BankAccount = {
 
     isDefault?: boolean;
 
+    /* Determines if the bank account is a savings account */
+    isSavings?: boolean;
+
+    /** Date when the 3 micro amounts for validation were supposed to reach the bank account. */
+    validateCodeExpectedDate?: string;
+
     /** string like 'bankAccount-{<bankAccountID>}' where <bankAccountID> is the bankAccountID */
     key?: string;
 
@@ -31,4 +46,4 @@ type BankAccount = {
 };
 
 export default BankAccount;
-export type {AccountData};
+export type {AccountData, AdditionalData};
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/Report.ts b/src/types/onyx/Report.ts
index 81a92c4bf603..2b84f3946bc3 100644
--- a/src/types/onyx/Report.ts
+++ b/src/types/onyx/Report.ts
@@ -139,6 +139,7 @@ type Report = {
     isChatRoom?: boolean;
     participantsList?: Array<Partial<PersonalDetails>>;
     text?: string;
+    privateNotes?: Record<string, {note: string}>;
 };
 
 export default Report;
diff --git a/tests/e2e/TestSpec.yml b/tests/e2e/TestSpec.yml
index c53010ec02fd..a234ef67b8a6 100644
--- a/tests/e2e/TestSpec.yml
+++ b/tests/e2e/TestSpec.yml
@@ -6,14 +6,16 @@ phases:
       # Install correct version of node
       - export NVM_DIR=$HOME/.nvm
       - . $NVM_DIR/nvm.sh
-      - nvm install 20.9.0
-      - nvm use 20.9.0
+      # Note: Node v16 is the latest supported version of node for AWS Device Farm
+      # using v20 will not work!
+      - nvm install 16
+      - nvm use --delete-prefix 16
 
       # Reverse ports using AWS magic
       - PORT=4723
       - IP_ADDRESS=$(ip -4 addr show eth0 | grep -Po "(?<=inet\s)\d+(\.\d+){3}")
       - reverse_values="{\"ip_address\":\"$IP_ADDRESS\",\"local_port\":\"$PORT\",\"remote_port\":\"$PORT\"}"
-      - "curl -H \"Content-Type: application/json\" -X POST -d \"$reverse_values\" http://localhost:31007/reverse_forward_tcp"
+      - 'curl -H "Content-Type: application/json" -X POST -d "$reverse_values" http://localhost:31007/reverse_forward_tcp'
       - adb reverse tcp:$PORT tcp:$PORT
 
   test:
@@ -23,4 +25,4 @@ phases:
       - node e2e/testRunner.js -- --skipInstallDeps --buildMode "skip" --skipCheckout --mainAppPath app-e2eRelease.apk --deltaAppPath app-e2edeltaRelease.apk
 
 artifacts:
-- $WORKING_DIRECTORY
+  - $WORKING_DIRECTORY
diff --git a/tests/e2e/testRunner.js b/tests/e2e/testRunner.js
index 1e9a9a89caf0..1cedbf1abd76 100644
--- a/tests/e2e/testRunner.js
+++ b/tests/e2e/testRunner.js
@@ -80,8 +80,8 @@ if (args.includes('--config')) {
 }
 
 // Important set app path after correct config file has been set
-let mainAppPath = config.MAIN_APP_PATH;
-let deltaAppPath = config.DELTA_APP_PATH;
+let mainAppPath = args[args.indexOf('--mainAppPath') + 1] || config.MAIN_APP_PATH;
+let deltaAppPath = args[args.indexOf('--deltaAppPath') + 1] || config.DELTA_APP_PATH;
 
 // Create some variables after the correct config file has been loaded
 const OUTPUT_FILE = `${config.OUTPUT_DIR}/${label}.json`;
@@ -205,8 +205,8 @@ const runTests = async () => {
 
     let progressLog = Logger.progressInfo('Installing apps and reversing port');
 
-    await installApp('android', config.MAIN_APP_PACKAGE, defaultConfig.MAIN_APP_PATH);
-    await installApp('android', config.DELTA_APP_PACKAGE, defaultConfig.DELTA_APP_PATH);
+    await installApp('android', config.MAIN_APP_PACKAGE, mainAppPath);
+    await installApp('android', config.DELTA_APP_PACKAGE, deltaAppPath);
     await reversePort();
     progressLog.done();
 
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/MigrationTest.js b/tests/unit/MigrationTest.js
index f212dd75447d..ebffc71e4e0e 100644
--- a/tests/unit/MigrationTest.js
+++ b/tests/unit/MigrationTest.js
@@ -452,6 +452,56 @@ describe('Migrations', () => {
                         },
                     });
                 }));
+
+        it('Should remove any instances of ownerEmail found in a report', () =>
+            Onyx.multiSet({
+                [`${ONYXKEYS.COLLECTION.REPORT}1`]: {
+                    reportID: 1,
+                    ownerEmail: 'fake@test.com',
+                    ownerAccountID: 5,
+                },
+            })
+                .then(PersonalDetailsByAccountID)
+                .then(() => {
+                    expect(LogSpy).toHaveBeenCalledWith('[Migrate Onyx] PersonalDetailsByAccountID migration: removing ownerEmail from report 1');
+                    const connectionID = Onyx.connect({
+                        key: ONYXKEYS.COLLECTION.REPORT,
+                        waitForCollectionCallback: true,
+                        callback: (allReports) => {
+                            Onyx.disconnect(connectionID);
+                            const expectedReport = {
+                                reportID: 1,
+                                ownerAccountID: 5,
+                            };
+                            expect(allReports[`${ONYXKEYS.COLLECTION.REPORT}1`]).toMatchObject(expectedReport);
+                        },
+                    });
+                }));
+
+        it('Should remove any instances of managerEmail found in a report', () =>
+            Onyx.multiSet({
+                [`${ONYXKEYS.COLLECTION.REPORT}1`]: {
+                    reportID: 1,
+                    managerEmail: 'fake@test.com',
+                    managerID: 5,
+                },
+            })
+                .then(PersonalDetailsByAccountID)
+                .then(() => {
+                    expect(LogSpy).toHaveBeenCalledWith('[Migrate Onyx] PersonalDetailsByAccountID migration: removing managerEmail from report 1');
+                    const connectionID = Onyx.connect({
+                        key: ONYXKEYS.COLLECTION.REPORT,
+                        waitForCollectionCallback: true,
+                        callback: (allReports) => {
+                            Onyx.disconnect(connectionID);
+                            const expectedReport = {
+                                reportID: 1,
+                                managerID: 5,
+                            };
+                            expect(allReports[`${ONYXKEYS.COLLECTION.REPORT}1`]).toMatchObject(expectedReport);
+                        },
+                    });
+                }));
     });
 
     describe('CheckForPreviousReportActionID', () => {
diff --git a/tests/unit/ValidationUtilsTest.js b/tests/unit/ValidationUtilsTest.js
index bdc1f11948ae..45de052f714d 100644
--- a/tests/unit/ValidationUtilsTest.js
+++ b/tests/unit/ValidationUtilsTest.js
@@ -313,4 +313,18 @@ describe('ValidationUtils', () => {
             expect(ValidationUtils.isValidAccountRoute('123aaa')).toBe(false);
         });
     });
+
+    describe('ValidatePersonName', () => {
+        test('Valid person name', () => {
+            expect(ValidationUtils.isValidPersonName('test name')).toBe(true);
+            expect(ValidationUtils.isValidPersonName(`X Æ A test`)).toBe(true);
+            expect(ValidationUtils.isValidPersonName(`a hyphenated-name`)).toBe(true);
+        });
+
+        test('Invalid person name', () => {
+            expect(ValidationUtils.isValidPersonName('123 test')).toBe(false);
+            expect(ValidationUtils.isValidPersonName('test #$')).toBe(false);
+            expect(ValidationUtils.isValidPersonName('test123$')).toBe(false);
+        });
+    });
 });
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(),
+    };
+}
diff --git a/web/index.html b/web/index.html
index 6e5d0cd3c5d6..a7630b1a2cdc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -131,13 +131,23 @@
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, interactive-widget=resizes-content">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">
-    <% if (htmlWebpackPlugin.options.usePolyfillIO) { %>
+    <% if (htmlWebpackPlugin.options.isWeb) { %>
         <!-- polyfill.io is only needed on Web to support older browsers. It should not be loaded for desktop -->
         <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CResizeObserver&flags=gated"></script>
+        <% if (htmlWebpackPlugin.options.isProduction) { %>
+            <!-- Google Tag Manager - This was provided by our partner marketing agency -->
+            <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-N4M3FLJZ');</script>
+            <!-- End Google Tag Manager -->
+        <% } %>
     <% } %>
     <link rel="manifest" href="/manifest.json" />
 </head>
 <body>
+    <% if (htmlWebpackPlugin.options.isWeb && htmlWebpackPlugin.options.isProduction) { %>
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4M3FLJZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+    <% } %>
     <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" data-drag-area="true"></div>
     <div id="root"></div>
     <div id="splash">
diff --git a/workflow_tests/assertions/platformDeployAssertions.js b/workflow_tests/assertions/platformDeployAssertions.js
index d398bbf07fdd..458899581687 100644
--- a/workflow_tests/assertions/platformDeployAssertions.js
+++ b/workflow_tests/assertions/platformDeployAssertions.js
@@ -29,6 +29,18 @@ const assertAndroidJobExecuted = (workflowResult, didExecute = true, isProductio
         utils.createStepAssertion('Checkout', true, null, 'ANDROID', 'Checking out'),
         utils.createStepAssertion('Configure MapBox SDK', true, null, 'ANDROID', 'Configure MapBox SDK'),
         utils.createStepAssertion('Setup Node', true, null, 'ANDROID', 'Setting up Node'),
+        utils.createStepAssertion(
+            'Setup Java',
+            true,
+            null,
+            'ANDROID',
+            'Setup Java',
+            [
+                {key: 'distribution', value: 'oracle'},
+                {key: 'java-version', value: '17'},
+            ],
+            [],
+        ),
         utils.createStepAssertion('Setup Ruby', true, null, 'ANDROID', 'Setting up Ruby', [
             {key: 'ruby-version', value: '2.7'},
             {key: 'bundler-cache', value: 'true'},
diff --git a/workflow_tests/assertions/testBuildAssertions.js b/workflow_tests/assertions/testBuildAssertions.js
index f65349593faa..781e6bac20a2 100644
--- a/workflow_tests/assertions/testBuildAssertions.js
+++ b/workflow_tests/assertions/testBuildAssertions.js
@@ -60,6 +60,18 @@ const assertAndroidJobExecuted = (workflowResult, ref = '', didExecute = true, f
             [],
         ),
         utils.createStepAssertion('Setup Node', true, null, 'ANDROID', 'Setup Node', [], []),
+        utils.createStepAssertion(
+            'Setup Java',
+            true,
+            null,
+            'ANDROID',
+            'Setup Java',
+            [
+                {key: 'distribution', value: 'oracle'},
+                {key: 'java-version', value: '17'},
+            ],
+            [],
+        ),
         utils.createStepAssertion(
             'Setup Ruby',
             true,
diff --git a/workflow_tests/mocks/platformDeployMocks.js b/workflow_tests/mocks/platformDeployMocks.js
index 2de982dfc731..0d75a5fd74ee 100644
--- a/workflow_tests/mocks/platformDeployMocks.js
+++ b/workflow_tests/mocks/platformDeployMocks.js
@@ -28,6 +28,7 @@ const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS = [PLATFORM_DEPLOY__DEPLOY_C
 const PLATFORM_DEPLOY__ANDROID__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checking out', 'ANDROID');
 const PLATFORM_DEPLOY__ANDROID__CONFIGURE_MAPBOX_SDK__STEP_MOCK = utils.createMockStep('Configure MapBox SDK', 'Configure MapBox SDK', 'ANDROID');
 const PLATFORM_DEPLOY__ANDROID__SETUP_NODE__STEP_MOCK = utils.createMockStep('Setup Node', 'Setting up Node', 'ANDROID');
+const PLATFORM_DEPLOY__ANDROID__SETUP_JAVA__STEP_MOCK = utils.createMockStep('Setup Java', 'Setup Java', 'ANDROID', ['distribution', 'java-version'], []);
 const PLATFORM_DEPLOY__ANDROID__SETUP_RUBY__STEP_MOCK = utils.createMockStep('Setup Ruby', 'Setting up Ruby', 'ANDROID', ['ruby-version', 'bundler-cache']);
 const PLATFORM_DEPLOY__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK = utils.createMockStep('Decrypt keystore', 'Decrypting keystore', 'ANDROID', null, ['LARGE_SECRET_PASSPHRASE']);
 const PLATFORM_DEPLOY__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK = utils.createMockStep('Decrypt json key', 'Decrypting JSON key', 'ANDROID', null, ['LARGE_SECRET_PASSPHRASE']);
@@ -62,6 +63,7 @@ const PLATFORM_DEPLOY__ANDROID__STEP_MOCKS = [
     PLATFORM_DEPLOY__ANDROID__CHECKOUT__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__CONFIGURE_MAPBOX_SDK__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__SETUP_NODE__STEP_MOCK,
+    PLATFORM_DEPLOY__ANDROID__SETUP_JAVA__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__SETUP_RUBY__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK,
diff --git a/workflow_tests/mocks/testBuildMocks.js b/workflow_tests/mocks/testBuildMocks.js
index bdff0ac57ae1..d7ae9abdb8e7 100644
--- a/workflow_tests/mocks/testBuildMocks.js
+++ b/workflow_tests/mocks/testBuildMocks.js
@@ -62,6 +62,7 @@ const TESTBUILD__ANDROID__CREATE_ENV_ADHOC__STEP_MOCK = utils.createMockStep(
     [],
 );
 const TESTBUILD__ANDROID__SETUP_NODE__STEP_MOCK = utils.createMockStep('Setup Node', 'Setup Node', 'ANDROID', [], []);
+const TESTBUILD__ANDROID__SETUP_JAVA__STEP_MOCK = utils.createMockStep('Setup Java', 'Setup Java', 'ANDROID', ['distribution', 'java-version'], []);
 const TESTBUILD__ANDROID__SETUP_RUBY__STEP_MOCK = utils.createMockStep('Setup Ruby', 'Setup Ruby', 'ANDROID', ['ruby-version', 'bundler-cache'], []);
 const TESTBUILD__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK = utils.createMockStep('Decrypt keystore', 'Decrypt keystore', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE']);
 const TESTBUILD__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK = utils.createMockStep('Decrypt json key', 'Decrypt json key', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE']);
@@ -85,6 +86,7 @@ const TESTBUILD__ANDROID__STEP_MOCKS = [
     TESTBUILD__ANDROID__CHECKOUT__STEP_MOCK,
     TESTBUILD__ANDROID__CREATE_ENV_ADHOC__STEP_MOCK,
     TESTBUILD__ANDROID__SETUP_NODE__STEP_MOCK,
+    TESTBUILD__ANDROID__SETUP_JAVA__STEP_MOCK,
     TESTBUILD__ANDROID__SETUP_RUBY__STEP_MOCK,
     TESTBUILD__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK,
     TESTBUILD__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK,
diff --git a/workflow_tests/testBuild.test.js b/workflow_tests/testBuild.test.js
index 4288ea236ab2..f50032f0c54a 100644
--- a/workflow_tests/testBuild.test.js
+++ b/workflow_tests/testBuild.test.js
@@ -201,7 +201,7 @@ describe('test workflow testBuild', () => {
                     web: mocks.TESTBUILD__WEB__STEP_MOCKS,
                     postGithubComment: mocks.TESTBUILD__POSTGITHUBCOMMENT__STEP_MOCKS,
                 };
-                testMockSteps.android[4] = utils.createMockStep('Decrypt keystore', 'Decrypt keystore', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE'], {}, {}, false);
+                testMockSteps.android[5] = utils.createMockStep('Decrypt keystore', 'Decrypt keystore', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE'], {}, {}, false);
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'testBuild.yml'),
                     mockSteps: testMockSteps,
@@ -211,7 +211,7 @@ describe('test workflow testBuild', () => {
 
                 assertions.assertValidateActorJobExecuted(result, '1234');
                 assertions.assertGetBranchRefJobExecuted(result);
-                assertions.assertAndroidJobExecuted(result, 'test-ref', true, 4);
+                assertions.assertAndroidJobExecuted(result, 'test-ref', true, 5);
                 assertions.assertIOSJobExecuted(result, 'test-ref');
                 assertions.assertDesktopJobExecuted(result, 'test-ref');
                 assertions.assertWebJobExecuted(result, 'test-ref');