diff --git a/.eslintrc.js b/.eslintrc.js
index b76782af60f4..b71338d0c1a5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,6 +14,11 @@ const restrictedImportPaths = [
         importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight'],
         message: "Please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
     },
+    {
+        name: 'react-native-safe-area-context',
+        importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
+        message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 351a11506d68..4100a13f8bee 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -98,7 +98,7 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
diff --git a/.github/workflows/platformDeploy.yml b/.github/workflows/platformDeploy.yml
index bf27006e34a2..8ccc0a7f6056 100644
--- a/.github/workflows/platformDeploy.yml
+++ b/.github/workflows/platformDeploy.yml
@@ -347,6 +347,9 @@ jobs:
     if: ${{ failure() }}
     needs: [android, desktop, iOS, web]
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Post Slack message on failure
         uses: ./.github/actions/composite/announceFailedWorkflowInSlack
         with:
diff --git a/.imgbotconfig b/.imgbotconfig
index ff5c3345cc4d..43d1b77166cc 100644
--- a/.imgbotconfig
+++ b/.imgbotconfig
@@ -1,6 +1,7 @@
 {
     "ignoredFiles": [
-        "assets/images/empty-state_background-fade.png" // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-dark.png", // Caused an issue with colour gradients, https://github.com/Expensify/App/issues/30499
+        "assets/images/empty-state_background-fade-light.png"
     ],
     "aggressiveCompression": "false"
 }
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 549ee7fd79d5..f224d895e2fa 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 1001040507
-        versionName "1.4.5-7"
+        versionCode 1001040801
+        versionName "1.4.8-1"
     }
 
     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/contributingGuides/REVIEWER_CHECKLIST.md b/contributingGuides/REVIEWER_CHECKLIST.md
index 16c8f88927b1..68088f623f8d 100644
--- a/contributingGuides/REVIEWER_CHECKLIST.md
+++ b/contributingGuides/REVIEWER_CHECKLIST.md
@@ -46,7 +46,7 @@
     - [ ] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
 - [ ] If a new CSS style is added I verified that:
     - [ ] A similar style doesn't already exist
-    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG`)
+    - [ ] The style can't be created with an existing [StyleUtils](https://github.com/Expensify/App/blob/main/src/styles/StyleUtils.js) function (i.e. `StyleUtils.getBackgroundAndBorderStyle(theme.componentBG`)
 - [ ] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
diff --git a/docs/_data/_routes.yml b/docs/_data/_routes.yml
index efdcf41b63d5..e320b690c226 100644
--- a/docs/_data/_routes.yml
+++ b/docs/_data/_routes.yml
@@ -112,21 +112,11 @@ platforms:
         title: Expensify Card
         icon: /assets/images/hand-card.svg
         description: Explore how the Expensify Card combines convenience and security to enhance everyday business transactions. Discover how to apply for, oversee, and maximize your card perks here.
-      
-      - href: expensify-partner-program
-        title: Expensify Partner Program
-        icon: /assets/images/handshake.svg
-        description: Discover how to get the most out of Expensify as an ExpensifyApproved! accountant partner. Learn how to set up your clients, receive CPE credits, and take advantage of your partner discount.
 
       - href: get-paid-back
         title: Get Paid Back
         icon: /assets/images/money-into-wallet.svg
         description: Whether you submit an expense report or an invoice, find out here how to ensure a smooth and timely payback process every time.
-      
-      - href: send-payments
-        title: Send Payments
-        icon: /assets/images/money-wings.svg
-        description: Uncover step-by-step guidance on sending direct reimbursements to employees, paying an invoice to a vendor, and utilizing third-party payment options.
 
       - href: workspace-and-domain-settings
         title: Workspace & Domain Settings
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-Troubleshooting.md
similarity index 100%
rename from docs/articles/expensify-classic/account-settings/Notification-Troubbleshooting.md
rename to docs/articles/expensify-classic/account-settings/Notification-Troubleshooting.md
diff --git a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Connect-Company-Cards.md b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Company-Card-Settings.md
similarity index 98%
rename from docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Connect-Company-Cards.md
rename to docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Company-Card-Settings.md
index f2ff837d7638..fa5879d85ea8 100644
--- a/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Connect-Company-Cards.md
+++ b/docs/articles/expensify-classic/bank-accounts-and-credit-cards/company-cards/Company-Card-Settings.md
@@ -1,6 +1,6 @@
 ---
 title: Company-Card-Settings.md
-description: Company card settings 
+description: Once you connect your cards, customize the configuration using company card settings.
 ---
 # Overview
 Once you’ve imported your company cards via commercial card feed, direct bank feed, or CSV import, the next step is to configure the cards’ settings. 
diff --git a/docs/articles/expensify-classic/billing-and-subscriptions/Payment-Card.md b/docs/articles/expensify-classic/billing-and-subscriptions/Payment-Card.md
deleted file mode 100644
index 41a1fb96f56f..000000000000
--- a/docs/articles/expensify-classic/billing-and-subscriptions/Payment-Card.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Payment Card
-description: Payment Card
----
-## Resource Coming Soon!
diff --git a/docs/articles/expensify-classic/expensify-card/Cardholder-Settings-and-Features.md b/docs/articles/expensify-classic/expensify-card/Cardholder-Settings-and-Features.md
new file mode 100644
index 000000000000..bc0cb28f42b1
--- /dev/null
+++ b/docs/articles/expensify-classic/expensify-card/Cardholder-Settings-and-Features.md
@@ -0,0 +1,84 @@
+---
+title:  Cardholder Settings and Features
+description: Expensify Card Settings for Employees
+---
+
+# How to use your Expensify Card
+Once you receive your card, you can start using it right away. 
+
+First, you'll want to take note of the Smart Limit tied to your card – this is listed in your card settings via **Settings > Account > Credit Card Import**. This limit represents the total amount of unapproved expenses you can have on the card.
+
+It's crucial to continuously submit your expenses promptly, as that'll ensure they can be approved and restore your full limit. You can always chat with your admin if you need your limit adjusted.
+
+You can swipe your Expensify Card like you would with any other card. As you make purchases, you'll get instant alerts on your phone letting you know if you need to SmartScan receipts. Any SmartScanned receipts should merge with the card expense automatically.
+
+If your organization doesn't require itemized receipts, you can rely on eReceipts instead. As long as the expense isn't lodging-related, Expensify will automatically generate an IRS-compliant eReceipt for every transaction.
+
+You can report and submit Expensify Card expenses just like any other expenses. As they're approved, your Smart Limit will be refreshed accordingly, allowing you to keep making purchases.
+
+## Enable Notifications
+Download the Expensify mobile app and enable push notifications to stay current on your spending activity. Your card is connected to your Expensify account, so each transaction on your card will trigger a push notification. We'll also send you a push notification if we detect potentially fraudulent activity and allow you to confirm your purchase. 
+
+Follow the steps below to enable real-time alerts on your mobile device.
+
+**If you have an iPhone**:
+1. Open the Expensify app and tap the three-bar icon in the upper-left corner
+2. Tap **Settings** and enable **Receive realtime alerts**
+3. Accept the confirmation dialogue to go to your iPhone's notification settings for Expensify. Turn on Allow Notifications, and choose the notification types you’d like!
+
+**If you have an Android**:
+1. Go to Settings and open 'Apps and Notifications'.
+2. Find and open Expensify and enable notifications.
+3. Customize your alerts. Depending on your phone model, you may have extra options to customize the types of notifications you receive.
+
+## Your virtual card
+Once you're assigned a limit, you'll be able to use your virtual card immediately. You can view your virtual card details via **Settings > Account > Credit Card Import > Show Details**. Keep in mind that your virtual card and physical card share a limit.
+
+The virtual Expensify Card includes a card number, expiration date, and security code (CVC). You can use the virtual card for online purchases, in-app transactions, and in-person payments once it's linked to a mobile wallet (Apple Pay or Google Pay).
+
+## How to access your virtual card details
+Here's how to access your virtual card details via the Expensify mobile app:
+1. Tap the three-bar icon in the upper-left corner 
+2. Tap **Settings > Connected Cards**
+3. Under **Virtual Card**, tap **Show Details**
+
+From there, you can view your virtual card's number, CVV, expiration date, and billing address. 
+
+Here's how to access your virtual card details via the Expensify web app:
+1. Head to **Settings > Account > Credit Card Import**
+2. Under **Virtual Card**, click **Show Details**
+
+From there, you can view your virtual card's card number, CVV, expiration date, and billing address.
+
+## How to add your virtual card to a digital wallet (Apple Pay or Google Pay)
+
+To use the Expensify Card for contactless payment, add it to your digital wallet from the mobile app:
+1. Tap the three-bar icon in the upper-left corner 
+2. Tap **Settings > Connected Cards**
+3. Depending on your device, tap **Add to Apple Wallet** or **Add to Gpay** 
+4. Complete the remaining steps
+
+## Expensify Card declines
+As long as you've enabled 'Receive real-time alerts', you'll get a notification explaining the reason for each decline. You can enable alerts in the mobile app by clicking on the three-bar icon in the upper-left corner > **Settings** > toggle **Receive real-time alerts**. 
+
+Here are some reasons an Expensify Card transaction might be declined:
+
+- You have an insufficient card limit
+     - If a transaction exceeds your Expensify Card's available limit, the transaction will be declined. You can see the remaining limit in the mobile app under **Settings > Connected Cards** or in the web app under **Settings > Account > Credit Card Import**. 
+     - Submitting expenses and getting them approved will free up your limit for more spending.
+
+- Your card isn't active yet or it was disabled by your Domain Admin
+- Your card information was entered incorrectly with the merchant. Entering incorrect card information, such as the CVC, ZIP, or expiration date, will also lead to declines. 
+There was suspicious activity
+- If Expensify detects unusual or suspicious activity, we may block transactions as a security measure
+     - This could happen due to irregular spending patterns, attempted purchases from risky vendors, or multiple rapid transactions. 
+     - Check your Expensify Home page to approve unusual merchants and try again.
+     - If the spending looks suspicious, we may complete a manual due diligence check, and our team will do this as quickly as possible - your cards will all be locked while this happens.  
+- The merchant is located in a restricted country
+
+# FAQ
+## Can I use Smart Limits with a free Expensify account? 
+If you're on the Free plan, you won't have the option to use Smart Limits. Your card limit will simply reset at the end of each calendar month.
+
+## I still haven't received my Expensify Card. What should I do? 
+For more information on why your card hasn't arrived, you can check out this resource on [Requesting a Card](https://help.expensify.com/articles/expensify-classic/expensify-card/Request-the-Card#what-if-i-havent-received-my-card-after-multiple-weeks).
diff --git a/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md b/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md
index 4c216faffc18..8bcc11fbf167 100644
--- a/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md
+++ b/docs/articles/expensify-classic/expensify-card/Expensify-Card-Perks.md
@@ -5,7 +5,30 @@ description: Get the most out of your Expensify Card with exclusive perks!
 
 
 # Overview
-The Expensify Card is packed with perks, both native to our Card program and through exclusive discounts with partnering solutions. Below, we’ll cover all of our exclusive offers in more detail and how to claim discounts with our partners.
+The Expensify Card is packed with perks, both native to our Card program and through exclusive discounts with partnering solutions. The Expensify Card’s primary perks include: 
+- Swipe to Win, where every swipe has a chance to win fun personalized gifts for you and your closest friends and family members
+- Unbeatable cash back incentive with each swipe
+Below, we’ll cover all of our exclusive offers in more detail and how to claim discounts with our partners.
+
+# Expensify Card Perks
+
+## Swipe to Win
+Swipe to Win is a new [Expensify Card](https://use.expensify.com/company-credit-card) perk that gives cardholders the chance to send a gift to a friend, family member, or essential worker on the frontlines!
+
+Winners can choose to _Send a Smile_ or _Send a Laugh_. To start, we’re offering one gift per option:
+
+- **Send A Smile:** Champagne by Expensify
+- **Send a Laugh:** Jenga Set
+
+**How to Participate**
+It’s easy! Once you have an Expensify Card, you just need to start using it. With each swipe, you're automatically entered to win and have a 1 in 250 chance of getting a prize!
+
+**How will I know if I’ve won?**
+Winners will be notified immediately via the Expensify app, and receive additional instructions on how to choose and send their desired gift. 
+
+If you don't have Expensify notifications turned on yet, here are some helpful guides:
+- [Apple Notification Preferences](https://support.apple.com/en-us/HT201925)
+- [Android Notification Preferences](https://community.expensify.com/home/leaving?allowTrusted=1&target=https%3A%2F%2Fsupport.google.com%2Fandroid%2Fanswer%2F9079661%3Fhl%3Den)
 
 # Partner Specific Perks
 
@@ -188,4 +211,3 @@ Stripe Atlas helps removes obstacles typically associated with starting a busine
 **Receive $100 off Stripe Atlas and get access to a startup toolkit and special offers on additional Strip Atlas services.**
 
 **How to redeem:** Sign up with your Expensify Card.
-
diff --git a/docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md b/docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md
deleted file mode 100644
index 6b85bb0364b5..000000000000
--- a/docs/articles/expensify-classic/expensify-partner-program/Coming-Soon.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Coming Soon
-description: Coming Soon
----
diff --git a/docs/articles/expensify-classic/expensify-partner-program/Partner-Billing-Guide.md b/docs/articles/expensify-classic/expensify-partner-program/Partner-Billing-Guide.md
new file mode 100644
index 000000000000..750a1fc10e77
--- /dev/null
+++ b/docs/articles/expensify-classic/expensify-partner-program/Partner-Billing-Guide.md
@@ -0,0 +1,87 @@
+---
+title: Partner Billing Guide
+description: Understand how Expensify bills partners and their clients
+---
+
+# Overview
+
+The ExpensifyApproved! Partner Program offers exclusive billing rates and features tailored for accountants to ensure seamless client management. If you are an accountant or consultant who recommends spend management solutions to your clients, becoming an ExpensifyApproved! Accountant may be a great certification for you. This guide will walk you through the unique billing perks available to ExpensifyApproved! partners, emphasizing the importance of understanding and managing client billing effectively. To learn what perks partners receive, check out the ExpensifyApproved! program details here.
+
+#  Get exclusive partner pricing
+
+All ExpensifyApproved! Partners are automatically eligible for a special rate of $9/seat monthly, without an annual commitment when they adopt the Expensify Card. This provides flexibility as active users can vary. Here are the specifics on pricing for our Approved! Partners’ clients:
+- **Bundled pricing:** US Clients using the Expensify Card get up to a 50% discount, bringing their monthly bill to $9/seat. Reach out to your Partner Manager to discuss exclusive international pricing discount.
+- **Unbundled pricing (or pay-per-use pricing):** Clients not using the Expensify Card are billed at $18/seat monthly.
+- **No annual commitment:** Partners pay only for what they use, with no annual subscriptions required.
+- **Expensify Card revenue share:** All partners receive a 0.5% revenue share on Expensify Card transactions made by clients. This revenue share can be passed back to the client for an additional discount to offset their Expensify bill.
+
+# Understanding the billing process
+
+Expensify bills the owner of the expense workspace for the activity on that workspace. If accountants retain ownership of client workspaces, they receive the bill and can then re-bill their clients based on individual agreements.
+
+Each month, Expensify will send a consolidated bill detailing:
+- **Pay-per-use seats:** This is the number of active clients and their users for the month.
+- **Expensify Card discount**: This amount reflects how much spend is put on your card, which then determines the discount for that month.
+- **Total monthly price:** This amount is the overall price of Expensify when using the Expensify Card discount to offset the cost of the pay-per-use seats.
+- **Workspace list:** This is an overview of all client workspaces with their respective active seats.
+
+## Consolidated Domain Billing
+
+If your firm wishes to consolidate all Expensify billing to a single account, the Consolidated Domain Billing feature is your go-to tool. It centralizes payment for all group workspaces owned by any domain member of your firm.
+
+### Activating Consolidated Domain Billing:
+  1. Claim and verify your firm’s domain.
+  2. Navigate to **Settings > Domains > [Domain Name] > Domain Admins** and set a **"Primary Domain Admin"** by using the drop down toggle to select an email address. 
+  3. Enable **Consolidated Domain Billing** in the same section.
+
+The Consolidated Domain Billing tool ensures that billing takes place under a single Expensify account associated with your firm. This eliminates the need to add multiple payment cards across various accounts to cover payments for multiple clients.
+
+## Maintaining a Console of all clients:
+
+If your firm wants to have a console view of all client workspaces and domains, you will want to create a single, centralized login to manage all client workspaces and domains, such as accounting@myfirm.com. 
+
+  1. Create a dedicated email address that will act as the universal workspace owner, for example, accounting@myfirm.com.
+  2. Register this email with Expensify or your chosen platform and ensure it is verified and secured.
+  3. Within each client workspace settings, add your centralized email (e.g. accounting@myfirm.com) as a workspace admin.
+  4. Do the same with each client domain.
+
+## Applying Client IDs to a bill 
+
+Using client IDs for Optimized Billing in Expensify: A unique identifier feature for ExpensifyApproved! accountants. Streamline client Workspace recognition and make your billing process more efficient.
+
+# How to assign a client ID to a workspace
+  1. Log in to your account: Ensure you’re using an Approved! accountant account.
+  2. Navigate to the desired Workspace: Go to **Settings > Workspaces > [Workspace Name] > Overview**.
+  3. Input the identifier: Here, you can input an alphanumeric unique identifier for each client workspace.
+**Note:** If a client has multiple workspaces, ensure each workspace has a consistent client ID.
+
+# How to access and download billing receipts
+- Accessing Billing: **Settings: Go to Settings > Your Account > Payments > Billing History.**
+- Download the Receipt: Click on **"Download Receipt CSV".**
+
+# Deep Dive
+- Using client IDs for all Workspaces: It's beneficial to use client IDs for all Workspaces to ensure each one is easily recognizable.
+- Benefits of itemized billing receipts: Employing client IDs offers itemized billing by client, with each itemization detailing unique active users.
+
+# FAQ
+
+**Do I automatically get the special billing rate as an ExpensifyApproved! Partner?**
+- Yes, when you join the ExpensifyApproved! program, you will automatically get the special billing rate. To join the ExpensifyApproved! Program, you need to enroll in ExpensifyApproved! University. 
+
+**How can I check my billing details?**
+- To check your billing details, be on the lookout for your detailed billing statement sent out at the end of each month. 
+
+**Can I pass the bill to my clients?**
+- Yes, you can pass the bill on to your clients. If you retain ownership of client workspaces in Expensify, you can re-bill your clients. If you’d like the client to own the billing of the Expensify, they can take over billing. 
+
+**What if I don't want to use the Expensify Card?**
+- If you prefer not to use the Expensify Card, your clients will be billed at $18/seat monthly.
+
+**Why use client IDs?**
+- Client IDs provide a streamlined method to identify and manage workspaces, especially beneficial when a client has multiple workspaces.
+
+**Do I need a client ID for each Workspace?**
+- Yes, if you want to ensure seamless identification and billing processes.
+
+**Where can I see the Billing Receipts?**
+- All billing owners receive an emailed PDF of their monthly billing receipt, but a CSV version can also be downloaded from the platform.
diff --git a/docs/articles/expensify-classic/expensify-partner-program/Your-Expensify-Partner-Manager.md b/docs/articles/expensify-classic/expensify-partner-program/Your-Expensify-Partner-Manager.md
index 2db69d0a8791..8243833dcc23 100644
--- a/docs/articles/expensify-classic/expensify-partner-program/Your-Expensify-Partner-Manager.md
+++ b/docs/articles/expensify-classic/expensify-partner-program/Your-Expensify-Partner-Manager.md
@@ -1,5 +1,5 @@
 ---
-title: Your Expensify Partner Manager
+title: Expensify Partner Support
 description: Understanding support for our partners
 ---
 
@@ -10,6 +10,7 @@ Our well-rounded support methodology is designed to provide comprehensive assist
 
 ## 1. ExpensifyApproved! University
 **Purpose:** Equip your team with a comprehensive understanding of Expensify.
+
 **Benefits:**
 - Foundation-level knowledge about the platform.
 - 3 CPE credits upon successful completion (US-only).
@@ -17,16 +18,39 @@ Our well-rounded support methodology is designed to provide comprehensive assist
 - Visit university.Expensify.com to access our comprehensive training program.
 
 ## 2. Partner Manager
-**Role:** A designated liaison for your firm.
+**Role:** 
+A Partner Manager is a dedicated point of contact for your firm Partner Managers support our accounting partners by providing recommendations for client’s accounts, assisting with firm-wide training, and ensuring partners receive the full benefits of our partnership program. They will actively monitor open technical issues and be proactive with recommendations to increase efficiency.
+
+
 **Key Responsibilities:**
 - Handle any escalations promptly.
 - Organize firm-wide training sessions.
 - Assist with strategic planning and the introduction of new features.
 - Once you've completed the ExpensifyApproved! University, log in to your Expensify account. Click on the "Support" option to connect with your dedicated Partner Manager.
 
+**How do I know if I have a Partner Manager?**
+
+For your firm to be assigned a Partner Manager, you must complete the ExpensifyApproved! University training course. Every external accountant or bookkeeper who completes the training is automatically enrolled in our program and receives all the benefits, including access to the Partner Manager. So everyone at your firm must complete the training to receive the maximum benefit.
+
+You can check to see if you’ve completed the course and enrolled in the ExpensifyApproved! Accountants program simply by logging into your Expensify account. In the bottom left-hand corner of the website, you will see the ExpensifyApproved! logo.
+
+**How do I contact my Partner Manager?**
+1. Signing in to new.expensify.com and searching for your Partner Manager
+2. Replying to or clicking the chat link on any email you get from your Partner Manager
+
+**How do I know if my Partner Manager is online?**
+
+You will be able to see if they are online via their status in new.expensify.com, which will either say “online” or have their working hours.
+
+**Can I get on a call with my Partner Manager?**
+
+Of course! You can ask your Partner Manager to schedule a call whenever you think one might be helpful. Partner Managers can discuss client onboarding strategies, firm-wide training, and client setups.
+
+We recommend continuing to work with Concierge for general support questions, as this team is always online and available to help immediately.
 
 ## 3. Client Setup Specialist
 **Purpose:** Ensure smooth onboarding for every client you refer.
+
 **Duties:**
 - Comprehensive assistance with setting up Expensify.
 - Help with configuring accounting integrations.
@@ -35,6 +59,7 @@ Our well-rounded support methodology is designed to provide comprehensive assist
 
 ## 4. Client Account Manager
 **Role:** Dedicated support for ongoing client needs.
+
 **Responsibilities:**
 - Address day-to-day product inquiries.
 - Assist clients in navigating and optimizing their use of Expensify.
@@ -42,6 +67,7 @@ Our well-rounded support methodology is designed to provide comprehensive assist
 
 ## 5. Concierge chat support
 **Availability:** Real-time support for any urgent inquiries.
+
 **Features:**
 - Immediate assistance with an average response time of under two minutes.
 - Available to both accountants and clients for all product-related questions.
diff --git a/docs/articles/expensify-classic/workspace-and-domain-settings/Creating-Per-Diem-Expenses.md b/docs/articles/expensify-classic/get-paid-back/Per-Diem-Expenses.md
similarity index 89%
rename from docs/articles/expensify-classic/workspace-and-domain-settings/Creating-Per-Diem-Expenses.md
rename to docs/articles/expensify-classic/get-paid-back/Per-Diem-Expenses.md
index 214188e35137..1b537839af77 100644
--- a/docs/articles/expensify-classic/workspace-and-domain-settings/Creating-Per-Diem-Expenses.md
+++ b/docs/articles/expensify-classic/get-paid-back/Per-Diem-Expenses.md
@@ -1,17 +1,17 @@
 ---
-title: Creating Per Diem Expenses
+title: Per-Diem-Expenses
 description: How to create Per Diem expenses on mobile and web.
 ---
 # Overview
 
 What are Per Diems? Per diems, short for "per diem allowance" or "daily allowance," are fixed daily payments provided by your employer to cover expenses incurred during business or work-related travel. These allowances simplify expense tracking and reimbursement for meals, lodging, and incidental expenses during a trip. Per Diems can be masterfully tracked in Expensify! 
 
-## How To create per diem expenses 
+## How to create per diem expenses 
 
 To add per diem expenses, you need three pieces of information:
 1. Where did you go? - Specify your travel destination.
 2. How long were you away? - Define the period you're claiming for.
-3. Which rate did you use? - Select the appropriate per diem rate.
+3. Which rate did you use? - Select the appropriate per diem rate (this is set by your employer).
 
 ### Step 1: On either the web or mobile app, click New Expense and choose Per Diem
 
@@ -31,15 +31,15 @@ Finally, submit your Per Diem expense for approval, and you'll be on your way to
  
 # FAQ 
 
-## Can I Edit My Per Diems?
+## Can I edit my per diem expenses?
 Per Diems cannot be amended. To make changes, delete the expense and recreate it as needed.
 
-## What If My Admin Requires Daily Per Diems?
+## What if my admin requires daily per diems? 
 No problem! Create a separate Per Diem expense for each day of your trip.
 
-## I Have Questions About the Amount I'm Due
+## I have questions about the amount I'm due 
 Reach out to your internal Admin team, as they've configured the rates in your policy to meet specific requirements. 
 
-## Can I Add Start and End Times to a Per Diem?
+## Can I add start and end times to per diems? 
 Unfortunately, you cannot add start and end times to Per Diems in Expensify.
 By following these steps, you can efficiently create and manage your Per Diem expenses in Expensify, making the process of tracking and getting reimbursed hassle-free. 
diff --git a/docs/articles/expensify-classic/get-paid-back/Per-Diem.md b/docs/articles/expensify-classic/get-paid-back/Per-Diem.md
deleted file mode 100644
index 780e5969c441..000000000000
--- a/docs/articles/expensify-classic/get-paid-back/Per-Diem.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Per Diem
-description: Per Diem
----
-## Resource Coming Soon!
diff --git a/docs/articles/expensify-classic/get-paid-back/Trips.md b/docs/articles/expensify-classic/get-paid-back/Trips.md
index 7efba1875a90..a65a8bfb8eec 100644
--- a/docs/articles/expensify-classic/get-paid-back/Trips.md
+++ b/docs/articles/expensify-classic/get-paid-back/Trips.md
@@ -1,5 +1,37 @@
 ---
 title: Trips
-description: Trips
+description: Automate getting paid back for your travel through Expensify's Trips feature.
 ---
-## Resource Coming Soon!
+# Overview
+
+Discover how Expensify streamlines your travel expense management when it comes to trips. With the automatic classification of trip receipts and real-time notifications for travel changes, you can effortlessly stay organized and informed on all your trips.
+
+When a travel receipt/itinerary is uploaded into Expensify and SmartScanned, the Trips section of the mobile app will automatically populate your trip information.. If your flight has any cancellations, unexpected changes, or delays, we will make sure you know about it. We will notify you of the change as soon as it happens via the mobile app. 
+
+For the receipt to be processed as a Trip, it must include the total amount of the expense, date, and merchant name. 
+
+If your company is using a travel integration from the list shown below, you can automate this process entirely:
+- [TravelPerk](https://help.expensify.com/articles/expensify-classic/integrations/travel-integrations/TravelPerk)
+- [Egencia](https://help.expensify.com/articles/expensify-classic/integrations/travel-integrations/Egencia)
+- [Navan](https://help.expensify.com/articles/expensify-classic/integrations/travel-integrations/Trip-Actions)
+
+# How to add a Trip to your account
+
+Trip receipts are typically sent via email, and will include multiple pages. With that in mind, we recommend emailing receipts directly to Expensify for ease. 
+
+To email a flight or hotel receipt, you’ll forward the receipt from your Expensify-associated email address to receipts@expensify.com.
+
+# How to access your Trip information
+
+To view details about your past or upcoming trips, follow these steps within the Expensify mobile app:
+1. Open the Expensify mobile app
+2. Navigate to the "Menu" option (top left ≡ icon)
+3. Select **Trips**
+
+# FAQ
+
+## How do I capture Trip receipts sent to my personal email address?
+If you received your receipt in an email that is not associated with your Expensify account, you can add this email as a [secondary login](https://help.expensify.com/articles/expensify-classic/account-settings/Account-Details#how-to-add-a-secondary-login) to directly forward the receipt into your account.
+
+## How do I upload Trip receipts that were not sent to me by email?
+If your trip receipt was not sent to you by email, you can manually upload the receipt to your account. Check out this resource for more information on [manually uploading receipts](https://help.expensify.com/articles/expensify-classic/get-paid-back/expenses/Upload-Receipts#manually-upload).
diff --git a/docs/articles/expensify-classic/getting-started/support/Expensify-Support.md b/docs/articles/expensify-classic/getting-started/support/Expensify-Support.md
new file mode 100644
index 000000000000..f4a6acdd8571
--- /dev/null
+++ b/docs/articles/expensify-classic/getting-started/support/Expensify-Support.md
@@ -0,0 +1,117 @@
+---
+title: Your Expensify Account Manager
+description: Everything you need to know about Having an Expensify account manager
+redirect_from: articles/other/Your-Expensify-Account-Manager/
+---
+
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# Introduction to Expensify Support
+
+Expensify offers comprehensive support for customers of all sizes. From small business owners to multinational corporations, Expensify's support teams are available to assist!
+
+Expensify has four different support teams. Let's go over how each of them operates below. 
+
+**Concierge Support:**
+- Concierge is available 24/7 and is the first line of support
+- Users can access Concierge through the Expensify app or via email at concierge@expensify.com
+- Provides quick responses, usually within minutes
+- Don't be your team's tech support - refer your users to Concierge for all their Expensify product questions
+
+**Setup Specialists:**
+- Dedicated onboarding experts to assist users in getting started with Expensify
+- Assist in connecting cards and bank accounts, configuring integrations, and more
+
+**Account Managers:**
+- A dedicated point of contact for companies with more than ten users
+- Serve as product specialists
+- Available to answer questions and promote best practices
+- Provide ongoing support and guidance
+
+**ExpensifyApproved! Accounting Partner Managers:**
+- Offer an additional support layer for accounting partners
+- Partner Managers are dedicated Expensify team members
+- Provide firmwide training, assist with strategic goal planning, and collaborative marketing
+
+This comprehensive support structure ensures that Expensify users receive the assistance they need, whether new to the platform or looking to optimize their experience.
+
+# How to get support in Expensify
+
+## Concierge
+
+Reach out to Concierge when you have general questions about Expensify. Concierge can also be used to manage expenses, submit reports, and automate approvals. You can contact Concierge while logged into your Expensify account by clicking **Support** on the left-hand menu and then selecting **Concierge**.
+
+Try questions such as:
+- What is SmartScan?
+- How do I add a mileage expense from the mobile app?
+- Where can I add a Secondary Login?
+
+## Setup Specialist
+
+Expensify provides onboarding guidance for anyone through a Setup Specialist! You can contact your Setup Specialist while logged into your Expensify account by clicking **Support** on the left-hand menu and then selecting **Account Setup Specialist**.
+
+### What to expect from your Setup Specialist:
+
+- Personalized Support: Your Setup Specialist is here to assist you with tailored support. They can answer your questions and arrange screen share calls to help you set up your Expensify account or familiarize you with the product.
+
+- Product Demos: Are you curious about how the Expensify Card works or how it integrates with your accounting software? Just let your Setup Specialist know, and they'll guide you and your team through any feature you'd like to explore.
+
+- Setup Assistant: You don't have to do it alone when setting up your Expensify account. When you're ready to begin, chat with your Setup Specialist in the #admins room. They'll ensure everything is configured correctly right from the start.
+
+
+## Account Manager
+
+If you have more than ten active users, or you're an ExpensifyApproved! Accountant's client, you're eligible for a designated Account Manager.
+
+Once you've completed onboarding to Expensify with your Setup Specialist, your Account Manager will take over as the main point of contact. Your account manager is there to support you and other Workspace admins in reviewing your account, advising on best practices, and making changes to your Workspace on your behalf whenever you need a hand. 
+
+They will actively monitor open technical issues and be proactive with recommendations to increase efficiency and minimize time spent on expense management.
+
+### How to contact your Account Manager
+
+If you are a Workspace admin or domain admin, you will hear from your Account Manager as soon as one is assigned to your company.
+
+Unlike Concierge, an Account Manager's support will not be real-time, 24 hours a day. Your Account Manager will be as responsive as possible when online, but anything sent when they're offline will not be responded to until they're working again.
+
+You can contact your Account Manager while logged into your Expensify account by clicking **Support** on the left-hand menu and then selecting **Account Manager**.
+
+## Partner Manager
+
+A Partner Manager is a dedicated point of contact to support our ExpensifyApproved! Accountants with questions about their Expensify account. Partner Managers support our accounting partners by providing recommendations for client's accounts, assisting with firm-wide training, and ensuring partners receive the full benefits of our partnership program. They will actively monitor open technical issues and be proactive with recommendations to increase efficiency and minimize time spent on expense management.
+
+For your firm to be assigned a Partner Manager, you must complete the [ExpensifyApproved! University](https://use.expensify.com/accountants-program) training course. Every external accountant or bookkeeper who completes the training is automatically enrolled in our program and receives benefits, including access to a Partner Manager. Everyone at your firm must complete the training to receive the maximum benefit.
+
+### How to contact your Partner Manager
+
+Your Partner Manager should reach out to you once you've completed ExpensifyApproved! University. Otherwise, you can contact your Partner Manager anytime by clicking **Support** on the left-hand menu and then selecting **Partner Manager**.
+
+## Tips on Contacting Expensify Support
+
+- **Use the Right Email**: Contact us from the email address linked to your Expensify account. This helps us locate your information accurately.
+- **Be Clear and Specific**: When asking questions or reporting issues, provide specific examples like affected users' email addresses or report IDs. This makes it easier for us to assist you effectively.
+- **Practice Kindness**: Remember that we're here to help. Please be polite, considerate, and patient as we work together to resolve any concerns you have.
+
+# FAQ
+## Who gets an Account Manager?
+Members who have 10 or more active users, or clients of ExpensifyApproved! Accounts are automatically assigned a dedicated Account Manager. 
+
+To be assigned an Account Manager immediately, log into your Expensify account and go to **Settings > Workspaces > Group**, then click **Subscription** and increase your subscription size to 10 or more.
+
+## What if I'm unable to reach my Account Manager?
+If you're unable to reach your account manager, then you can always reach out to Concierge for assistance. Your account manager will always reply once they're online again.
+
+## Can I schedule a call with my Account Manager?
+Of course! You can ask your Account Manager for a call whenever you think one might be helpful. 
+
+**What makes a successful call with an Account Manager**:
+- Scheduling the call using their calendar link (this should be shared with you once you're assigned an Account Manager)
+- Listing out exactly what you'd like to go over with the Account Manager, and then sharing that list with them before the call
+- Having anyone else in your organization who regularly manages your Expensify setup join the call
+
+## When should I chat with Concierge instead of my Account Manager?
+If you have a general question about the status of a report or updating an account setting, Concierge is more than capable of getting you the answers you need. 
+
+We recommend working with Concierge on general support questions, as this team is always online and available to help immediately.
+
+## Who gets assigned a Setup Specialist?
+This feature is specifically for new members! Whenever you start a free trial, a product Setup Specialist will be assigned to guide you through configuring your Expensify account.
diff --git a/docs/articles/expensify-classic/getting-started/support/Your-Expensify-Account-Manager.md b/docs/articles/expensify-classic/getting-started/support/Your-Expensify-Account-Manager.md
deleted file mode 100644
index a6fa0220c0dc..000000000000
--- a/docs/articles/expensify-classic/getting-started/support/Your-Expensify-Account-Manager.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Your Expensify Account Manager
-description: Everything you need to know about Having an Expensify account manager
-redirect_from: articles/other/Your-Expensify-Account-Manager/
----
-
-<!-- The lines above are required by Jekyll to process the .md file -->
-
-# What is an account manager?
-An account manager is a dedicated point of contact to support policy admins with questions about their Expensify account. They are available to help you and other policy admins review your account, advise on best practices, and make changes to your policy on your behalf whenever you need a hand. They will actively monitor open technical issues and be proactive with recommendations to increase efficiency and minimize time spent on expense management.
-
-Unlike Concierge, an account manager’s support will not be real-time, 24 hours a day.  A benefit of Concierge is that you get real-time support every day. Your account manager will be super responsive when online, but anything sent when they’re offline will not be responded to until they’re online again.
-
-For real-time responses and simple troubleshooting issues, you can always message our general support by writing to Concierge via the in-product chat or by emailing concierge@expensify.com.
-
-# How do I know if I have an account manager?
-If you are a policy admin or domain admin, you will also hear from your account manager as soon as one gets assigned to your company. If you'd like a reminder who your account manager is, just click the Support link on the left side of Expensify - you'll see your account manager's name and photo, with an option to contact them for help.
-
-## How do I contact my account manager?
-We make it easy to contact your account manager:
-
-1. Log in to your Expensify account, click "Support" along the left side of the page, and click the “Account Manager” option
-2. Reply to (or click the chat link on) any email you get from your account manager
-3. Sign in to new.expensify.com and go to the #admins room for any of your policies. Your account manager is in your #admin rooms ready to help you, so you can ask for help here and your account manager will respond in the chat.
-
-# FAQs
-## Who gets an account manager?
-Every customer with 10 or more paid subscribers is automatically assigned a dedicated account manager. If you have fewer than 10 active users each month, you can still get an account manager by increasing your subscription to 10 or more users, To get assigned an account manager immediately, log into your Expensify account and go to Settings > Policies > Group, then click Subscription and increase your subscription size to 10 or more.
-
-## How do I know if my account manager is online?
-You will be able to see if they are online via their status, which will either say something like “online” or have their working hours.
-
-## What if I’m unable to reach my account manager?
-If for some reason, you’re unable to reach your account manager, perhaps because they’re offline, then you can always reach out to Concierge for assistance. Your account manager will always get back to you when they’re online again.
-
-## Can I get on a call with my account manager?
-Of course! You can ask your account manager to schedule a call whenever you think one might be helpful. We usually find that the most effective calls are those that deal with general setup questions. For technical troubleshooting, we typically recommend chat as that allows your account manager time to look into the issue, test things on their end, and, if needed, consult the wider Expensify technical team. It also allows you to easily refer back to instructions and links.
\ No newline at end of file
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/expensify-classic/integrations/travel-integrations/Trip-Actions.md b/docs/articles/expensify-classic/integrations/travel-integrations/Navan.md
similarity index 100%
rename from docs/articles/expensify-classic/integrations/travel-integrations/Trip-Actions.md
rename to docs/articles/expensify-classic/integrations/travel-integrations/Navan.md
diff --git a/docs/articles/expensify-classic/integrations/travel-integrations/Uber.md b/docs/articles/expensify-classic/integrations/travel-integrations/Uber.md
index 3ee1c8656b4b..16da0c0caa5b 100644
--- a/docs/articles/expensify-classic/integrations/travel-integrations/Uber.md
+++ b/docs/articles/expensify-classic/integrations/travel-integrations/Uber.md
@@ -1,5 +1,24 @@
 ---
-title: Coming Soon
-description: Coming Soon
+title: Uber integration
+description: Connecting your Uber account to Expensify
 ---
-## Resource Coming Soon!
+## Overview
+
+Link Expensify directly to your Uber account so your Uber for Business receipts populate automatically in Expensify. 
+
+# How to connect Uber to Expensify
+
+You can do this right in the Uber app:
+
+1. Head to Account > Business hub > Get started 
+2. Tap Create an individual account > Get started
+3. Enter your business email and tap Next
+4. Select the payment card you'd like to use for your business profile
+5. Choose how frequently you’d like to receive travel summaries 
+6. Select Expensify as your expense provider
+Expensify and Uber are now connected! 
+
+Now, every time you use Uber for Business – be it for rides or meals – the receipt will be imported and scanned into Expensify automatically. 
+
+![Uber integration set up steps: Connecting your account](https://help.expensify.com/assets/images/Uber1.png){:width="100%"}
+![Uber integration set up steps: Selecting Expensify](https://help.expensify.com/assets/images/Uber2.png){:width="100%"}
diff --git a/docs/articles/new-expensify/billing-and-plan-types/The-Free-Plan.md b/docs/articles/new-expensify/billing-and-plan-types/The-Free-Plan.md
index e157ede1969d..3b79072aa393 100644
--- a/docs/articles/new-expensify/billing-and-plan-types/The-Free-Plan.md
+++ b/docs/articles/new-expensify/billing-and-plan-types/The-Free-Plan.md
@@ -30,16 +30,38 @@ Once you’ve completed your company setup, you should have completed the follow
 - Invited members to the workspace
 - Assigned Expensify Cards
 
-# Inviting Members to the Free Plan:
+# Inviting Members to the Free Plan
 - Navigate to the Settings Menu and click **_Members_** to invite your team. You can invite employees one at a time, or you can invite multiple users by listing out their email addresses separated by a comma
 - To use the Expensify Card, you must invite them to your workspace via your company email address (i.e., admin@companyemail.com and NOT admin@gmail.com).
 
 # Managing the Free Plan
-To access your workspace settings, click your profile icon and then on your workspace name.
+## Workspace Settings
 
-This settings menu allows you to manage your workspace members, issue additional Expensify Cards, and utilize this plan’s various bill pay and payment options.
+To access your workspace settings, click your profile icon and then on your workspace name. This settings menu allows you to manage your workspace members, issue additional Expensify Cards, and utilize this plan’s various bill pay and payment options.
+
+## Paying an Expense Report
+- Once a user creates an expense it will automatically be shared with you in a Processing report.
+- Pay expenses directly through Expensify by choosing ‘Reimburse > via Direct Deposit (ACH)` in a report on www.expensify.com or by choosing ‘Pay with Expensify’ in a payment request on new.expensify.com.
+- Notify your user that you’ll pay them manually outside of Expensify by choosing ‘Reimburse > I’ll do it manually’ in a report on www.expensify.com or choosing ‘Pay Elsewhere’ in a payment request on new.expensify.com.
+- Reports with only non-reimbursable expenses on them have the option to ‘Mark as Closed’ in the report on www.expensify.com or ‘Mark as Done’ in the payment request on new.expensify.com.
+
+## Changing Submitted Expenses
+
+Request an edit an expense or remove an expense before you pay, you can let your user know by making a comment in the Report History section of their Processing report or chatting with them on new.expensify.com.
+
+# Managing Expenses
+
+## Creating an Expense
+- You can create an expense either by swiping the Expensify card or just smartscan a receipt!
+- Once you create an expense it will be automatically added to a report and shared with your admin.
+- You can edit or delete any expense that hasn’t been paid or closed by your admin.
+
+## Getting paid for Expenses
+- Automatic submission is already set up, so your admin can pay you back immediately once you create an expense.
+- Your admin will get a notification when you send them a new expense, but you can also remind them to pay you by making a comment in the Report History section of your Processing report or chatting with them on new.expensify.com.
 
 # FAQs
+
 ## Do I need a business bank account to use the Free Plan?
 
 You will need a US business checking account if you want to enable the Expensify Card and set up direct ACH reimbursement.
@@ -50,9 +72,27 @@ If you're not in the US, you can still use the Free Plan, but the Expensify Card
 
 The Expensify Workplace only allows for one admin (the workspace creator).
 
-## Scheduled Submit is set to weekly on the Free Plan. Can I change this?
+## I am on a paid plan, can I switch to a Free Plan?
+
+You can set up a Free Plan, but you must honor any active subscription you have also. If you're on a paid plan, it is likely you want more functionality than what the Free Plan offers such as a direct connection with an accounting integration and approval workflows.
+
+## Can I get cashback on Expensify Card purchases if I have a free plan?
+
+You can get 1% credited back to your settlement account once you spend over $25,000 per month across all cards and 2% when you spend over $250,000!
 
-No, expense reports on the Free Plan submit weekly, and there is no way to customize approval settings.
+## Can I switch the workspace currency on the Free Plan? It looks set to USD
+
+Yes, you can change the currency of the Free Plan by going to Avatar > [Workspace Name] > General settings > Default currency.
+
+We do require a US business bank account for reimbursements and Expensify Card settlements though, so if you have a business bank account linked to your account, then the currency of the Free Plan will be USD.
+
+## Is a free plan available to people outside the USA?
+
+Yes! You can use the free plan anywhere in the world to track expenses, send invoices etc. Just remember, anything that requires a verified business bank account (such as ACH reimbursement and the Expensify Card) is only available to those with a US checking account!
+
+## Can I integrate the free plan with my accounting package?
+
+No. In order to use our accounting sync, you will need to update to a paid plan
 
 ## With the Free Plan, can I add my own categories?
 
@@ -60,4 +100,48 @@ Categories are standardized on the Free Plan and can’t be edited. Custom categ
 
 ## With the Free Plan, can I export reports using a custom format?
 
-The Free Plan offers standard report export formats. You'll need to upgrade to a paid plan to create a custom export format.
\ No newline at end of file
+The Free Plan offers standard report export formats. You'll need to upgrade to a paid plan to create a custom export format.
+
+## Can I change the mileage rate or unit used for distance tracking?
+
+Yes. The workspace admin can access the rate and unit settings by going to Avatar > [Workspace name] > Reimburse expenses > Track distance.
+
+## Can I add non-Expensify cardholders to my Workspace?
+
+Yes. You can invite any user to your Workspace. Just click invite and enter their email and they will be invited to download the app and join!
+
+## Expenses are automatically shared with the admin on a Processing report on the Free Plan, can I change this?
+
+No. Expense reports submitted on the Free Plan are set to submit automatically and do not allow for approvals. Different Scheduled Submit settings are available on our paid plans.
+
+## How do I give a user I invited to my Workspace an Expensify Card?
+
+You can give a user an Expensify Card by going to the Company Cards Page on expensify.com and setting a card limit >$0. Please note that in order to give a user a card, they must be using a private company email address (i.e. name@companyname.com NOT name@gmail.com)
+
+## Can I use a different bank account to the one I have added for some of the features in the workspace?
+
+No. The bank account you have added will be used to issue corporate cards, reimburse expenses, collect invoices, and pay bills!
+
+## Can I upgrade my Free Workspace to a Paid Workspace or do I need to create a new one?
+
+There is no way to upgrade a workspace, so you would need to create a new Workspace. Paid workspaces have more functionalities than what the Free Plan offers, such as a direct connection with an accounting integration and approval workflows.
+
+## Can I create more than one Processing report at a time?
+
+No. To keep things simple, we only allow one Processing report per user at a time. If you need to have more than one report at a time, our paid plans support unlimited reports.
+
+## A user has added an expense I need to change before I pay it, how do I let them know?
+
+Users can edit and delete expenses on Processing reports. If you need something changed, let them know by commenting in the Report History section of the report on expensify.com or by chatting with them in new.expensify.com.
+
+## Can I ‘Reopen’ a report once it’s Reimbursed or Closed?
+
+No. Once an admin reimburses or closes a report, it cannot be ‘reopened’, but you can always comment on a report to add context.
+
+## I accidentally reimbursed a report too soon. Can I cancel the reimbursement?
+
+Depending on how quickly you report it to us, we may be able to help cancel a reimbursement. Chat Concierge to see if we can help cancel a reimbursement.
+
+## As an admin, can I edit users’ expenses and delete them from reports?
+
+No. Only users can edit and delete expenses on the Free plan. Admin control of submitted expenses on a workspace is a feature of our paid plans. If you need something changed, let the user know by commenting in the Report History section of the report on www.expensify.com or by chatting with them in new.expensify.com.
diff --git a/docs/articles/new-expensify/expensify-partner-program/Coming-Soon.md b/docs/articles/new-expensify/expensify-partner-program/Coming-Soon.md
deleted file mode 100644
index 6b85bb0364b5..000000000000
--- a/docs/articles/new-expensify/expensify-partner-program/Coming-Soon.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Coming Soon
-description: Coming Soon
----
diff --git a/docs/articles/new-expensify/get-paid-back/Distance-Requests.md b/docs/articles/new-expensify/get-paid-back/Distance-Requests.md
new file mode 100644
index 000000000000..91b88409be8b
--- /dev/null
+++ b/docs/articles/new-expensify/get-paid-back/Distance-Requests.md
@@ -0,0 +1,27 @@
+---
+title: Distance Requests
+description: How to create a distance request and request reimbursement for mileage
+---
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# Overview
+
+Expensify allows you to request reimbursement for mileage by creating a distance request from a map. You can send a distance request in Expensify's mobile, desktop, or web app.
+
+
+# How to create and send a distance request
+
+1. Click the green + button and select Request Money.
+2. Select Distance along the top row of the Request Money window.
+3. Enter the Start and Finish addresses then click Next. If there are multiple stops, you can add them before clicking Next.
+4. Choose who to send the request to by selecting your organization's workspace from the list of recent workspaces.
+5. On the confirmation page, confirm the amount, date, distance, and optionally add a description or category. Click the Request button.
+6. A workspace admin will receive your request and can reimburse you through Expensify or elsewhere!
+
+
+
+# FAQs
+
+## Is there an easy way to reuse recent locations?
+
+Yes! We save your recently used locations and list them out on the page where you select the Start and Finish.
diff --git a/docs/articles/new-expensify/send-payments/Coming-Soon.md b/docs/articles/new-expensify/send-payments/Coming-Soon.md
deleted file mode 100644
index 6b85bb0364b5..000000000000
--- a/docs/articles/new-expensify/send-payments/Coming-Soon.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Coming Soon
-description: Coming Soon
----
diff --git a/docs/articles/new-expensify/workspace-and-domain-settings/Coming-Soon.md b/docs/articles/new-expensify/workspace-and-domain-settings/Coming-Soon.md
deleted file mode 100644
index 6b85bb0364b5..000000000000
--- a/docs/articles/new-expensify/workspace-and-domain-settings/Coming-Soon.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: Coming Soon
-description: Coming Soon
----
diff --git a/docs/assets/images/ExpensifyHelp_Time.png b/docs/assets/images/ExpensifyHelp_Time.png
index a042ab60f681..f4d91b1e8aeb 100644
Binary files a/docs/assets/images/ExpensifyHelp_Time.png and b/docs/assets/images/ExpensifyHelp_Time.png differ
diff --git a/docs/assets/images/QBO1.png b/docs/assets/images/QBO1.png
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/docs/assets/images/Uber1.png b/docs/assets/images/Uber1.png
new file mode 100644
index 000000000000..d5a7d651c6b9
Binary files /dev/null and b/docs/assets/images/Uber1.png differ
diff --git a/docs/assets/images/Uber2.png b/docs/assets/images/Uber2.png
new file mode 100644
index 000000000000..27ac9925a900
Binary files /dev/null and b/docs/assets/images/Uber2.png differ
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 22c893c828aa..7c3fbf13697a 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.5</string>
+	<string>1.4.8</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.5.7</string>
+	<string>1.4.8.1</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 35deae453a67..0d2561b67b74 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.5</string>
+	<string>1.4.8</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.5.7</string>
+	<string>1.4.8.1</string>
 </dict>
 </plist>
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index e0615c4a52fa..390511397b0e 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -726,8 +726,6 @@ PODS:
     - React-Core
   - RNCPicker (2.4.4):
     - React-Core
-  - RNDateTimePicker (3.5.2):
-    - React-Core
   - RNDeviceInfo (10.3.0):
     - React-Core
   - RNDevMenu (4.1.1):
@@ -919,7 +917,6 @@ DEPENDENCIES:
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
-  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNDevMenu (from `../node_modules/react-native-dev-menu`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
@@ -1121,8 +1118,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCPicker:
     :path: "../node_modules/@react-native-picker/picker"
-  RNDateTimePicker:
-    :path: "../node_modules/@react-native-community/datetimepicker"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNDevMenu:
@@ -1270,7 +1265,6 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60
   RNCClipboard: d77213bfa269013bf4b857b7a9ca37ee062d8ef1
   RNCPicker: 0b65be85fe7954fbb2062ef079e3d1cde252d888
-  RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140
   RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7
   RNDevMenu: 72807568fe4188bd4c40ce32675d82434b43c45d
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
diff --git a/ios/expensify_chat_adhoc.mobileprovision.gpg b/ios/expensify_chat_adhoc.mobileprovision.gpg
index 1dae451f168c..f4691df10d67 100644
Binary files a/ios/expensify_chat_adhoc.mobileprovision.gpg and b/ios/expensify_chat_adhoc.mobileprovision.gpg differ
diff --git a/package-lock.json b/package-lock.json
index abd1110e5cce..51dc9df3a5f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.5-7",
+  "version": "1.4.8-1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.5-7",
+      "version": "1.4.8-1",
       "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",
@@ -97,7 +96,7 @@
         "react-native-pdf": "^6.7.3",
         "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-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#0d15d4618f58e99c1261921111e68ee85bb3c2a8",
         "react-native-plaid-link-sdk": "10.8.0",
         "react-native-qrcode-svg": "^6.2.0",
         "react-native-quick-sqlite": "^8.0.0-beta.2",
@@ -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",
@@ -44524,9 +44514,9 @@
       }
     },
     "node_modules/react-native-picker-select": {
-      "version": "8.0.4",
-      "resolved": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
-      "integrity": "sha512-3U/mtHN/pKC5yXtJnqj5rre8+4YPSqoXCn/3qKjb5u8BMIiuc5H3KJ0ZbKlZEg/8Uh4j0cvrtcNasdPgMqRgCQ==",
+      "version": "8.1.0",
+      "resolved": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#0d15d4618f58e99c1261921111e68ee85bb3c2a8",
+      "integrity": "sha512-ly0ZCt3K4RX7t9lfSb2OSGAw0cv8UqdMoxNfh5j+KujYYq+N8VsI9O/lmqquNeX/AMp5hM3fjetEWue4nZw/hA==",
       "license": "MIT",
       "dependencies": {
         "lodash.isequal": "^4.5.0"
@@ -58712,14 +58702,6 @@
         "joi": "^17.2.1"
       }
     },
-    "@react-native-community/datetimepicker": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz",
-      "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==",
-      "requires": {
-        "invariant": "^2.2.4"
-      }
-    },
     "@react-native-community/eslint-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-3.0.0.tgz",
@@ -84872,9 +84854,9 @@
       "requires": {}
     },
     "react-native-picker-select": {
-      "version": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
-      "integrity": "sha512-3U/mtHN/pKC5yXtJnqj5rre8+4YPSqoXCn/3qKjb5u8BMIiuc5H3KJ0ZbKlZEg/8Uh4j0cvrtcNasdPgMqRgCQ==",
-      "from": "react-native-picker-select@git+https://github.com/Expensify/react-native-picker-select.git#eae05855286dc699954415cc1d629bfd8e8e47e2",
+      "version": "git+ssh://git@github.com/Expensify/react-native-picker-select.git#0d15d4618f58e99c1261921111e68ee85bb3c2a8",
+      "integrity": "sha512-ly0ZCt3K4RX7t9lfSb2OSGAw0cv8UqdMoxNfh5j+KujYYq+N8VsI9O/lmqquNeX/AMp5hM3fjetEWue4nZw/hA==",
+      "from": "react-native-picker-select@git+https://github.com/Expensify/react-native-picker-select.git#0d15d4618f58e99c1261921111e68ee85bb3c2a8",
       "requires": {
         "lodash.isequal": "^4.5.0"
       }
diff --git a/package.json b/package.json
index b8173bd8ba1b..ac02f2db5f82 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.5-7",
+  "version": "1.4.8-1",
   "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",
@@ -144,7 +143,7 @@
     "react-native-pdf": "^6.7.3",
     "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-picker-select": "git+https://github.com/Expensify/react-native-picker-select.git#0d15d4618f58e99c1261921111e68ee85bb3c2a8",
     "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
diff --git a/src/App.js b/src/App.js
index ac34ece5c6c7..e273dcce1e47 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';
@@ -51,6 +53,9 @@ function App() {
             <ComposeProviders
                 components={[
                     OnyxProvider,
+                    ThemeProvider,
+                    ThemeStylesProvider,
+                    ThemeIllustrationsProvider,
                     SafeAreaProvider,
                     PortalProvider,
                     SafeArea,
@@ -63,14 +68,14 @@ function App() {
                     ReportAttachmentsProvider,
                     PickerStateProvider,
                     EnvironmentProvider,
-                    ThemeProvider,
-                    ThemeStylesProvider,
-                    ThemeIllustrationsProvider,
+                    CustomStatusBarContextProvider,
                 ]}
             >
                 <CustomStatusBar />
                 <ErrorBoundary errorMessage="NewExpensify crash caught by error boundary">
-                    <Expensify />
+                    <ColorSchemeWrapper>
+                        <Expensify />
+                    </ColorSchemeWrapper>
                 </ErrorBoundary>
             </ComposeProviders>
         </GestureHandlerRootView>
diff --git a/src/CONST.ts b/src/CONST.ts
index 8d928df71ef0..283195562e49 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -483,6 +483,7 @@ const CONST = {
         MAX_REPORT_PREVIEW_RECEIPTS: 3,
     },
     REPORT: {
+        MAX_COUNT_BEFORE_FOCUS_UPDATE: 30,
         MAXIMUM_PARTICIPANTS: 8,
         SPLIT_REPORTID: '-2',
         ACTIONS: {
@@ -497,6 +498,7 @@ const CONST = {
                 MODIFIEDEXPENSE: 'MODIFIEDEXPENSE',
                 MOVED: 'MOVED',
                 REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',
+                REIMBURSEMENTDEQUEUED: 'REIMBURSEMENTDEQUEUED',
                 RENAMED: 'RENAMED',
                 REPORTPREVIEW: 'REPORTPREVIEW',
                 SUBMITTED: 'SUBMITTED',
@@ -699,6 +701,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',
@@ -954,6 +964,7 @@ const CONST = {
         GUIDES_DOMAIN: 'team.expensify.com',
         HELP: 'help@expensify.com',
         INTEGRATION_TESTING_CREDS: 'integrationtestingcreds@expensify.com',
+        NOTIFICATIONS: 'notifications@expensify.com',
         PAYROLL: 'payroll@expensify.com',
         QA: 'qa@expensify.com',
         QA_TRAVIS: 'qa+travisreceipts@expensify.com',
@@ -973,6 +984,7 @@ const CONST = {
         FIRST_RESPONDER: Number(Config?.EXPENSIFY_ACCOUNT_ID_FIRST_RESPONDER ?? 9375152),
         HELP: Number(Config?.EXPENSIFY_ACCOUNT_ID_HELP ?? -1),
         INTEGRATION_TESTING_CREDS: Number(Config?.EXPENSIFY_ACCOUNT_ID_INTEGRATION_TESTING_CREDS ?? -1),
+        NOTIFICATIONS: Number(Config?.EXPENSIFY_ACCOUNT_ID_NOTIFICATIONS ?? 11665625),
         PAYROLL: Number(Config?.EXPENSIFY_ACCOUNT_ID_PAYROLL ?? 9679724),
         QA: Number(Config?.EXPENSIFY_ACCOUNT_ID_QA ?? 3126513),
         QA_TRAVIS: Number(Config?.EXPENSIFY_ACCOUNT_ID_QA_TRAVIS ?? 8595733),
@@ -1157,6 +1169,9 @@ const CONST = {
             SVG: 'svg',
         },
         RECEIPT_ERROR: 'receiptError',
+        CANCEL_REASON: {
+            PAYMENT_EXPIRED: 'CANCEL_REASON_PAYMENT_EXPIRED',
+        },
     },
 
     GROWL: {
@@ -1396,6 +1411,7 @@ const CONST = {
             this.EMAIL.FIRST_RESPONDER,
             this.EMAIL.HELP,
             this.EMAIL.INTEGRATION_TESTING_CREDS,
+            this.EMAIL.NOTIFICATIONS,
             this.EMAIL.PAYROLL,
             this.EMAIL.QA,
             this.EMAIL.QA_TRAVIS,
@@ -2844,6 +2860,33 @@ 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',
+        HUNTINGTON_NATIONAL: 'huntington national',
+        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/Expensify.js b/src/Expensify.js
index 1b692f86a197..aece93c0ff4d 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -7,6 +7,7 @@ import _ from 'underscore';
 import ConfirmModal from './components/ConfirmModal';
 import DeeplinkWrapper from './components/DeeplinkWrapper';
 import EmojiPicker from './components/EmojiPicker/EmojiPicker';
+import FocusModeNotification from './components/FocusModeNotification';
 import GrowlNotification from './components/GrowlNotification';
 import AppleAuthWrapper from './components/SignInButtons/AppleAuthWrapper';
 import SplashScreenHider from './components/SplashScreenHider';
@@ -76,6 +77,9 @@ const propTypes = {
     /** Whether the app is waiting for the server's response to determine if a room is public */
     isCheckingPublicRoom: PropTypes.bool,
 
+    /** Whether we should display the notification alerting the user that focus mode has been auto-enabled */
+    focusModeNotification: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -88,6 +92,7 @@ const defaultProps = {
     isSidebarLoaded: false,
     screenShareRequest: null,
     isCheckingPublicRoom: true,
+    focusModeNotification: false,
 };
 
 const SplashScreenHiddenContext = React.createContext({});
@@ -221,6 +226,7 @@ function Expensify(props) {
                             isVisible
                         />
                     ) : null}
+                    {props.focusModeNotification ? <FocusModeNotification /> : null}
                 </>
             )}
 
@@ -261,6 +267,10 @@ export default compose(
         screenShareRequest: {
             key: ONYXKEYS.SCREEN_SHARE_REQUEST,
         },
+        focusModeNotification: {
+            key: ONYXKEYS.FOCUS_MODE_NOTIFICATION,
+            initWithStoredValues: false,
+        },
     }),
 )(Expensify);
 
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 5576eb64736d..1bc06e231448 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -152,6 +152,12 @@ const ONYXKEYS = {
     /** The user's cash card and imported cards (including the Expensify Card) */
     CARD_LIST: 'cardList',
 
+    /** Whether the user has tried focus mode yet */
+    NVP_TRY_FOCUS_MODE: 'tryFocusMode',
+
+    /** Boolean flag used to display the focus mode notification */
+    FOCUS_MODE_NOTIFICATION: 'focusModeNotification',
+
     /** Stores information about the user's saved statements */
     WALLET_STATEMENT: 'walletStatement',
 
@@ -265,6 +271,7 @@ const ONYXKEYS = {
         REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_',
         SECURITY_GROUP: 'securityGroup_',
         TRANSACTION: 'transactions_',
+        TRANSACTION_VIOLATIONS: 'transactionViolations_',
 
         // Holds temporary transactions used during the creation and edit flow
         TRANSACTION_DRAFT: 'transactionsDraft_',
@@ -382,6 +389,8 @@ type OnyxValues = {
     [ONYXKEYS.NVP_PRIORITY_MODE]: ValueOf<typeof CONST.PRIORITY_MODE>;
     [ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE]: OnyxTypes.BlockedFromConcierge;
     [ONYXKEYS.NVP_PRIVATE_PUSH_NOTIFICATION_ID]: string;
+    [ONYXKEYS.NVP_TRY_FOCUS_MODE]: boolean;
+    [ONYXKEYS.FOCUS_MODE_NOTIFICATION]: boolean;
     [ONYXKEYS.NVP_LAST_PAYMENT_METHOD]: Record<string, string>;
     [ONYXKEYS.NVP_RECENT_WAYPOINTS]: OnyxTypes.RecentWaypoint[];
     [ONYXKEYS.PUSH_NOTIFICATIONS_ENABLED]: boolean;
@@ -389,7 +398,7 @@ type OnyxValues = {
     [ONYXKEYS.IS_PLAID_DISABLED]: boolean;
     [ONYXKEYS.PLAID_LINK_TOKEN]: string;
     [ONYXKEYS.ONFIDO_TOKEN]: string;
-    [ONYXKEYS.NVP_PREFERRED_LOCALE]: ValueOf<typeof CONST.LOCALES>;
+    [ONYXKEYS.NVP_PREFERRED_LOCALE]: OnyxTypes.Locale;
     [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet;
     [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido;
     [ONYXKEYS.WALLET_ADDITIONAL_DETAILS]: OnyxTypes.WalletAdditionalDetails;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 24b698c24619..a3aa28c44609 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -130,7 +130,10 @@ const ROUTES = {
         route: 'settings/profile/contact-methods/:contactMethod/details',
         getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details` as const,
     },
-    SETTINGS_NEW_CONTACT_METHOD: 'settings/profile/contact-methods/new',
+    SETTINGS_NEW_CONTACT_METHOD: {
+        route: 'settings/profile/contact-methods/new',
+        getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods/new', backTo),
+    },
     SETTINGS_2FA: {
         route: 'settings/security/two-factor-auth',
         getRoute: (backTo?: string) => getUrlWithBackToParam('settings/security/two-factor-auth', backTo),
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 3c7feb8fb70c..6f5148edd436 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 = {
@@ -24,13 +25,14 @@ const defaultProps = {
 };
 
 function CurrentLocationButton({onPress, isDisabled}) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     return (
         <PressableWithFeedback
             style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
-            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
+            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(true), true)}
             onPress={onPress}
             accessibilityLabel={translate('location.useCurrent')}
             disabled={isDisabled}
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index a401300e920d..9f16766a22ae 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -509,7 +509,13 @@ function AddressSearch({
                         }}
                         styles={{
                             textInputContainer: [styles.flexColumn],
-                            listView: [StyleUtils.getGoogleListViewStyle(displayListViewBorder), styles.overflowAuto, styles.borderLeft, styles.borderRight, !isFocused && {height: 0}],
+                            listView: [
+                                StyleUtils.getGoogleListViewStyle(styles, displayListViewBorder),
+                                styles.overflowAuto,
+                                styles.borderLeft,
+                                styles.borderRight,
+                                !isFocused && {height: 0},
+                            ],
                             row: [styles.pv4, styles.ph3, styles.overflowAuto],
                             description: [styles.googleSearchText],
                             separator: [styles.googleSearchSeparator],
@@ -526,7 +532,7 @@ function AddressSearch({
                         inbetweenCompo={
                             // We want to show the current location button even if there are no recent destinations
                             predefinedPlaces.length === 0 && shouldShowCurrentLocationButton ? (
-                                <View style={[StyleUtils.getGoogleListViewStyle(true), styles.overflowAuto, styles.borderLeft, styles.borderRight]}>
+                                <View style={[StyleUtils.getGoogleListViewStyle(styles, true), styles.overflowAuto, styles.borderLeft, styles.borderRight]}>
                                     <CurrentLocationButton
                                         onPress={getCurrentLocation}
                                         isDisabled={network.isOffline}
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.tsx
similarity index 51%
rename from src/components/AnonymousReportFooter.js
rename to src/components/AnonymousReportFooter.tsx
index 387e2ab01930..65dc813a829d 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.tsx
@@ -1,57 +1,52 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Text, View} from 'react-native';
-import reportPropTypes from '@pages/reportPropTypes';
+import {OnyxCollection} from 'react-native-onyx';
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
+import {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
-import participantPropTypes from './participantPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-const propTypes = {
+type AnonymousReportFooterProps = {
     /** The report currently being looked at */
-    report: reportPropTypes,
+    report: OnyxEntry<Report>;
 
-    isSmallSizeLayout: PropTypes.bool,
+    /** Whether the small screen size layout should be used */
+    isSmallSizeLayout?: boolean;
 
     /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    report: {},
-    isSmallSizeLayout: false,
-    personalDetails: {},
+    personalDetails: OnyxCollection<PersonalDetails>;
 };
 
-function AnonymousReportFooter(props) {
+function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, report}: AnonymousReportFooterProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
-        <View style={styles.anonymousRoomFooter(props.isSmallSizeLayout)}>
+        <View style={styles.anonymousRoomFooter(isSmallSizeLayout)}>
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
-                    report={props.report}
-                    personalDetails={props.personalDetails}
+                    report={report}
+                    personalDetails={personalDetails}
                     isAnonymous
                     shouldEnableDetailPageNavigation
                 />
             </View>
-            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(props.isSmallSizeLayout)}>
-                <View style={[props.isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
-                    <View style={[props.isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
+            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(isSmallSizeLayout)}>
+                <View style={[isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
+                    <View style={[isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
                         <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
                     </View>
-                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
+                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{translate('anonymousReportFooter.logoTagline')}</Text>
                 </View>
                 <View style={[styles.anonymousRoomFooterSignInButton]}>
                     <Button
                         medium
                         success
-                        text={props.translate('common.signIn')}
+                        text={translate('common.signIn')}
                         onPress={() => Session.signOutAndRedirectToSignIn()}
                     />
                 </View>
@@ -60,8 +55,6 @@ function AnonymousReportFooter(props) {
     );
 }
 
-AnonymousReportFooter.propTypes = propTypes;
-AnonymousReportFooter.defaultProps = defaultProps;
 AnonymousReportFooter.displayName = 'AnonymousReportFooter';
 
-export default withLocalize(AnonymousReportFooter);
+export default AnonymousReportFooter;
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 356e75b1e1bb..57b0c6466a7f 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -46,7 +46,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimen
 
 const propTypes = {
     /** Optional source (URL, SVG function) for the image shown. If not passed in via props must be specified when modal is opened. */
-    source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    source: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]),
 
     /** Optional callback to fire when we want to preview an image and approve it for use. */
     onConfirm: PropTypes.func,
@@ -128,7 +128,7 @@ function AttachmentModal(props) {
     const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
     const {windowWidth} = useWindowDimensions();
 
-    const isOverlayModalVisible = (isAttachmentReceipt && isDeleteReceiptConfirmModalVisible) || (!isAttachmentReceipt && isAttachmentInvalid);
+    const isOverlayModalVisible = (props.isReceiptAttachment && isDeleteReceiptConfirmModalVisible) || (!props.isReceiptAttachment && isAttachmentInvalid);
 
     const [file, setFile] = useState(
         props.originalFileName
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
index b6cc0cbf21a4..fbc49590d5ae 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.js
@@ -27,8 +27,8 @@ const propTypes = {
         /** Additional information about the attachment file */
         file: PropTypes.shape({
             /** File name of the attachment */
-            name: PropTypes.string,
-        }),
+            name: PropTypes.string.isRequired,
+        }).isRequired,
 
         /** Whether the attachment has been flagged */
         hasBeenFlagged: PropTypes.bool,
diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
index 7543e8d9c099..72a554de68be 100644
--- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
+++ b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
@@ -5,7 +5,7 @@ import reportPropTypes from '@pages/reportPropTypes';
 
 const propTypes = {
     /** source is used to determine the starting index in the array of attachments */
-    source: PropTypes.string,
+    source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /** Callback to update the parent modal's state with a source and name from the attachments array */
     onNavigate: PropTypes.func,
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
index 0f1fa15c99ca..50d53ee842c2 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
@@ -1,6 +1,7 @@
 import {Parser as HtmlParser} from 'htmlparser2';
 import lodashGet from 'lodash/get';
 import _ from 'underscore';
+import * as FileUtils from '@libs/fileDownload/FileUtils';
 import * as ReceiptUtils from '@libs/ReceiptUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
@@ -25,14 +26,16 @@ function extractAttachmentsFromReport(parentReportAction, reportActions, transac
             }
 
             const expensifySource = attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE];
+            const source = tryResolveUrlFromApiRoot(expensifySource || attribs.src);
+            const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${source}`);
 
             // By iterating actions in chronological order and prepending each attachment
             // we ensure correct order of attachments even across actions with multiple attachments.
             attachments.unshift({
                 reportActionID: attribs['data-id'],
-                source: tryResolveUrlFromApiRoot(expensifySource || attribs.src),
+                source,
                 isAuthTokenRequired: Boolean(expensifySource),
-                file: {name: attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE]},
+                file: {name: fileName},
                 isReceipt: false,
                 hasBeenFlagged: attribs['data-flagged'] === 'true',
             });
diff --git a/src/components/Attachments/propTypes.js b/src/components/Attachments/propTypes.js
index 698a41de9648..13adc468ce64 100644
--- a/src/components/Attachments/propTypes.js
+++ b/src/components/Attachments/propTypes.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 
 const attachmentSourcePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number]);
 const attachmentFilePropType = PropTypes.shape({
-    name: PropTypes.string,
+    name: PropTypes.string.isRequired,
 });
 
 const attachmentPropType = PropTypes.shape({
@@ -13,7 +13,7 @@ const attachmentPropType = PropTypes.shape({
     source: attachmentSourcePropType.isRequired,
 
     /** File object can be an instance of File or Object */
-    file: attachmentFilePropType,
+    file: attachmentFilePropType.isRequired,
 });
 
 const attachmentsPropType = PropTypes.arrayOf(attachmentPropType);
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index 3e5e7b4fdd9a..efde2b24992f 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';
@@ -38,6 +39,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>(
     }: AutoCompleteSuggestionsProps<TSuggestion>,
     ref: ForwardedRef<View | HTMLDivElement>,
 ) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     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
deleted file mode 100644
index 0052400bf51a..000000000000
--- a/src/components/Avatar.js
+++ /dev/null
@@ -1,126 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {useEffect, useState} from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
-import useNetwork from '@hooks/useNetwork';
-import * as ReportUtils from '@libs/ReportUtils';
-import stylePropTypes from '@styles/stylePropTypes';
-import * as StyleUtils from '@styles/StyleUtils';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import Image from './Image';
-
-const propTypes = {
-    /** Source for the avatar. Can be a URL or an icon. */
-    source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
-    /** Extra styles to pass to Image */
-    // eslint-disable-next-line react/forbid-prop-types
-    imageStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Additional styles to pass to Icon */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconAdditionalStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Extra styles to pass to View wrapper */
-    containerStyles: stylePropTypes,
-
-    /** Set the size of Avatar */
-    size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
-
-    /**
-     * The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'
-     * If the avatar is type === workspace, this fill color will be ignored and decided based on the name prop.
-     */
-    fill: PropTypes.string,
-
-    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL.
-     * If the avatar is type === workspace, this fallback icon will be ignored and decided based on the name prop.
-     */
-    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-
-    /** Denotes whether it is an avatar or a workspace avatar */
-    type: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_WORKSPACE]),
-
-    /** Owner of the avatar. If user, displayName. If workspace, policy name */
-    name: PropTypes.string,
-};
-
-const defaultProps = {
-    source: null,
-    imageStyles: [],
-    iconAdditionalStyles: [],
-    containerStyles: [],
-    size: CONST.AVATAR_SIZE.DEFAULT,
-    fill: undefined,
-    fallbackIcon: Expensicons.FallbackAvatar,
-    type: CONST.ICON_TYPE_AVATAR,
-    name: '',
-};
-
-function Avatar(props) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const [imageError, setImageError] = useState(false);
-
-    useNetwork({onReconnect: () => setImageError(false)});
-
-    useEffect(() => {
-        setImageError(false);
-    }, [props.source]);
-
-    if (!props.source) {
-        return null;
-    }
-
-    const isWorkspace = props.type === CONST.ICON_TYPE_WORKSPACE;
-    const iconSize = StyleUtils.getAvatarSize(props.size);
-
-    const imageStyle =
-        props.imageStyles && props.imageStyles.length
-            ? [StyleUtils.getAvatarStyle(props.size), ...props.imageStyles, styles.noBorderRadius]
-            : [StyleUtils.getAvatarStyle(props.size), styles.noBorderRadius];
-
-    const iconStyle = props.imageStyles && props.imageStyles.length ? [StyleUtils.getAvatarStyle(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;
-
-    return (
-        <View style={[props.containerStyles, styles.pointerEventsNone]}>
-            {_.isFunction(props.source) || (imageError && _.isFunction(fallbackAvatar)) ? (
-                <View style={iconStyle}>
-                    <Icon
-                        src={imageError ? fallbackAvatar : props.source}
-                        height={iconSize}
-                        width={iconSize}
-                        fill={imageError ? theme.offline : iconFillColor}
-                        additionalStyles={[
-                            StyleUtils.getAvatarBorderStyle(props.size, props.type),
-                            isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(props.name) : {},
-                            imageError ? StyleUtils.getBackgroundColorStyle(theme.fallbackIconColor) : {},
-                            ...props.iconAdditionalStyles,
-                        ]}
-                    />
-                </View>
-            ) : (
-                <View style={[iconStyle, StyleUtils.getAvatarBorderStyle(props.size, props.type), ...props.iconAdditionalStyles]}>
-                    <Image
-                        source={{uri: imageError ? fallbackAvatar : props.source}}
-                        style={imageStyle}
-                        onError={() => setImageError(true)}
-                    />
-                </View>
-            )}
-        </View>
-    );
-}
-
-Avatar.defaultProps = defaultProps;
-Avatar.propTypes = propTypes;
-Avatar.displayName = 'Avatar';
-
-export default Avatar;
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
new file mode 100644
index 000000000000..d394a84bd207
--- /dev/null
+++ b/src/components/Avatar.tsx
@@ -0,0 +1,118 @@
+import React, {useEffect, useState} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import useNetwork from '@hooks/useNetwork';
+import * as ReportUtils from '@libs/ReportUtils';
+import {AvatarSource} from '@libs/UserUtils';
+import * as StyleUtils from '@styles/StyleUtils';
+import type {AvatarSizeName} from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
+import {AvatarType} from '@src/types/onyx/OnyxCommon';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Image from './Image';
+
+type AvatarProps = {
+    /** Source for the avatar. Can be a URL or an icon. */
+    source?: AvatarSource;
+
+    /** Extra styles to pass to Image */
+    imageStyles?: StyleProp<ViewStyle>;
+
+    /** Additional styles to pass to Icon */
+    iconAdditionalStyles?: StyleProp<ViewStyle>;
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Set the size of Avatar */
+    size?: AvatarSizeName;
+
+    /**
+     * The fill color for the icon. Can be hex, rgb, rgba, or valid react-native named color such as 'red' or 'blue'
+     * If the avatar is type === workspace, this fill color will be ignored and decided based on the name prop.
+     */
+    fill?: string;
+
+    /** A fallback avatar icon to display when there is an error on loading avatar from remote URL.
+     * If the avatar is type === workspace, this fallback icon will be ignored and decided based on the name prop.
+     */
+    fallbackIcon?: AvatarSource;
+
+    /** Denotes whether it is an avatar or a workspace avatar */
+    type?: AvatarType;
+
+    /** Owner of the avatar. If user, displayName. If workspace, policy name */
+    name?: string;
+};
+
+function Avatar({
+    source,
+    imageStyles,
+    iconAdditionalStyles,
+    containerStyles,
+    size = CONST.AVATAR_SIZE.DEFAULT,
+    fill,
+    fallbackIcon = Expensicons.FallbackAvatar,
+    type = CONST.ICON_TYPE_AVATAR,
+    name = '',
+}: AvatarProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const [imageError, setImageError] = useState(false);
+
+    useNetwork({onReconnect: () => setImageError(false)});
+
+    useEffect(() => {
+        setImageError(false);
+    }, [source]);
+
+    if (!source) {
+        return null;
+    }
+
+    const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
+    const iconSize = StyleUtils.getAvatarSize(size);
+
+    const imageStyle = [StyleUtils.getAvatarStyle(theme, size), imageStyles, styles.noBorderRadius];
+    const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(theme, size), styles.bgTransparent, imageStyles] : undefined;
+
+    const iconFillColor = isWorkspace ? StyleUtils.getDefaultWorkspaceAvatarColor(name).fill : fill ?? theme.icon;
+    const fallbackAvatar = isWorkspace ? ReportUtils.getDefaultWorkspaceAvatar(name) : fallbackIcon || Expensicons.FallbackAvatar;
+
+    const avatarSource = imageError ? fallbackAvatar : source;
+
+    return (
+        <View style={[containerStyles, styles.pointerEventsNone]}>
+            {typeof avatarSource === 'function' ? (
+                <View style={iconStyle}>
+                    <Icon
+                        src={avatarSource}
+                        height={iconSize}
+                        width={iconSize}
+                        fill={imageError ? theme.offline : iconFillColor}
+                        additionalStyles={[
+                            StyleUtils.getAvatarBorderStyle(size, type),
+                            isWorkspace && StyleUtils.getDefaultWorkspaceAvatarColor(name),
+                            imageError && StyleUtils.getBackgroundColorStyle(theme.fallbackIconColor),
+                            iconAdditionalStyles,
+                        ]}
+                    />
+                </View>
+            ) : (
+                <View style={[iconStyle, StyleUtils.getAvatarBorderStyle(size, type), iconAdditionalStyles]}>
+                    <Image
+                        source={{uri: avatarSource}}
+                        style={imageStyle}
+                        onError={() => setImageError(true)}
+                    />
+                </View>
+            )}
+        </View>
+    );
+}
+
+Avatar.displayName = 'Avatar';
+
+export default Avatar;
diff --git a/src/components/AvatarSkeleton.js b/src/components/AvatarSkeleton.tsx
similarity index 100%
rename from src/components/AvatarSkeleton.js
rename to src/components/AvatarSkeleton.tsx
diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.tsx
similarity index 50%
rename from src/components/AvatarWithDisplayName.js
rename to src/components/AvatarWithDisplayName.tsx
index de6d6b8ef6e2..9229cb80cf4c 100644
--- a/src/components/AvatarWithDisplayName.js
+++ b/src/components/AvatarWithDisplayName.tsx
@@ -1,114 +1,114 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
-import compose from '@libs/compose';
+import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx';
+import {ValueOf} from 'type-fest';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import {PersonalDetails, Policy, Report, ReportActions} from '@src/types/onyx';
 import DisplayNames from './DisplayNames';
 import MultipleAvatars from './MultipleAvatars';
 import ParentNavigationSubtitle from './ParentNavigationSubtitle';
-import participantPropTypes from './participantPropTypes';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import SubscriptAvatar from './SubscriptAvatar';
 import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 
-const propTypes = {
+type AvatarWithDisplayNamePropsWithOnyx = {
+    /** All of the actions of the report */
+    parentReportActions: OnyxEntry<ReportActions>;
+};
+
+type AvatarWithDisplayNameProps = AvatarWithDisplayNamePropsWithOnyx & {
     /** The report currently being looked at */
-    report: reportPropTypes,
+    report: OnyxEntry<Report>;
 
     /** The policy which the user has access to and which the report is tied to */
-    policy: PropTypes.shape({
-        /** Name of the policy */
-        name: PropTypes.string,
-    }),
+    policy?: OnyxEntry<Policy>;
 
     /** The size of the avatar */
-    size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
+    size?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
     /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
+    personalDetails: OnyxCollection<PersonalDetails>;
 
     /** Whether if it's an unauthenticated user */
-    isAnonymous: PropTypes.bool,
-
-    shouldEnableDetailPageNavigation: PropTypes.bool,
+    isAnonymous?: boolean;
 
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
+    /** Whether we should enable detail page navigation */
+    shouldEnableDetailPageNavigation?: boolean;
 };
 
-const defaultProps = {
-    personalDetails: {},
-    policy: {},
-    report: {},
-    isAnonymous: false,
-    size: CONST.AVATAR_SIZE.DEFAULT,
-    shouldEnableDetailPageNavigation: false,
-};
-
-const showActorDetails = (report, shouldEnableDetailPageNavigation = false) => {
-    // We should navigate to the details page if the report is a IOU/expense report
-    if (shouldEnableDetailPageNavigation) {
-        return ReportUtils.navigateToDetailsPage(report);
-    }
-
-    if (ReportUtils.isExpenseReport(report)) {
-        Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
-        return;
-    }
+function AvatarWithDisplayName({
+    personalDetails,
+    policy,
+    report,
+    parentReportActions,
+    isAnonymous = false,
+    size = CONST.AVATAR_SIZE.DEFAULT,
+    shouldEnableDetailPageNavigation = false,
+}: AvatarWithDisplayNameProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const title = ReportUtils.getReportName(report);
+    const subtitle = ReportUtils.getChatRoomSubtitle(report);
+    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
+    const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(report) || ReportUtils.isMoneyRequest(report);
+    const icons = ReportUtils.getIcons(report, personalDetails, null, '', -1, policy);
+    const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(report?.ownerAccountID ? [report.ownerAccountID] : [], personalDetails);
+    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(Object.values(ownerPersonalDetails), false);
+    const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(report);
+    const isExpenseRequest = ReportUtils.isExpenseRequest(report);
+    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : size;
+    const avatarBorderColor = isAnonymous ? theme.highlightBG : theme.componentBG;
+
+    const actorAccountID = useRef<number | null>(null);
+    useEffect(() => {
+        const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
+        actorAccountID.current = parentReportAction?.actorAccountID ?? -1;
+    }, [parentReportActions, report]);
+
+    const showActorDetails = useCallback(() => {
+        // We should navigate to the details page if the report is a IOU/expense report
+        if (shouldEnableDetailPageNavigation) {
+            return ReportUtils.navigateToDetailsPage(report);
+        }
 
-    if (ReportUtils.isIOUReport(report)) {
-        Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
-        return;
-    }
+        if (ReportUtils.isExpenseReport(report) && report?.ownerAccountID) {
+            Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
+            return;
+        }
 
-    if (ReportUtils.isChatThread(report)) {
-        const parentReportAction = ReportActionsUtils.getParentReportAction(report);
-        const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', -1);
-        // in an ideal situation account ID won't be 0
-        if (actorAccountID > 0) {
-            Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID));
+        if (ReportUtils.isIOUReport(report) && report?.reportID) {
+            Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
             return;
         }
-    }
 
-    // report detail route is added as fallback but based on the current implementation this route won't be executed
-    Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
-};
+        if (ReportUtils.isChatThread(report)) {
+            // In an ideal situation account ID won't be 0
+            if (actorAccountID.current && actorAccountID.current > 0) {
+                Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID.current));
+                return;
+            }
+        }
 
-function AvatarWithDisplayName(props) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const title = ReportUtils.getReportName(props.report);
-    const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
-    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(props.report);
-    const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(props.report) || ReportUtils.isMoneyRequest(props.report);
-    const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policy);
-    const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.ownerAccountID], props.personalDetails);
-    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
-    const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(props.report);
-    const isExpenseRequest = ReportUtils.isExpenseRequest(props.report);
-    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : props.size;
-    const avatarBorderColor = props.isAnonymous ? theme.highlightBG : theme.componentBG;
+        if (report?.reportID) {
+            // Report detail route is added as fallback but based on the current implementation this route won't be executed
+            Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
+        }
+    }, [report, shouldEnableDetailPageNavigation]);
 
     const headerView = (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
-            {Boolean(props.report && title) && (
+            {report && !!title && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                     <PressableWithoutFeedback
-                        onPress={() => showActorDetails(props.report, props.shouldEnableDetailPageNavigation)}
+                        onPress={showActorDetails}
                         accessibilityLabel={title}
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                     >
@@ -122,7 +122,7 @@ function AvatarWithDisplayName(props) {
                         ) : (
                             <MultipleAvatars
                                 icons={icons}
-                                size={props.size}
+                                size={size}
                                 secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
                             />
                         )}
@@ -133,16 +133,16 @@ function AvatarWithDisplayName(props) {
                             displayNamesWithTooltips={displayNamesWithTooltips}
                             tooltipEnabled
                             numberOfLines={1}
-                            textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
-                            shouldUseFullTitle={isMoneyRequestOrReport || props.isAnonymous}
+                            textStyles={[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
+                            shouldUseFullTitle={isMoneyRequestOrReport || isAnonymous}
                         />
-                        {!_.isEmpty(parentNavigationSubtitleData) && (
+                        {Object.keys(parentNavigationSubtitleData).length > 0 && (
                             <ParentNavigationSubtitle
                                 parentNavigationSubtitleData={parentNavigationSubtitleData}
-                                parentReportID={props.report.parentReportID}
+                                parentReportID={report?.parentReportID}
                             />
                         )}
-                        {!_.isEmpty(subtitle) && (
+                        {!!subtitle && (
                             <Text
                                 style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre]}
                                 numberOfLines={1}
@@ -156,13 +156,13 @@ function AvatarWithDisplayName(props) {
         </View>
     );
 
-    if (!props.shouldEnableDetailPageNavigation) {
+    if (!shouldEnableDetailPageNavigation) {
         return headerView;
     }
 
     return (
         <PressableWithoutFeedback
-            onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
+            onPress={() => ReportUtils.navigateToDetailsPage(report)}
             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
             accessibilityLabel={title}
             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
@@ -171,8 +171,12 @@ function AvatarWithDisplayName(props) {
         </PressableWithoutFeedback>
     );
 }
-AvatarWithDisplayName.propTypes = propTypes;
+
 AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
-AvatarWithDisplayName.defaultProps = defaultProps;
 
-export default compose(withWindowDimensions, withLocalize)(AvatarWithDisplayName);
+export default withOnyx<AvatarWithDisplayNameProps, AvatarWithDisplayNamePropsWithOnyx>({
+    parentReportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
+        canEvict: false,
+    },
+})(AvatarWithDisplayName);
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.tsx
similarity index 62%
rename from src/components/AvatarWithIndicator.js
rename to src/components/AvatarWithIndicator.tsx
index f3607b69a73f..3ae9507350c8 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import * as UserUtils from '@libs/UserUtils';
@@ -9,38 +8,33 @@ import * as Expensicons from './Icon/Expensicons';
 import Indicator from './Indicator';
 import Tooltip from './Tooltip';
 
-const propTypes = {
+type AvatarWithIndicatorProps = {
     /** URL for the avatar */
-    source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    source: UserUtils.AvatarSource;
 
     /** To show a tooltip on hover */
-    tooltipText: PropTypes.string,
+    tooltipText?: string;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    fallbackIcon?: UserUtils.AvatarSource;
 
     /** Indicates whether the avatar is loaded or not  */
-    isLoading: PropTypes.bool,
+    isLoading?: boolean;
 };
 
-const defaultProps = {
-    tooltipText: '',
-    fallbackIcon: Expensicons.FallbackAvatar,
-    isLoading: true,
-};
-
-function AvatarWithIndicator(props) {
+function AvatarWithIndicator({source, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
     const styles = useThemeStyles();
+
     return (
-        <Tooltip text={props.tooltipText}>
+        <Tooltip text={tooltipText}>
             <View style={[styles.sidebarAvatar]}>
-                {props.isLoading ? (
+                {isLoading ? (
                     <AvatarSkeleton />
                 ) : (
                     <>
                         <Avatar
-                            source={UserUtils.getSmallSizeAvatar(props.source)}
-                            fallbackIcon={props.fallbackIcon}
+                            source={UserUtils.getSmallSizeAvatar(source)}
+                            fallbackIcon={fallbackIcon}
                         />
                         <Indicator />
                     </>
@@ -50,8 +44,6 @@ function AvatarWithIndicator(props) {
     );
 }
 
-AvatarWithIndicator.defaultProps = defaultProps;
-AvatarWithIndicator.propTypes = propTypes;
 AvatarWithIndicator.displayName = 'AvatarWithIndicator';
 
 export default AvatarWithIndicator;
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 575646f7dd9c..ff963589d80f 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -38,8 +38,8 @@ function Badge({success = false, error = false, pressable = false, text, environ
     const Wrapper = pressable ? PressableWithoutFeedback : View;
 
     const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
-        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
-        [styles.badge, styles.ml2, success, error, environment, badgeStyles],
+        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(styles, success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
+        [success, error, environment, badgeStyles, styles],
     );
 
     return (
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 1c92208a7aa2..6e5ad8970f1a 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';
@@ -40,6 +41,7 @@ type BannerProps = {
 };
 
 function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -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..3252938e4ca5 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';
@@ -50,6 +51,7 @@ const defaultProps = {
  * @returns {JSX.Element}
  */
 function BaseMiniContextMenuItem(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     return (
         <Tooltip text={props.tooltipText}>
@@ -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/BigNumberPad.js b/src/components/BigNumberPad.tsx
similarity index 64%
rename from src/components/BigNumberPad.js
rename to src/components/BigNumberPad.tsx
index df3ac8fd41fb..812e9e78635b 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.tsx
@@ -1,29 +1,20 @@
-import PropTypes from 'prop-types';
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
+import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import useThemeStyles from '@styles/useThemeStyles';
 import Button from './Button';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-const propTypes = {
+type BigNumberPadProps = {
     /** Callback to inform parent modal with key pressed */
-    numberPressed: PropTypes.func.isRequired,
+    numberPressed: (key: string) => void;
 
     /** Callback to inform parent modal whether user is long pressing the "<" (backspace) button */
-    longPressHandlerStateChanged: PropTypes.func,
+    longPressHandlerStateChanged?: (isUserLongPressingBackspace: boolean) => void;
 
     /** Used to locate this view from native classes. */
-    id: PropTypes.string,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    longPressHandlerStateChanged: () => {},
-    id: 'numPadView',
+    id?: string;
 };
 
 const padNumbers = [
@@ -31,62 +22,69 @@ const padNumbers = [
     ['4', '5', '6'],
     ['7', '8', '9'],
     ['.', '0', '<'],
-];
+] as const;
+
+function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, id = 'numPadView'}: BigNumberPadProps) {
+    const {toLocaleDigit} = useLocalize();
 
-function BigNumberPad(props) {
     const styles = useThemeStyles();
-    const [timer, setTimer] = useState(null);
+    const [timer, setTimer] = useState<NodeJS.Timer | null>(null);
     const {isExtraSmallScreenHeight} = useWindowDimensions();
 
     /**
      * Handle long press key on number pad.
      * Only handles the '<' key and starts the continuous input timer.
-     *
-     * @param {String} key
      */
-    const handleLongPress = (key) => {
+    const handleLongPress = (key: string) => {
         if (key !== '<') {
             return;
         }
 
-        props.longPressHandlerStateChanged(true);
+        longPressHandlerStateChanged(true);
 
         const newTimer = setInterval(() => {
-            props.numberPressed(key);
+            numberPressed(key);
         }, 100);
+
         setTimer(newTimer);
     };
 
     return (
         <View
             style={[styles.flexColumn, styles.w100]}
-            id={props.id}
+            id={id}
         >
-            {_.map(padNumbers, (row, rowIndex) => (
+            {padNumbers.map((row) => (
                 <View
-                    key={`NumberPadRow-${rowIndex}`}
+                    key={`NumberPadRow-${row[0]}`}
                     style={[styles.flexRow, styles.mt3]}
                 >
-                    {_.map(row, (column, columnIndex) => {
+                    {row.map((column, columnIndex) => {
                         // Adding margin between buttons except first column to
                         // avoid unccessary space before the first column.
                         const marginLeft = columnIndex > 0 ? styles.ml3 : {};
+
                         return (
                             <Button
                                 key={column}
                                 medium={isExtraSmallScreenHeight}
                                 shouldEnableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
-                                text={column === '<' ? column : props.toLocaleDigit(column)}
+                                text={column === '<' ? column : toLocaleDigit(column)}
                                 onLongPress={() => handleLongPress(column)}
-                                onPress={() => props.numberPressed(column)}
+                                onPress={() => numberPressed(column)}
                                 onPressIn={ControlSelection.block}
                                 onPressOut={() => {
-                                    clearInterval(timer);
+                                    if (timer) {
+                                        clearInterval(timer);
+                                    }
+
                                     ControlSelection.unblock();
-                                    props.longPressHandlerStateChanged(false);
+                                    longPressHandlerStateChanged(false);
+                                }}
+                                onMouseDown={(e) => {
+                                    e.preventDefault();
                                 }}
-                                onMouseDown={(e) => e.preventDefault()}
                             />
                         );
                     })}
@@ -96,8 +94,6 @@ function BigNumberPad(props) {
     );
 }
 
-BigNumberPad.propTypes = propTypes;
-BigNumberPad.defaultProps = defaultProps;
 BigNumberPad.displayName = 'BigNumberPad';
 
-export default withLocalize(BigNumberPad);
+export default BigNumberPad;
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 71bce9777174..b6861eb820b1 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';
@@ -65,13 +64,13 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
     onLongPress?: (event?: GestureResponderEvent) => void;
 
     /** A function that is called when the button is pressed */
-    onPressIn?: () => void;
+    onPressIn?: (event: GestureResponderEvent) => void;
 
     /** A function that is called when the button is released */
-    onPressOut?: () => void;
+    onPressOut?: (event: GestureResponderEvent) => void;
 
     /** Callback that is called when mousedown is triggered. */
-    onMouseDown?: () => void;
+    onMouseDown?: (e: React.MouseEvent<Element, MouseEvent>) => void;
 
     /** Call the onPress function when Enter key is pressed */
     pressOnEnter?: boolean;
@@ -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/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 1849e309f7f0..698c68cc78e9 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -4,7 +4,7 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import {useTheme} from '@styles/themes/useTheme';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index eb227de36a54..9852e607562b 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -66,8 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
 
     /**
      * Set the TextInput Ref
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/ConfirmationPage.js b/src/components/ConfirmationPage.tsx
similarity index 56%
rename from src/components/ConfirmationPage.js
rename to src/components/ConfirmationPage.tsx
index ac56ea3d22e9..12e8b40a0f25 100644
--- a/src/components/ConfirmationPage.js
+++ b/src/components/ConfirmationPage.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -6,61 +5,52 @@ import Button from './Button';
 import FixedFooter from './FixedFooter';
 import Lottie from './Lottie';
 import LottieAnimations from './LottieAnimations';
+import DotLottieAnimation from './LottieAnimations/types';
 import Text from './Text';
 
-const propTypes = {
+type ConfirmationPageProps = {
     /** The asset to render */
-    // eslint-disable-next-line react/forbid-prop-types
-    animation: PropTypes.object,
+    animation?: DotLottieAnimation;
 
     /** Heading of the confirmation page */
-    heading: PropTypes.string,
+    heading: string;
 
     /** Description of the confirmation page */
-    description: PropTypes.string,
+    description: string;
 
     /** The text for the button label */
-    buttonText: PropTypes.string,
+    buttonText?: string;
 
     /** A function that is called when the button is clicked on */
-    onButtonPress: PropTypes.func,
+    onButtonPress?: () => void;
 
     /** Whether we should show a confirmation button */
-    shouldShowButton: PropTypes.bool,
+    shouldShowButton?: boolean;
 };
 
-const defaultProps = {
-    animation: LottieAnimations.Fireworks,
-    heading: '',
-    description: '',
-    buttonText: '',
-    onButtonPress: () => {},
-    shouldShowButton: false,
-};
-
-function ConfirmationPage(props) {
+function ConfirmationPage({animation = LottieAnimations.Fireworks, heading, description, buttonText = '', onButtonPress = () => {}, shouldShowButton = false}: ConfirmationPageProps) {
     const styles = useThemeStyles();
+
     return (
         <>
             <View style={[styles.screenCenteredContainer, styles.alignItemsCenter]}>
                 <Lottie
-                    source={props.animation}
+                    source={animation}
                     autoPlay
                     loop
                     style={styles.confirmationAnimation}
-                    webStyle={styles.confirmationAnimationWeb}
                 />
-                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{props.heading}</Text>
-                <Text style={styles.textAlignCenter}>{props.description}</Text>
+                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mv2]}>{heading}</Text>
+                <Text style={styles.textAlignCenter}>{description}</Text>
             </View>
-            {props.shouldShowButton && (
+            {shouldShowButton && (
                 <FixedFooter>
                     <Button
                         success
-                        text={props.buttonText}
+                        text={buttonText}
                         style={styles.mt6}
                         pressOnEnter
-                        onPress={props.onButtonPress}
+                        onPress={onButtonPress}
                     />
                 </FixedFooter>
             )}
@@ -68,8 +58,6 @@ function ConfirmationPage(props) {
     );
 }
 
-ConfirmationPage.propTypes = propTypes;
-ConfirmationPage.defaultProps = defaultProps;
 ConfirmationPage.displayName = 'ConfirmationPage';
 
 export default ConfirmationPage;
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 4c4c34851afb..4ddd537fdd7d 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -42,8 +42,8 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
     const {route0: route} = transaction.routes || {};
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const coordinates = lodashGet(route, 'geometry.coordinates', []);
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
 
     const getWaypointMarkers = useCallback(
         (waypointsData) => {
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index a8f7e3172c81..a5a8985e3978 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';
@@ -53,6 +54,7 @@ const defaultProps = {
 };
 
 function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {windowWidth} = useWindowDimensions();
     const [isThrottledButtonActive, setThrottledButtonInactive] = useThrottledButtonState();
@@ -85,7 +87,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
                 <Icon
                     small
                     src={itemIcon}
-                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isThrottledButtonActive))}
+                    fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, !isThrottledButtonActive))}
                 />
             )}
         </BaseMiniContextMenuItem>
diff --git a/src/components/CustomStatusBar/CustomStatusBarContext.tsx b/src/components/CustomStatusBar/CustomStatusBarContext.tsx
new file mode 100644
index 000000000000..b2c317b05c25
--- /dev/null
+++ b/src/components/CustomStatusBar/CustomStatusBarContext.tsx
@@ -0,0 +1,11 @@
+import {createContext} from 'react';
+
+type CustomStatusBarContextType = {
+    isRootStatusBarDisabled: boolean;
+    disableRootStatusBar: (isDisabled: boolean) => void;
+};
+
+const CustomStatusBarContext = createContext<CustomStatusBarContextType>({isRootStatusBarDisabled: false, disableRootStatusBar: () => undefined});
+
+export default CustomStatusBarContext;
+export {type CustomStatusBarContextType};
diff --git a/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx b/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx
new file mode 100644
index 000000000000..27a5cac5d8cc
--- /dev/null
+++ b/src/components/CustomStatusBar/CustomStatusBarContextProvider.tsx
@@ -0,0 +1,17 @@
+import React, {useMemo, useState} from 'react';
+import CustomStatusBarContext from './CustomStatusBarContext';
+
+function CustomStatusBarContextProvider({children}: React.PropsWithChildren) {
+    const [isRootStatusBarDisabled, disableRootStatusBar] = useState(false);
+    const value = useMemo(
+        () => ({
+            isRootStatusBarDisabled,
+            disableRootStatusBar,
+        }),
+        [isRootStatusBarDisabled],
+    );
+
+    return <CustomStatusBarContext.Provider value={value}>{children}</CustomStatusBarContext.Provider>;
+}
+
+export default CustomStatusBarContextProvider;
diff --git a/src/components/CustomStatusBar/index.android.tsx b/src/components/CustomStatusBar/index.android.tsx
deleted file mode 100644
index 81b4f1d25f67..000000000000
--- a/src/components/CustomStatusBar/index.android.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * On Android we setup the status bar in native code.
- */
-import type CustomStatusBarType from './types';
-
-// eslint-disable-next-line react/function-component-definition
-const CustomStatusBar: CustomStatusBarType = () =>
-    // Prefer to not render the StatusBar component in Android as it can cause
-    // issues with edge to edge display. We setup the status bar appearance in
-    // MainActivity.java and styles.xml.
-    null;
-
-CustomStatusBar.displayName = 'CustomStatusBar';
-
-export default CustomStatusBar;
diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx
index c5c013c2bef9..3b5022c60898 100644
--- a/src/components/CustomStatusBar/index.tsx
+++ b/src/components/CustomStatusBar/index.tsx
@@ -1,29 +1,91 @@
-import React, {useEffect} from 'react';
-import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
+import {EventListenerCallback, NavigationContainerEventMap} from '@react-navigation/native';
+import PropTypes from 'prop-types';
+import React, {useCallback, useContext, useEffect} from 'react';
+import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
-import type CustomStatusBarType from './types';
+import CustomStatusBarContext from './CustomStatusBarContext';
+import updateStatusBarAppearance from './updateStatusBarAppearance';
+
+type CustomStatusBarProps = {
+    isNested: boolean;
+};
+
+const propTypes = {
+    /** Whether the CustomStatusBar is nested within another CustomStatusBar.
+     *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
+    isNested: PropTypes.bool,
+};
+
+type CustomStatusBarType = {
+    (props: CustomStatusBarProps): React.ReactNode;
+    displayName: string;
+    propTypes: typeof propTypes;
+};
 
 // eslint-disable-next-line react/function-component-definition
-const CustomStatusBar: CustomStatusBarType = () => {
+const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
+    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext);
     const theme = useTheme();
+
+    const isDisabled = !isNested && isRootStatusBarDisabled;
+
     useEffect(() => {
-        Navigation.isNavigationReady().then(() => {
-            // Set the status bar colour depending on the current route.
-            // If we don't have any colour defined for a route, fall back to
-            // appBG color.
-            const currentRoute = navigationRef.getCurrentRoute();
-            let currentScreenBackgroundColor = theme.appBG;
-            if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_BACKGROUND_COLORS) {
-                currentScreenBackgroundColor = theme.PAGE_BACKGROUND_COLORS[currentRoute.name];
+        if (isNested) {
+            disableRootStatusBar(true);
+        }
+
+        return () => {
+            if (!isNested) {
+                return;
             }
-            StatusBar.setBarStyle('light-content', true);
-            StatusBar.setBackgroundColor(currentScreenBackgroundColor);
-        });
-    }, [theme.PAGE_BACKGROUND_COLORS, theme.appBG]);
+            disableRootStatusBar(false);
+        };
+    }, [disableRootStatusBar, isNested]);
+
+    const updateStatusBarStyle = useCallback<EventListenerCallback<NavigationContainerEventMap, 'state'>>(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        // Set the status bar colour depending on the current route.
+        // If we don't have any colour defined for a route, fall back to
+        // appBG color.
+        const currentRoute = navigationRef.getCurrentRoute();
+
+        let currentScreenBackgroundColor = theme.appBG;
+        let statusBarStyle = theme.statusBarStyle;
+        if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {
+            const screenTheme = theme.PAGE_THEMES[currentRoute.name];
+            currentScreenBackgroundColor = screenTheme.backgroundColor;
+            statusBarStyle = screenTheme.statusBarStyle;
+        }
+
+        updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle});
+    }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
+
+    useEffect(() => {
+        navigationRef.addListener('state', updateStatusBarStyle);
+
+        return () => navigationRef.removeListener('state', updateStatusBarStyle);
+    }, [updateStatusBarStyle]);
+
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        updateStatusBarAppearance({statusBarStyle: theme.statusBarStyle});
+    }, [isDisabled, theme.statusBarStyle]);
+
+    if (isDisabled) {
+        return null;
+    }
+
     return <StatusBar />;
 };
 
 CustomStatusBar.displayName = 'CustomStatusBar';
+CustomStatusBar.propTypes = propTypes;
 
 export default CustomStatusBar;
diff --git a/src/components/CustomStatusBar/types.ts b/src/components/CustomStatusBar/types.ts
deleted file mode 100644
index 7fecd02beba0..000000000000
--- a/src/components/CustomStatusBar/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-type CustomStatusBar = {
-    (): React.ReactNode;
-    displayName: string;
-};
-
-export default CustomStatusBar;
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts
new file mode 100644
index 000000000000..b7651d4549de
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts
@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    StatusBar.setBackgroundColor('transparent');
+    StatusBar.setTranslucent(true);
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts
new file mode 100644
index 000000000000..61fcb056bba5
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts
@@ -0,0 +1,10 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (!statusBarStyle) {
+        return;
+    }
+    StatusBar.setBarStyle(statusBarStyle, true);
+}
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts
new file mode 100644
index 000000000000..574efd90f0b5
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/index.ts
@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+export default function updateStatusBarAppearance({backgroundColor, statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (backgroundColor) {
+        StatusBar.setBackgroundColor(backgroundColor, true);
+    }
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}
diff --git a/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts b/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
new file mode 100644
index 000000000000..3d16b5944a31
--- /dev/null
+++ b/src/components/CustomStatusBar/updateStatusBarAppearance/types.ts
@@ -0,0 +1,8 @@
+import {StatusBarStyle} from '@styles/styles';
+
+type UpdateStatusBarAppearanceProps = {
+    backgroundColor?: string;
+    statusBarStyle?: StatusBarStyle;
+};
+
+export default UpdateStatusBarAppearanceProps;
diff --git a/src/components/NewDatePicker/CalendarPicker/ArrowIcon.js b/src/components/DatePicker/CalendarPicker/ArrowIcon.js
similarity index 100%
rename from src/components/NewDatePicker/CalendarPicker/ArrowIcon.js
rename to src/components/DatePicker/CalendarPicker/ArrowIcon.js
diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/DatePicker/CalendarPicker/YearPickerModal.js
similarity index 100%
rename from src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
rename to src/components/DatePicker/CalendarPicker/YearPickerModal.js
diff --git a/src/components/NewDatePicker/CalendarPicker/generateMonthMatrix.js b/src/components/DatePicker/CalendarPicker/generateMonthMatrix.js
similarity index 100%
rename from src/components/NewDatePicker/CalendarPicker/generateMonthMatrix.js
rename to src/components/DatePicker/CalendarPicker/generateMonthMatrix.js
diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/DatePicker/CalendarPicker/index.js
similarity index 97%
rename from src/components/NewDatePicker/CalendarPicker/index.js
rename to src/components/DatePicker/CalendarPicker/index.js
index 42904ba1a8c2..eaa6a8b45b33 100644
--- a/src/components/NewDatePicker/CalendarPicker/index.js
+++ b/src/components/DatePicker/CalendarPicker/index.js
@@ -8,6 +8,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 withTheme, {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
@@ -33,6 +34,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
     ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 const defaultProps = {
@@ -236,7 +238,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 +264,4 @@ class CalendarPicker extends React.PureComponent {
 CalendarPicker.propTypes = propTypes;
 CalendarPicker.defaultProps = defaultProps;
 
-export default compose(withLocalize, withThemeStyles)(CalendarPicker);
+export default compose(withLocalize, withTheme, withThemeStyles)(CalendarPicker);
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
index 16d2eb2668a3..10a53dc25bbb 100644
--- a/src/components/DatePicker/index.js
+++ b/src/components/DatePicker/index.js
@@ -1,90 +1,106 @@
-import {format, isValid, parseISO} from 'date-fns';
-import React, {useEffect, useRef} from 'react';
-import _ from 'underscore';
+import {setYear} from 'date-fns';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, {useEffect, useState} from 'react';
+import {View} from 'react-native';
+import InputWrapper from '@components/Form/InputWrapper';
+import * as Expensicons from '@components/Icon/Expensicons';
 import TextInput from '@components/TextInput';
-import * as Browser from '@libs/Browser';
+import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes';
+import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@styles/useThemeStyles';
 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
-    }, []);
+import CalendarPicker from './CalendarPicker';
 
+const propTypes = {
     /**
-     * Trigger the `onChange` handler when the user input has a complete date or is cleared
-     * @param {String} text
+     * The datepicker supports any value that `new Date()` can parse.
+     * `onInputChange` would always be called with a Date (or null)
      */
-    const setDate = (text) => {
-        if (!text) {
-            onInputChange('');
-            return;
-        }
-
-        const date = parseISO(text);
-        if (isValid(date)) {
-            onInputChange(format(date, CONST.DATE.FNS_FORMAT_STRING));
-        }
-    };
+    value: PropTypes.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
+     * The datepicker supports any defaultValue that `new Date()` can parse.
+     * `onInputChange` would always be called with a Date (or null)
      */
-    const showDatepicker = () => {
-        if (!inputRef.current || !Browser.isMobileChrome()) {
+    defaultValue: PropTypes.string,
+
+    inputID: PropTypes.string.isRequired,
+
+    /** A minimum date of calendar to select */
+    minDate: PropTypes.objectOf(Date),
+
+    /** A maximum date of calendar to select */
+    maxDate: PropTypes.objectOf(Date),
+
+    ...withLocalizePropTypes,
+    ...baseTextInputPropTypes,
+};
+
+const datePickerDefaultProps = {
+    ...defaultBaseTextInputPropTypes,
+    minDate: setYear(new Date(), CONST.CALENDAR_PICKER.MIN_YEAR),
+    maxDate: setYear(new Date(), CONST.CALENDAR_PICKER.MAX_YEAR),
+    value: undefined,
+};
+
+function DatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) {
+    const styles = useThemeStyles();
+    const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined);
+
+    useEffect(() => {
+        if (selectedDate === value || _.isUndefined(value)) {
             return;
         }
+        setSelectedDate(value);
+    }, [selectedDate, value]);
 
-        inputRef.current.click();
-    };
+    useEffect(() => {
+        if (_.isFunction(onTouched)) {
+            onTouched();
+        }
+        if (_.isFunction(onInputChange)) {
+            onInputChange(selectedDate);
+        }
+        // To keep behavior from class component state update callback, we want to run effect only when the selected date is changed.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedDate]);
 
     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}
-        />
+        <View style={styles.datePickerRoot}>
+            <View style={[isSmallScreenWidth ? styles.flex2 : {}, styles.pointerEventsNone]}>
+                <InputWrapper
+                    InputComponent={TextInput}
+                    inputID={inputID}
+                    forceActiveLabel
+                    icon={Expensicons.Calendar}
+                    label={label}
+                    accessibilityLabel={label}
+                    role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    value={value || selectedDate || ''}
+                    placeholder={placeholder || translate('common.dateFormat')}
+                    errorText={errorText}
+                    containerStyles={containerStyles}
+                    textInputContainerStyles={[styles.borderColorFocus]}
+                    inputStyle={[styles.pointerEventsNone]}
+                    disabled={disabled}
+                    readOnly
+                />
+            </View>
+            <View style={[styles.datePickerPopover, styles.border]}>
+                <CalendarPicker
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    value={selectedDate}
+                    onSelected={setSelectedDate}
+                />
+            </View>
+        </View>
     );
 }
 
-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';
+DatePicker.defaultProps = datePickerDefaultProps;
+DatePicker.displayName = 'DatePicker';
 
-export default DatePickerWithRef;
+export default withLocalize(DatePicker);
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/DragAndDrop/Provider/index.native.tsx b/src/components/DragAndDrop/Provider/index.native.tsx
index ba32599c62b5..838b9439c313 100644
--- a/src/components/DragAndDrop/Provider/index.native.tsx
+++ b/src/components/DragAndDrop/Provider/index.native.tsx
@@ -1,6 +1,7 @@
+import React from 'react';
 import type {DragAndDropContextParams, DragAndDropProviderProps} from './types';
 
-const DragAndDropContext: DragAndDropContextParams = {};
+const DragAndDropContext = React.createContext<DragAndDropContextParams>({});
 
 function DragAndDropProvider({children}: DragAndDropProviderProps) {
     return children;
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..2926d6346b1b 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';
 
@@ -30,6 +31,7 @@ const defaultProps = {
 };
 
 function EmojiPickerButton(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const emojiPopoverAnchor = useRef(null);
 
@@ -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..6fd24adf04aa 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';
@@ -25,6 +26,7 @@ const defaultProps = {
 };
 
 function EmojiPickerButtonDropdown(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     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 25a534b94758..91716cd7500e 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -16,8 +16,8 @@ import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
-import getOperatingSystem from '@libs/getOperatingSystem';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
+import * as ReportUtils from '@libs/ReportUtils';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
@@ -74,11 +74,7 @@ function EmojiPickerMenu(props) {
     function getEmojisAndHeaderRowIndices() {
         // If we're on Windows, don't display the flag emojis (the last category),
         // since Windows doesn't support them
-        const flagHeaderIndex = _.findIndex(emojiAssets, (emoji) => emoji.header && emoji.code === 'flags');
-        const filteredEmojis =
-            getOperatingSystem() === CONST.OS.WINDOWS
-                ? EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojiAssets.slice(0, flagHeaderIndex))
-                : EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojiAssets);
+        const filteredEmojis = EmojiUtils.mergeEmojisWithFrequentlyUsedEmojis(emojiAssets);
 
         // Get the header emojis along with the code, index and icon.
         // index is the actual header index starting at the first emoji and counting each one
@@ -318,7 +314,7 @@ function EmojiPickerMenu(props) {
             // Enable keyboard movement if tab or enter is pressed or if shift is pressed while the input
             // is not focused, so that the navigation and tab cycling can be done using the keyboard without
             // interfering with the input behaviour.
-            if (keyBoardEvent.key === 'Tab' || keyBoardEvent.key === 'Enter' || (keyBoardEvent.key === 'Shift' && searchInputRef.current && !searchInputRef.current.isFocused())) {
+            if (!ReportUtils.shouldAutoFocusOnKeyPress(keyBoardEvent)) {
                 setIsUsingKeyboardMovement(true);
                 return;
             }
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..6917d3dec185 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -1,9 +1,10 @@
-import React, {ReactElement} from 'react';
+import React, {ReactElement, useCallback} from 'react';
 import {View} from 'react-native';
 import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
@@ -42,34 +43,38 @@ type EmojiSuggestionsProps = {
 const keyExtractor = (item: SimpleEmoji, index: number): string => `${item.name}+${index}}`;
 
 function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferredSkinToneIndex, highlightedEmojiIndex = 0, measureParentContainer = () => {}}: EmojiSuggestionsProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     /**
      * Render an emoji suggestion menu item component.
      */
-    const renderSuggestionMenuItem = (item: SimpleEmoji): ReactElement => {
-        const styledTextArray = getStyledTextArray(item.name, prefix);
+    const renderSuggestionMenuItem = useCallback(
+        (item: SimpleEmoji): ReactElement => {
+            const styledTextArray = getStyledTextArray(item.name, prefix);
 
-        return (
-            <View style={styles.autoCompleteSuggestionContainer}>
-                <Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
-                <Text
-                    numberOfLines={2}
-                    style={styles.emojiSuggestionsText}
-                >
-                    :
-                    {styledTextArray.map(({text, isColored}) => (
-                        <Text
-                            key={`${text}+${isColored}`}
-                            style={StyleUtils.getColoredBackgroundStyle(isColored)}
-                        >
-                            {text}
-                        </Text>
-                    ))}
-                    :
-                </Text>
-            </View>
-        );
-    };
+            return (
+                <View style={styles.autoCompleteSuggestionContainer}>
+                    <Text style={styles.emojiSuggestionsEmoji}>{EmojiUtils.getEmojiCodeWithSkinColor(item, preferredSkinToneIndex)}</Text>
+                    <Text
+                        numberOfLines={2}
+                        style={styles.emojiSuggestionsText}
+                    >
+                        :
+                        {styledTextArray.map(({text, isColored}) => (
+                            <Text
+                                key={`${text}+${isColored}`}
+                                style={StyleUtils.getColoredBackgroundStyle(theme, isColored)}
+                            >
+                                {text}
+                            </Text>
+                        ))}
+                        :
+                    </Text>
+                </View>
+            );
+        },
+        [styles, theme, prefix, preferredSkinToneIndex],
+    );
 
     return (
         <AutoCompleteSuggestions
diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js
index 85195864cdc3..7b0c70372579 100644
--- a/src/components/FeatureList.js
+++ b/src/components/FeatureList.js
@@ -42,6 +42,7 @@ function FeatureList({menuItems, headline, description}) {
                     iconHeight={60}
                     iconStyles={[styles.mr3, styles.ml3]}
                     interactive={false}
+                    wrapperStyle={[styles.cursorAuto]}
                 />
             ))}
         </>
diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index 475de82fac35..4b32e1b8ce81 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -10,7 +10,7 @@ type FixedFooterProps = {
     style?: StyleProp<ViewStyle>;
 };
 
-function FixedFooter({style = [], children}: FixedFooterProps) {
+function FixedFooter({style, children}: FixedFooterProps) {
     const styles = useThemeStyles();
     return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, style]}>{children}</View>;
 }
diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.js
new file mode 100644
index 000000000000..37d8e4848b98
--- /dev/null
+++ b/src/components/FocusModeNotification.js
@@ -0,0 +1,47 @@
+import React, {useEffect} from 'react';
+import useEnvironment from '@hooks/useEnvironment';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import * as Link from '@userActions/Link';
+import * as User from '@userActions/User';
+import CONST from '@src/CONST';
+import ConfirmModal from './ConfirmModal';
+import Text from './Text';
+import TextLinkWithRef from './TextLink';
+
+function FocusModeNotification() {
+    const {environmentURL} = useEnvironment();
+    const {translate} = useLocalize();
+    useEffect(() => {
+        User.updateChatPriorityMode(CONST.PRIORITY_MODE.GSD, true);
+    }, []);
+    const href = `${environmentURL}/settings/preferences/priority-mode`;
+    return (
+        <ConfirmModal
+            title={translate('focusModeUpdateModal.title')}
+            confirmText={translate('common.buttonConfirm')}
+            onConfirm={User.clearFocusModeNotification}
+            shouldShowCancelButton={false}
+            prompt={
+                <Text>
+                    {translate('focusModeUpdateModal.prompt')}
+                    <TextLinkWithRef
+                        href={href}
+                        style={styles.link}
+                        onPress={() => {
+                            User.clearFocusModeNotification();
+                            Link.openLink(href, environmentURL);
+                        }}
+                    >
+                        {translate('common.here')}
+                    </TextLinkWithRef>
+                    .
+                </Text>
+            }
+            isVisible
+        />
+    );
+}
+
+FocusModeNotification.displayName = 'FocusModeNotification';
+export default FocusModeNotification;
diff --git a/src/components/FormSubmit/formSubmitPropTypes.js b/src/components/FormSubmit/formSubmitPropTypes.js
deleted file mode 100644
index 306b3544cc11..000000000000
--- a/src/components/FormSubmit/formSubmitPropTypes.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import stylePropTypes from '@styles/stylePropTypes';
-
-const propTypes = {
-    /** A reference forwarded to the inner View */
-    innerRef: PropTypes.oneOfType([
-        PropTypes.func,
-        // eslint-disable-next-line react/forbid-prop-types
-        PropTypes.shape({current: PropTypes.any}),
-    ]),
-
-    /* A function to execute when form is submitted with ENTER */
-    onSubmit: PropTypes.func.isRequired,
-
-    /** Children to wrap with FormSubmit. */
-    children: PropTypes.node.isRequired,
-
-    /** Container styles */
-    style: stylePropTypes,
-};
-
-const defaultProps = {
-    innerRef: undefined,
-    style: [],
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/FormSubmit/index.native.js b/src/components/FormSubmit/index.native.js
deleted file mode 100644
index 29a8678695d5..000000000000
--- a/src/components/FormSubmit/index.native.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import {View} from 'react-native';
-import * as formSubmitPropTypes from './formSubmitPropTypes';
-
-const FormSubmit = React.forwardRef((props, ref) => (
-    <View
-        ref={ref}
-        style={props.style}
-    >
-        {props.children}
-    </View>
-));
-
-FormSubmit.propTypes = formSubmitPropTypes.propTypes;
-FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
-FormSubmit.displayName = 'FormSubmit';
-
-export default FormSubmit;
diff --git a/src/components/FormSubmit/index.native.tsx b/src/components/FormSubmit/index.native.tsx
new file mode 100644
index 000000000000..22bf5353949d
--- /dev/null
+++ b/src/components/FormSubmit/index.native.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {View} from 'react-native';
+import {FormSubmitProps, FormSubmitRef} from './types';
+
+function FormSubmit({style, children}: FormSubmitProps, ref: FormSubmitRef) {
+    return (
+        <View
+            ref={ref}
+            style={style}
+        >
+            {children}
+        </View>
+    );
+}
+
+FormSubmit.displayName = 'FormSubmit';
+
+export default React.forwardRef(FormSubmit);
diff --git a/src/components/FormSubmit/index.js b/src/components/FormSubmit/index.tsx
similarity index 65%
rename from src/components/FormSubmit/index.js
rename to src/components/FormSubmit/index.tsx
index a4e9e960291c..ef3f3c39bbaa 100644
--- a/src/components/FormSubmit/index.js
+++ b/src/components/FormSubmit/index.tsx
@@ -1,23 +1,23 @@
-import lodashGet from 'lodash/get';
-import React, {useEffect} from 'react';
+import React, {KeyboardEvent, useEffect} from 'react';
 import {View} from 'react-native';
 import * as ComponentUtils from '@libs/ComponentUtils';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
 import CONST from '@src/CONST';
-import * as formSubmitPropTypes from './formSubmitPropTypes';
+import {FormSubmitProps, FormSubmitRef} from './types';
 
-function FormSubmit({innerRef, children, onSubmit, style}) {
+function FormSubmit({children, onSubmit, style}: FormSubmitProps, ref: FormSubmitRef) {
     /**
      * Calls the submit callback when ENTER is pressed on a form element.
-     * @param {Object} event
      */
-    const submitForm = (event) => {
+    const submitForm = (event: KeyboardEvent) => {
         // ENTER is pressed with modifier key or during text composition, do not submit the form
         if (event.shiftKey || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || isEnterWhileComposition(event)) {
             return;
         }
 
-        const tagName = lodashGet(event, 'target.tagName', '');
+        const eventTarget = event.target as HTMLElement;
+
+        const tagName = eventTarget?.tagName ?? '';
 
         // ENTER is pressed on INPUT or SELECT element, call the submit callback.
         if (tagName === 'INPUT' || tagName === 'SELECT') {
@@ -26,22 +26,30 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
         }
 
         // Pressing Enter on TEXTAREA element adds a new line. When `dataset.submitOnEnter` prop is passed, call the submit callback.
-        if (tagName === 'TEXTAREA' && lodashGet(event, 'target.dataset.submitOnEnter', 'false') === 'true') {
+        if (tagName === 'TEXTAREA' && (eventTarget?.dataset?.submitOnEnter ?? 'false') === 'true') {
             event.preventDefault();
             onSubmit();
             return;
         }
 
         // ENTER is pressed on checkbox element, call the submit callback.
-        if (lodashGet(event, 'target.role') === 'checkbox') {
+        if (eventTarget?.role === 'checkbox') {
             onSubmit();
         }
     };
 
-    const preventDefaultFormBehavior = (e) => e.preventDefault();
+    const preventDefaultFormBehavior = (e: SubmitEvent) => e.preventDefault();
 
     useEffect(() => {
-        const form = innerRef.current;
+        if (!(ref && 'current' in ref)) {
+            return;
+        }
+
+        const form = ref.current as HTMLFormElement | null;
+
+        if (!form) {
+            return;
+        }
 
         // Prevent the browser from applying its own validation, which affects the email input
         form.setAttribute('novalidate', '');
@@ -55,7 +63,7 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
 
             form.removeEventListener('submit', preventDefaultFormBehavior);
         };
-    }, [innerRef]);
+    }, [ref]);
 
     return (
         // React-native-web prevents event bubbling on TextInput for key presses
@@ -63,7 +71,7 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
         // Thus use capture phase.
         <View
             role={ComponentUtils.ACCESSIBILITY_ROLE_FORM}
-            ref={innerRef}
+            ref={ref}
             onKeyDownCapture={submitForm}
             style={style}
         >
@@ -72,17 +80,6 @@ function FormSubmit({innerRef, children, onSubmit, style}) {
     );
 }
 
-FormSubmit.propTypes = formSubmitPropTypes.propTypes;
-FormSubmit.defaultProps = formSubmitPropTypes.defaultProps;
-
-const FormSubmitWithRef = React.forwardRef((props, ref) => (
-    <FormSubmit
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        innerRef={ref}
-    />
-));
-
-FormSubmitWithRef.displayName = 'FormSubmitWithRef';
+FormSubmit.displayName = 'FormSubmitWithRef';
 
-export default FormSubmitWithRef;
+export default React.forwardRef(FormSubmit);
diff --git a/src/components/FormSubmit/types.ts b/src/components/FormSubmit/types.ts
new file mode 100644
index 000000000000..20910647ecb8
--- /dev/null
+++ b/src/components/FormSubmit/types.ts
@@ -0,0 +1,12 @@
+import React, {ForwardedRef} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+
+type FormSubmitProps = {
+    children: React.ReactNode;
+    onSubmit: () => void;
+    style?: StyleProp<ViewStyle>;
+};
+
+type FormSubmitRef = ForwardedRef<View>;
+
+export type {FormSubmitProps, FormSubmitRef};
diff --git a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
index 4a2fa28082b6..1b59219f38be 100644
--- a/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
+++ b/src/components/GrowlNotification/GrowlNotificationContainer/index.native.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {Animated} from 'react-native';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import growlNotificationContainerPropTypes from './growlNotificationContainerPropTypes';
@@ -11,14 +11,12 @@ const propTypes = {
 
 function GrowlNotificationContainer(props) {
     const styles = useThemeStyles();
+    const insets = useSafeAreaInsets;
+
     return (
-        <SafeAreaInsetsContext.Consumer>
-            {(insets) => (
-                <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
-                    {props.children}
-                </Animated.View>
-            )}
-        </SafeAreaInsetsContext.Consumer>
+        <Animated.View style={[StyleUtils.getSafeAreaPadding(insets), styles.growlNotificationContainer, styles.growlNotificationTranslateY(props.translateY)]}>
+            {props.children}
+        </Animated.View>
     );
 }
 
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index 86850a8af96d..faf1ec9cfa16 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -21,8 +21,8 @@ function GrowlNotification(_, ref) {
     const [bodyText, setBodyText] = useState('');
     const [type, setType] = useState('success');
     const [duration, setDuration] = useState();
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
 
     const types = {
         [CONST.GROWL.SUCCESS]: {
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
index 63973ea43e19..8f1406439be9 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js
@@ -6,15 +6,10 @@ import AnchorForCommentsOnly from '@components/AnchorForCommentsOnly';
 import * as HTMLEngineUtils from '@components/HTMLEngineProvider/htmlEngineUtils';
 import Text from '@components/Text';
 import useEnvironment from '@hooks/useEnvironment';
-import Navigation from '@libs/Navigation/Navigation';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
-import * as Url from '@libs/Url';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
-import * as Session from '@userActions/Session';
-import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
-import ROUTES from '@src/ROUTES';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function AnchorRenderer(props) {
@@ -26,50 +21,8 @@ function AnchorRenderer(props) {
     const displayName = lodashGet(props.tnode, 'domNode.children[0].data', '');
     const parentStyle = lodashGet(props.tnode, 'parent.styles.nativeTextRet', {});
     const attrHref = htmlAttribs.href || '';
-    const attrPath = Url.getPathFromURL(attrHref);
-    const hasSameOrigin = Url.hasSameExpensifyOrigin(attrHref, environmentURL);
-    const hasExpensifyOrigin = Url.hasSameExpensifyOrigin(attrHref, CONFIG.EXPENSIFY.EXPENSIFY_URL) || Url.hasSameExpensifyOrigin(attrHref, CONFIG.EXPENSIFY.STAGING_API_ROOT);
-    const internalNewExpensifyPath =
-        (Url.hasSameExpensifyOrigin(attrHref, CONST.NEW_EXPENSIFY_URL) ||
-            Url.hasSameExpensifyOrigin(attrHref, CONST.STAGING_NEW_EXPENSIFY_URL) ||
-            attrHref.startsWith(CONST.DEV_NEW_EXPENSIFY_URL)) &&
-        !CONST.PATHS_TO_TREAT_AS_EXTERNAL.includes(attrPath)
-            ? attrPath
-            : '';
-    const internalExpensifyPath =
-        hasExpensifyOrigin && !attrPath.startsWith(CONFIG.EXPENSIFY.CONCIERGE_URL_PATHNAME) && !attrPath.startsWith(CONFIG.EXPENSIFY.DEVPORTAL_URL_PATHNAME) && attrPath;
-    const navigateToLink = () => {
-        // There can be messages from Concierge with links to specific NewDot reports. Those URLs look like this:
-        // https://www.expensify.com.dev/newdotreport?reportID=3429600449838908 and they have a target="_blank" attribute. This is so that when a user is on OldDot,
-        // clicking on the link will open the chat in NewDot. However, when a user is in NewDot and clicks on the concierge link, the link needs to be handled differently.
-        // Normally, the link would be sent to Link.openOldDotLink() and opened in a new tab, and that's jarring to the user. Since the intention is to link to a specific NewDot chat,
-        // the reportID is extracted from the URL and then opened as an internal link, taking the user straight to the chat in the same tab.
-        if (hasExpensifyOrigin && attrHref.indexOf('newdotreport?reportID=') > -1) {
-            const reportID = attrHref.split('newdotreport?reportID=').pop();
-            const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(reportID);
-            Navigation.navigate(reportRoute);
-            return;
-        }
-
-        // If we are handling a New Expensify link then we will assume this should be opened by the app internally. This ensures that the links are opened internally via react-navigation
-        // instead of in a new tab or with a page refresh (which is the default behavior of an anchor tag)
-        if (internalNewExpensifyPath && hasSameOrigin) {
-            if (Session.isAnonymousUser() && !Session.canAccessRouteByAnonymousUser(internalNewExpensifyPath)) {
-                Session.signOutAndRedirectToSignIn();
-                return;
-            }
-            Navigation.navigate(internalNewExpensifyPath);
-            return;
-        }
-
-        // If we are handling an old dot Expensify link we need to open it with openOldDotLink() so we can navigate to it with the user already logged in.
-        // As attachments also use expensify.com we don't want it working the same as links.
-        if (internalExpensifyPath && !isAttachment) {
-            Link.openOldDotLink(internalExpensifyPath);
-            return;
-        }
-        Link.openExternalLink(attrHref);
-    };
+    const internalNewExpensifyPath = Link.getInternalNewExpensifyPath(attrHref);
+    const internalExpensifyPath = Link.getInternalExpensifyPath(attrHref);
 
     if (!HTMLEngineUtils.isChildOfComment(props.tnode)) {
         // This is not a comment from a chat, the AnchorForCommentsOnly uses a Pressable to create a context menu on right click.
@@ -78,7 +31,7 @@ function AnchorRenderer(props) {
         return (
             <Text
                 style={styles.link}
-                onPress={navigateToLink}
+                onPress={() => Link.openLink(attrHref, environmentURL, isAttachment)}
                 suppressHighlighting
             >
                 <TNodeChildrenRenderer tnode={props.tnode} />
@@ -109,7 +62,7 @@ function AnchorRenderer(props) {
             key={props.key}
             displayName={displayName}
             // Only pass the press handler for internal links. For public links or whitelisted internal links fallback to default link handling
-            onPress={internalNewExpensifyPath || internalExpensifyPath ? navigateToLink : undefined}
+            onPress={internalNewExpensifyPath || internalExpensifyPath ? Link.openLink : undefined}
         >
             <TNodeChildrenRenderer tnode={props.tnode} />
         </AnchorForCommentsOnly>
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..0027a557ab02 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 theme = useTheme();
     const styles = useThemeStyles();
     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/HeaderPageLayout.js b/src/components/HeaderPageLayout.js
index 260f98d208eb..35b03f925831 100644
--- a/src/components/HeaderPageLayout.js
+++ b/src/components/HeaderPageLayout.js
@@ -57,12 +57,12 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
     const {isOffline} = useNetwork();
     const appBGColor = StyleUtils.getBackgroundColorStyle(theme.appBG);
     const {titleColor, iconFill} = useMemo(() => {
-        const isColorfulBackground = (backgroundColor || theme.appBG) !== theme.appBG;
+        const isColorfulBackground = (backgroundColor || theme.appBG) !== theme.appBG && (backgroundColor || theme.highlightBG) !== theme.highlightBG;
         return {
             titleColor: isColorfulBackground ? theme.textColorfulBackground : undefined,
             iconFill: isColorfulBackground ? theme.iconColorfulBackground : undefined,
         };
-    }, [backgroundColor, theme.appBG, theme.iconColorfulBackground, theme.textColorfulBackground]);
+    }, [backgroundColor, theme.appBG, theme.highlightBG, theme.iconColorfulBackground, theme.textColorfulBackground]);
 
     return (
         <ScreenWrapper
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index 051e18ed675e..a6477fcf2ce0 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';
@@ -55,6 +56,7 @@ function HeaderWithBackButton({
     singleExecution = (func) => func,
     shouldNavigateToTopMostReport = false,
 }) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
@@ -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/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index 5144948c7c51..49ff4a64446b 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,60 +1,14 @@
-import {CSSProperties} from 'react';
-import {ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
-import AmericanExpress from '@assets/images/bankicons/american-express.svg';
-import BankOfAmerica from '@assets/images/bankicons/bank-of-america.svg';
-import BB_T from '@assets/images/bankicons/bb-t.svg';
-import CapitalOne from '@assets/images/bankicons/capital-one.svg';
-import CharlesSchwab from '@assets/images/bankicons/charles-schwab.svg';
-import Chase from '@assets/images/bankicons/chase.svg';
-import CitiBank from '@assets/images/bankicons/citibank.svg';
-import CitizensBank from '@assets/images/bankicons/citizens-bank.svg';
-import Discover from '@assets/images/bankicons/discover.svg';
-import Fidelity from '@assets/images/bankicons/fidelity.svg';
 import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
-import HuntingtonBank from '@assets/images/bankicons/huntington-bank.svg';
-import NavyFederalCreditUnion from '@assets/images/bankicons/navy-federal-credit-union.svg';
-import PNC from '@assets/images/bankicons/pnc.svg';
-import RegionsBank from '@assets/images/bankicons/regions-bank.svg';
-import SunTrust from '@assets/images/bankicons/suntrust.svg';
-import TdBank from '@assets/images/bankicons/td-bank.svg';
-import USBank from '@assets/images/bankicons/us-bank.svg';
-import USAA from '@assets/images/bankicons/usaa.svg';
-// Card Icons
-import AmericanExpressCard from '@assets/images/cardicons/american-express.svg';
-import BankOfAmericaCard from '@assets/images/cardicons/bank-of-america.svg';
-import BB_TCard from '@assets/images/cardicons/bb-t.svg';
-import CapitalOneCard from '@assets/images/cardicons/capital-one.svg';
-import CharlesSchwabCard from '@assets/images/cardicons/charles-schwab.svg';
-import ChaseCard from '@assets/images/cardicons/chase.svg';
-import CitiBankCard from '@assets/images/cardicons/citibank.svg';
-import CitizensBankCard from '@assets/images/cardicons/citizens.svg';
-import DiscoverCard from '@assets/images/cardicons/discover.svg';
-import ExpensifyCardImage from '@assets/images/cardicons/expensify-card-dark.svg';
-import FidelityCard from '@assets/images/cardicons/fidelity.svg';
 import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
-import HuntingtonBankCard from '@assets/images/cardicons/huntington-bank.svg';
-import NavyFederalCreditUnionCard from '@assets/images/cardicons/navy-federal-credit-union.svg';
-import PNCCard from '@assets/images/cardicons/pnc.svg';
-import RegionsBankCard from '@assets/images/cardicons/regions-bank.svg';
-import SunTrustCard from '@assets/images/cardicons/suntrust.svg';
-import TdBankCard from '@assets/images/cardicons/td-bank.svg';
-import USBankCard from '@assets/images/cardicons/us-bank.svg';
-import USAACard from '@assets/images/cardicons/usaa.svg';
-import styles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 import variables from '@styles/variables';
-
-type BankIcon = {
-    icon: React.FC<SvgProps>;
-    iconSize?: number;
-    iconHeight?: number;
-    iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
-};
+import CONST from '@src/CONST';
+import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
 
 type BankIconParams = {
-    themeStyles: typeof styles;
-    bankName?: string;
+    themeStyles: ThemeStyles;
+    bankName?: BankName;
     isCard?: boolean;
 };
 
@@ -62,97 +16,115 @@ type BankIconParams = {
  * Returns matching asset icon for bankName
  */
 
-function getAssetIcon(bankName: string, isCard: boolean): React.FC<SvgProps> {
-    if (bankName.includes('expensify')) {
-        return ExpensifyCardImage;
-    }
-
-    if (bankName.includes('americanexpress')) {
-        return isCard ? AmericanExpressCard : AmericanExpress;
-    }
-
-    if (bankName.includes('bank of america') || bankName.includes('bankofamerica')) {
-        return isCard ? BankOfAmericaCard : BankOfAmerica;
-    }
-
-    if (bankName.startsWith('bbt')) {
-        return isCard ? BB_TCard : BB_T;
-    }
-
-    if (bankName.startsWith('capital one') || bankName.includes('capitalone')) {
-        return isCard ? CapitalOneCard : CapitalOne;
-    }
-
-    if (bankName.startsWith('chase') || bankName.includes('chase')) {
-        return isCard ? ChaseCard : Chase;
-    }
-
-    if (bankName.includes('charles schwab') || bankName.includes('charlesschwab')) {
-        return isCard ? CharlesSchwabCard : CharlesSchwab;
-    }
-
-    if (bankName.startsWith('citibank') || bankName.includes('citibank')) {
-        return isCard ? CitiBankCard : CitiBank;
-    }
-
-    if (bankName.startsWith('citizens bank') || bankName.includes('citizensbank')) {
-        return isCard ? CitizensBankCard : CitizensBank;
-    }
-
-    if (bankName.startsWith('discover ') || bankName.includes('discover.') || bankName === 'discover') {
-        return isCard ? DiscoverCard : Discover;
-    }
-
-    if (bankName.startsWith('fidelity')) {
-        return isCard ? FidelityCard : Fidelity;
-    }
-
-    if (bankName.startsWith('huntington bank') || bankName.includes('huntingtonnational') || bankName.includes('huntington national')) {
-        return isCard ? HuntingtonBankCard : HuntingtonBank;
-    }
-
-    if (bankName.startsWith('navy federal credit union') || bankName.includes('navy federal credit union')) {
-        return isCard ? NavyFederalCreditUnionCard : NavyFederalCreditUnion;
-    }
-
-    if (bankName.startsWith('pnc') || bankName.includes('pnc')) {
-        return isCard ? PNCCard : PNC;
-    }
-
-    if (bankName.startsWith('regions bank') || bankName.includes('regionsbank')) {
-        return isCard ? RegionsBankCard : RegionsBank;
-    }
-
-    if (bankName.startsWith('suntrust') || bankName.includes('suntrust')) {
-        return isCard ? SunTrustCard : SunTrust;
-    }
-
-    if (bankName.startsWith('td bank') || bankName.startsWith('tdbank') || bankName.includes('tdbank')) {
-        return isCard ? TdBankCard : TdBank;
-    }
-
-    if (bankName.startsWith('us bank') || bankName.startsWith('usbank')) {
-        return isCard ? USBankCard : USBank;
-    }
-
-    if (bankName.includes('usaa')) {
-        return isCard ? USAACard : USAA;
-    }
+function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC<SvgProps> {
+    const bankValue = CONST.BANK_NAMES[bankNameKey];
+
+    // This maps bank names to their respective icon paths.
+    // The purpose is to avoid importing these at the app startup stage.
+    // Depending on whether 'isCard' is true, it selects either a card icon or a bank icon.
+    const iconMappings = {
+        [CONST.BANK_NAMES.EXPENSIFY]: isCard
+            ? (require('@assets/images/cardicons/expensify-card-dark.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/expensify.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.AMERICAN_EXPRESS]: isCard
+            ? (require('@assets/images/cardicons/american-express.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/american-express.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.BANK_OF_AMERICA]: isCard
+            ? (require('@assets/images/cardicons/bank-of-america.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/bank-of-america.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.BB_T]: isCard
+            ? (require('@assets/images/cardicons/bb-t.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/bb-t.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CAPITAL_ONE]: isCard
+            ? (require('@assets/images/cardicons/capital-one.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/capital-one.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CHASE]: isCard
+            ? (require('@assets/images/cardicons/chase.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/chase.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CHARLES_SCHWAB]: isCard
+            ? (require('@assets/images/cardicons/charles-schwab.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/charles-schwab.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CITIBANK]: isCard
+            ? (require('@assets/images/cardicons/citibank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/citibank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CITIZENS_BANK]: isCard
+            ? (require('@assets/images/cardicons/citizens.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/citizens-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.DISCOVER]: isCard
+            ? (require('@assets/images/cardicons/discover.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/discover.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.FIDELITY]: isCard
+            ? (require('@assets/images/cardicons/fidelity.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/fidelity.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.GENERIC_BANK]: isCard
+            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.HUNTINGTON_BANK]: isCard
+            ? (require('@assets/images/cardicons/huntington-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/huntington-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.HUNTINGTON_NATIONAL]: 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]) => {
+        const condensedValue = value.replace(/\s/g, '');
+        return (
+            bankName === value ||
+            bankName.includes(value) ||
+            bankName.startsWith(value) ||
+            bankName === condensedValue ||
+            bankName.includes(condensedValue) ||
+            bankName.startsWith(condensedValue)
+        );
+    });
+    return (bank?.[0] as BankNameKey) ?? '';
 }
 
 /**
  * Returns Bank Icon Object that matches to existing bank icons or default icons
  */
-
 export default function getBankIcon({themeStyles, bankName, isCard = false}: BankIconParams): BankIcon {
     const bankIcon: BankIcon = {
         icon: isCard ? GenericBankCard : GenericBank,
     };
-
     if (bankName) {
-        bankIcon.icon = getAssetIcon(bankName.toLowerCase(), isCard);
+        const bankNameKey = getBankNameKey(bankName.toLowerCase());
+
+        if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) {
+            bankIcon.icon = getAssetIcon(bankNameKey, isCard);
+        }
     }
 
     // For default Credit Card icon the icon size should not be set.
@@ -167,3 +139,5 @@ export default function getBankIcon({themeStyles, bankName, isCard = false}: Ban
 
     return bankIcon;
 }
+
+export type {BankName};
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 82a5045b7ad4..25bd0a083be0 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 withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
+import withTheme, {ThemeProps} from '@components/withTheme';
+import withThemeStyles, {type 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;
+} & 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: [],
@@ -62,6 +63,7 @@ class Icon extends PureComponent<IconProps> {
         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, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
+        const fill = this.props.fill ?? this.props.theme.icon;
 
         if (this.props.inline) {
             return (
@@ -73,7 +75,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()}
                         />
@@ -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 withThemeStyles(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/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
index 9ba342ddda90..e229a860dd9f 100644
--- a/src/components/KYCWall/BaseKYCWall.js
+++ b/src/components/KYCWall/BaseKYCWall.js
@@ -1,5 +1,5 @@
 import lodashGet from 'lodash/get';
-import React from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Dimensions} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -17,99 +17,121 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {defaultProps, propTypes} from './kycWallPropTypes';
 
+// This sets the Horizontal anchor position offset for POPOVER MENU.
+const POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET = 20;
+
 // This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow
 // before continuing to take whatever action they originally intended to take. It requires a button as a child and a native event so we can get the coordinates and use it
 // to render the AddPaymentMethodMenu in the correct location.
-class KYCWall extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.continue = this.continue.bind(this);
-        this.setMenuPosition = this.setMenuPosition.bind(this);
-        this.selectPaymentMethod = this.selectPaymentMethod.bind(this);
-        this.anchorRef = React.createRef(null);
-
-        this.state = {
-            shouldShowAddPaymentMenu: false,
-            anchorPositionVertical: 0,
-            anchorPositionHorizontal: 0,
-            transferBalanceButton: null,
-        };
-    }
-
-    componentDidMount() {
-        PaymentMethods.kycWallRef.current = this;
-        if (this.props.shouldListenForResize) {
-            this.dimensionsSubscription = Dimensions.addEventListener('change', this.setMenuPosition);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.shouldListenForResize && this.dimensionsSubscription) {
-            this.dimensionsSubscription.remove();
-        }
-        PaymentMethods.kycWallRef.current = null;
-    }
-
-    setMenuPosition() {
-        if (!this.state.transferBalanceButton) {
-            return;
-        }
-        const buttonPosition = getClickedTargetLocation(this.state.transferBalanceButton);
-        const position = this.getAnchorPosition(buttonPosition);
-        this.setPositionAddPaymentMenu(position);
-    }
+function KYCWall({
+    addBankAccountRoute,
+    addDebitCardRoute,
+    anchorAlignment,
+    bankAccountList,
+    chatReportID,
+    children,
+    enablePaymentsRoute,
+    fundList,
+    iouReport,
+    onSelectPaymentMethod,
+    onSuccessfulKYC,
+    reimbursementAccount,
+    shouldIncludeDebitCard,
+    shouldListenForResize,
+    source,
+    userWallet,
+    walletTerms,
+}) {
+    const anchorRef = useRef(null);
+    const transferBalanceButtonRef = useRef(null);
+
+    const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
+    const [anchorPosition, setAnchorPosition] = useState({
+        anchorPositionVertical: 0,
+        anchorPositionHorizontal: 0,
+    });
 
     /**
      * @param {DOMRect} domRect
      * @returns {Object}
      */
-    getAnchorPosition(domRect) {
-        if (this.props.anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
+    const getAnchorPosition = useCallback(
+        (domRect) => {
+            if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
+                return {
+                    anchorPositionVertical: domRect.top + domRect.height + CONST.MODAL.POPOVER_MENU_PADDING,
+                    anchorPositionHorizontal: domRect.left + POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET,
+                };
+            }
+
             return {
-                anchorPositionVertical: domRect.top + domRect.height + CONST.MODAL.POPOVER_MENU_PADDING,
-                anchorPositionHorizontal: domRect.left + 20,
+                anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
+                anchorPositionHorizontal: domRect.left,
             };
-        }
-
-        return {
-            anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
-            anchorPositionHorizontal: domRect.left,
-        };
-    }
+        },
+        [anchorAlignment.vertical],
+    );
 
     /**
      * Set position of the transfer payment menu
      *
      * @param {Object} position
      */
-    setPositionAddPaymentMenu(position) {
-        this.setState({
-            anchorPositionVertical: position.anchorPositionVertical,
-            anchorPositionHorizontal: position.anchorPositionHorizontal,
+    const setPositionAddPaymentMenu = ({anchorPositionVertical, anchorPositionHorizontal}) => {
+        setAnchorPosition({
+            anchorPositionVertical,
+            anchorPositionHorizontal,
         });
-    }
+    };
+
+    const setMenuPosition = useCallback(() => {
+        if (!transferBalanceButtonRef.current) {
+            return;
+        }
+        const buttonPosition = getClickedTargetLocation(transferBalanceButtonRef.current);
+        const position = getAnchorPosition(buttonPosition);
+
+        setPositionAddPaymentMenu(position);
+    }, [getAnchorPosition]);
+
+    useEffect(() => {
+        let dimensionsSubscription = null;
+
+        PaymentMethods.kycWallRef.current = this;
+
+        if (shouldListenForResize) {
+            dimensionsSubscription = Dimensions.addEventListener('change', setMenuPosition);
+        }
+
+        return () => {
+            if (shouldListenForResize && dimensionsSubscription) {
+                dimensionsSubscription.remove();
+            }
+
+            PaymentMethods.kycWallRef.current = null;
+        };
+    }, [chatReportID, setMenuPosition, shouldListenForResize]);
 
     /**
      * @param {String} paymentMethod
      */
-    selectPaymentMethod(paymentMethod) {
-        this.props.onSelectPaymentMethod(paymentMethod);
+    const selectPaymentMethod = (paymentMethod) => {
+        onSelectPaymentMethod(paymentMethod);
         if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
-            Navigation.navigate(this.props.addBankAccountRoute);
+            Navigation.navigate(addBankAccountRoute);
         } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-            Navigation.navigate(this.props.addDebitCardRoute);
+            Navigation.navigate(addDebitCardRoute);
         } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
-            if (ReportUtils.isIOUReport(this.props.iouReport)) {
-                const policyID = Policy.createWorkspaceFromIOUPayment(this.props.iouReport);
+            if (ReportUtils.isIOUReport(iouReport)) {
+                const policyID = Policy.createWorkspaceFromIOUPayment(iouReport);
 
                 // Navigate to the bank account set up flow for this specific policy
                 Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID));
                 return;
             }
-            Navigation.navigate(this.props.addBankAccountRoute);
+            Navigation.navigate(addBankAccountRoute);
         }
-    }
+    };
 
     /**
      * Take the position of the button that calls this method and show the Add Payment method menu when the user has no valid payment method.
@@ -119,83 +141,86 @@ class KYCWall extends React.Component {
      * @param {Event} event
      * @param {String} iouPaymentType
      */
-    continue(event, iouPaymentType) {
-        const currentSource = lodashGet(this.props.walletTerms, 'source', this.props.source);
+    const continueAction = (event, iouPaymentType) => {
+        const currentSource = lodashGet(walletTerms, 'source', source);
 
         /**
          * Set the source, so we can tailor the process according to how we got here.
          * We do not want to set this on mount, as the source can change upon completing the flow, e.g. when upgrading the wallet to Gold.
          */
-        Wallet.setKYCWallSource(this.props.source, this.props.chatReportID);
+        Wallet.setKYCWallSource(source, chatReportID);
+
+        if (shouldShowAddPaymentMenu) {
+            setShouldShowAddPaymentMenu(false);
 
-        if (this.state.shouldShowAddPaymentMenu) {
-            this.setState({shouldShowAddPaymentMenu: false});
             return;
         }
 
         // Use event target as fallback if anchorRef is null for safety
-        const targetElement = this.anchorRef.current || event.nativeEvent.target;
-        this.setState({transferBalanceButton: targetElement});
-        const isExpenseReport = ReportUtils.isExpenseReport(this.props.iouReport);
-        const paymentCardList = this.props.fundList || {};
+        const targetElement = anchorRef.current || event.nativeEvent.target;
+
+        transferBalanceButtonRef.current = targetElement;
+        const isExpenseReport = ReportUtils.isExpenseReport(iouReport);
+        const paymentCardList = fundList || {};
 
         // Check to see if user has a valid payment method on file and display the add payment popover if they don't
         if (
-            (isExpenseReport && lodashGet(this.props.reimbursementAccount, 'achData.state', '') !== CONST.BANK_ACCOUNT.STATE.OPEN) ||
-            (!isExpenseReport && !PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, this.props.bankAccountList, this.props.shouldIncludeDebitCard))
+            (isExpenseReport && lodashGet(reimbursementAccount, 'achData.state', '') !== CONST.BANK_ACCOUNT.STATE.OPEN) ||
+            (!isExpenseReport && !PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, bankAccountList, shouldIncludeDebitCard))
         ) {
             Log.info('[KYC Wallet] User does not have valid payment method');
-            if (!this.props.shouldIncludeDebitCard) {
-                this.selectPaymentMethod(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
+            if (!shouldIncludeDebitCard) {
+                selectPaymentMethod(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
                 return;
             }
+
             const clickedElementLocation = getClickedTargetLocation(targetElement);
-            const position = this.getAnchorPosition(clickedElementLocation);
-            this.setPositionAddPaymentMenu(position);
-            this.setState({
-                shouldShowAddPaymentMenu: true,
-            });
+            const position = getAnchorPosition(clickedElementLocation);
+
+            setPositionAddPaymentMenu(position);
+            setShouldShowAddPaymentMenu(true);
+
             return;
         }
+
         if (!isExpenseReport) {
             // Ask the user to upgrade to a gold wallet as this means they have not yet gone through our Know Your Customer (KYC) checks
-            const hasActivatedWallet = this.props.userWallet.tierName && _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], this.props.userWallet.tierName);
+            const hasActivatedWallet = userWallet.tierName && _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], userWallet.tierName);
             if (!hasActivatedWallet) {
                 Log.info('[KYC Wallet] User does not have active wallet');
-                Navigation.navigate(this.props.enablePaymentsRoute);
+                Navigation.navigate(enablePaymentsRoute);
                 return;
             }
         }
         Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them');
-        this.props.onSuccessfulKYC(iouPaymentType, currentSource);
-    }
-
-    render() {
-        return (
-            <>
-                <AddPaymentMethodMenu
-                    isVisible={this.state.shouldShowAddPaymentMenu}
-                    iouReport={this.props.iouReport}
-                    onClose={() => this.setState({shouldShowAddPaymentMenu: false})}
-                    anchorRef={this.anchorRef}
-                    anchorPosition={{
-                        vertical: this.state.anchorPositionVertical,
-                        horizontal: this.state.anchorPositionHorizontal,
-                    }}
-                    anchorAlignment={this.props.anchorAlignment}
-                    onItemSelected={(item) => {
-                        this.setState({shouldShowAddPaymentMenu: false});
-                        this.selectPaymentMethod(item);
-                    }}
-                />
-                {this.props.children(this.continue, this.anchorRef)}
-            </>
-        );
-    }
+        onSuccessfulKYC(iouPaymentType, currentSource);
+    };
+
+    return (
+        <>
+            <AddPaymentMethodMenu
+                isVisible={shouldShowAddPaymentMenu}
+                iouReport={iouReport}
+                onClose={() => setShouldShowAddPaymentMenu(false)}
+                anchorRef={anchorRef}
+                anchorPosition={{
+                    vertical: anchorPosition.anchorPositionVertical,
+                    horizontal: anchorPosition.anchorPositionHorizontal,
+                }}
+                anchorAlignment={anchorAlignment}
+                onItemSelected={(item) => {
+                    setShouldShowAddPaymentMenu(false);
+                    selectPaymentMethod(item);
+                }}
+            />
+            {children(continueAction, anchorRef)}
+        </>
+    );
 }
 
 KYCWall.propTypes = propTypes;
 KYCWall.defaultProps = defaultProps;
+KYCWall.displayName = 'BaseKYCWall';
 
 export default withOnyx({
     userWallet: {
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 0d300c5e2179..8febd7f247d6 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -10,6 +10,7 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
@@ -117,7 +118,9 @@ function LHNOptionsList({
             const transactionID = lodashGet(itemParentReportAction, ['originalMessage', 'IOUTransactionID'], '');
             const itemTransaction = transactionID ? transactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] : {};
             const itemComment = draftComments[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] || '';
-            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);
+            const participants = [...ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport.ownerAccountID];
+
+            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
 
             return (
                 <OptionRowLHNData
diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js
deleted file mode 100644
index 83723541b16f..000000000000
--- a/src/components/LocalePicker.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import compose from '@libs/compose';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-import * as App from '@userActions/App';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import Picker from './Picker';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** Indicates which locale the user currently has selected */
-    preferredLocale: PropTypes.string,
-
-    /** Indicates size of a picker component and whether to render the label or not */
-    size: PropTypes.oneOf(['normal', 'small']),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    preferredLocale: CONST.LOCALES.DEFAULT,
-    size: 'normal',
-};
-
-function LocalePicker(props) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const localesToLanguages = _.map(CONST.LANGUAGES, (language) => ({
-        value: language,
-        label: props.translate(`languagePage.languages.${language}.label`),
-        keyForList: language,
-        isSelected: props.preferredLocale === language,
-    }));
-    return (
-        <Picker
-            label={props.size === 'normal' ? props.translate('languagePage.language') : null}
-            onInputChange={(locale) => {
-                if (locale === props.preferredLocale) {
-                    return;
-                }
-
-                App.setLocale(locale);
-            }}
-            items={localesToLanguages}
-            size={props.size}
-            value={props.preferredLocale}
-            containerStyles={props.size === 'small' ? [styles.pickerContainerSmall] : []}
-            backgroundColor={theme.signInPage}
-        />
-    );
-}
-
-LocalePicker.defaultProps = defaultProps;
-LocalePicker.propTypes = propTypes;
-LocalePicker.displayName = 'LocalePicker';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        preferredLocale: {
-            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
-        },
-    }),
-)(LocalePicker);
diff --git a/src/components/LocalePicker.tsx b/src/components/LocalePicker.tsx
new file mode 100644
index 000000000000..c04b0131744f
--- /dev/null
+++ b/src/components/LocalePicker.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as App from '@userActions/App';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Locale} from '@src/types/onyx';
+import Picker from './Picker';
+import type {PickerSize} from './Picker/types';
+
+type LocalePickerOnyxProps = {
+    /** Indicates which locale the user currently has selected */
+    preferredLocale: OnyxEntry<Locale>;
+};
+
+type LocalePickerProps = LocalePickerOnyxProps & {
+    /** Indicates size of a picker component and whether to render the label or not */
+    size?: PickerSize;
+};
+
+function LocalePicker({preferredLocale = CONST.LOCALES.DEFAULT, size = 'normal'}: LocalePickerProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const localesToLanguages = CONST.LANGUAGES.map((language) => ({
+        value: language,
+        label: translate(`languagePage.languages.${language}.label`),
+        keyForList: language,
+        isSelected: preferredLocale === language,
+    }));
+
+    return (
+        <Picker
+            label={size === 'normal' ? translate('languagePage.language') : null}
+            onInputChange={(locale) => {
+                if (locale === preferredLocale) {
+                    return;
+                }
+
+                App.setLocale(locale);
+            }}
+            items={localesToLanguages}
+            size={size}
+            value={preferredLocale}
+            containerStyles={size === 'small' ? styles.pickerContainerSmall : {}}
+            backgroundColor={theme.signInPage}
+        />
+    );
+}
+
+LocalePicker.displayName = 'LocalePicker';
+
+export default withOnyx<LocalePickerProps, LocalePickerOnyxProps>({
+    preferredLocale: {
+        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+    },
+})(LocalePicker);
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/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index f04212ae113b..ae4b566f98ee 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -57,57 +57,60 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
     /**
      * Render a suggestion menu item component.
      */
-    const renderSuggestionMenuItem = (item: Mention) => {
-        const isIcon = item.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT;
-        const styledDisplayName = getStyledTextArray(item.text, prefix);
-        const styledHandle = item.text === item.alternateText ? undefined : getStyledTextArray(item.alternateText, prefix);
-
-        return (
-            <View style={[styles.autoCompleteSuggestionContainer, styles.ph2]}>
-                <View style={styles.mentionSuggestionsAvatarContainer}>
-                    <Avatar
-                        source={item.icons[0].source}
-                        size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
-                        name={item.icons[0].name}
-                        type={item.icons[0].type}
-                        fill={theme.success}
-                        fallbackIcon={item.icons[0].fallbackIcon}
-                    />
+    const renderSuggestionMenuItem = useCallback(
+        (item: Mention) => {
+            const isIcon = item.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT;
+            const styledDisplayName = getStyledTextArray(item.text, prefix);
+            const styledHandle = item.text === item.alternateText ? undefined : getStyledTextArray(item.alternateText, prefix);
+
+            return (
+                <View style={[styles.autoCompleteSuggestionContainer, styles.ph2]}>
+                    <View style={styles.mentionSuggestionsAvatarContainer}>
+                        <Avatar
+                            source={item.icons[0].source}
+                            size={isIcon ? CONST.AVATAR_SIZE.MENTION_ICON : CONST.AVATAR_SIZE.SMALLER}
+                            name={item.icons[0].name}
+                            type={item.icons[0].type}
+                            fill={theme.success}
+                            fallbackIcon={item.icons[0].fallbackIcon}
+                        />
+                    </View>
+                    <Text
+                        style={[styles.mentionSuggestionsText, styles.flexShrink1]}
+                        numberOfLines={1}
+                    >
+                        {styledDisplayName?.map(({text, isColored}, i) => (
+                            <Text
+                                // eslint-disable-next-line react/no-array-index-key
+                                key={`${text}${i}`}
+                                style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsDisplayName]}
+                            >
+                                {text}
+                            </Text>
+                        ))}
+                    </Text>
+                    <Text
+                        style={[styles.mentionSuggestionsText, styles.flex1]}
+                        numberOfLines={1}
+                    >
+                        {styledHandle?.map(
+                            ({text, isColored}, i) =>
+                                Boolean(text) && (
+                                    <Text
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        key={`${text}${i}`}
+                                        style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsHandle]}
+                                    >
+                                        {text}
+                                    </Text>
+                                ),
+                        )}
+                    </Text>
                 </View>
-                <Text
-                    style={[styles.mentionSuggestionsText, styles.flexShrink1]}
-                    numberOfLines={1}
-                >
-                    {styledDisplayName?.map(({text, isColored}, i) => (
-                        <Text
-                            // eslint-disable-next-line react/no-array-index-key
-                            key={`${text}${i}`}
-                            style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsDisplayName]}
-                        >
-                            {text}
-                        </Text>
-                    ))}
-                </Text>
-                <Text
-                    style={[styles.mentionSuggestionsText, styles.flex1]}
-                    numberOfLines={1}
-                >
-                    {styledHandle?.map(
-                        ({text, isColored}, i) =>
-                            Boolean(text) && (
-                                <Text
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    key={`${text}${i}`}
-                                    style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsHandle]}
-                                >
-                                    {text}
-                                </Text>
-                            ),
-                    )}
-                </Text>
-            </View>
-        );
-    };
+            );
+        },
+        [styles, theme, prefix],
+    );
 
     return (
         <AutoCompleteSuggestions
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index ed6ea1274dfc..a551d4a9205a 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -181,7 +181,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                     style={({pressed}) => [
                         style,
                         !props.interactive && styles.cursorDefault,
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
+                        StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
                         (isHovered || pressed) && props.hoverAndPressStyle,
                         ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
                         props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
@@ -227,6 +227,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                     fill={
                                                         props.iconFill ||
                                                         StyleUtils.getIconFillColor(
+                                                            theme,
                                                             getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
                                                             true,
                                                         )
@@ -261,7 +262,11 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                 height={props.iconHeight}
                                                 fill={
                                                     props.secondaryIconFill ||
-                                                    StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true)
+                                                    StyleUtils.getIconFillColor(
+                                                        theme,
+                                                        getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
+                                                        true,
+                                                    )
                                                 }
                                             />
                                         </View>
@@ -377,7 +382,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                     <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
                                         <Icon
                                             src={props.iconRight}
-                                            fill={StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
+                                            fill={StyleUtils.getIconFillColor(theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
                                         />
                                     </View>
                                 )}
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 95a7f3adc279..f5c498b24893 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -1,8 +1,9 @@
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import usePrevious from '@hooks/usePrevious';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
@@ -133,6 +134,8 @@ function BaseModal(
     } = useMemo(
         () =>
             getModalStyles(
+                theme,
+                styles,
                 type,
                 {
                     windowWidth,
@@ -143,7 +146,7 @@ function BaseModal(
                 innerContainerStyle,
                 outerStyle,
             ),
-        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, type, windowHeight, windowWidth],
+        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth, styles],
     );
 
     const {
@@ -205,7 +208,7 @@ function BaseModal(
                 style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
                 ref={ref}
             >
-                {children}
+                <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
             </View>
         </ReactNativeModal>
     );
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index f760d3c0244e..bc683b6f6311 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -25,14 +25,14 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     };
 
     const showModal = () => {
-        const statusBarColor = StatusBar.getBackgroundColor();
+        const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG;
 
         const isFullScreenModal = type === CONST.MODAL.MODAL_TYPE.CENTERED || type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
 
         if (statusBarColor) {
             setPreviousStatusBarColor(statusBarColor);
             // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color
-            setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
+            setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(theme, statusBarColor));
         }
 
         onModalShow?.();
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index ebe55d9b7469..172965b45fb2 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -12,7 +12,7 @@ type PopoverAnchorPosition = {
 };
 
 type BaseModalProps = WindowDimensionsProps &
-    ModalProps & {
+    Partial<ModalProps> & {
         /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
         fullscreen?: boolean;
 
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index f203154ab3db..1b4967a9c54c 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -239,7 +239,7 @@ function MoneyRequestConfirmationList(props) {
     const policyTagList = lodashGet(policyTag, 'tags', {});
     const policyTagListName = lodashGet(policyTag, 'name', translate('common.tag'));
     // A flag for showing the tags field
-    const shouldShowTags = props.isPolicyExpenseChat && OptionsListUtils.hasEnabledOptions(_.values(policyTagList));
+    const shouldShowTags = props.isPolicyExpenseChat && (props.iouTag || OptionsListUtils.hasEnabledOptions(_.values(policyTagList)));
 
     // A flag for showing the billable field
     const shouldShowBillable = !lodashGet(props.policy, 'disabledFields.defaultBillable', true);
diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.tsx
similarity index 100%
rename from src/components/MoneyRequestSkeletonView.js
rename to src/components/MoneyRequestSkeletonView.tsx
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index 6f15612736ef..efff279324ac 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -101,7 +101,7 @@ function MultipleAvatars({
 
     const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
 
-    let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
+    let avatarContainerStyles = StyleUtils.getContainerStyles(styles, size, isInReportAction);
     const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
 
     const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
@@ -161,7 +161,7 @@ function MultipleAvatars({
         );
     }
 
-    const oneAvatarSize = StyleUtils.getAvatarStyle(size);
+    const oneAvatarSize = StyleUtils.getAvatarStyle(theme, size);
     const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
     const overlapSize = oneAvatarSize.width / 3;
 
@@ -193,6 +193,7 @@ function MultipleAvatars({
                                     <Avatar
                                         iconAdditionalStyles={[
                                             StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                                theme,
                                                 isHovered,
                                                 isPressed,
                                                 isInReportAction,
@@ -220,6 +221,7 @@ function MultipleAvatars({
                                         styles.alignItemsCenter,
                                         styles.justifyContentCenter,
                                         StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                            theme,
                                             isHovered,
                                             isPressed,
                                             isInReportAction,
diff --git a/src/components/NewDatePicker/index.js b/src/components/NewDatePicker/index.js
deleted file mode 100644
index 8403bdb2661f..000000000000
--- a/src/components/NewDatePicker/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import {setYear} from 'date-fns';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, {useEffect, useState} from 'react';
-import {View} from 'react-native';
-import InputWrapper from '@components/Form/InputWrapper';
-import * as Expensicons from '@components/Icon/Expensicons';
-import TextInput from '@components/TextInput';
-import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import CalendarPicker from './CalendarPicker';
-
-const propTypes = {
-    /**
-     * The datepicker supports any value that `new Date()` can parse.
-     * `onInputChange` would always be called with a Date (or null)
-     */
-    value: PropTypes.string,
-
-    /**
-     * The datepicker supports any defaultValue that `new Date()` can parse.
-     * `onInputChange` would always be called with a Date (or null)
-     */
-    defaultValue: PropTypes.string,
-
-    inputID: PropTypes.string.isRequired,
-
-    /** A minimum date of calendar to select */
-    minDate: PropTypes.objectOf(Date),
-
-    /** A maximum date of calendar to select */
-    maxDate: PropTypes.objectOf(Date),
-
-    ...withLocalizePropTypes,
-    ...baseTextInputPropTypes,
-};
-
-const datePickerDefaultProps = {
-    ...defaultBaseTextInputPropTypes,
-    minDate: setYear(new Date(), CONST.CALENDAR_PICKER.MIN_YEAR),
-    maxDate: setYear(new Date(), CONST.CALENDAR_PICKER.MAX_YEAR),
-    value: undefined,
-};
-
-function NewDatePicker({containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, translate, value}) {
-    const styles = useThemeStyles();
-    const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined);
-
-    useEffect(() => {
-        if (selectedDate === value || _.isUndefined(value)) {
-            return;
-        }
-        setSelectedDate(value);
-    }, [selectedDate, value]);
-
-    useEffect(() => {
-        if (_.isFunction(onTouched)) {
-            onTouched();
-        }
-        if (_.isFunction(onInputChange)) {
-            onInputChange(selectedDate);
-        }
-        // To keep behavior from class component state update callback, we want to run effect only when the selected date is changed.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedDate]);
-
-    return (
-        <View style={styles.datePickerRoot}>
-            <View style={[isSmallScreenWidth ? styles.flex2 : {}, styles.pointerEventsNone]}>
-                <InputWrapper
-                    InputComponent={TextInput}
-                    inputID={inputID}
-                    forceActiveLabel
-                    icon={Expensicons.Calendar}
-                    label={label}
-                    accessibilityLabel={label}
-                    role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                    value={value || selectedDate || ''}
-                    placeholder={placeholder || translate('common.dateFormat')}
-                    errorText={errorText}
-                    containerStyles={containerStyles}
-                    textInputContainerStyles={[styles.borderColorFocus]}
-                    inputStyle={[styles.pointerEventsNone]}
-                    disabled={disabled}
-                    readOnly
-                />
-            </View>
-            <View style={[styles.datePickerPopover, styles.border]}>
-                <CalendarPicker
-                    minDate={minDate}
-                    maxDate={maxDate}
-                    value={selectedDate}
-                    onSelected={setSelectedDate}
-                />
-            </View>
-        </View>
-    );
-}
-
-NewDatePicker.propTypes = propTypes;
-NewDatePicker.defaultProps = datePickerDefaultProps;
-NewDatePicker.displayName = 'NewDatePicker';
-
-export default withLocalize(NewDatePicker);
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
deleted file mode 100644
index 01f207b7ba97..000000000000
--- a/src/components/OfflineIndicator.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import compose from '@libs/compose';
-import stylePropTypes from '@styles/stylePropTypes';
-import * as StyleUtils from '@styles/StyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
-import variables from '@styles/variables';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import networkPropTypes from './networkPropTypes';
-import {withNetwork} from './OnyxProvider';
-import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withWindowDimensions from './withWindowDimensions';
-
-const propTypes = {
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
-    /** Optional styles for container element that will override the default styling for the offline indicator */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Optional styles for the container */
-    style: stylePropTypes,
-
-    /** Is the window width narrow, like on a mobile device */
-    isSmallScreenWidth: PropTypes.bool.isRequired,
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    containerStyles: [],
-    style: [],
-};
-
-function OfflineIndicator(props) {
-    const styles = useThemeStyles();
-
-    const computedStyles = useMemo(() => {
-        if (props.containerStyles.length) {
-            return props.containerStyles;
-        }
-        return props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
-    }, [props.containerStyles, props.isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
-
-    if (!props.network.isOffline) {
-        return null;
-    }
-
-    return (
-        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
-            <Icon
-                src={Expensicons.OfflineCloud}
-                width={variables.iconSizeSmall}
-                height={variables.iconSizeSmall}
-            />
-            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{props.translate('common.youAppearToBeOffline')}</Text>
-        </View>
-    );
-}
-
-OfflineIndicator.propTypes = propTypes;
-OfflineIndicator.defaultProps = defaultProps;
-OfflineIndicator.displayName = 'OfflineIndicator';
-
-export default compose(withWindowDimensions, withLocalize, withNetwork())(OfflineIndicator);
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
new file mode 100644
index 000000000000..b402caa2c750
--- /dev/null
+++ b/src/components/OfflineIndicator.tsx
@@ -0,0 +1,52 @@
+import React, {useMemo} from 'react';
+import {StyleProp, View, ViewStyle} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import useThemeStyles from '@styles/useThemeStyles';
+import variables from '@styles/variables';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import Text from './Text';
+
+type OfflineIndicatorProps = {
+    /** Optional styles for container element that will override the default styling for the offline indicator */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Optional styles for the container */
+    style?: StyleProp<ViewStyle>;
+};
+
+function OfflineIndicator({style, containerStyles}: OfflineIndicatorProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    const computedStyles = useMemo((): StyleProp<ViewStyle> => {
+        if (containerStyles) {
+            return containerStyles;
+        }
+
+        return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
+    }, [containerStyles, isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
+
+    if (!isOffline) {
+        return null;
+    }
+
+    return (
+        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, style]}>
+            <Icon
+                src={Expensicons.OfflineCloud}
+                width={variables.iconSizeSmall}
+                height={variables.iconSizeSmall}
+            />
+            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>{translate('common.youAppearToBeOffline')}</Text>
+        </View>
+    );
+}
+
+OfflineIndicator.displayName = 'OfflineIndicator';
+
+export default OfflineIndicator;
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index b2bc4b182a60..31bc4d4070af 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -54,7 +54,7 @@ function BaseOptionsList({
     contentContainerStyles,
     sectionHeaderStyle,
     showScrollIndicator,
-    listContainerStyles,
+    listContainerStyles: listContainerStylesProp,
     shouldDisableRowInnerPadding,
     shouldPreventDefaultFocusOnSelectRow,
     disableFocusOptions,
@@ -78,6 +78,8 @@ function BaseOptionsList({
     const previousSections = usePrevious(sections);
     const didLayout = useRef(false);
 
+    const listContainerStyles = listContainerStylesProp || [styles.flex1];
+
     /**
      * This helper function is used to memoize the computation needed for getItemLayout. It is run whenever section data changes.
      *
diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js
index 2485ad1558ac..6008101ac1b6 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: undefined,
     sections: [],
     focusedIndex: 0,
     selectedOptions: [],
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index ba6a3067284f..a151dca1f211 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -463,6 +463,7 @@ class BaseOptionsSelector extends Component {
         const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
         const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle;
         const listContainerStyles = this.props.listContainerStyles || [this.props.themeStyles.flex1];
+        const optionHoveredStyle = this.props.optionHoveredStyle || this.props.themeStyles.hoveredComponentBG;
 
         const textInput = (
             <TextInput
@@ -493,7 +494,7 @@ class BaseOptionsSelector extends Component {
         const optionsList = (
             <OptionsList
                 ref={(el) => (this.list = el)}
-                optionHoveredStyle={this.props.optionHoveredStyle}
+                optionHoveredStyle={optionHoveredStyle}
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
                 sections={this.state.sections}
                 focusedIndex={this.state.focusedIndex}
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index ba4f5beb55cd..8593569dfafd 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
 
 const propTypes = {
@@ -162,7 +161,7 @@ const defaultProps = {
     onConfirmSelection: () => {},
     shouldTextInputAppearBelowOptions: false,
     footerContent: undefined,
-    optionHoveredStyle: styles.hoveredComponentBG,
+    optionHoveredStyle: undefined,
     sectionHeaderStyle: undefined,
     shouldShowOptions: true,
     disableArrowKeysActions: false,
diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js
deleted file mode 100644
index 084cabc02234..000000000000
--- a/src/components/Picker/BasePicker.js
+++ /dev/null
@@ -1,311 +0,0 @@
-import PropTypes from 'prop-types';
-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';
-import FormHelpMessage from '@components/FormHelpMessage';
-import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
-import refPropTypes from '@components/refPropTypes';
-import {ScrollContext} from '@components/ScrollViewWithContext';
-import Text from '@components/Text';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-
-const propTypes = {
-    /** A forwarded ref */
-    forwardedRef: refPropTypes,
-
-    /** BasePicker label */
-    label: PropTypes.string,
-
-    /** Should the picker appear disabled? */
-    isDisabled: PropTypes.bool,
-
-    /** Input value */
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-    /** The items to display in the list of selections */
-    items: PropTypes.arrayOf(
-        PropTypes.shape({
-            /** The value of the item that is being selected */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-
-            /** The text to display for the item */
-            label: PropTypes.string.isRequired,
-        }),
-    ).isRequired,
-
-    /** Something to show as the placeholder before something is selected */
-    placeholder: PropTypes.shape({
-        /** The value of the placeholder item, usually an empty string */
-        value: PropTypes.string,
-
-        /** The text to be displayed as the placeholder */
-        label: PropTypes.string,
-    }),
-
-    /** Error text to display */
-    errorText: PropTypes.string,
-
-    /** Customize the BasePicker container */
-    // eslint-disable-next-line react/forbid-prop-types
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Customize the BasePicker background color */
-    backgroundColor: PropTypes.string,
-
-    /** The ID used to uniquely identify the input in a Form */
-    inputID: PropTypes.string,
-
-    /** Saves a draft of the input value when used in a form */
-    // eslint-disable-next-line react/no-unused-prop-types
-    shouldSaveDraft: PropTypes.bool,
-
-    /** A callback method that is called when the value changes and it receives the selected value as an argument */
-    onInputChange: PropTypes.func.isRequired,
-
-    /** Size of a picker component */
-    size: PropTypes.oneOf(['normal', 'small']),
-
-    /** An icon to display with the picker */
-    icon: PropTypes.func,
-
-    /** Whether we should forward the focus/blur calls to the inner picker * */
-    shouldFocusPicker: PropTypes.bool,
-
-    /** Callback called when click or tap out of BasePicker */
-    onBlur: PropTypes.func,
-
-    /** Additional events passed to the core BasePicker for specific platforms such as web */
-    additionalPickerEvents: PropTypes.func,
-
-    /** Hint text that appears below the picker */
-    hintText: PropTypes.string,
-};
-
-const defaultProps = {
-    forwardedRef: undefined,
-    label: '',
-    isDisabled: false,
-    errorText: '',
-    hintText: '',
-    containerStyles: [],
-    backgroundColor: undefined,
-    inputID: undefined,
-    shouldSaveDraft: false,
-    value: undefined,
-    placeholder: {},
-    size: 'normal',
-    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
-    const root = useRef(null);
-
-    // reference to @react-native-picker/picker
-    const picker = useRef(null);
-
-    // Windows will reuse the text color of the select for each one of the options
-    // so we might need to color accordingly so it doesn't blend with the background.
-    const placeholder = _.isEmpty(props.placeholder)
-        ? {}
-        : {
-              ...props.placeholder,
-              color: theme.pickerOptionsTextColor,
-          };
-
-    useEffect(() => {
-        if (props.value || !props.items || props.items.length !== 1 || !props.onInputChange) {
-            return;
-        }
-
-        // When there is only 1 element in the selector, we do the user a favor and automatically select it for them
-        // so they don't have to spend extra time selecting the only possible value.
-        props.onInputChange(props.items[0].value, 0);
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.items]);
-
-    const context = useContext(ScrollContext);
-
-    /**
-     * Forms use inputID to set values. But BasePicker passes an index as the second parameter to onInputChange
-     * We are overriding this behavior to make BasePicker work with Form
-     * @param {String} value
-     * @param {Number} index
-     */
-    const onInputChange = (value, index) => {
-        if (props.inputID) {
-            props.onInputChange(value);
-            return;
-        }
-
-        props.onInputChange(value, index);
-    };
-
-    const enableHighlight = () => {
-        setIsHighlighted(true);
-    };
-
-    const disableHighlight = () => {
-        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)
-         *
-         * This method is used by Form
-         */
-        focus() {
-            if (!props.shouldFocusPicker) {
-                return;
-            }
-
-            // Defer the focusing to work around a bug on Mobile Safari, where focusing the `select` element in the
-            // same task when we scrolled to it left that element in a glitched state, where the dropdown list can't
-            // be opened until the element gets re-focused
-            _.defer(() => {
-                picker.current.focus();
-            });
-        },
-
-        /**
-         * Like measure(), but measures the view relative to an ancestor
-         *
-         * This method is used by Form when scrolling to the input
-         *
-         * @param {Object} relativeToNativeComponentRef - reference to an ancestor
-         * @param {function(x: number, y: number, width: number, height: number): void} onSuccess - callback called on success
-         * @param {function(): void} onFail - callback called on failure
-         */
-        measureLayout(relativeToNativeComponentRef, onSuccess, onFail) {
-            if (!root.current) {
-                return;
-            }
-
-            root.current.measureLayout(relativeToNativeComponentRef, onSuccess, onFail);
-        },
-    }));
-
-    const hasError = !_.isEmpty(props.errorText);
-
-    if (props.isDisabled) {
-        return (
-            <View>
-                {Boolean(props.label) && (
-                    <Text
-                        style={[styles.textLabelSupporting, styles.mb1]}
-                        numberOfLines={1}
-                    >
-                        {props.label}
-                    </Text>
-                )}
-                <Text numberOfLines={1}>{props.value}</Text>
-                {Boolean(props.hintText) && <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>{props.hintText}</Text>}
-            </View>
-        );
-    }
-
-    return (
-        <>
-            <View
-                ref={root}
-                style={[
-                    styles.pickerContainer,
-                    props.isDisabled && styles.inputDisabled,
-                    ...props.containerStyles,
-                    isHighlighted && styles.borderColorFocus,
-                    hasError && styles.borderColorDanger,
-                ]}
-            >
-                {props.label && <Text style={[styles.pickerLabel, styles.textLabelSupporting, styles.pointerEventsNone]}>{props.label}</Text>}
-                <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: theme.pickerOptionsTextColor}))}
-                    style={size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)}
-                    useNativeAndroidPickerStyle={false}
-                    placeholder={placeholder}
-                    value={props.value}
-                    Icon={iconToRender}
-                    disabled={props.isDisabled}
-                    fixAndroidTouchableBug
-                    onOpen={enableHighlight}
-                    onClose={disableHighlight}
-                    textInputProps={{
-                        allowFontScaling: false,
-                    }}
-                    pickerProps={{
-                        ref: picker,
-                        tabIndex: -1,
-                        onFocus: enableHighlight,
-                        onBlur: () => {
-                            disableHighlight();
-                            props.onBlur();
-                        },
-                        ...props.additionalPickerEvents(enableHighlight, (value, index) => {
-                            onInputChange(value, index);
-                            disableHighlight();
-                        }),
-                    }}
-                    scrollViewRef={context && context.scrollViewRef}
-                    scrollViewContentOffsetY={context && context.contentOffsetY}
-                />
-            </View>
-            <FormHelpMessage message={props.errorText} />
-            {Boolean(props.hintText) && <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>{props.hintText}</Text>}
-        </>
-    );
-}
-
-BasePicker.propTypes = propTypes;
-BasePicker.defaultProps = defaultProps;
-BasePicker.displayName = 'BasePicker';
-
-const BasePickerWithRef = React.forwardRef((props, ref) => (
-    <BasePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        // Forward the ref to BasePicker, as we implement imperative methods there
-        forwardedRef={ref}
-        // eslint-disable-next-line react/prop-types
-        key={props.inputID}
-    />
-));
-
-BasePickerWithRef.displayName = 'BasePickerWithRef';
-
-export default BasePickerWithRef;
diff --git a/src/components/Picker/BasePicker.tsx b/src/components/Picker/BasePicker.tsx
new file mode 100644
index 000000000000..dfb2d6332da5
--- /dev/null
+++ b/src/components/Picker/BasePicker.tsx
@@ -0,0 +1,206 @@
+import lodashDefer from 'lodash/defer';
+import React, {ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {ScrollView, View} from 'react-native';
+import RNPickerSelect from 'react-native-picker-select';
+import FormHelpMessage from '@components/FormHelpMessage';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import Text from '@components/Text';
+import useScrollContext from '@hooks/useScrollContext';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+import type {BasePickerHandle, BasePickerProps} from './types';
+
+type IconToRender = () => ReactElement;
+
+function BasePicker<TPickerValue>(
+    {
+        items,
+        backgroundColor,
+        inputID,
+        value,
+        onInputChange,
+        icon,
+        label = '',
+        isDisabled = false,
+        errorText = '',
+        hintText = '',
+        containerStyles,
+        placeholder = {},
+        size = 'normal',
+        shouldFocusPicker = false,
+        onBlur = () => {},
+        additionalPickerEvents = () => {},
+    }: BasePickerProps<TPickerValue>,
+    ref: ForwardedRef<BasePickerHandle>,
+) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const [isHighlighted, setIsHighlighted] = useState(false);
+
+    // reference to the root View
+    const root = useRef<View>(null);
+
+    // reference to @react-native-picker/picker
+    const picker = useRef<RNPickerSelect>(null);
+
+    // Windows will reuse the text color of the select for each one of the options
+    // so we might need to color accordingly so it doesn't blend with the background.
+    const pickerPlaceholder = Object.keys(placeholder).length > 0 ? {...placeholder, color: theme.pickerOptionsTextColor} : {};
+
+    useEffect(() => {
+        if (!!value || !items || items.length !== 1 || !onInputChange) {
+            return;
+        }
+
+        // When there is only 1 element in the selector, we do the user a favor and automatically select it for them
+        // so they don't have to spend extra time selecting the only possible value.
+        onInputChange(items[0].value, 0);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items]);
+
+    const context = useScrollContext();
+
+    /**
+     * Forms use inputID to set values. But BasePicker passes an index as the second parameter to onValueChange
+     * We are overriding this behavior to make BasePicker work with Form
+     */
+    const onValueChange = (inputValue: TPickerValue, index: number) => {
+        if (inputID) {
+            onInputChange(inputValue);
+            return;
+        }
+
+        onInputChange(inputValue, index);
+    };
+
+    const enableHighlight = () => {
+        setIsHighlighted(true);
+    };
+
+    const disableHighlight = () => {
+        setIsHighlighted(false);
+    };
+
+    const iconToRender = useMemo((): IconToRender => {
+        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(ref, () => ({
+        /**
+         * Focuses the picker (if configured to do so)
+         *
+         * This method is used by Form
+         */
+        focus() {
+            if (!shouldFocusPicker) {
+                return;
+            }
+
+            // Defer the focusing to work around a bug on Mobile Safari, where focusing the `select` element in the
+            // same task when we scrolled to it left that element in a glitched state, where the dropdown list can't
+            // be opened until the element gets re-focused
+            lodashDefer(() => {
+                picker.current?.focus();
+            });
+        },
+
+        /**
+         * Like measure(), but measures the view relative to an ancestor
+         *
+         * This method is used by Form when scrolling to the input
+         *
+         * @param relativeToNativeComponentRef - reference to an ancestor
+         * @param onSuccess - callback called on success
+         * @param onFail - callback called on failure
+         */
+        measureLayout(relativeToNativeComponentRef, onSuccess, onFail) {
+            if (!root.current) {
+                return;
+            }
+
+            root.current.measureLayout(relativeToNativeComponentRef, onSuccess, onFail);
+        },
+    }));
+
+    const hasError = !!errorText;
+
+    if (isDisabled) {
+        return (
+            <View>
+                {!!label && (
+                    <Text
+                        style={[styles.textLabelSupporting, styles.mb1]}
+                        numberOfLines={1}
+                    >
+                        {label}
+                    </Text>
+                )}
+                <Text numberOfLines={1}>{value as ReactNode}</Text>
+                {!!hintText && <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>{hintText}</Text>}
+            </View>
+        );
+    }
+
+    return (
+        <>
+            <View
+                ref={root}
+                style={[styles.pickerContainer, isDisabled && styles.inputDisabled, containerStyles, isHighlighted && styles.borderColorFocus, hasError && styles.borderColorDanger]}
+            >
+                {label && <Text style={[styles.pickerLabel, styles.textLabelSupporting, styles.pointerEventsNone]}>{label}</Text>}
+                <RNPickerSelect
+                    onValueChange={onValueChange}
+                    // We add a text color to prevent white text on white background dropdown items on Windows
+                    items={items.map((item) => ({...item, color: theme.pickerOptionsTextColor}))}
+                    style={size === 'normal' ? styles.picker(isDisabled, backgroundColor) : styles.pickerSmall(backgroundColor)}
+                    useNativeAndroidPickerStyle={false}
+                    placeholder={pickerPlaceholder}
+                    value={value}
+                    Icon={iconToRender}
+                    disabled={isDisabled}
+                    fixAndroidTouchableBug
+                    onOpen={enableHighlight}
+                    onClose={disableHighlight}
+                    textInputProps={{
+                        allowFontScaling: false,
+                    }}
+                    pickerProps={{
+                        ref: picker,
+                        tabIndex: -1,
+                        onFocus: enableHighlight,
+                        onBlur: () => {
+                            disableHighlight();
+                            onBlur();
+                        },
+                        ...additionalPickerEvents(enableHighlight, (inputValue, index) => {
+                            onValueChange(inputValue, index);
+                            disableHighlight();
+                        }),
+                    }}
+                    scrollViewRef={context?.scrollViewRef as RefObject<ScrollView>}
+                    scrollViewContentOffsetY={context?.contentOffsetY}
+                />
+            </View>
+            <FormHelpMessage message={errorText} />
+            {!!hintText && <Text style={[styles.textLabel, styles.colorMuted, styles.mt2]}>{hintText}</Text>}
+        </>
+    );
+}
+
+BasePicker.displayName = 'BasePicker';
+
+export default forwardRef(BasePicker);
diff --git a/src/components/Picker/index.js b/src/components/Picker/index.js
deleted file mode 100644
index 8e49a42e8932..000000000000
--- a/src/components/Picker/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, {forwardRef} from 'react';
-import BasePicker from './BasePicker';
-
-const additionalPickerEvents = (onMouseDown, onChange) => ({
-    onMouseDown,
-    onChange: (e) => {
-        if (e.target.selectedIndex === undefined) {
-            return;
-        }
-        const index = e.target.selectedIndex;
-        const value = e.target.options[index].value;
-        onChange(value, index);
-    },
-});
-
-const BasePickerWithRef = forwardRef((props, ref) => (
-    <BasePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        // Forward the ref to Picker, as we implement imperative methods there
-        ref={ref}
-        // On the Web, focusing the inner picker improves the accessibility,
-        // but doesn't open the picker (which we don't want), like it does on
-        // Native.
-        shouldFocusPicker
-        additionalPickerEvents={additionalPickerEvents}
-    />
-));
-
-BasePickerWithRef.displayName = 'BasePickerWithRef';
-
-export default BasePickerWithRef;
diff --git a/src/components/Picker/index.native.js b/src/components/Picker/index.native.js
deleted file mode 100644
index f441609fd4d0..000000000000
--- a/src/components/Picker/index.native.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, {forwardRef} from 'react';
-import BasePicker from './BasePicker';
-
-const BasePickerWithRef = forwardRef((props, ref) => (
-    <BasePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-    />
-));
-
-BasePickerWithRef.displayName = 'BasePickerWithRef';
-
-export default BasePickerWithRef;
diff --git a/src/components/Picker/index.native.tsx b/src/components/Picker/index.native.tsx
new file mode 100644
index 000000000000..7373f5a6f280
--- /dev/null
+++ b/src/components/Picker/index.native.tsx
@@ -0,0 +1,16 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import BasePicker from './BasePicker';
+import {BasePickerHandle, BasePickerProps} from './types';
+
+function Picker<TPickerValue>(props: BasePickerProps<TPickerValue>, ref: ForwardedRef<BasePickerHandle>) {
+    return (
+        <BasePicker<TPickerValue>
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            key={props.inputID}
+            ref={ref}
+        />
+    );
+}
+
+export default forwardRef(Picker);
diff --git a/src/components/Picker/index.tsx b/src/components/Picker/index.tsx
new file mode 100644
index 000000000000..18184b130bba
--- /dev/null
+++ b/src/components/Picker/index.tsx
@@ -0,0 +1,34 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import BasePicker from './BasePicker';
+import type {AdditionalPickerEvents, BasePickerHandle, BasePickerProps, OnChange, OnMouseDown} from './types';
+
+function Picker<TPickerValue>(props: BasePickerProps<TPickerValue>, ref: ForwardedRef<BasePickerHandle>) {
+    const additionalPickerEvents = (onMouseDown: OnMouseDown, onChange: OnChange<TPickerValue>): AdditionalPickerEvents => ({
+        onMouseDown,
+        onChange: (e) => {
+            if (e.target.selectedIndex === undefined) {
+                return;
+            }
+            const index = e.target.selectedIndex;
+            const value = e.target.options[index].value;
+            onChange(value as TPickerValue, index);
+        },
+    });
+
+    return (
+        <BasePicker<TPickerValue>
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            // Forward the ref to Picker, as we implement imperative methods there
+            ref={ref}
+            // On the Web, focusing the inner picker improves the accessibility,
+            // but doesn't open the picker (which we don't want), like it does on
+            // Native.
+            shouldFocusPicker
+            key={props.inputID}
+            additionalPickerEvents={additionalPickerEvents}
+        />
+    );
+}
+
+export default forwardRef(Picker);
diff --git a/src/components/Picker/types.ts b/src/components/Picker/types.ts
new file mode 100644
index 000000000000..58eed0371893
--- /dev/null
+++ b/src/components/Picker/types.ts
@@ -0,0 +1,97 @@
+import {ChangeEvent, Component, ReactElement} from 'react';
+import {MeasureLayoutOnSuccessCallback, NativeMethods, StyleProp, ViewStyle} from 'react-native';
+
+type MeasureLayoutOnFailCallback = () => void;
+
+type RelativeToNativeComponentRef = (Component<unknown> & Readonly<NativeMethods>) | number;
+
+type BasePickerHandle = {
+    focus: () => void;
+    measureLayout: (relativeToNativeComponentRef: RelativeToNativeComponentRef, onSuccess: MeasureLayoutOnSuccessCallback, onFail: MeasureLayoutOnFailCallback) => void;
+};
+
+type OnMouseDown = () => void;
+
+type OnChange<TPickerValue> = (value: TPickerValue, index: number) => void;
+
+type AdditionalPickerEvents = {
+    onMouseDown?: OnMouseDown;
+    onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
+};
+
+type AdditionalPickerEventsCallback<TPickerValue> = (onMouseDown: OnMouseDown, onChange: OnChange<TPickerValue>) => AdditionalPickerEvents;
+
+type DefaultPickerEventsCallback = () => void;
+
+type PickerSize = 'normal' | 'small';
+
+type PickerItem<TPickerValue> = {
+    /** The value of the item that is being selected */
+    value: TPickerValue;
+
+    /** The text to display for the item */
+    label: string;
+};
+
+type PickerPlaceholder = {
+    /** The value of the placeholder item, usually an empty string */
+    value?: string;
+
+    /** The text to be displayed as the placeholder */
+    label?: string;
+};
+
+type BasePickerProps<TPickerValue> = {
+    /** BasePicker label */
+    label?: string | null;
+
+    /** Should the picker appear disabled? */
+    isDisabled?: boolean;
+
+    /** Input value */
+    value?: TPickerValue | null;
+
+    /** The items to display in the list of selections */
+    items: Array<PickerItem<TPickerValue>>;
+
+    /** Something to show as the placeholder before something is selected */
+    placeholder?: PickerPlaceholder;
+
+    /** Error text to display */
+    errorText?: string;
+
+    /** Customize the BasePicker container */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Customize the BasePicker background color */
+    backgroundColor?: string;
+
+    /** The ID used to uniquely identify the input in a Form */
+    inputID?: string;
+
+    /** Saves a draft of the input value when used in a form */
+    shouldSaveDraft?: boolean;
+
+    /** A callback method that is called when the value changes and it receives the selected value as an argument */
+    onInputChange: (value: TPickerValue, index?: number) => void;
+
+    /** Size of a picker component */
+    size?: PickerSize;
+
+    /** An icon to display with the picker */
+    icon?: (size: PickerSize) => ReactElement;
+
+    /** Whether we should forward the focus/blur calls to the inner picker * */
+    shouldFocusPicker?: boolean;
+
+    /** Callback called when click or tap out of BasePicker */
+    onBlur?: () => void;
+
+    /** Additional events passed to the core BasePicker for specific platforms such as web */
+    additionalPickerEvents?: AdditionalPickerEventsCallback<TPickerValue> | DefaultPickerEventsCallback;
+
+    /** Hint text that appears below the picker */
+    hintText?: string;
+};
+
+export type {BasePickerHandle, BasePickerProps, AdditionalPickerEventsCallback, PickerSize, AdditionalPickerEvents, OnMouseDown, OnChange};
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 8b9dd4ac7a61..6572a55ed889 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -1,18 +1,24 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 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 insets = useSafeAreaInsets();
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
+        theme,
+        styles,
         'popover',
         {
             windowWidth: props.windowWidth,
@@ -24,6 +30,47 @@ function Popover(props) {
         props.outerStyle,
     );
 
+    const {
+        paddingTop: safeAreaPaddingTop,
+        paddingBottom: safeAreaPaddingBottom,
+        paddingLeft: safeAreaPaddingLeft,
+        paddingRight: safeAreaPaddingRight,
+    } = useMemo(() => StyleUtils.getSafeAreaPadding(insets), [insets]);
+
+    const modalPaddingStyles = useMemo(
+        () =>
+            StyleUtils.getModalPaddingStyles({
+                safeAreaPaddingTop,
+                safeAreaPaddingBottom,
+                safeAreaPaddingLeft,
+                safeAreaPaddingRight,
+                shouldAddBottomSafeAreaMargin,
+                shouldAddTopSafeAreaMargin,
+                shouldAddBottomSafeAreaPadding,
+                shouldAddTopSafeAreaPadding,
+                modalContainerStyleMarginTop: modalContainerStyle.marginTop,
+                modalContainerStyleMarginBottom: modalContainerStyle.marginBottom,
+                modalContainerStylePaddingTop: modalContainerStyle.paddingTop,
+                modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom,
+                insets,
+            }),
+        [
+            insets,
+            modalContainerStyle.marginBottom,
+            modalContainerStyle.marginTop,
+            modalContainerStyle.paddingBottom,
+            modalContainerStyle.paddingTop,
+            safeAreaPaddingBottom,
+            safeAreaPaddingLeft,
+            safeAreaPaddingRight,
+            safeAreaPaddingTop,
+            shouldAddBottomSafeAreaMargin,
+            shouldAddBottomSafeAreaPadding,
+            shouldAddTopSafeAreaMargin,
+            shouldAddTopSafeAreaPadding,
+        ],
+    );
+
     React.useEffect(() => {
         let removeOnClose;
         if (props.isVisible) {
@@ -60,44 +107,16 @@ function Popover(props) {
             style={[modalStyle, {zIndex: 1}]}
             ref={props.withoutOverlayRef}
         >
-            <SafeAreaInsetsContext.Consumer>
-                {(insets) => {
-                    const {
-                        paddingTop: safeAreaPaddingTop,
-                        paddingBottom: safeAreaPaddingBottom,
-                        paddingLeft: safeAreaPaddingLeft,
-                        paddingRight: safeAreaPaddingRight,
-                    } = StyleUtils.getSafeAreaPadding(insets);
-
-                    const modalPaddingStyles = StyleUtils.getModalPaddingStyles({
-                        safeAreaPaddingTop,
-                        safeAreaPaddingBottom,
-                        safeAreaPaddingLeft,
-                        safeAreaPaddingRight,
-                        shouldAddBottomSafeAreaMargin,
-                        shouldAddTopSafeAreaMargin,
-                        shouldAddBottomSafeAreaPadding,
-                        shouldAddTopSafeAreaPadding,
-                        modalContainerStyleMarginTop: modalContainerStyle.marginTop,
-                        modalContainerStyleMarginBottom: modalContainerStyle.marginBottom,
-                        modalContainerStylePaddingTop: modalContainerStyle.paddingTop,
-                        modalContainerStylePaddingBottom: modalContainerStyle.paddingBottom,
-                        insets,
-                    });
-                    return (
-                        <View
-                            style={{
-                                ...styles.defaultModalContainer,
-                                ...modalContainerStyle,
-                                ...modalPaddingStyles,
-                            }}
-                            ref={props.forwardedRef}
-                        >
-                            {props.children}
-                        </View>
-                    );
+            <View
+                style={{
+                    ...styles.defaultModalContainer,
+                    ...modalContainerStyle,
+                    ...modalPaddingStyles,
                 }}
-            </SafeAreaInsetsContext.Consumer>
+                ref={props.forwardedRef}
+            >
+                <ColorSchemeWrapper>{props.children}</ColorSchemeWrapper>
+            </View>
         </View>
     );
 }
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
index 692733a7fe0c..c0bb531db007 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -8,7 +8,7 @@ import KeyboardShortcut from '@libs/KeyboardShortcut';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import PressableProps from './types';
+import PressableProps, {PressableRef} from './types';
 
 function GenericPressable(
     {
@@ -34,7 +34,7 @@ function GenericPressable(
         accessible = true,
         ...rest
     }: PressableProps,
-    ref: ForwardedRef<View>,
+    ref: PressableRef,
 ) {
     const styles = useThemeStyles();
     const {isExecuting, singleExecution} = useSingleExecution();
@@ -124,7 +124,7 @@ function GenericPressable(
         <Pressable
             hitSlop={shouldUseAutoHitSlop ? hitSlop : undefined}
             onLayout={shouldUseAutoHitSlop ? onLayout : undefined}
-            ref={ref}
+            ref={ref as ForwardedRef<View>}
             onPress={!isDisabled ? singleExecution(onPressHandler) : undefined}
             onLongPress={!isDisabled && onLongPress ? onLongPressHandler : undefined}
             onKeyDown={!isDisabled ? onKeyDown : undefined}
diff --git a/src/components/Pressable/GenericPressable/index.native.tsx b/src/components/Pressable/GenericPressable/index.native.tsx
index 5bed0f488063..968ee6063a95 100644
--- a/src/components/Pressable/GenericPressable/index.native.tsx
+++ b/src/components/Pressable/GenericPressable/index.native.tsx
@@ -1,9 +1,8 @@
-import React, {ForwardedRef, forwardRef} from 'react';
-import {View} from 'react-native';
+import React, {forwardRef} from 'react';
 import GenericPressable from './BaseGenericPressable';
-import PressableProps from './types';
+import PressableProps, {PressableRef} from './types';
 
-function NativeGenericPressable(props: PressableProps, ref: ForwardedRef<View>) {
+function NativeGenericPressable(props: PressableProps, ref: PressableRef) {
     return (
         <GenericPressable
             focusable
diff --git a/src/components/Pressable/GenericPressable/index.tsx b/src/components/Pressable/GenericPressable/index.tsx
index e050e23c8e9a..d87b3a9810d1 100644
--- a/src/components/Pressable/GenericPressable/index.tsx
+++ b/src/components/Pressable/GenericPressable/index.tsx
@@ -1,9 +1,9 @@
-import React, {ForwardedRef, forwardRef} from 'react';
-import {Role, View} from 'react-native';
+import React, {forwardRef} from 'react';
+import {Role} from 'react-native';
 import GenericPressable from './BaseGenericPressable';
-import PressableProps from './types';
+import PressableProps, {PressableRef} from './types';
 
-function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: ForwardedRef<View>) {
+function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: PressableRef) {
     const accessible = props.accessible ?? props.accessible === undefined ? true : props.accessible;
 
     return (
diff --git a/src/components/Pressable/GenericPressable/types.ts b/src/components/Pressable/GenericPressable/types.ts
index cfe35641bffa..bff5f651ac9f 100644
--- a/src/components/Pressable/GenericPressable/types.ts
+++ b/src/components/Pressable/GenericPressable/types.ts
@@ -1,5 +1,5 @@
-import {ElementRef, RefObject} from 'react';
-import {GestureResponderEvent, HostComponent, PressableStateCallbackType, PressableProps as RNPressableProps, StyleProp, ViewStyle} from 'react-native';
+import {ElementRef, ForwardedRef, RefObject} from 'react';
+import {GestureResponderEvent, HostComponent, PressableStateCallbackType, PressableProps as RNPressableProps, StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import {Shortcut} from '@libs/KeyboardShortcut';
 import CONST from '@src/CONST';
@@ -138,4 +138,7 @@ type PressableProps = RNPressableProps &
         noDragArea?: boolean;
     };
 
+type PressableRef = ForwardedRef<HTMLDivElement | View>;
+
 export default PressableProps;
+export type {PressableRef};
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index 92affb1e862e..a80272ee05cf 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-descriptors */
-import React, {ForwardedRef, forwardRef} from 'react';
-import {Text as RNText, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import React, {forwardRef} from 'react';
+import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -9,9 +9,10 @@ import Tooltip from '@components/Tooltip';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
-import PressableProps from './GenericPressable/types';
+import PressableProps, {PressableRef} from './GenericPressable/types';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
 
 type PressableWithDelayToggleProps = PressableProps & {
@@ -64,8 +65,9 @@ function PressableWithDelayToggle(
         iconStyles,
         icon,
     }: PressableWithDelayToggleProps,
-    ref: ForwardedRef<RNText | View>,
+    ref: PressableRef,
 ) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const [isActive, temporarilyDisableInteractions] = useThrottledButtonState();
 
@@ -120,7 +122,7 @@ function PressableWithDelayToggle(
                                 {icon && (
                                     <Icon
                                         src={!isActive ? iconChecked : icon}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isActive))}
+                                        fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, !isActive))}
                                         additionalStyles={iconStyles}
                                         width={variables.iconSizeSmall}
                                         height={variables.iconSizeSmall}
diff --git a/src/components/Pressable/PressableWithFeedback.tsx b/src/components/Pressable/PressableWithFeedback.tsx
index 5d7f7c110ea7..a4c439c4441c 100644
--- a/src/components/Pressable/PressableWithFeedback.tsx
+++ b/src/components/Pressable/PressableWithFeedback.tsx
@@ -1,10 +1,10 @@
-import React, {ForwardedRef, forwardRef, useState} from 'react';
-import {StyleProp, View, ViewStyle} from 'react-native';
+import React, {forwardRef, useState} from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
 import {AnimatedStyle} from 'react-native-reanimated';
 import OpacityView from '@components/OpacityView';
 import variables from '@styles/variables';
 import GenericPressable from './GenericPressable';
-import PressableProps from './GenericPressable/types';
+import PressableProps, {PressableRef} from './GenericPressable/types';
 
 type PressableWithFeedbackProps = PressableProps & {
     /** Style for the wrapper view */
@@ -37,7 +37,7 @@ function PressableWithFeedback(
         hoverDimmingValue = variables.hoverDimValue,
         ...rest
     }: PressableWithFeedbackProps,
-    ref: ForwardedRef<View>,
+    ref: PressableRef,
 ) {
     const [isPressed, setIsPressed] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
@@ -88,3 +88,4 @@ function PressableWithFeedback(
 PressableWithFeedback.displayName = 'PressableWithFeedback';
 
 export default forwardRef(PressableWithFeedback);
+export type {PressableWithFeedbackProps};
diff --git a/src/components/Pressable/PressableWithoutFeedback.tsx b/src/components/Pressable/PressableWithoutFeedback.tsx
index c3b780e63cfd..fd9d695cc2ed 100644
--- a/src/components/Pressable/PressableWithoutFeedback.tsx
+++ b/src/components/Pressable/PressableWithoutFeedback.tsx
@@ -1,11 +1,10 @@
-import React, {ForwardedRef} from 'react';
-import {View} from 'react-native';
+import React from 'react';
 import GenericPressable from './GenericPressable';
-import PressableProps from './GenericPressable/types';
+import PressableProps, {PressableRef} from './GenericPressable/types';
 
 function PressableWithoutFeedback(
     {pressStyle, hoverStyle, focusStyle, disabledStyle, screenReaderActiveStyle, shouldUseHapticsOnPress, shouldUseHapticsOnLongPress, ...rest}: PressableProps,
-    ref: ForwardedRef<View>,
+    ref: PressableRef,
 ) {
     return (
         <GenericPressable
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/src/components/PressableWithSecondaryInteraction/index.native.js
deleted file mode 100644
index 039801bee3f2..000000000000
--- a/src/components/PressableWithSecondaryInteraction/index.native.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React, {forwardRef} from 'react';
-import _ from 'underscore';
-import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import Text from '@components/Text';
-import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
-
-/**
- * This is a special Pressable that calls onSecondaryInteraction when LongPressed.
- *
- * @param {Object} props
- * @returns {React.Component}
- */
-function PressableWithSecondaryInteraction(props) {
-    // Use Text node for inline mode to prevent content overflow.
-    const Node = props.inline ? Text : PressableWithFeedback;
-    const executeSecondaryInteraction = (e) => {
-        e.preventDefault();
-        props.onSecondaryInteraction(e);
-    };
-
-    return (
-        <Node
-            ref={props.forwardedRef}
-            onPress={props.onPress}
-            onLongPress={props.onSecondaryInteraction ? executeSecondaryInteraction : undefined}
-            onPressIn={props.onPressIn}
-            onPressOut={props.onPressOut}
-            pressDimmingValue={props.activeOpacity}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {..._.omit(props, 'onLongPress')}
-        >
-            {props.children}
-        </Node>
-    );
-}
-
-PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes;
-PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps;
-PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
-
-const PressableWithSecondaryInteractionWithRef = forwardRef((props, ref) => (
-    <PressableWithSecondaryInteraction
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-PressableWithSecondaryInteractionWithRef.displayName = 'PressableWithSecondaryInteractionWithRef';
-
-export default PressableWithSecondaryInteractionWithRef;
diff --git a/src/components/PressableWithSecondaryInteraction/index.native.tsx b/src/components/PressableWithSecondaryInteraction/index.native.tsx
new file mode 100644
index 000000000000..f3cef029aa65
--- /dev/null
+++ b/src/components/PressableWithSecondaryInteraction/index.native.tsx
@@ -0,0 +1,61 @@
+import React, {forwardRef} from 'react';
+import {GestureResponderEvent, TextProps} from 'react-native';
+import {PressableRef} from '@components/Pressable/GenericPressable/types';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import PressableWithSecondaryInteractionProps from './types';
+
+/** This is a special Pressable that calls onSecondaryInteraction when LongPressed. */
+function PressableWithSecondaryInteraction(
+    {
+        children,
+        onSecondaryInteraction,
+        inline = false,
+        needsOffscreenAlphaCompositing = false,
+        suppressHighlighting = false,
+        activeOpacity = 1,
+        preventDefaultContextMenu,
+        withoutFocusOnSecondaryInteraction,
+        enableLongPressWithHover,
+        ...rest
+    }: PressableWithSecondaryInteractionProps,
+    ref: PressableRef,
+) {
+    const executeSecondaryInteraction = (event: GestureResponderEvent) => {
+        event.preventDefault();
+        onSecondaryInteraction?.(event);
+    };
+
+    // Use Text node for inline mode to prevent content overflow.
+    if (inline) {
+        return (
+            <Text
+                // ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(rest as TextProps)}
+                suppressHighlighting={suppressHighlighting}
+                onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
+            >
+                {children}
+            </Text>
+        );
+    }
+
+    return (
+        <PressableWithFeedback
+            // ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
+            ref={ref}
+            onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
+            needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}
+            pressDimmingValue={activeOpacity}
+        >
+            {children}
+        </PressableWithFeedback>
+    );
+}
+
+PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
+
+export default forwardRef(PressableWithSecondaryInteraction);
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.tsx
similarity index 55%
rename from src/components/PressableWithSecondaryInteraction/index.js
rename to src/components/PressableWithSecondaryInteraction/index.tsx
index c56774638d6a..88aad38ad5a9 100644
--- a/src/components/PressableWithSecondaryInteraction/index.js
+++ b/src/components/PressableWithSecondaryInteraction/index.tsx
@@ -1,44 +1,39 @@
 import React, {forwardRef, useEffect, useRef} from 'react';
-import _ from 'underscore';
+import {GestureResponderEvent} from 'react-native';
+import {PressableRef} from '@components/Pressable/GenericPressable/types';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
-import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
-
-/**
- * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
- */
-
-function PressableWithSecondaryInteraction({
-    children,
-    inline,
-    style,
-    enableLongPressWithHover,
-    withoutFocusOnSecondaryInteraction,
-    preventDefaultContextMenu,
-    onSecondaryInteraction,
-    onPressIn,
-    onPress,
-    onPressOut,
-    activeOpacity,
-    forwardedRef,
-    ...rest
-}) {
+import PressableWithSecondaryInteractionProps from './types';
+
+/** This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. */
+function PressableWithSecondaryInteraction(
+    {
+        children,
+        inline = false,
+        style,
+        enableLongPressWithHover = false,
+        withoutFocusOnSecondaryInteraction = false,
+        needsOffscreenAlphaCompositing = false,
+        preventDefaultContextMenu = true,
+        onSecondaryInteraction,
+        activeOpacity = 1,
+        ...rest
+    }: PressableWithSecondaryInteractionProps,
+    ref: PressableRef,
+) {
     const styles = useThemeStyles();
-    const pressableRef = useRef(null);
+    const pressableRef = useRef<HTMLDivElement | null>(null);
 
-    /**
-     * @param {Event} e - the secondary interaction event
-     */
-    const executeSecondaryInteraction = (e) => {
+    const executeSecondaryInteraction = (event: GestureResponderEvent) => {
         if (DeviceCapabilities.hasHoverSupport() && !enableLongPressWithHover) {
             return;
         }
         if (withoutFocusOnSecondaryInteraction && pressableRef.current) {
             pressableRef.current.blur();
         }
-        onSecondaryInteraction(e);
+        onSecondaryInteraction?.(event);
     };
 
     useEffect(() => {
@@ -46,32 +41,32 @@ function PressableWithSecondaryInteraction({
             return;
         }
 
-        if (forwardedRef) {
-            if (_.isFunction(forwardedRef)) {
-                forwardedRef(pressableRef.current);
-            } else if (_.isObject(forwardedRef)) {
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(pressableRef.current);
+            } else if (typeof ref === 'object') {
                 // eslint-disable-next-line no-param-reassign
-                forwardedRef.current = pressableRef.current;
+                ref.current = pressableRef.current;
             }
         }
 
         const element = pressableRef.current;
 
         /**
-         * @param {contextmenu} e - A right-click MouseEvent.
+         * @param event - A right-click MouseEvent.
          * https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
          */
-        const executeSecondaryInteractionOnContextMenu = (e) => {
+        const executeSecondaryInteractionOnContextMenu = (event: MouseEvent) => {
             if (!onSecondaryInteraction) {
                 return;
             }
 
-            e.stopPropagation();
+            event.stopPropagation();
             if (preventDefaultContextMenu) {
-                e.preventDefault();
+                event.preventDefault();
             }
 
-            onSecondaryInteraction(e);
+            onSecondaryInteraction(event);
 
             /**
              * This component prevents the tapped element from capturing focus.
@@ -90,42 +85,28 @@ function PressableWithSecondaryInteraction({
         return () => {
             element.removeEventListener('contextmenu', executeSecondaryInteractionOnContextMenu);
         };
-    }, [forwardedRef, onSecondaryInteraction, preventDefaultContextMenu, withoutFocusOnSecondaryInteraction]);
+    }, [ref, onSecondaryInteraction, preventDefaultContextMenu, withoutFocusOnSecondaryInteraction]);
 
-    const defaultPressableProps = _.omit(rest, ['onLongPress']);
     const inlineStyle = inline ? styles.dInline : {};
 
     // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
     return (
         <PressableWithFeedback
+            // ESLint is disabled here to propagate all the props, enhancing PressableWithSecondaryInteraction's versatility across different use cases.
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
             wrapperStyle={StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [], inlineStyle)}
-            onPressIn={onPressIn}
             onLongPress={onSecondaryInteraction ? executeSecondaryInteraction : undefined}
             pressDimmingValue={activeOpacity}
-            onPressOut={onPressOut}
-            onPress={onPress}
             ref={pressableRef}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...defaultPressableProps}
             style={(state) => [StyleUtils.parseStyleFromFunction(style, state), inlineStyle]}
+            needsOffscreenAlphaCompositing={needsOffscreenAlphaCompositing}
         >
             {children}
         </PressableWithFeedback>
     );
 }
 
-PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes;
-PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps;
 PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
 
-const PressableWithSecondaryInteractionWithRef = forwardRef((props, ref) => (
-    <PressableWithSecondaryInteraction
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-PressableWithSecondaryInteractionWithRef.displayName = 'PressableWithSecondaryInteractionWithRef';
-
-export default PressableWithSecondaryInteractionWithRef;
+export default forwardRef(PressableWithSecondaryInteraction);
diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
deleted file mode 100644
index 935b8ece5933..000000000000
--- a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import PropTypes from 'prop-types';
-import refPropTypes from '@components/refPropTypes';
-import stylePropTypes from '@styles/stylePropTypes';
-
-const propTypes = {
-    /** The function that should be called when this pressable is pressed */
-    onPress: PropTypes.func,
-
-    /** The function that should be called when this pressable is pressedIn */
-    onPressIn: PropTypes.func,
-
-    /** The function that should be called when this pressable is pressedOut */
-    onPressOut: PropTypes.func,
-
-    /**
-     * The function that should be called when this pressable is LongPressed or right-clicked.
-     *
-     * This function should be stable, preferably wrapped in a `useCallback` so that it does not
-     * cause several re-renders.
-     */
-    onSecondaryInteraction: PropTypes.func,
-
-    /** The children which should be contained in this wrapper component. */
-    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-
-    /** The ref to the search input (may be null on small screen widths) */
-    forwardedRef: refPropTypes,
-
-    /** Prevent the default ContextMenu on web/Desktop */
-    preventDefaultContextMenu: PropTypes.bool,
-
-    /** Use Text instead of Pressable to create inline layout.
-     * It has few limitations in comparison to Pressable.
-     *
-     * - No support for delayLongPress.
-     * - No support for pressIn and pressOut events.
-     * - No support for opacity
-     *
-     * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web.
-     */
-    inline: PropTypes.bool,
-
-    /** Disable focus trap for the element on secondary interaction  */
-    withoutFocusOnSecondaryInteraction: PropTypes.bool,
-
-    /** Opacity to reduce to when active  */
-    activeOpacity: PropTypes.number,
-
-    /** Used to apply styles to the Pressable */
-    style: stylePropTypes,
-
-    /** Whether the view needs to be rendered offscreen (for Android only) */
-    needsOffscreenAlphaCompositing: PropTypes.bool,
-
-    /** Whether the text has a gray highlights on press down (for IOS only) */
-    suppressHighlighting: PropTypes.bool,
-};
-
-const defaultProps = {
-    forwardedRef: () => {},
-    onPressIn: () => {},
-    onPressOut: () => {},
-    preventDefaultContextMenu: true,
-    inline: false,
-    withoutFocusOnSecondaryInteraction: false,
-    activeOpacity: 1,
-    enableLongPressWithHover: false,
-    needsOffscreenAlphaCompositing: false,
-    suppressHighlighting: false,
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/PressableWithSecondaryInteraction/types.ts b/src/components/PressableWithSecondaryInteraction/types.ts
new file mode 100644
index 000000000000..cf286afcb63a
--- /dev/null
+++ b/src/components/PressableWithSecondaryInteraction/types.ts
@@ -0,0 +1,54 @@
+import {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type PressableWithSecondaryInteractionProps = PressableWithFeedbackProps &
+    ChildrenProps & {
+        /** The function that should be called when this pressable is pressed */
+        onPress: (event?: GestureResponderEvent) => void;
+
+        /** The function that should be called when this pressable is pressedIn */
+        onPressIn?: (event?: GestureResponderEvent) => void;
+
+        /** The function that should be called when this pressable is pressedOut */
+        onPressOut?: (event?: GestureResponderEvent) => void;
+
+        /**
+         * The function that should be called when this pressable is LongPressed or right-clicked.
+         *
+         * This function should be stable, preferably wrapped in a `useCallback` so that it does not
+         * cause several re-renders.
+         */
+        onSecondaryInteraction?: (event: GestureResponderEvent | MouseEvent) => void;
+
+        /** Prevent the default ContextMenu on web/Desktop */
+        preventDefaultContextMenu?: boolean;
+
+        /** Use Text instead of Pressable to create inline layout.
+         * It has few limitations in comparison to Pressable.
+         *
+         * - No support for delayLongPress.
+         * - No support for pressIn and pressOut events.
+         * - No support for opacity
+         *
+         * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web.
+         */
+        inline?: boolean;
+
+        /** Disable focus trap for the element on secondary interaction  */
+        withoutFocusOnSecondaryInteraction?: boolean;
+
+        /** Opacity to reduce to when active  */
+        activeOpacity?: number;
+
+        /** Used to apply styles to the Pressable */
+        style?: StyleProp<ViewStyle & TextStyle>;
+
+        /** Whether the long press with hover behavior is enabled */
+        enableLongPressWithHover?: boolean;
+
+        /** Whether the text has a gray highlights on press down (for IOS only) */
+        suppressHighlighting?: boolean;
+    };
+
+export default PressableWithSecondaryInteractionProps;
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 2fc03b466bbf..78c1f5407d64 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';
@@ -54,6 +55,7 @@ const defaultProps = {
 };
 
 function AddReactionBubble(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     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..73538a032e38 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';
 
@@ -54,12 +55,13 @@ const defaultProps = {
 };
 
 function EmojiReactionBubble(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     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,
             ]}
@@ -70,7 +72,6 @@ function EmojiReactionBubble(props) {
 
                 props.onPress();
             }}
-            onLongPress={props.onReactionListOpen}
             onSecondaryInteraction={props.onReactionListOpen}
             ref={props.forwardedRef}
             enableLongPressWithHover={props.isSmallScreenWidth}
@@ -88,7 +89,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..7795f77d5d53 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';
@@ -55,6 +56,7 @@ const defaultProps = {
  * @returns {JSX.Element}
  */
 function MiniQuickEmojiReactions(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const ref = useRef();
 
@@ -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 3ad21e153150..4e94a9afe018 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -171,8 +171,7 @@ 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) && !props.isBillSplit && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
+    const shouldShowMerchant = !_.isEmpty(requestMerchant) && requestMerchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && requestMerchant !== CONST.TRANSACTION.DEFAULT_MERCHANT;
     const shouldShowDescription = !_.isEmpty(description) && !shouldShowMerchant && !isScanning;
 
     const receiptImages = hasReceipt ? [ReceiptUtils.getThumbnailAndImageURIs(props.transaction)] : [];
@@ -221,6 +220,8 @@ function MoneyRequestPreview(props) {
             message += ` • ${props.translate('iou.approved')}`;
         } else if (props.iouReport.isWaitingOnBankAccount) {
             message += ` • ${props.translate('iou.pending')}`;
+        } else if (props.iouReport.isCancelledIOU) {
+            message += ` • ${props.translate('iou.canceled')}`;
         }
         return message;
     };
@@ -285,9 +286,9 @@ function MoneyRequestPreview(props) {
                         <View style={styles.moneyRequestPreviewBoxText}>
                             <View style={[styles.flexRow]}>
                                 <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh20, styles.mb1]}>
-                                    {getPreviewHeaderText() + (isSettled ? ` • ${getSettledMessage()}` : '')}
+                                    {getPreviewHeaderText() + (isSettled && !props.iouReport.isCancelledIOU ? ` • ${getSettledMessage()}` : '')}
                                 </Text>
-                                {hasFieldErrors && (
+                                {!isSettled && hasFieldErrors && (
                                     <Icon
                                         src={Expensicons.DotIndicator}
                                         fill={theme.danger}
@@ -327,7 +328,7 @@ function MoneyRequestPreview(props) {
                                     </View>
                                 )}
                             </View>
-                            {shouldShowMerchant && (
+                            {shouldShowMerchant && !props.isBillSplit && (
                                 <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}
@@ -339,7 +340,9 @@ function MoneyRequestPreview(props) {
                                     {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
                                         <Text style={[styles.textLabel, styles.colorMuted]}>{props.translate('iou.pendingConversionMessage')}</Text>
                                     )}
-                                    {shouldShowDescription && <Text style={[styles.colorMuted]}>{description}</Text>}
+                                    {(shouldShowDescription || (shouldShowMerchant && props.isBillSplit)) && (
+                                        <Text style={[styles.colorMuted]}>{shouldShowDescription ? description : requestMerchant}</Text>
+                                    )}
                                 </View>
                                 {props.isBillSplit && !_.isEmpty(participantAccountIDs) && requestAmount > 0 && (
                                     <Text style={[styles.textLabel, styles.colorMuted, styles.ml1, styles.amountSplitPadding]}>
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index b10b8d87cabd..0249a9f5bb11 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -109,6 +109,7 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
 
     // Flags for allowing or disallowing editing a money request
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
+    const isCancelled = moneyRequestReport && moneyRequestReport.isCancelledIOU;
     const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
     const canEditAmount = canEdit && !isSettled && !isCardTransaction;
 
@@ -133,11 +134,16 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
         if (TransactionUtils.isPending(transaction)) {
             amountDescription += ` • ${translate('iou.pending')}`;
         }
+        if (isCancelled) {
+            amountDescription += ` • ${translate('iou.canceled')}`;
+        }
     } else {
         if (!isDistanceRequest) {
             amountDescription += ` • ${translate('iou.cash')}`;
         }
-        if (isSettled) {
+        if (isCancelled) {
+            amountDescription += ` • ${translate('iou.canceled')}`;
+        } else if (isSettled) {
             amountDescription += ` • ${translate('iou.settledExpensify')}`;
         } else if (report.isWaitingOnBankAccount) {
             amountDescription += ` • ${translate('iou.pending')}`;
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 8cb8406e8a0d..615e91dc5fc4 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -218,7 +218,7 @@ function ReportPreview(props) {
                             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
                                 <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewMessage()}</Text>
                             </View>
-                            {hasErrors && (
+                            {!iouSettled && hasErrors && (
                                 <Icon
                                     src={Expensicons.DotIndicator}
                                     fill={theme.danger}
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 4e405098a2ea..abc65b513ab9 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';
@@ -75,6 +76,7 @@ const defaultProps = {
 };
 
 function TaskPreview(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     // The reportAction might not contain details regarding 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..3d3ed9315f6e 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -2,6 +2,7 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import Checkbox from '@components/Checkbox';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
@@ -9,6 +10,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
@@ -23,10 +25,12 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
@@ -42,6 +46,7 @@ const propTypes = {
 };
 
 function TaskView(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     useEffect(() => {
         Task.setTaskReport({...props.report});
@@ -54,6 +59,7 @@ function TaskView(props) {
     const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID);
     const disableState = !canModifyTask;
     const isDisableInteractive = !canModifyTask || !isOpen;
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     return (
         <View>
@@ -79,7 +85,7 @@ function TaskView(props) {
                             style={({pressed}) => [
                                 styles.ph5,
                                 styles.pv2,
-                                StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true),
+                                StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true),
                                 isDisableInteractive && !disableState && styles.cursorDefault,
                             ]}
                             ref={props.forwardedRef}
@@ -119,7 +125,7 @@ function TaskView(props) {
                                                 <Icon
                                                     additionalStyles={[styles.alignItemsCenter]}
                                                     src={Expensicons.ArrowRight}
-                                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, disableState))}
+                                                    fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, false, disableState))}
                                                 />
                                             </View>
                                         )}
@@ -148,7 +154,7 @@ function TaskView(props) {
                         <MenuItem
                             label={props.translate('task.assignee')}
                             title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
-                            icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], props.personalDetails)}
+                            icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}
                             titleStyle={styles.assigneeTextStyle}
@@ -185,4 +191,13 @@ function TaskView(props) {
 TaskView.propTypes = propTypes;
 TaskView.displayName = 'TaskView';
 
-export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(TaskView);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+    }),
+)(TaskView);
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 0bb0f11d747c..bd7a24d15f1f 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -65,7 +65,7 @@ function RoomHeaderAvatars(props) {
         styles.roomHeaderAvatar,
 
         // Due to border-box box-sizing, the Avatars have to be larger when bordered to visually match size with non-bordered Avatars
-        StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
+        StyleUtils.getAvatarStyle(theme, CONST.AVATAR_SIZE.LARGE_BORDERED),
     ];
     return (
         <View style={styles.pointerEventsBoxNone}>
diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.js
new file mode 100644
index 000000000000..d00c5a032a72
--- /dev/null
+++ b/src/components/SAMLLoadingIndicator.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import styles from '@styles/styles';
+import themeColors from '@styles/themes/default';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import * as Illustrations from './Icon/Illustrations';
+import Text from './Text';
+
+function SAMLLoadingIndicator() {
+    const {translate} = useLocalize();
+    return (
+        <View style={[StyleSheet.absoluteFillObject, styles.deeplinkWrapperContainer]}>
+            <View style={styles.deeplinkWrapperMessage}>
+                <View style={styles.mb2}>
+                    <Icon
+                        width={200}
+                        height={164}
+                        src={Illustrations.RocketBlue}
+                    />
+                </View>
+                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('samlSignIn.launching')}</Text>
+                <View style={[styles.mt2, styles.mh2, styles.fontSizeNormal, styles.textAlignCenter]}>
+                    <Text style={[styles.textAlignCenter]}>{translate('samlSignIn.oneMoment')}</Text>
+                </View>
+            </View>
+            <View style={styles.deeplinkWrapperFooter}>
+                <Icon
+                    width={154}
+                    height={34}
+                    fill={themeColors.success}
+                    src={Expensicons.ExpensifyWordmark}
+                />
+            </View>
+        </View>
+    );
+}
+
+SAMLLoadingIndicator.displayName = 'SAMLLoadingIndicator';
+
+export default SAMLLoadingIndicator;
diff --git a/src/components/SafeAreaConsumer/index.android.tsx b/src/components/SafeAreaConsumer/index.android.tsx
new file mode 100644
index 000000000000..472c2f037d29
--- /dev/null
+++ b/src/components/SafeAreaConsumer/index.android.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+// eslint-disable-next-line no-restricted-imports
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
+import StatusBar from '@libs/StatusBar';
+import * as StyleUtils from '@styles/StyleUtils';
+import SafeAreaConsumerProps from './types';
+
+/**
+ * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we
+ * may need not just the insets, but the computed styles so we save a few lines of code with this.
+ */
+function SafeAreaConsumer({children}: SafeAreaConsumerProps) {
+    return (
+        <SafeAreaInsetsContext.Consumer>
+            {(insets) => {
+                const insetsWithDefault = insets ?? {
+                    top: 0,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                };
+
+                const androidInsets = {
+                    ...insetsWithDefault,
+                    top: StatusBar.currentHeight ?? insetsWithDefault.top,
+                };
+
+                const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(androidInsets ?? undefined);
+                return children({
+                    paddingTop,
+                    paddingBottom,
+                    insets: androidInsets ?? undefined,
+                    safeAreaPaddingBottomStyle: {paddingBottom},
+                });
+            }}
+        </SafeAreaInsetsContext.Consumer>
+    );
+}
+
+SafeAreaConsumer.displayName = 'SafeAreaConsumer';
+
+export default SafeAreaConsumer;
diff --git a/src/components/SafeAreaConsumer.tsx b/src/components/SafeAreaConsumer/index.tsx
similarity index 69%
rename from src/components/SafeAreaConsumer.tsx
rename to src/components/SafeAreaConsumer/index.tsx
index 7df73dbdb65f..f515d6697bb4 100644
--- a/src/components/SafeAreaConsumer.tsx
+++ b/src/components/SafeAreaConsumer/index.tsx
@@ -1,20 +1,8 @@
 import React from 'react';
-import type {DimensionValue} from 'react-native';
-import {EdgeInsets, SafeAreaInsetsContext} from 'react-native-safe-area-context';
+// eslint-disable-next-line no-restricted-imports
+import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import * as StyleUtils from '@styles/StyleUtils';
-
-type ChildrenProps = {
-    paddingTop?: DimensionValue;
-    paddingBottom?: DimensionValue;
-    insets?: EdgeInsets;
-    safeAreaPaddingBottomStyle: {
-        paddingBottom?: DimensionValue;
-    };
-};
-
-type SafeAreaConsumerProps = {
-    children: React.FC<ChildrenProps>;
-};
+import SafeAreaConsumerProps from './types';
 
 /**
  * This component is a light wrapper around the SafeAreaInsetsContext.Consumer. There are several places where we
diff --git a/src/components/SafeAreaConsumer/types.ts b/src/components/SafeAreaConsumer/types.ts
new file mode 100644
index 000000000000..bc81de96a082
--- /dev/null
+++ b/src/components/SafeAreaConsumer/types.ts
@@ -0,0 +1,17 @@
+import {DimensionValue} from 'react-native';
+import {EdgeInsets} from 'react-native-safe-area-context';
+
+type ChildrenProps = {
+    paddingTop?: DimensionValue;
+    paddingBottom?: DimensionValue;
+    insets?: EdgeInsets;
+    safeAreaPaddingBottomStyle: {
+        paddingBottom?: DimensionValue;
+    };
+};
+
+type SafeAreaConsumerProps = {
+    children: React.FC<ChildrenProps>;
+};
+
+export default SafeAreaConsumerProps;
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index 16bf9ba0761c..6af67c51ffaf 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -51,7 +51,7 @@ const ScreenWrapper = React.forwardRef(
         const navigation = useNavigation();
         const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false);
         const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
-        const minHeight = shouldEnableMinHeight ? initialHeight : undefined;
+        const minHeight = shouldEnableMinHeight && !Browser.isSafari() ? initialHeight : undefined;
         const isKeyboardShown = lodashGet(keyboardState, 'isKeyboardShown', false);
 
         const isKeyboardShownRef = useRef();
diff --git a/src/components/ScrollViewWithContext.tsx b/src/components/ScrollViewWithContext.tsx
index 6122d5508a38..7c75ae2f71b2 100644
--- a/src/components/ScrollViewWithContext.tsx
+++ b/src/components/ScrollViewWithContext.tsx
@@ -63,3 +63,4 @@ ScrollViewWithContextWithRef.displayName = 'ScrollViewWithContextWithRef';
 
 export default React.forwardRef(ScrollViewWithContextWithRef);
 export {ScrollContext};
+export type {ScrollContextValue};
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index a37f2fe4ddc0..f1c189842c28 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -24,6 +24,7 @@ function BaseListItem({
     canSelectMultiple = false,
     onSelectRow,
     onDismissError = () => {},
+    keyForList,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -47,6 +48,7 @@ function BaseListItem({
                 hoverStyle={styles.hoveredComponentBG}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
+                testID={keyForList}
             >
                 <View
                     style={[
@@ -62,7 +64,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/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 6f53679f28d3..3411d7e03cb9 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -232,8 +232,9 @@ function BaseSelectionList({
         }
     };
 
-    const selectFocusedOption = () => {
-        const focusedOption = flattenedSections.allOptions[focusedIndex];
+    const selectFocusedOption = (e) => {
+        const focusedItemKey = lodashGet(e, ['target', 'attributes', 'data-testid', 'value']);
+        const focusedOption = focusedItemKey ? _.find(flattenedSections.allOptions, (option) => option.keyForList === focusedItemKey) : flattenedSections.allOptions[focusedIndex];
 
         if (!focusedOption || focusedOption.isDisabled) {
             return;
@@ -310,6 +311,7 @@ function BaseSelectionList({
                 onSelectRow={() => selectRow(item, true)}
                 onDismissError={onDismissError}
                 shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+                keyForList={item.keyForList}
             />
         );
     };
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/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index ab9f0dec8e57..52ecf6633d9b 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -6,6 +6,7 @@ import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import {AvatarType} from '@src/types/onyx/OnyxCommon';
 import Avatar from './Avatar';
 import UserDetailsTooltip from './UserDetailsTooltip';
 
@@ -14,7 +15,7 @@ type SubAvatar = {
     source?: AvatarSource;
 
     /** Denotes whether it is an avatar or a workspace avatar */
-    type?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+    type?: AvatarType;
 
     /** Owner of the avatar. If user, displayName. If workspace, policy name */
     name?: string;
@@ -51,7 +52,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/SwipeInterceptPanResponder.js b/src/components/SwipeInterceptPanResponder.tsx
similarity index 100%
rename from src/components/SwipeInterceptPanResponder.js
rename to src/components/SwipeInterceptPanResponder.tsx
diff --git a/src/components/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index cdec2a7e91e1..602a326d6c48 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -70,8 +70,8 @@ const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => {
 
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
     const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]);
     const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs);
 
@@ -102,7 +102,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
             {_.map(state.routes, (route, index) => {
                 const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs);
                 const inactiveOpacity = getOpacity(position, state.routes.length, index, false, affectedAnimatedTabs);
-                const backgroundColor = getBackgroundColor(position, state.routes.length, index, affectedAnimatedTabs);
+                const backgroundColor = getBackgroundColor(state.routes.length, index, affectedAnimatedTabs);
                 const isFocused = index === state.index;
                 const {icon, title} = getIconAndTitle(route.name, translate);
 
diff --git a/src/components/TaskHeaderActionButton.js b/src/components/TaskHeaderActionButton.js
deleted file mode 100644
index 09ca427b8e56..000000000000
--- a/src/components/TaskHeaderActionButton.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import compose from '@libs/compose';
-import * as ReportUtils from '@libs/ReportUtils';
-import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
-import * as Session from '@userActions/Session';
-import * as Task from '@userActions/Task';
-import ONYXKEYS from '@src/ONYXKEYS';
-import Button from './Button';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes.isRequired,
-
-    /** Current user session */
-    session: PropTypes.shape({
-        accountID: PropTypes.number,
-    }),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    session: {
-        accountID: 0,
-    },
-};
-
-function TaskHeaderActionButton(props) {
-    const styles = useThemeStyles();
-    return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
-            <Button
-                success
-                isDisabled={!Task.canModifyTask(props.report, props.session.accountID)}
-                medium
-                text={props.translate(ReportUtils.isCompletedTaskReport(props.report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
-                onPress={Session.checkIfActionIsAllowed(() => (ReportUtils.isCompletedTaskReport(props.report) ? Task.reopenTask(props.report) : Task.completeTask(props.report)))}
-                style={[styles.flex1]}
-            />
-        </View>
-    );
-}
-
-TaskHeaderActionButton.propTypes = propTypes;
-TaskHeaderActionButton.defaultProps = defaultProps;
-TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(TaskHeaderActionButton);
diff --git a/src/components/TaskHeaderActionButton.tsx b/src/components/TaskHeaderActionButton.tsx
new file mode 100644
index 000000000000..5f8461d8e324
--- /dev/null
+++ b/src/components/TaskHeaderActionButton.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {View} from 'react-native';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import * as ReportUtils from '@libs/ReportUtils';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as Session from '@userActions/Session';
+import * as Task from '@userActions/Task';
+import ONYXKEYS from '@src/ONYXKEYS';
+import * as OnyxTypes from '@src/types/onyx';
+import Button from './Button';
+
+type TaskHeaderActionButtonOnyxProps = {
+    /** Current user session */
+    session: OnyxEntry<OnyxTypes.Session>;
+};
+
+type TaskHeaderActionButtonProps = TaskHeaderActionButtonOnyxProps & {
+    /** The report currently being looked at */
+    report: OnyxTypes.Report;
+};
+
+function TaskHeaderActionButton({report, session}: TaskHeaderActionButtonProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
+            <Button
+                success
+                isDisabled={!Task.canModifyTask(report, session?.accountID ?? 0)}
+                medium
+                text={translate(ReportUtils.isCompletedTaskReport(report) ? 'task.markAsIncomplete' : 'task.markAsComplete')}
+                onPress={Session.checkIfActionIsAllowed(() => (ReportUtils.isCompletedTaskReport(report) ? Task.reopenTask(report) : Task.completeTask(report)))}
+                style={styles.flex1}
+            />
+        </View>
+    );
+}
+
+TaskHeaderActionButton.displayName = 'TaskHeaderActionButton';
+
+export default withOnyx<TaskHeaderActionButtonProps, TaskHeaderActionButtonOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(TaskHeaderActionButton);
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.tsx
similarity index 71%
rename from src/components/TestToolMenu.js
rename to src/components/TestToolMenu.tsx
index fd71b6cee75b..53953b861d7d 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.tsx
@@ -1,7 +1,5 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -10,34 +8,30 @@ import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
+import NetworkOnyx from '@src/types/onyx/Network';
+import UserOnyx from '@src/types/onyx/User';
 import Button from './Button';
-import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
 import Switch from './Switch';
 import TestToolRow from './TestToolRow';
 import Text from './Text';
 
-const propTypes = {
+type TestToolMenuOnyxProps = {
     /** User object in Onyx */
-    user: PropTypes.shape({
-        /** Whether we should use the staging version of the secure API server */
-        shouldUseStagingServer: PropTypes.bool,
-    }),
+    user: OnyxEntry<UserOnyx>;
+};
 
+type TestToolMenuProps = TestToolMenuOnyxProps & {
     /** Network object in Onyx */
-    network: networkPropTypes.isRequired,
+    network: OnyxEntry<NetworkOnyx>;
 };
 
-const defaultProps = {
-    user: {
-        // The default value is environment specific and can't be set with `defaultProps` (ENV is not resolved yet)
-        // When undefined (during render) STAGING defaults to `true`, other envs default to `false`
-        shouldUseStagingServer: undefined,
-    },
-};
+const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false};
 
-function TestToolMenu(props) {
+function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
+    const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
     const styles = useThemeStyles();
+
     return (
         <>
             <Text
@@ -54,8 +48,8 @@ function TestToolMenu(props) {
                 <TestToolRow title="Use Staging Server">
                     <Switch
                         accessibilityLabel="Use Staging Server"
-                        isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
-                        onToggle={() => User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+                        isOn={shouldUseStagingServer}
+                        onToggle={() => User.setShouldUseStagingServer(!shouldUseStagingServer)}
                     />
                 </TestToolRow>
             )}
@@ -64,8 +58,8 @@ function TestToolMenu(props) {
             <TestToolRow title="Force offline">
                 <Switch
                     accessibilityLabel="Force offline"
-                    isOn={Boolean(props.network.shouldForceOffline)}
-                    onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
+                    isOn={!!network?.shouldForceOffline}
+                    onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)}
                 />
             </TestToolRow>
 
@@ -73,8 +67,8 @@ function TestToolMenu(props) {
             <TestToolRow title="Simulate failing network requests">
                 <Switch
                     accessibilityLabel="Simulate failing network requests"
-                    isOn={Boolean(props.network.shouldFailAllRequests)}
-                    onToggle={() => Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
+                    isOn={!!network?.shouldFailAllRequests}
+                    onToggle={() => Network.setShouldFailAllRequests(!network?.shouldFailAllRequests)}
                 />
             </TestToolRow>
 
@@ -99,15 +93,13 @@ function TestToolMenu(props) {
     );
 }
 
-TestToolMenu.propTypes = propTypes;
-TestToolMenu.defaultProps = defaultProps;
 TestToolMenu.displayName = 'TestToolMenu';
 
 export default compose(
-    withNetwork(),
-    withOnyx({
+    withOnyx<TestToolMenuProps, TestToolMenuOnyxProps>({
         user: {
             key: ONYXKEYS.USER,
         },
     }),
+    withNetwork(),
 )(TestToolMenu);
diff --git a/src/components/TestToolsModal.js b/src/components/TestToolsModal.tsx
similarity index 56%
rename from src/components/TestToolsModal.js
rename to src/components/TestToolsModal.tsx
index 334090d98334..f555c2b0b4fe 100644
--- a/src/components/TestToolsModal.js
+++ b/src/components/TestToolsModal.tsx
@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
@@ -9,27 +8,19 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import Modal from './Modal';
 import TestToolMenu from './TestToolMenu';
 
-const propTypes = {
-    /** Details about modal */
-    modal: PropTypes.shape({
-        /** Indicates when an Alert modal is about to be visible */
-        willAlertModalBecomeVisible: PropTypes.bool,
-    }),
-
+type TestToolsModalOnyxProps = {
     /** Whether the test tools modal is open */
-    isTestToolsModalOpen: PropTypes.bool,
+    isTestToolsModalOpen: OnyxEntry<boolean>;
 };
 
-const defaultProps = {
-    modal: {},
-    isTestToolsModalOpen: false,
-};
+type TestToolsModalProps = TestToolsModalOnyxProps;
 
-function TestToolsModal(props) {
+function TestToolsModal({isTestToolsModalOpen = false}: TestToolsModalProps) {
     const styles = useThemeStyles();
+
     return (
         <Modal
-            isVisible={props.isTestToolsModalOpen}
+            isVisible={!!isTestToolsModalOpen}
             type={CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
             onClose={toggleTestToolsModal}
         >
@@ -40,14 +31,9 @@ function TestToolsModal(props) {
     );
 }
 
-TestToolsModal.propTypes = propTypes;
-TestToolsModal.defaultProps = defaultProps;
 TestToolsModal.displayName = 'TestToolsModal';
 
-export default withOnyx({
-    modal: {
-        key: ONYXKEYS.MODAL,
-    },
+export default withOnyx<TestToolsModalProps, TestToolsModalOnyxProps>({
     isTestToolsModalOpen: {
         key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN,
     },
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index 58a5cf300699..96a6f535877a 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -12,8 +12,10 @@ type TextProps = RNTextProps & {
 
     /** The size of the text */
     fontSize?: number;
+
     /** The alignment of the text */
     textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify';
+
     /** Any children to display */
     children: React.ReactNode;
 
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index a28365480c7a..cf8ae90c727a 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -333,7 +333,8 @@ 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), styles.verticalAlignTop] : []),
+
                                     // 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..190104198986 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), styles.verticalAlignTop] : []),
                                     // Add disabled color theme when field is not editable.
                                     props.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
diff --git a/src/components/TextLink.js b/src/components/TextLink.js
index ab59f6f8b121..46c074eb79e6 100644
--- a/src/components/TextLink.js
+++ b/src/components/TextLink.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'underscore';
+import useEnvironment from '@hooks/useEnvironment';
 import stylePropTypes from '@styles/stylePropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Link from '@userActions/Link';
@@ -37,6 +38,7 @@ const defaultProps = {
 };
 
 function TextLink(props) {
+    const {environmentURL} = useEnvironment();
     const styles = useThemeStyles();
     const rest = _.omit(props, _.keys(propTypes));
     const additionalStyles = _.isArray(props.style) ? props.style : [props.style];
@@ -51,7 +53,7 @@ function TextLink(props) {
             return;
         }
 
-        Link.openExternalLink(props.href);
+        Link.openLink(props.href, environmentURL);
     };
 
     /**
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/ZeroWidthView/index.native.js b/src/components/ZeroWidthView/index.native.tsx
similarity index 100%
rename from src/components/ZeroWidthView/index.native.js
rename to src/components/ZeroWidthView/index.native.tsx
diff --git a/src/components/ZeroWidthView/index.js b/src/components/ZeroWidthView/index.tsx
similarity index 66%
rename from src/components/ZeroWidthView/index.js
rename to src/components/ZeroWidthView/index.tsx
index 58b2dfa039ef..73cd349360c6 100644
--- a/src/components/ZeroWidthView/index.js
+++ b/src/components/ZeroWidthView/index.tsx
@@ -1,23 +1,17 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import Text from '@components/Text';
 import * as Browser from '@libs/Browser';
 import * as EmojiUtils from '@libs/EmojiUtils';
 
-const propTypes = {
+type ZeroWidthViewProps = {
     /** If this is the Concierge chat, we'll open the modal for requesting a setup call instead of showing popover menu */
-    text: PropTypes.string,
+    text?: string;
 
     /** URL to the assigned guide's appointment booking calendar */
-    displayAsGroup: PropTypes.bool,
+    displayAsGroup?: boolean;
 };
 
-const defaultProps = {
-    text: '',
-    displayAsGroup: false,
-};
-
-function ZeroWidthView({text, displayAsGroup}) {
+function ZeroWidthView({text = '', displayAsGroup = false}: ZeroWidthViewProps) {
     const firstLetterIsEmoji = EmojiUtils.isFirstLetterEmoji(text);
     if (firstLetterIsEmoji && !displayAsGroup && !Browser.isMobile()) {
         return <Text>&#x200b;</Text>;
@@ -25,8 +19,6 @@ function ZeroWidthView({text, displayAsGroup}) {
     return null;
 }
 
-ZeroWidthView.propTypes = propTypes;
-ZeroWidthView.defaultProps = defaultProps;
 ZeroWidthView.displayName = 'ZeroWidthView';
 
 export default ZeroWidthView;
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..532ff6e5c375 100644
--- a/src/components/withTheme.tsx
+++ b/src/components/withTheme.tsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import {ThemeColors} from '@styles/themes/types';
+import {type ThemeColors} from '@styles/themes/types';
 import useTheme from '@styles/themes/useTheme';
 
 const withThemePropTypes = {
@@ -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 8ea55c5fbef8..bdd5e50fe8e3 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, ForwardedRef, forwardRef, ReactElement, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import styles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const withThemeStylesPropTypes = {
     themeStyles: PropTypes.object.isRequired,
 };
-type ThemeStylesProps = {themeStyles: typeof styles};
+type ThemeStylesProps = {themeStyles: ThemeStyles};
 
 export default function withThemeStyles<TProps extends ThemeStylesProps, TRef>(
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
diff --git a/src/components/withWindowDimensions/index.native.tsx b/src/components/withWindowDimensions/index.native.tsx
index 0c9f61a45c0b..8ba385f72e4b 100644
--- a/src/components/withWindowDimensions/index.native.tsx
+++ b/src/components/withWindowDimensions/index.native.tsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {ComponentType, createContext, ForwardedRef, RefAttributes, useEffect, useMemo, useState} from 'react';
 import {Dimensions} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import getWindowHeightAdjustment from '@libs/getWindowHeightAdjustment';
 import variables from '@styles/variables';
diff --git a/src/components/withWindowDimensions/index.tsx b/src/components/withWindowDimensions/index.tsx
index 1479450deec4..aa9fc2181a36 100644
--- a/src/components/withWindowDimensions/index.tsx
+++ b/src/components/withWindowDimensions/index.tsx
@@ -2,7 +2,7 @@ import lodashDebounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React, {ComponentType, createContext, ForwardedRef, RefAttributes, useEffect, useMemo, useState} from 'react';
 import {Dimensions} from 'react-native';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import getWindowHeightAdjustment from '@libs/getWindowHeightAdjustment';
 import variables from '@styles/variables';
diff --git a/src/hooks/useDragAndDrop.ts b/src/hooks/useDragAndDrop.ts
index c34b32db6425..0e82cb22505f 100644
--- a/src/hooks/useDragAndDrop.ts
+++ b/src/hooks/useDragAndDrop.ts
@@ -1,6 +1,7 @@
 import {useIsFocused} from '@react-navigation/native';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
+import {PopoverContext} from '@components/PopoverProvider';
 
 const COPY_DROP_EFFECT = 'copy';
 const NONE_DROP_EFFECT = 'none';
@@ -27,6 +28,7 @@ type DragAndDropOptions = {
 export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}: DragAndDropParams): DragAndDropOptions {
     const isFocused = useIsFocused();
     const [isDraggingOver, setIsDraggingOver] = useState(false);
+    const {close: closePopover} = useContext(PopoverContext);
 
     // This solution is borrowed from this SO: https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element
     // This is necessary because dragging over children will cause dragleave to execute on the parent.
@@ -43,9 +45,15 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
         setIsDraggingOver(false);
     }, [isFocused, isDisabled]);
 
-    const setDropEffect = useCallback(
+    const handleDragEvent = useCallback(
         (event: DragEvent) => {
-            const effect = shouldAllowDrop && shouldAcceptDrop(event) ? COPY_DROP_EFFECT : NONE_DROP_EFFECT;
+            const shouldAcceptThisDrop = shouldAllowDrop && shouldAcceptDrop(event);
+
+            if (shouldAcceptThisDrop && event.type === DRAG_ENTER_EVENT) {
+                closePopover();
+            }
+
+            const effect = shouldAcceptThisDrop ? COPY_DROP_EFFECT : NONE_DROP_EFFECT;
 
             if (event.dataTransfer) {
                 // eslint-disable-next-line no-param-reassign
@@ -54,7 +62,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
                 event.dataTransfer.effectAllowed = effect;
             }
         },
-        [shouldAllowDrop, shouldAcceptDrop],
+        [shouldAllowDrop, shouldAcceptDrop, closePopover],
     );
 
     /**
@@ -71,11 +79,11 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
 
             switch (event.type) {
                 case DRAG_OVER_EVENT:
-                    setDropEffect(event);
+                    handleDragEvent(event);
                     break;
                 case DRAG_ENTER_EVENT:
                     dragCounter.current++;
-                    setDropEffect(event);
+                    handleDragEvent(event);
                     if (isDraggingOver) {
                         return;
                     }
@@ -98,7 +106,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
                     break;
             }
         },
-        [isFocused, isDisabled, shouldAcceptDrop, setDropEffect, isDraggingOver, onDrop],
+        [isFocused, isDisabled, shouldAcceptDrop, isDraggingOver, onDrop, handleDragEvent],
     );
 
     useEffect(() => {
diff --git a/src/hooks/useKeyboardShortcut.ts b/src/hooks/useKeyboardShortcut.ts
index a5921ba37e4a..461f01a74837 100644
--- a/src/hooks/useKeyboardShortcut.ts
+++ b/src/hooks/useKeyboardShortcut.ts
@@ -18,6 +18,8 @@ type KeyboardShortcutConfig = {
     excludedNodes?: string[];
     /* Is keyboard shortcut is already active */
     isActive?: boolean;
+    /* Shuld stop propagation? */
+    shouldStopPropagation?: boolean;
 };
 
 /**
@@ -35,6 +37,9 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: G
         // Hence the use of CONST.EMPTY_ARRAY.
         excludedNodes = CONST.EMPTY_ARRAY,
         isActive = true,
+
+        // This flag is used to prevent auto submit form when press enter key on selection modal.
+        shouldStopPropagation = false,
     } = config;
 
     useEffect(() => {
@@ -52,6 +57,7 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: G
             priority,
             shouldPreventDefault,
             excludedNodes as string[],
+            shouldStopPropagation,
         );
 
         return () => {
diff --git a/src/hooks/useSafeAreaInsets/index.android.ts b/src/hooks/useSafeAreaInsets/index.android.ts
new file mode 100644
index 000000000000..55a83d425543
--- /dev/null
+++ b/src/hooks/useSafeAreaInsets/index.android.ts
@@ -0,0 +1,14 @@
+// eslint-disable-next-line no-restricted-imports
+import {EdgeInsets, useSafeAreaInsets as useSafeAreaInsetsInternal} from 'react-native-safe-area-context';
+import StatusBar from '@libs/StatusBar';
+
+function useSafeAreaInsets(): EdgeInsets {
+    const insets = useSafeAreaInsetsInternal();
+
+    return {
+        ...insets,
+        top: StatusBar.currentHeight ?? insets.top,
+    };
+}
+
+export default useSafeAreaInsets;
diff --git a/src/hooks/useSafeAreaInsets/index.ts b/src/hooks/useSafeAreaInsets/index.ts
new file mode 100644
index 000000000000..6cc2f1818fe5
--- /dev/null
+++ b/src/hooks/useSafeAreaInsets/index.ts
@@ -0,0 +1,4 @@
+/* eslint-disable no-restricted-imports */
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+
+export default useSafeAreaInsets;
diff --git a/src/hooks/useScrollContext.ts b/src/hooks/useScrollContext.ts
new file mode 100644
index 000000000000..711c8326bdff
--- /dev/null
+++ b/src/hooks/useScrollContext.ts
@@ -0,0 +1,6 @@
+import {useContext} from 'react';
+import {ScrollContext, ScrollContextValue} from '@components/ScrollViewWithContext';
+
+export default function useScrollContext(): ScrollContextValue {
+    return useContext(ScrollContext);
+}
diff --git a/src/hooks/useViolations.ts b/src/hooks/useViolations.ts
new file mode 100644
index 000000000000..3aef5cd9b716
--- /dev/null
+++ b/src/hooks/useViolations.ts
@@ -0,0 +1,72 @@
+import {useCallback, useMemo} from 'react';
+import {TransactionViolation, ViolationName} from '@src/types/onyx';
+
+/**
+ * Names of Fields where violations can occur
+ */
+type ViolationField = 'amount' | 'billable' | 'category' | 'comment' | 'date' | 'merchant' | 'receipt' | 'tag' | 'tax';
+
+/**
+ * Map from Violation Names to the field where that violation can occur
+ */
+const violationFields: Record<ViolationName, ViolationField> = {
+    allTagLevelsRequired: 'tag',
+    autoReportedRejectedExpense: 'merchant',
+    billableExpense: 'billable',
+    cashExpenseWithNoReceipt: 'receipt',
+    categoryOutOfPolicy: 'category',
+    conversionSurcharge: 'amount',
+    customUnitOutOfPolicy: 'merchant',
+    duplicatedTransaction: 'merchant',
+    fieldRequired: 'merchant',
+    futureDate: 'date',
+    invoiceMarkup: 'amount',
+    maxAge: 'date',
+    missingCategory: 'category',
+    missingComment: 'comment',
+    missingTag: 'tag',
+    modifiedAmount: 'amount',
+    modifiedDate: 'date',
+    nonExpensiworksExpense: 'merchant',
+    overAutoApprovalLimit: 'amount',
+    overCategoryLimit: 'amount',
+    overLimit: 'amount',
+    overLimitAttendee: 'amount',
+    perDayLimit: 'amount',
+    receiptNotSmartScanned: 'receipt',
+    receiptRequired: 'receipt',
+    rter: 'merchant',
+    smartscanFailed: 'receipt',
+    someTagLevelsRequired: 'tag',
+    tagOutOfPolicy: 'tag',
+    taxAmountChanged: 'tax',
+    taxOutOfPolicy: 'tax',
+    taxRateChanged: 'tax',
+    taxRequired: 'tax',
+};
+
+type ViolationsMap = Map<ViolationField, TransactionViolation[]>;
+
+function useViolations(violations: TransactionViolation[]) {
+    const violationsByField = useMemo((): ViolationsMap => {
+        const violationGroups = new Map<ViolationField, TransactionViolation[]>();
+
+        for (const violation of violations) {
+            const field = violationFields[violation.name];
+            const existingViolations = violationGroups.get(field) ?? [];
+            violationGroups.set(field, [...existingViolations, violation]);
+        }
+
+        return violationGroups ?? new Map();
+    }, [violations]);
+
+    const hasViolations = useCallback((field: ViolationField) => Boolean(violationsByField.get(field)?.length), [violationsByField]);
+    const getViolationsForField = useCallback((field: ViolationField) => violationsByField.get(field) ?? [], [violationsByField]);
+
+    return {
+        hasViolations,
+        getViolationsForField,
+    };
+}
+
+export default useViolations;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 7deb38b47e28..817f06f6b344 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -9,6 +9,7 @@ import type {
     BeginningOfChatHistoryAnnounceRoomPartOneParams,
     BeginningOfChatHistoryAnnounceRoomPartTwo,
     BeginningOfChatHistoryDomainRoomPartOneParams,
+    CanceledRequestParams,
     CharacterLimitParams,
     ConfirmThatParams,
     DateShouldBeAfterParams,
@@ -542,6 +543,7 @@ export default {
         pay: 'Pay',
         viewDetails: 'View details',
         pending: 'Pending',
+        canceled: 'Canceled',
         posted: 'Posted',
         deleteReceipt: 'Delete receipt',
         receiptScanning: 'Receipt scan in progress…',
@@ -572,6 +574,8 @@ export default {
         managerApproved: ({manager}: ManagerApprovedParams) => `${manager} approved:`,
         payerSettled: ({amount}: PayerSettledParams) => `paid ${amount}`,
         waitingOnBankAccount: ({submitterDisplayName}: WaitingOnBankAccountParams) => `started settling up, payment is held until ${submitterDisplayName} adds a bank account`,
+        canceledRequest: ({amount, submitterDisplayName}: CanceledRequestParams) =>
+            `Canceled the ${amount} payment, because ${submitterDisplayName} did not enable their Expensify Wallet within 30 days`,
         settledAfterAddedBankAccount: ({submitterDisplayName, amount}: SettledAfterAddedBankAccountParams) =>
             `${submitterDisplayName} added a bank account. The ${amount} payment has been made.`,
         paidElsewhereWithAmount: ({payer, amount}: PaidElsewhereWithAmountParams) => `${payer} paid ${amount} elsewhere`,
@@ -1129,6 +1133,10 @@ export default {
         year: 'Year',
         selectYear: 'Please select a year',
     },
+    focusModeUpdateModal: {
+        title: 'Welcome to #focus mode!',
+        prompt: "Read chats will be hidden, unless they have a green dot, which means there's an action you need to take on them. You can change this in your account settings ",
+    },
     notFound: {
         chatYouLookingForCannotBeFound: 'The chat you are looking for cannot be found.',
         getMeOutOfHere: 'Get me out of here',
@@ -1947,19 +1955,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, ',
@@ -1975,4 +1983,39 @@ export default {
         },
         copyReferralLink: 'Copy referral link',
     },
+    violations: {
+        allTagLevelsRequired: 'dummy.violations.allTagLevelsRequired',
+        autoReportedRejectedExpense: 'dummy.violations.autoReportedRejectedExpense',
+        billableExpense: 'dummy.violations.billableExpense',
+        cashExpenseWithNoReceipt: 'dummy.violations.cashExpenseWithNoReceipt',
+        categoryOutOfPolicy: 'dummy.violations.categoryOutOfPolicy',
+        conversionSurcharge: 'dummy.violations.conversionSurcharge',
+        customUnitOutOfPolicy: 'dummy.violations.customUnitOutOfPolicy',
+        duplicatedTransaction: 'dummy.violations.duplicatedTransaction',
+        fieldRequired: 'dummy.violations.fieldRequired',
+        futureDate: 'dummy.violations.futureDate',
+        invoiceMarkup: 'dummy.violations.invoiceMarkup',
+        maxAge: 'dummy.violations.maxAge',
+        missingCategory: 'dummy.violations.missingCategory',
+        missingComment: 'dummy.violations.missingComment',
+        missingTag: 'dummy.violations.missingTag',
+        modifiedAmount: 'dummy.violations.modifiedAmount',
+        modifiedDate: 'dummy.violations.modifiedDate',
+        nonExpensiworksExpense: 'dummy.violations.nonExpensiworksExpense',
+        overAutoApprovalLimit: 'dummy.violations.overAutoApprovalLimit',
+        overCategoryLimit: 'dummy.violations.overCategoryLimit',
+        overLimit: 'dummy.violations.overLimit',
+        overLimitAttendee: 'dummy.violations.overLimitAttendee',
+        perDayLimit: 'dummy.violations.perDayLimit',
+        receiptNotSmartScanned: 'dummy.violations.receiptNotSmartScanned',
+        receiptRequired: 'dummy.violations.receiptRequired',
+        rter: 'dummy.violations.rter',
+        smartscanFailed: 'dummy.violations.smartscanFailed',
+        someTagLevelsRequired: 'dummy.violations.someTagLevelsRequired',
+        tagOutOfPolicy: 'dummy.violations.tagOutOfPolicy',
+        taxAmountChanged: 'dummy.violations.taxAmountChanged',
+        taxOutOfPolicy: 'dummy.violations.taxOutOfPolicy',
+        taxRateChanged: 'dummy.violations.taxRateChanged',
+        taxRequired: 'dummy.violations.taxRequired',
+    },
 } satisfies TranslationBase;
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b52975496e08..b219021daa0f 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -8,6 +8,7 @@ import type {
     BeginningOfChatHistoryAnnounceRoomPartOneParams,
     BeginningOfChatHistoryAnnounceRoomPartTwo,
     BeginningOfChatHistoryDomainRoomPartOneParams,
+    CanceledRequestParams,
     CharacterLimitParams,
     ConfirmThatParams,
     DateShouldBeAfterParams,
@@ -534,6 +535,7 @@ export default {
         pay: 'Pagar',
         viewDetails: 'Ver detalles',
         pending: 'Pendiente',
+        canceled: 'Canceló',
         posted: 'Contabilizado',
         deleteReceipt: 'Eliminar recibo',
         receiptScanning: 'Escaneo de recibo en curso…',
@@ -564,6 +566,8 @@ export default {
         managerApproved: ({manager}: ManagerApprovedParams) => `${manager} aprobó:`,
         payerSettled: ({amount}: PayerSettledParams) => `pagó ${amount}`,
         waitingOnBankAccount: ({submitterDisplayName}: WaitingOnBankAccountParams) => `inicio el pago, pero no se procesará hasta que ${submitterDisplayName} añada una cuenta bancaria`,
+        canceledRequest: ({amount, submitterDisplayName}: CanceledRequestParams) =>
+            `Canceló el pago  ${amount}, porque ${submitterDisplayName} no habilitó su billetera Expensify en un plazo de 30 días.`,
         settledAfterAddedBankAccount: ({submitterDisplayName, amount}: SettledAfterAddedBankAccountParams) =>
             `${submitterDisplayName} añadió una cuenta bancaria. El pago de ${amount} se ha realizado.`,
         paidElsewhereWithAmount: ({payer, amount}: PaidElsewhereWithAmountParams) => `${payer} pagó ${amount} de otra forma`,
@@ -1129,6 +1133,10 @@ export default {
         year: 'Año',
         selectYear: 'Por favor, selecciona un año',
     },
+    focusModeUpdateModal: {
+        title: '¡Bienvenido al modo #concentración!',
+        prompt: 'Los mensajes leídos se ocultarán, a menos que tengan un punto verde, lo que significa que tienes que tomar una acción en ellos. Puedes cambiar esto en la configuración de tu cuenta ',
+    },
     notFound: {
         chatYouLookingForCannotBeFound: 'El chat que estás buscando no se pudo encontrar.',
         getMeOutOfHere: 'Sácame de aquí',
@@ -2432,19 +2440,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 ',
@@ -2460,4 +2468,39 @@ export default {
         },
         copyReferralLink: 'Copiar enlace de invitación',
     },
+    violations: {
+        allTagLevelsRequired: 'dummy.violations.allTagLevelsRequired',
+        autoReportedRejectedExpense: 'dummy.violations.autoReportedRejectedExpense',
+        billableExpense: 'dummy.violations.billableExpense',
+        cashExpenseWithNoReceipt: 'dummy.violations.cashExpenseWithNoReceipt',
+        categoryOutOfPolicy: 'dummy.violations.categoryOutOfPolicy',
+        conversionSurcharge: 'dummy.violations.conversionSurcharge',
+        customUnitOutOfPolicy: 'dummy.violations.customUnitOutOfPolicy',
+        duplicatedTransaction: 'dummy.violations.duplicatedTransaction',
+        fieldRequired: 'dummy.violations.fieldRequired',
+        futureDate: 'dummy.violations.futureDate',
+        invoiceMarkup: 'dummy.violations.invoiceMarkup',
+        maxAge: 'dummy.violations.maxAge',
+        missingCategory: 'dummy.violations.missingCategory',
+        missingComment: 'dummy.violations.missingComment',
+        missingTag: 'dummy.violations.missingTag',
+        modifiedAmount: 'dummy.violations.modifiedAmount',
+        modifiedDate: 'dummy.violations.modifiedDate',
+        nonExpensiworksExpense: 'dummy.violations.nonExpensiworksExpense',
+        overAutoApprovalLimit: 'dummy.violations.overAutoApprovalLimit',
+        overCategoryLimit: 'dummy.violations.overCategoryLimit',
+        overLimit: 'dummy.violations.overLimit',
+        overLimitAttendee: 'dummy.violations.overLimitAttendee',
+        perDayLimit: 'dummy.violations.perDayLimit',
+        receiptNotSmartScanned: 'dummy.violations.receiptNotSmartScanned',
+        receiptRequired: 'dummy.violations.receiptRequired',
+        rter: 'dummy.violations.rter',
+        smartscanFailed: 'dummy.violations.smartscanFailed',
+        someTagLevelsRequired: 'dummy.violations.someTagLevelsRequired',
+        tagOutOfPolicy: 'dummy.violations.tagOutOfPolicy',
+        taxAmountChanged: 'dummy.violations.taxAmountChanged',
+        taxOutOfPolicy: 'dummy.violations.taxOutOfPolicy',
+        taxRateChanged: 'dummy.violations.taxRateChanged',
+        taxRequired: 'dummy.violations.taxRequired',
+    },
 } satisfies EnglishTranslation;
diff --git a/src/languages/types.ts b/src/languages/types.ts
index a012ebdfb95b..9f66dc6f97ec 100644
--- a/src/languages/types.ts
+++ b/src/languages/types.ts
@@ -125,6 +125,8 @@ type PayerSettledParams = {amount: number | string};
 
 type WaitingOnBankAccountParams = {submitterDisplayName: string};
 
+type CanceledRequestParams = {amount: string; submitterDisplayName: string};
+
 type SettledAfterAddedBankAccountParams = {submitterDisplayName: string; amount: string};
 
 type PaidElsewhereWithAmountParams = {payer: string; amount: string};
@@ -185,7 +187,7 @@ type OOOEventSummaryFullDayParams = {summary: string; dayCount: number; date: st
 
 type OOOEventSummaryPartialDayParams = {summary: string; timePeriod: string; date: string};
 
-type ParentNavigationSummaryParams = {rootReportName: string; workspaceName: string};
+type ParentNavigationSummaryParams = {rootReportName?: string; workspaceName?: string};
 
 type SetTheRequestParams = {valueName: string; newValueToDisplay: string};
 
@@ -282,6 +284,7 @@ export type {
     ManagerApprovedParams,
     PayerSettledParams,
     WaitingOnBankAccountParams,
+    CanceledRequestParams,
     SettledAfterAddedBankAccountParams,
     PaidElsewhereWithAmountParams,
     PaidWithExpensifyWithAmountParams,
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
index cef7d7ef6a80..5e109afe8959 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
@@ -1,7 +1,7 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
 import ComposerProps from '@libs/ComposerUtils/types';
-import themeStyles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
-type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: typeof themeStyles) => void;
+type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: 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/KeyboardShortcut/isEnterWhileComposition.ts b/src/libs/KeyboardShortcut/isEnterWhileComposition.ts
index 51e198f1c2d1..a752f8a24811 100644
--- a/src/libs/KeyboardShortcut/isEnterWhileComposition.ts
+++ b/src/libs/KeyboardShortcut/isEnterWhileComposition.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import {NativeSyntheticEvent} from 'react-native';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
@@ -6,7 +7,7 @@ import CONST from '@src/CONST';
  * Check if the Enter key was pressed during IME confirmation (i.e. while the text is being composed).
  * See {@link https://en.wikipedia.org/wiki/Input_method}
  */
-const isEnterWhileComposition = (event: KeyboardEvent): boolean => {
+const isEnterWhileComposition = (event: KeyboardEvent | React.KeyboardEvent): boolean => {
     // if on mobile chrome, the enter key event is never fired when the enter key is pressed while composition.
     if (Browser.isMobileChrome()) {
         return false;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 4c610bc12099..de334635da54 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -20,6 +20,7 @@ import * as App from '@userActions/App';
 import * as Download from '@userActions/Download';
 import * as Modal from '@userActions/Modal';
 import * as PersonalDetails from '@userActions/PersonalDetails';
+import * as PriorityMode from '@userActions/PriorityMode';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import Timing from '@userActions/Timing';
@@ -194,6 +195,8 @@ function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, sessio
             App.reconnectApp(lastUpdateIDAppliedToClient);
         }
 
+        PriorityMode.autoSwitchToFocusMode();
+
         App.setUpPoliciesAndNavigate(session);
 
         App.redirectThirdPartyDesktopSignIn();
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
index cbb2e62161f3..7c0b9ef4fc8c 100644
--- a/src/libs/Navigation/NavigationRoot.tsx
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -1,12 +1,9 @@
 import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} from '@react-navigation/native';
 import React, {useEffect, useMemo, useRef} from 'react';
-import {ColorValue} from 'react-native';
-import {interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useFlipper from '@hooks/useFlipper';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Log from '@libs/Log';
-import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
 import AppNavigator from './AppNavigator';
 import linkingConfig from './linkingConfig';
@@ -42,8 +39,8 @@ function parseAndLogRoute(state: NavigationState) {
 
 function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
     useFlipper(navigationRef);
-    const theme = useTheme();
     const firstRenderRef = useRef(true);
+    const theme = useTheme();
 
     const currentReportIDValue = useCurrentReportID();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -82,46 +79,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
         navigationRef.resetRoot(navigationRef.getRootState());
     }, [isSmallScreenWidth, authenticated]);
 
-    const prevStatusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarBackgroundColor = useRef(theme.appBG);
-    const statusBarAnimation = useSharedValue(0);
-
-    const updateStatusBarBackgroundColor = (color: ColorValue) => StatusBar.setBackgroundColor(color);
-    useAnimatedReaction(
-        () => statusBarAnimation.value,
-        (current, previous) => {
-            // Do not run if either of the animated value is null
-            // or previous animated value is greater than or equal to the current one
-            if (previous === null || current === null || current <= previous) {
-                return;
-            }
-            const color = interpolateColor(statusBarAnimation.value, [0, 1], [prevStatusBarBackgroundColor.current, statusBarBackgroundColor.current]);
-            runOnJS(updateStatusBarBackgroundColor)(color);
-        },
-    );
-
-    const animateStatusBarBackgroundColor = () => {
-        const currentRoute = navigationRef.getCurrentRoute();
-
-        const backgroundColorFromRoute =
-            currentRoute?.params && 'backgroundColor' in currentRoute.params && typeof currentRoute.params.backgroundColor === 'string' && currentRoute.params.backgroundColor;
-        const backgroundColorFallback = currentRoute?.name ? theme.PAGE_BACKGROUND_COLORS[currentRoute.name] || theme.appBG : theme.appBG;
-
-        // It's possible for backgroundColorFromRoute to be empty string, so we must use "||" to fallback to backgroundColorFallback.
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        const currentScreenBackgroundColor = backgroundColorFromRoute || backgroundColorFallback;
-
-        prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
-        statusBarBackgroundColor.current = currentScreenBackgroundColor;
-
-        if (currentScreenBackgroundColor === theme.appBG && prevStatusBarBackgroundColor.current === theme.appBG) {
-            return;
-        }
-
-        statusBarAnimation.value = 0;
-        statusBarAnimation.value = withDelay(300, withTiming(1));
-    };
-
     const handleStateChange = (state: NavigationState | undefined) => {
         if (!state) {
             return;
@@ -132,7 +89,6 @@ function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
             currentReportIDValue?.updateCurrentReportID(state);
         }, 0);
         parseAndLogRoute(state);
-        animateStatusBarBackgroundColor();
     };
 
     return (
diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts
index 1a4aa2d0cfb7..8be8dd1ecfae 100644
--- a/src/libs/Navigation/linkTo.ts
+++ b/src/libs/Navigation/linkTo.ts
@@ -89,7 +89,7 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
             action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;
 
             // If this action is navigating to the RightModalNavigator and the last route on the root navigator is not RightModalNavigator then push
-        } else if (action.payload.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && rootState.routes.at(-1)?.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+        } else if (action.payload.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && rootState?.routes?.at(-1)?.name !== NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
             action.type = CONST.NAVIGATION.ACTION_TYPE.PUSH;
         }
     }
diff --git a/src/libs/Navigation/linkingConfig.ts b/src/libs/Navigation/linkingConfig.ts
index bb06bf7e4528..92a04778b9a6 100644
--- a/src/libs/Navigation/linkingConfig.ts
+++ b/src/libs/Navigation/linkingConfig.ts
@@ -171,7 +171,7 @@ const linkingConfig: LinkingOptions<RootStackParamList> = {
                                 path: ROUTES.SETTINGS_LOUNGE_ACCESS,
                             },
                             Settings_NewContactMethod: {
-                                path: ROUTES.SETTINGS_NEW_CONTACT_METHOD,
+                                path: ROUTES.SETTINGS_NEW_CONTACT_METHOD.route,
                                 exact: true,
                             },
                             Settings_PersonalDetails_Initial: {
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.js b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
similarity index 77%
rename from src/libs/Notification/LocalNotification/BrowserNotifications.js
rename to src/libs/Notification/LocalNotification/BrowserNotifications.ts
index 20d9be48d915..dd07ddbb5e33 100644
--- a/src/libs/Notification/LocalNotification/BrowserNotifications.js
+++ b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
@@ -1,18 +1,16 @@
 // Web and desktop implementation only. Do not import for direct use. Use LocalNotification.
-import _ from 'underscore';
 import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.png';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as AppUpdate from '@userActions/AppUpdate';
 import focusApp from './focusApp';
+import {PushParams, ReportCommentParams} from './types';
 
 const DEFAULT_DELAY = 4000;
 
 /**
  * Checks if the user has granted permission to show browser notifications
- *
- * @return {Promise}
  */
-function canUseBrowserNotifications() {
+function canUseBrowserNotifications(): Promise<boolean> {
     return new Promise((resolve) => {
         // They have no browser notifications so we can't use this feature
         if (!window.Notification) {
@@ -36,18 +34,9 @@ function canUseBrowserNotifications() {
 /**
  * Light abstraction around browser push notifications.
  * Checks for permission before determining whether to send.
- *
- * @param {Object} params
- * @param {String} params.title
- * @param {String} params.body
- * @param {String} [params.icon] Path to icon
- * @param {Number} [params.delay]
- * @param {Function} [params.onClick]
- * @param {String} [params.tag]
- *
- * @return {Promise} - resolves with Notification object or undefined
+ * @return resolves with Notification object or undefined
  */
-function push({title, body, delay = DEFAULT_DELAY, onClick = () => {}, tag = '', icon}) {
+function push({title, body, delay = DEFAULT_DELAY, onClick = () => {}, tag = '', icon}: PushParams): Promise<void | Notification> {
     return new Promise((resolve) => {
         if (!title || !body) {
             throw new Error('BrowserNotification must include title and body parameter.');
@@ -62,7 +51,7 @@ function push({title, body, delay = DEFAULT_DELAY, onClick = () => {}, tag = '',
             const notification = new Notification(title, {
                 body,
                 tag,
-                icon,
+                icon: String(icon),
             });
 
             // If we pass in a delay param greater than 0 the notification
@@ -91,24 +80,19 @@ function push({title, body, delay = DEFAULT_DELAY, onClick = () => {}, tag = '',
 export default {
     /**
      * Create a report comment notification
-     *
-     * @param {Object} params
-     * @param {Object} params.report
-     * @param {Object} params.reportAction
-     * @param {Function} params.onClick
-     * @param {Boolean} usesIcon true if notification uses right circular icon
+     * @param usesIcon true if notification uses right circular icon
      */
-    pushReportCommentNotification({report, reportAction, onClick}, usesIcon = false) {
-        let title;
-        let body;
+    pushReportCommentNotification({report, reportAction, onClick}: ReportCommentParams, usesIcon = false) {
+        let title: string | undefined;
+        let body: string | undefined;
 
         const isChatRoom = ReportUtils.isChatRoom(report);
 
         const {person, message} = reportAction;
-        const plainTextPerson = _.map(person, (f) => f.text).join();
+        const plainTextPerson = person?.map((f) => f.text).join();
 
         // Specifically target the comment part of the message
-        const plainTextMessage = (_.find(message, (f) => f.type === 'COMMENT') || {}).text;
+        const plainTextMessage = message?.find((f) => f.type === 'COMMENT')?.text;
 
         if (isChatRoom) {
             const roomName = ReportUtils.getReportName(report);
@@ -120,7 +104,7 @@ export default {
         }
 
         push({
-            title,
+            title: title ?? '',
             body,
             delay: 0,
             onClick,
@@ -128,9 +112,9 @@ export default {
         });
     },
 
-    pushModifiedExpenseNotification({reportAction, onClick}, usesIcon = false) {
+    pushModifiedExpenseNotification({reportAction, onClick}: ReportCommentParams, usesIcon = false) {
         push({
-            title: _.map(reportAction.person, (f) => f.text).join(', '),
+            title: reportAction.person?.map((f) => f.text).join(', ') ?? '',
             body: ReportUtils.getModifiedExpenseMessage(reportAction),
             delay: 0,
             onClick,
diff --git a/src/libs/Notification/LocalNotification/focusApp/index.desktop.js b/src/libs/Notification/LocalNotification/focusApp/index.desktop.ts
similarity index 59%
rename from src/libs/Notification/LocalNotification/focusApp/index.desktop.js
rename to src/libs/Notification/LocalNotification/focusApp/index.desktop.ts
index f00c72dc1af8..2b6f01457f44 100644
--- a/src/libs/Notification/LocalNotification/focusApp/index.desktop.js
+++ b/src/libs/Notification/LocalNotification/focusApp/index.desktop.ts
@@ -1,5 +1,8 @@
 import ELECTRON_EVENTS from '../../../../../desktop/ELECTRON_EVENTS';
+import FocusApp from './types';
 
-export default () => {
+const focusApp: FocusApp = () => {
     window.electron.send(ELECTRON_EVENTS.REQUEST_FOCUS_APP);
 };
+
+export default focusApp;
diff --git a/src/libs/Notification/LocalNotification/focusApp/index.ts b/src/libs/Notification/LocalNotification/focusApp/index.ts
new file mode 100644
index 000000000000..8504fde1bcb2
--- /dev/null
+++ b/src/libs/Notification/LocalNotification/focusApp/index.ts
@@ -0,0 +1,6 @@
+import FocusApp from './types';
+
+// On web this is up to the browser that shows the notifications
+const focusApp: FocusApp = () => {};
+
+export default focusApp;
diff --git a/src/libs/Notification/LocalNotification/focusApp/index.website.js b/src/libs/Notification/LocalNotification/focusApp/index.website.js
deleted file mode 100644
index ce7439d94cc3..000000000000
--- a/src/libs/Notification/LocalNotification/focusApp/index.website.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// On web this is up to the browser that shows the notifications
-export default () => {};
diff --git a/src/libs/Notification/LocalNotification/focusApp/types.ts b/src/libs/Notification/LocalNotification/focusApp/types.ts
new file mode 100644
index 000000000000..534b7500fc71
--- /dev/null
+++ b/src/libs/Notification/LocalNotification/focusApp/types.ts
@@ -0,0 +1,3 @@
+type FocusApp = () => void;
+
+export default FocusApp;
diff --git a/src/libs/Notification/LocalNotification/index.desktop.js b/src/libs/Notification/LocalNotification/index.desktop.ts
similarity index 64%
rename from src/libs/Notification/LocalNotification/index.desktop.js
rename to src/libs/Notification/LocalNotification/index.desktop.ts
index a70141e7d9db..1576fefe2118 100644
--- a/src/libs/Notification/LocalNotification/index.desktop.js
+++ b/src/libs/Notification/LocalNotification/index.desktop.ts
@@ -1,12 +1,7 @@
 import BrowserNotifications from './BrowserNotifications';
+import {LocalNotificationModule, ReportCommentParams} from './types';
 
-/**
- * @param {Object} options
- * @param {Object} options.report
- * @param {Object} options.reportAction
- * @param {Function} options.onClick
- */
-function showCommentNotification({report, reportAction, onClick}) {
+function showCommentNotification({report, reportAction, onClick}: ReportCommentParams) {
     BrowserNotifications.pushReportCommentNotification({report, reportAction, onClick});
 }
 
@@ -14,18 +9,14 @@ function showUpdateAvailableNotification() {
     BrowserNotifications.pushUpdateAvailableNotification();
 }
 
-/**
- * @param {Object} options
- * @param {Object} options.report
- * @param {Object} options.reportAction
- * @param {Function} options.onClick
- */
-function showModifiedExpenseNotification({report, reportAction, onClick}) {
+function showModifiedExpenseNotification({report, reportAction, onClick}: ReportCommentParams) {
     BrowserNotifications.pushModifiedExpenseNotification({report, reportAction, onClick});
 }
 
-export default {
+const LocalNotification: LocalNotificationModule = {
     showCommentNotification,
     showUpdateAvailableNotification,
     showModifiedExpenseNotification,
 };
+
+export default LocalNotification;
diff --git a/src/libs/Notification/LocalNotification/index.native.js b/src/libs/Notification/LocalNotification/index.native.ts
similarity index 61%
rename from src/libs/Notification/LocalNotification/index.native.js
rename to src/libs/Notification/LocalNotification/index.native.ts
index 1f1771e619a5..b23378b6875a 100644
--- a/src/libs/Notification/LocalNotification/index.native.js
+++ b/src/libs/Notification/LocalNotification/index.native.ts
@@ -1,6 +1,10 @@
+import {LocalNotificationModule} from './types';
+
 // Local Notifications are not currently supported on mobile so we'll just noop here.
-export default {
+const LocalNotification: LocalNotificationModule = {
     showCommentNotification: () => {},
     showUpdateAvailableNotification: () => {},
     showModifiedExpenseNotification: () => {},
 };
+
+export default LocalNotification;
diff --git a/src/libs/Notification/LocalNotification/index.website.js b/src/libs/Notification/LocalNotification/index.ts
similarity index 64%
rename from src/libs/Notification/LocalNotification/index.website.js
rename to src/libs/Notification/LocalNotification/index.ts
index 0ecb8bcbb81d..69c1ccaacf4e 100644
--- a/src/libs/Notification/LocalNotification/index.website.js
+++ b/src/libs/Notification/LocalNotification/index.ts
@@ -1,12 +1,7 @@
 import BrowserNotifications from './BrowserNotifications';
+import {LocalNotificationModule, ReportCommentParams} from './types';
 
-/**
- * @param {Object} options
- * @param {Object} options.report
- * @param {Object} options.reportAction
- * @param {Function} options.onClick
- */
-function showCommentNotification({report, reportAction, onClick}) {
+function showCommentNotification({report, reportAction, onClick}: ReportCommentParams) {
     BrowserNotifications.pushReportCommentNotification({report, reportAction, onClick}, true);
 }
 
@@ -14,18 +9,14 @@ function showUpdateAvailableNotification() {
     BrowserNotifications.pushUpdateAvailableNotification();
 }
 
-/**
- * @param {Object} options
- * @param {Object} options.report
- * @param {Object} options.reportAction
- * @param {Function} options.onClick
- */
-function showModifiedExpenseNotification({report, reportAction, onClick}) {
+function showModifiedExpenseNotification({report, reportAction, onClick}: ReportCommentParams) {
     BrowserNotifications.pushModifiedExpenseNotification({report, reportAction, onClick}, true);
 }
 
-export default {
+const LocalNotification: LocalNotificationModule = {
     showCommentNotification,
     showUpdateAvailableNotification,
     showModifiedExpenseNotification,
 };
+
+export default LocalNotification;
diff --git a/src/libs/Notification/LocalNotification/types.ts b/src/libs/Notification/LocalNotification/types.ts
new file mode 100644
index 000000000000..25db8b080e2b
--- /dev/null
+++ b/src/libs/Notification/LocalNotification/types.ts
@@ -0,0 +1,25 @@
+import {ImageSourcePropType} from 'react-native';
+import {Report, ReportAction} from '@src/types/onyx';
+
+type PushParams = {
+    title: string;
+    body?: string;
+    icon?: string | ImageSourcePropType;
+    delay?: number;
+    onClick?: () => void;
+    tag?: string;
+};
+
+type ReportCommentParams = {
+    report: Report;
+    reportAction: ReportAction;
+    onClick: () => void;
+};
+
+type LocalNotificationModule = {
+    showCommentNotification: (reportCommentParams: ReportCommentParams) => void;
+    showUpdateAvailableNotification: () => void;
+    showModifiedExpenseNotification: (reportCommentParams: ReportCommentParams) => void;
+};
+
+export type {PushParams, ReportCommentParams, LocalNotificationModule};
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index 34d4fccb54bc..c8571f4d75d2 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -152,7 +152,7 @@ function getAvatarsForAccountIDs(accountIDs, personalDetails, defaultValues = {}
  * Returns the personal details for an array of accountIDs
  *
  * @param {Array} accountIDs
- * @param {Object} personalDetails
+ * @param {Object | null} personalDetails
  * @returns {Object} – keys of the object are emails, values are PersonalDetails objects.
  */
 function getPersonalDetailsForAccountIDs(accountIDs, personalDetails) {
@@ -350,11 +350,11 @@ function getAllReportErrors(report, reportActions) {
     if (parentReportAction.actorAccountID === currentUserAccountID && ReportActionUtils.isTransactionThread(parentReportAction)) {
         const transactionID = lodashGet(parentReportAction, ['originalMessage', 'IOUTransactionID'], '');
         const transaction = allTransactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] || {};
-        if (TransactionUtils.hasMissingSmartscanFields(transaction)) {
+        if (TransactionUtils.hasMissingSmartscanFields(transaction) && !ReportUtils.isSettled(transaction.reportID)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
     } else if ((ReportUtils.isIOUReport(report) || ReportUtils.isExpenseReport(report)) && report.ownerAccountID === currentUserAccountID) {
-        if (ReportUtils.hasMissingSmartscanFields(report.reportID)) {
+        if (ReportUtils.hasMissingSmartscanFields(report.reportID) && !ReportUtils.isSettled(report.reportID)) {
             _.extend(reportActionErrors, {smartscan: ErrorUtils.getMicroSecondOnyxError('report.genericSmartscanFailureMessage')});
         }
     } else if (ReportUtils.hasRequestError(_.values(reportActions))) {
@@ -399,6 +399,8 @@ function getLastMessageTextForReport(report) {
         lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReport, true, ReportUtils.isChatReport(report));
     } else if (ReportActionUtils.isReimbursementQueuedAction(lastReportAction)) {
         lastMessageTextFromReport = ReportUtils.getReimbursementQueuedActionMessage(lastReportAction, report);
+    } else if (ReportActionUtils.isReimbursementDeQueuedAction(lastReportAction)) {
+        lastMessageTextFromReport = ReportUtils.getReimbursementDeQueuedActionMessage(report);
     } else if (ReportActionUtils.isDeletedParentAction(lastReportAction) && ReportUtils.isChatReport(report)) {
         lastMessageTextFromReport = ReportUtils.getDeletedParentActionMessageForChatReport(lastReportAction);
     } else if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml, translationKey: report.lastMessageTranslationKey})) {
@@ -747,7 +749,7 @@ function sortTags(tags) {
 }
 
 /**
- * Builds the options for the category tree hierarchy via indents
+ * Builds the options for the tree hierarchy via indents
  *
  * @param {Object[]} options - an initial object array
  * @param {Boolean} options[].enabled - a flag to enable/disable option in a list
@@ -755,7 +757,7 @@ function sortTags(tags) {
  * @param {Boolean} [isOneLine] - a flag to determine if text should be one line
  * @returns {Array<Object>}
  */
-function getCategoryOptionTree(options, isOneLine = false) {
+function getIndentedOptionTree(options, isOneLine = false) {
     const optionCollection = new Map();
 
     _.each(options, (option) => {
@@ -823,7 +825,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: false,
             indexOffset,
-            data: getCategoryOptionTree(selectedOptions, true),
+            data: getIndentedOptionTree(selectedOptions, true),
         });
 
         return categorySections;
@@ -837,7 +839,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: true,
             indexOffset,
-            data: getCategoryOptionTree(searchCategories, true),
+            data: getIndentedOptionTree(searchCategories, true),
         });
 
         return categorySections;
@@ -849,7 +851,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: false,
             indexOffset,
-            data: getCategoryOptionTree(enabledCategories),
+            data: getIndentedOptionTree(enabledCategories),
         });
 
         return categorySections;
@@ -861,7 +863,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: '',
             shouldShow: true,
             indexOffset,
-            data: getCategoryOptionTree(selectedOptions, true),
+            data: getIndentedOptionTree(selectedOptions, true),
         });
 
         indexOffset += selectedOptions.length;
@@ -884,7 +886,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
             title: Localize.translateLocal('common.recent'),
             shouldShow: true,
             indexOffset,
-            data: getCategoryOptionTree(cutRecentlyUsedCategories, true),
+            data: getIndentedOptionTree(cutRecentlyUsedCategories, true),
         });
 
         indexOffset += filteredRecentlyUsedCategories.length;
@@ -897,7 +899,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
         title: Localize.translateLocal('common.all'),
         shouldShow: true,
         indexOffset,
-        data: getCategoryOptionTree(filteredCategories),
+        data: getIndentedOptionTree(filteredCategories),
     });
 
     return categorySections;
@@ -912,13 +914,7 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
  * @returns {Array<Object>}
  */
 function getTagsOptions(tags) {
-    return _.map(tags, (tag) => ({
-        text: tag.name,
-        keyForList: tag.name,
-        searchText: tag.name,
-        tooltipText: tag.name,
-        isDisabled: !tag.enabled,
-    }));
+    return getIndentedOptionTree(tags);
 }
 
 /**
@@ -1224,7 +1220,7 @@ function getOptions(
     }
 
     // Exclude the current user from the personal details list
-    const optionsToExclude = [{login: currentUserLogin}];
+    const optionsToExclude = [{login: currentUserLogin}, {login: CONST.EMAIL.NOTIFICATIONS}];
 
     // If we're including selected options from the search results, we only want to exclude them if the search input is empty
     // This is because on certain pages, we show the selected options at the top when the search input is empty
@@ -1246,6 +1242,11 @@ function getOptions(
                 break;
             }
 
+            // Skip notifications@expensify.com
+            if (reportOption.login === CONST.EMAIL.NOTIFICATIONS) {
+                continue;
+            }
+
             const isCurrentUserOwnedPolicyExpenseChatThatCouldShow =
                 reportOption.isPolicyExpenseChat && reportOption.ownerAccountID === currentUserAccountID && includeOwnedWorkspaceChats && !reportOption.isArchivedRoom;
 
@@ -1756,7 +1757,7 @@ export {
     getEnabledCategoriesCount,
     hasEnabledOptions,
     sortCategories,
-    getCategoryOptionTree,
+    getIndentedOptionTree,
     formatMemberForList,
     formatSectionsFromSearchTerm,
 };
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index cbeb44eb6bbc..488041d2061f 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,5 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
-import styles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
@@ -40,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco
 /**
  * Get the PaymentMethods list
  */
-function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: typeof styles): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: ThemeStyles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {
@@ -50,7 +50,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
         }
 
         const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({
-            bankName: bankAccount?.accountData?.additionalData?.bankName ?? '',
+            bankName: bankAccount?.accountData?.additionalData?.bankName,
             isCard: false,
             themeStyles,
         });
@@ -66,7 +66,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
     });
 
     Object.values(fundList).forEach((card) => {
-        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank ?? '', isCard: true, themeStyles});
+        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank, isCard: true, themeStyles});
         combinedPaymentMethods.push({
             ...card,
             description: getPaymentMethodDescription(card?.accountType, card.accountData),
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index bd475a57954e..f58021e17064 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -109,6 +109,10 @@ function isChannelLogMemberAction(reportAction: OnyxEntry<ReportAction>) {
     );
 }
 
+function isReimbursementDeQueuedAction(reportAction: OnyxEntry<ReportAction>): boolean {
+    return reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTDEQUEUED;
+}
+
 /**
  * Returns whether the comment is a thread parent message/the first message in a thread
  */
@@ -698,6 +702,7 @@ export {
     hasRequestFromCurrentAccount,
     getFirstVisibleReportActionID,
     isChannelLogMemberAction,
+    isReimbursementDeQueuedAction,
 };
 
 export type {LastVisibleMessage};
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 80be50ee227e..c08d74246fea 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1,20 +1,22 @@
 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';
 import lodashIsEqual from 'lodash/isEqual';
+import React from 'react';
 import Onyx, {OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
 import CONST from '@src/CONST';
-import {TranslationPaths} from '@src/languages/types';
+import {ParentNavigationSummaryParams, 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';
@@ -114,6 +116,7 @@ type OptimisticExpenseReport = Pick<
     | 'total'
     | 'notificationPreference'
     | 'parentReportID'
+    | 'lastVisibleActionCreated'
 >;
 
 type OptimisticIOUReportAction = Pick<
@@ -269,6 +272,7 @@ type OptimisticTaskReport = Pick<
     | 'stateNum'
     | 'statusNum'
     | 'notificationPreference'
+    | 'lastVisibleActionCreated'
 >;
 
 type TransactionDetails =
@@ -307,6 +311,7 @@ type OptimisticIOUReport = Pick<
     | 'notificationPreference'
     | 'parentReportID'
     | 'statusNum'
+    | 'lastVisibleActionCreated'
 >;
 type DisplayNameWithTooltips = Array<Pick<PersonalDetails, 'accountID' | 'pronouns' | 'displayName' | 'login' | 'avatar'>>;
 
@@ -658,7 +663,7 @@ function isUserCreatedPolicyRoom(report: OnyxEntry<Report>): boolean {
  * Whether the provided report is a Policy Expense chat.
  */
 function isPolicyExpenseChat(report: OnyxEntry<Report>): boolean {
-    return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT;
+    return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT || (report?.isPolicyExpenseChat ?? false);
 }
 
 /** Wether the provided report belongs to a Control policy and is an epxense chat
@@ -1501,6 +1506,16 @@ function getReimbursementQueuedActionMessage(reportAction: OnyxEntry<ReportActio
     return Localize.translateLocal(messageKey, {submitterDisplayName});
 }
 
+/**
+ * Returns the preview message for `REIMBURSEMENTDEQUEUED` action
+ */
+function getReimbursementDeQueuedActionMessage(report: OnyxEntry<Report>): string {
+    const submitterDisplayName = getDisplayNameForParticipant(report?.ownerAccountID, true) ?? '';
+    const amount = CurrencyUtils.convertToDisplayString(report?.total ?? 0, report?.currency);
+
+    return Localize.translateLocal('iou.canceledRequest', {submitterDisplayName, amount});
+}
+
 /**
  * Returns the last visible message for a given report after considering the given optimistic actions
  *
@@ -1704,6 +1719,10 @@ function getMoneyRequestReportName(report: OnyxEntry<Report>, policy: OnyxEntry<
         return `${payerPaidAmountMessage} • ${Localize.translateLocal('iou.pending')}`;
     }
 
+    if (report?.isCancelledIOU) {
+        return `${payerPaidAmountMessage} • ${Localize.translateLocal('iou.canceled')}`;
+    }
+
     if (hasNonReimbursableTransactions(report?.reportID)) {
         return Localize.translateLocal('iou.payerSpentAmount', {payer: payerName, amount: formattedAmount});
     }
@@ -1878,7 +1897,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');
@@ -2308,7 +2328,7 @@ function getChatRoomSubtitle(report: OnyxEntry<Report>): string | undefined {
 /**
  * Gets the parent navigation subtitle for the report
  */
-function getParentNavigationSubtitle(report: OnyxEntry<Report>): ReportAndWorkspaceName | EmptyObject {
+function getParentNavigationSubtitle(report: OnyxEntry<Report>): ParentNavigationSummaryParams {
     if (isThread(report)) {
         const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
         const {rootReportName, workspaceName} = getRootReportAndWorkspaceName(parentReport);
@@ -2551,6 +2571,7 @@ function buildOptimisticIOUReport(payeeAccountID: number, payerAccountID: number
         reportName: `${payerEmail} owes ${formattedTotal}`,
         notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
         parentReportID: chatReportID,
+        lastVisibleActionCreated: DateUtils.getDBTime(),
     };
 }
 
@@ -2597,6 +2618,7 @@ function buildOptimisticExpenseReport(chatReportID: string, policyID: string, pa
         total: storedTotal,
         notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
         parentReportID: chatReportID,
+        lastVisibleActionCreated: DateUtils.getDBTime(),
     };
 }
 
@@ -3286,6 +3308,7 @@ function buildOptimisticTaskReport(
         stateNum: CONST.REPORT.STATE_NUM.OPEN,
         statusNum: CONST.REPORT.STATUS.OPEN,
         notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS,
+        lastVisibleActionCreated: DateUtils.getDBTime(),
     };
 }
 
@@ -3425,6 +3448,8 @@ function shouldReportBeInOptionList(
         report?.reportName === undefined ||
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         report?.isHidden ||
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        report?.participantAccountIDs?.includes(CONST.ACCOUNT_ID.NOTIFICATIONS) ||
         (report?.participantAccountIDs?.length === 0 &&
             !isChatThread(report) &&
             !isPublicRoom(report) &&
@@ -4262,6 +4287,38 @@ function hasRequestError(reportActions: ReportAction[]) {
     });
 }
 
+function shouldAutoFocusOnKeyPress(event: KeyboardEvent): boolean {
+    if (event.key.length > 1) {
+        return false;
+    }
+
+    // If a key is pressed in combination with Meta, Control or Alt do not focus
+    if (event.ctrlKey || event.metaKey) {
+        return false;
+    }
+
+    if (event.code === 'Space') {
+        return false;
+    }
+
+    return true;
+}
+
+/**
+ * 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,
@@ -4422,12 +4479,15 @@ export {
     shouldUseFullTitleToDisplay,
     parseReportRouteParams,
     getReimbursementQueuedActionMessage,
+    getReimbursementDeQueuedActionMessage,
     getPersonalDetailsForAccountID,
     getChannelLogMemberMessage,
     getRoom,
     shouldDisableWelcomeMessage,
+    navigateToPrivateNotes,
     canEditWriteCapability,
     hasRequestError,
+    shouldAutoFocusOnKeyPress,
 };
 
 export type {OptionData};
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/UnreadIndicatorUpdater/index.js b/src/libs/UnreadIndicatorUpdater/index.js
index bfa0cd911177..ee686444abfd 100644
--- a/src/libs/UnreadIndicatorUpdater/index.js
+++ b/src/libs/UnreadIndicatorUpdater/index.js
@@ -1,38 +1,29 @@
-import {InteractionManager} from 'react-native';
 import Onyx from 'react-native-onyx';
 import _ from 'underscore';
 import * as ReportUtils from '@libs/ReportUtils';
-import CONST from '@src/CONST';
+import Navigation, {navigationRef} from '@navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import updateUnread from './updateUnread/index';
 
-let previousUnreadCount = 0;
+let allReports = [];
+
+const triggerUnreadUpdate = () => {
+    const currentReportID = navigationRef.isReady() ? Navigation.getTopmostReportId() : '';
+
+    // We want to keep notification count consistent with what can be accessed from the LHN list
+    const unreadReports = _.filter(allReports, (report) => ReportUtils.isUnread(report) && ReportUtils.shouldReportBeInOptionList(report, currentReportID));
+    updateUnread(_.size(unreadReports));
+};
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (reportsFromOnyx) => {
-        if (!reportsFromOnyx) {
-            return;
-        }
-
-        /**
-         * We need to wait until after interactions have finished to update the unread count because otherwise
-         * the unread count will be updated while the interactions/animations are in progress and we don't want
-         * to put more work on the main thread.
-         *
-         * For eg. On web we are manipulating DOM and it makes it a better candidate to wait until after interactions
-         * have finished.
-         *
-         * More info: https://reactnative.dev/docs/interactionmanager
-         */
-        InteractionManager.runAfterInteractions(() => {
-            const unreadReports = _.filter(reportsFromOnyx, (report) => ReportUtils.isUnread(report) && report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN);
-            const unreadReportsCount = _.size(unreadReports);
-            if (previousUnreadCount !== unreadReportsCount) {
-                previousUnreadCount = unreadReportsCount;
-                updateUnread(unreadReportsCount);
-            }
-        });
+        allReports = reportsFromOnyx;
+        triggerUnreadUpdate();
     },
 });
+
+navigationRef.addListener('state', () => {
+    triggerUnreadUpdate();
+});
diff --git a/src/libs/UpdateMultilineInputRange/index.js b/src/libs/UpdateMultilineInputRange/index.js
index 66fb1889be21..7de700fe7636 100644
--- a/src/libs/UpdateMultilineInputRange/index.js
+++ b/src/libs/UpdateMultilineInputRange/index.js
@@ -1,3 +1,5 @@
+import * as Browser from '@libs/Browser';
+
 /**
  * Place the cursor at the end of the value (if there is a value in the input).
  *
@@ -10,7 +12,6 @@
  * @param {Object} input the input element
  * @param {boolean} shouldAutoFocus
  */
-// eslint-disable-next-line no-unused-vars
 export default function updateMultilineInputRange(input, shouldAutoFocus = true) {
     if (!input) {
         return;
@@ -18,7 +19,14 @@ export default function updateMultilineInputRange(input, shouldAutoFocus = true)
 
     if (input.value && input.setSelectionRange) {
         const length = input.value.length;
-        input.setSelectionRange(length, length);
+
+        // For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
+        // and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
+        // so we need to ensure that it is only updated after focus.
+        const shouldSetSelection = !(Browser.isMobileSafari() && !shouldAutoFocus);
+        if (shouldSetSelection) {
+            input.setSelectionRange(length, length);
+        }
         // eslint-disable-next-line no-param-reassign
         input.scrollTop = input.scrollHeight;
     }
diff --git a/src/libs/UserUtils.ts b/src/libs/UserUtils.ts
index d091cca57df4..29a43bcf711d 100644
--- a/src/libs/UserUtils.ts
+++ b/src/libs/UserUtils.ts
@@ -105,22 +105,22 @@ function getDefaultAvatarURL(accountID: string | number = '', isNewDot = false):
 
 /**
  * Given a user's avatar path, returns true if user doesn't have an avatar or if URL points to a default avatar
- * @param [avatarURL] - the avatar source from user's personalDetails
+ * @param avatarSource - the avatar source from user's personalDetails
  */
-function isDefaultAvatar(avatarURL?: string | React.FC<SvgProps>): boolean {
-    if (typeof avatarURL === 'string') {
-        if (avatarURL.includes('images/avatars/avatar_') || avatarURL.includes('images/avatars/default-avatar_') || avatarURL.includes('images/avatars/user/default')) {
+function isDefaultAvatar(avatarSource?: AvatarSource): boolean {
+    if (typeof avatarSource === 'string') {
+        if (avatarSource.includes('images/avatars/avatar_') || avatarSource.includes('images/avatars/default-avatar_') || avatarSource.includes('images/avatars/user/default')) {
             return true;
         }
 
         // We use a hardcoded "default" Concierge avatar
-        if (avatarURL === CONST.CONCIERGE_ICON_URL_2021 || avatarURL === CONST.CONCIERGE_ICON_URL) {
+        if (avatarSource === CONST.CONCIERGE_ICON_URL_2021 || avatarSource === CONST.CONCIERGE_ICON_URL) {
             return true;
         }
     }
 
-    if (!avatarURL) {
-        // If null URL, we should also use a default avatar
+    if (!avatarSource) {
+        // If null source, we should also use a default avatar
         return true;
     }
 
@@ -128,14 +128,14 @@ function isDefaultAvatar(avatarURL?: string | React.FC<SvgProps>): boolean {
 }
 
 /**
- * Provided a source URL, if source is a default avatar, return the associated SVG.
- * Otherwise, return the URL pointing to a user-uploaded avatar.
+ * Provided an avatar source, if source is a default avatar, return the associated SVG.
+ * Otherwise, return the URL or SVG pointing to the user-uploaded avatar.
  *
- * @param avatarURL - the avatar source from user's personalDetails
+ * @param avatarSource - the avatar source from user's personalDetails
  * @param accountID - the accountID of the user
  */
-function getAvatar(avatarURL: AvatarSource, accountID: number): AvatarSource {
-    return isDefaultAvatar(avatarURL) ? getDefaultAvatar(accountID) : avatarURL;
+function getAvatar(avatarSource: AvatarSource, accountID?: number): AvatarSource {
+    return isDefaultAvatar(avatarSource) ? getDefaultAvatar(accountID) : avatarSource;
 }
 
 /**
@@ -153,8 +153,8 @@ function getAvatarUrl(avatarURL: string, accountID: number): string {
  * Avatars uploaded by users will have a _128 appended so that the asset server returns a small version.
  * This removes that part of the URL so the full version of the image can load.
  */
-function getFullSizeAvatar(avatarURL: string, accountID: number): AvatarSource {
-    const source = getAvatar(avatarURL, accountID);
+function getFullSizeAvatar(avatarSource: AvatarSource, accountID: number): AvatarSource {
+    const source = getAvatar(avatarSource, accountID);
     if (typeof source !== 'string') {
         return source;
     }
@@ -165,8 +165,8 @@ function getFullSizeAvatar(avatarURL: string, accountID: number): AvatarSource {
  * Small sized avatars end with _128.<file-type>. This adds the _128 at the end of the
  * source URL (before the file type) if it doesn't exist there already.
  */
-function getSmallSizeAvatar(avatarURL: string, accountID: number): AvatarSource {
-    const source = getAvatar(avatarURL, accountID);
+function getSmallSizeAvatar(avatarSource: AvatarSource, accountID?: number): AvatarSource {
+    const source = getAvatar(avatarSource, accountID);
     if (typeof source !== 'string') {
         return source;
     }
diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts
index 388020bc0d6d..0adacac4035a 100644
--- a/src/libs/ValidationUtils.ts
+++ b/src/libs/ValidationUtils.ts
@@ -30,17 +30,6 @@ function validateCardNumber(value: string): boolean {
     return sum % 10 === 0;
 }
 
-/**
- * Validating that this is a valid address (PO boxes are not allowed)
- */
-function isValidAddress(value: string): boolean {
-    if (!CONST.REGEX.ANY_VALUE.test(value)) {
-        return false;
-    }
-
-    return !CONST.REGEX.PO_BOX.test(value);
-}
-
 /**
  * Validate date fields
  */
@@ -204,40 +193,6 @@ function isValidWebsite(url: string): boolean {
     return new RegExp(`^${URL_REGEX_WITH_REQUIRED_PROTOCOL}$`, 'i').test(url) && isLowerCase;
 }
 
-function validateIdentity(identity: Record<string, string>): Record<string, boolean> {
-    const requiredFields = ['firstName', 'lastName', 'street', 'city', 'zipCode', 'state', 'ssnLast4', 'dob'];
-    const errors: Record<string, boolean> = {};
-
-    // Check that all required fields are filled
-    requiredFields.forEach((fieldName) => {
-        if (isRequiredFulfilled(identity[fieldName])) {
-            return;
-        }
-        errors[fieldName] = true;
-    });
-
-    if (!isValidAddress(identity.street)) {
-        errors.street = true;
-    }
-
-    if (!isValidZipCode(identity.zipCode)) {
-        errors.zipCode = true;
-    }
-
-    // dob field has multiple validations/errors, we are handling it temporarily like this.
-    if (!isValidDate(identity.dob) || !meetsMaximumAgeRequirement(identity.dob)) {
-        errors.dob = true;
-    } else if (!meetsMinimumAgeRequirement(identity.dob)) {
-        errors.dobAge = true;
-    }
-
-    if (!isValidSSNLastFour(identity.ssnLast4)) {
-        errors.ssnLast4 = true;
-    }
-
-    return errors;
-}
-
 function isValidUSPhone(phoneNumber = '', isCountryCodeOptional?: boolean): boolean {
     const phone = phoneNumber || '';
     const regionCode = isCountryCodeOptional ? CONST.COUNTRY.US : undefined;
@@ -304,6 +259,51 @@ function isValidPersonName(value: string) {
     return /^[^\d^!#$%*=<>;{}"]+$/.test(value);
 }
 
+/**
+ * Validating that this is a valid address (PO boxes are not allowed)
+ */
+function isValidAddress(value: string): boolean {
+    if (!isValidLegalName(value)) {
+        return false;
+    }
+
+    return !CONST.REGEX.PO_BOX.test(value);
+}
+
+function validateIdentity(identity: Record<string, string>): Record<string, boolean> {
+    const requiredFields = ['firstName', 'lastName', 'street', 'city', 'zipCode', 'state', 'ssnLast4', 'dob'];
+    const errors: Record<string, boolean> = {};
+
+    // Check that all required fields are filled
+    requiredFields.forEach((fieldName) => {
+        if (isRequiredFulfilled(identity[fieldName])) {
+            return;
+        }
+        errors[fieldName] = true;
+    });
+
+    if (!isValidAddress(identity.street)) {
+        errors.street = true;
+    }
+
+    if (!isValidZipCode(identity.zipCode)) {
+        errors.zipCode = true;
+    }
+
+    // dob field has multiple validations/errors, we are handling it temporarily like this.
+    if (!isValidDate(identity.dob) || !meetsMaximumAgeRequirement(identity.dob)) {
+        errors.dob = true;
+    } else if (!meetsMinimumAgeRequirement(identity.dob)) {
+        errors.dobAge = true;
+    }
+
+    if (!isValidSSNLastFour(identity.ssnLast4)) {
+        errors.ssnLast4 = true;
+    }
+
+    return errors;
+}
+
 /**
  * Checks if the provided string includes any of the provided reserved words
  */
@@ -384,7 +384,6 @@ export {
     meetsMinimumAgeRequirement,
     meetsMaximumAgeRequirement,
     getAgeRequirementError,
-    isValidAddress,
     isValidDate,
     isValidPastDate,
     isValidSecurityCode,
@@ -396,7 +395,6 @@ export {
     getFieldRequiredErrors,
     isValidUSPhone,
     isValidWebsite,
-    validateIdentity,
     isValidTwoFactorCode,
     isNumericWithSpecialChars,
     isValidRoutingNumber,
@@ -409,6 +407,8 @@ export {
     isValidValidateCode,
     isValidDisplayName,
     isValidLegalName,
+    isValidAddress,
+    validateIdentity,
     doesContainReservedWord,
     isNumeric,
     isValidAccountRoute,
diff --git a/src/libs/ViolationsUtils.ts b/src/libs/ViolationsUtils.ts
new file mode 100644
index 000000000000..4cfa259c9e78
--- /dev/null
+++ b/src/libs/ViolationsUtils.ts
@@ -0,0 +1,85 @@
+import reject from 'lodash/reject';
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {PolicyCategories, PolicyTags, Transaction, TransactionViolation} from '@src/types/onyx';
+
+const ViolationsUtils = {
+    /**
+     * Checks a transaction for policy violations and returns an object with Onyx method, key and updated transaction
+     * violations.
+     */
+    getViolationsOnyxData(
+        transaction: Transaction,
+        transactionViolations: TransactionViolation[],
+        policyRequiresTags: boolean,
+        policyTags: PolicyTags,
+        policyRequiresCategories: boolean,
+        policyCategories: PolicyCategories,
+    ): {
+        onyxMethod: string;
+        key: string;
+        value: TransactionViolation[];
+    } {
+        let newTransactionViolations = [...transactionViolations];
+
+        if (policyRequiresCategories) {
+            const hasCategoryOutOfPolicyViolation = transactionViolations.some((violation) => violation.name === 'categoryOutOfPolicy');
+            const hasMissingCategoryViolation = transactionViolations.some((violation) => violation.name === 'missingCategory');
+            const isCategoryInPolicy = Boolean(policyCategories[transaction.category]?.enabled);
+
+            // Add 'categoryOutOfPolicy' violation if category is not in policy
+            if (!hasCategoryOutOfPolicyViolation && transaction.category && !isCategoryInPolicy) {
+                newTransactionViolations.push({name: 'categoryOutOfPolicy', type: 'violation', userMessage: ''});
+            }
+
+            // Remove 'categoryOutOfPolicy' violation if category is in policy
+            if (hasCategoryOutOfPolicyViolation && transaction.category && isCategoryInPolicy) {
+                newTransactionViolations = reject(newTransactionViolations, {name: 'categoryOutOfPolicy'});
+            }
+
+            // Remove 'missingCategory' violation if category is valid according to policy
+            if (hasMissingCategoryViolation && isCategoryInPolicy) {
+                newTransactionViolations = reject(newTransactionViolations, {name: 'missingCategory'});
+            }
+
+            // Add 'missingCategory' violation if category is required and not set
+            if (!hasMissingCategoryViolation && policyRequiresCategories && !transaction.category) {
+                newTransactionViolations.push({name: 'missingCategory', type: 'violation', userMessage: ''});
+            }
+        }
+
+        if (policyRequiresTags) {
+            const hasTagOutOfPolicyViolation = transactionViolations.some((violation) => violation.name === 'tagOutOfPolicy');
+            const hasMissingTagViolation = transactionViolations.some((violation) => violation.name === 'missingTag');
+            const isTagInPolicy = Boolean(policyTags[transaction.tag]?.enabled);
+
+            // Add 'tagOutOfPolicy' violation if tag is not in policy
+            if (!hasTagOutOfPolicyViolation && transaction.tag && !isTagInPolicy) {
+                newTransactionViolations.push({name: 'tagOutOfPolicy', type: 'violation', userMessage: ''});
+            }
+
+            // Remove 'tagOutOfPolicy' violation if tag is in policy
+            if (hasTagOutOfPolicyViolation && transaction.tag && isTagInPolicy) {
+                newTransactionViolations = reject(newTransactionViolations, {name: 'tagOutOfPolicy'});
+            }
+
+            // Remove 'missingTag' violation if tag is valid according to policy
+            if (hasMissingTagViolation && isTagInPolicy) {
+                newTransactionViolations = reject(newTransactionViolations, {name: 'missingTag'});
+            }
+
+            // Add 'missingTag violation' if tag is required and not set
+            if (!hasMissingTagViolation && !transaction.tag && policyRequiresTags) {
+                newTransactionViolations.push({name: 'missingTag', type: 'violation', userMessage: ''});
+            }
+        }
+
+        return {
+            onyxMethod: Onyx.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`,
+            value: newTransactionViolations,
+        };
+    },
+};
+
+export default ViolationsUtils;
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index c0466f8c2604..ed43569c360a 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -63,34 +63,6 @@ Onyx.connect({
     },
 });
 
-let allRecentlyUsedTags = {};
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            allRecentlyUsedTags = {};
-            return;
-        }
-
-        allRecentlyUsedTags = value;
-    },
-});
-
-let allPolicyTags = {};
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
-    waitForCollectionCallback: true,
-    callback: (value) => {
-        if (!value) {
-            allPolicyTags = {};
-            return;
-        }
-
-        allPolicyTags = value;
-    },
-});
-
 let userAccountID = '';
 let currentUserEmail = '';
 Onyx.connect({
@@ -508,21 +480,9 @@ function getMoneyRequestInformation(
         billable,
     );
 
-    let optimisticPolicyRecentlyUsedCategories = [];
-    if (category) {
-        optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, category);
-    }
+    const optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(iouReport.policyID, category);
 
-    const optimisticPolicyRecentlyUsedTags = {};
-    const policyTags = allPolicyTags[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${iouReport.policyID}`];
-    const recentlyUsedPolicyTags = allRecentlyUsedTags[`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`];
-
-    if (policyTags) {
-        // For now it only uses the first tag of the policy, since multi-tags are not yet supported
-        const tagListKey = _.first(_.keys(policyTags));
-        const uniquePolicyRecentlyUsedTags = recentlyUsedPolicyTags ? _.filter(recentlyUsedPolicyTags[tagListKey], (recentlyUsedPolicyTag) => recentlyUsedPolicyTag !== tag) : [];
-        optimisticPolicyRecentlyUsedTags[tagListKey] = [tag, ...uniquePolicyRecentlyUsedTags];
-    }
+    const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, tag);
 
     // If there is an existing transaction (which is the case for distance requests), then the data from the existing transaction
     // needs to be manually merged into the optimistic transaction. This is because buildOnyxDataForMoneyRequest() uses `Onyx.set()` for the transaction
@@ -781,7 +741,8 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
 
     // Optimistically modify the transaction
     optimisticData.push({
-        onyxMethod: Onyx.METHOD.MERGE,
+        // We need to use SET method to save updated waypoint instead MERGE method to avoid wrong update of waypoints. More detail: https://github.com/Expensify/App/issues/30290#issuecomment-1778957070
+        onyxMethod: Onyx.METHOD.SET,
         key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
         value: {
             ...updatedTransaction,
@@ -919,11 +880,13 @@ function requestMoney(
  * @param {String} comment
  * @param {String} currency
  * @param {String} category
+ * @param {String} tag
  * @param {String} existingSplitChatReportID - the report ID where the split bill happens, could be a group chat or a workspace chat
+ * @param {String} merchant
  *
  * @return {Object}
  */
-function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID = '') {
+function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag, existingSplitChatReportID = '', merchant) {
     const currentUserEmailForIOUSplit = OptionsListUtils.addSMSDomainIfPhoneNumber(currentUserLogin);
     const participantAccountIDs = _.map(participants, (participant) => Number(participant.accountID));
     const existingSplitChatReport =
@@ -933,11 +896,6 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
     const splitChatReport = existingSplitChatReport || ReportUtils.buildOptimisticChatReport(participantAccountIDs);
     const isOwnPolicyExpenseChat = splitChatReport.isOwnPolicyExpenseChat;
 
-    // ReportID is -2 (aka "deleted") on the group transaction: https://github.com/Expensify/Auth/blob/3fa2698654cd4fbc30f9de38acfca3fbeb7842e4/auth/command/SplitTransaction.cpp#L24-L27
-    const formattedParticipants = isOwnPolicyExpenseChat
-        ? [currentUserLogin, ReportUtils.getReportName(splitChatReport)]
-        : Localize.arrayToString([currentUserLogin, ..._.map(participants, (participant) => participant.login || '')]);
-
     const splitTransaction = TransactionUtils.buildOptimisticTransaction(
         amount,
         currency,
@@ -946,11 +904,12 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
         '',
         '',
         '',
-        `${Localize.translateLocal('iou.splitBill')} ${Localize.translateLocal('common.with')} ${formattedParticipants} [${DateUtils.getDBTime().slice(0, 10)}]`,
+        merchant,
         undefined,
         undefined,
         undefined,
         category,
+        tag,
     );
 
     // Note: The created action must be optimistically generated before the IOU action so there's no chance that the created action appears after the IOU action in the chat
@@ -1136,11 +1095,12 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
             '',
             CONST.IOU.TYPE.SPLIT,
             splitTransaction.transactionID,
-            undefined,
+            merchant,
             undefined,
             undefined,
             undefined,
             category,
+            tag,
         );
 
         // STEP 4: Build optimistic reportActions. We need:
@@ -1189,10 +1149,10 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
         }
 
         // Add category to optimistic policy recently used categories when a participant is a workspace
-        let optimisticPolicyRecentlyUsedCategories = [];
-        if (isPolicyExpenseChat) {
-            optimisticPolicyRecentlyUsedCategories = Policy.buildOptimisticPolicyRecentlyUsedCategories(participant.policyID, category);
-        }
+        const optimisticPolicyRecentlyUsedCategories = isPolicyExpenseChat ? Policy.buildOptimisticPolicyRecentlyUsedCategories(participant.policyID, category) : [];
+
+        // Add tag to optimistic policy recently used tags when a participant is a workspace
+        const optimisticPolicyRecentlyUsedTags = isPolicyExpenseChat ? Policy.buildOptimisticPolicyRecentlyUsedTags(participant.policyID, tag) : {};
 
         // STEP 5: Build Onyx Data
         const [oneOnOneOptimisticData, oneOnOneSuccessData, oneOnOneFailureData] = buildOnyxDataForMoneyRequest(
@@ -1205,7 +1165,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
             oneOnOnePersonalDetailListAction,
             oneOnOneReportPreviewAction,
             optimisticPolicyRecentlyUsedCategories,
-            {},
+            optimisticPolicyRecentlyUsedTags,
             isNewOneOnOneChatReport,
             shouldCreateNewOneOnOneIOUReport,
         );
@@ -1255,10 +1215,23 @@ function createSplitsAndOnyxData(participants, currentUserLogin, currentUserAcco
  * @param {String} comment
  * @param {String} currency
  * @param {String} category
+ * @param {String} tag
  * @param {String} existingSplitChatReportID - Either a group DM or a workspace chat
+ * @param {String} merchant
  */
-function splitBill(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID = '') {
-    const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, existingSplitChatReportID);
+function splitBill(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag, existingSplitChatReportID = '', merchant) {
+    const {splitData, splits, onyxData} = createSplitsAndOnyxData(
+        participants,
+        currentUserLogin,
+        currentUserAccountID,
+        amount,
+        comment,
+        currency,
+        category,
+        tag,
+        existingSplitChatReportID,
+        merchant,
+    );
     API.write(
         'SplitBill',
         {
@@ -1268,6 +1241,8 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount,
             currency,
             comment,
             category,
+            merchant,
+            tag,
             transactionID: splitData.transactionID,
             reportActionID: splitData.reportActionID,
             createdReportActionID: splitData.createdReportActionID,
@@ -1289,10 +1264,11 @@ function splitBill(participants, currentUserLogin, currentUserAccountID, amount,
  * @param {String} comment
  * @param {String} currency
  * @param {String} category
+ * @param {String} tag
+ * @param {String} merchant
  */
-function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category) {
-    const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category);
-
+function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag, merchant) {
+    const {splitData, splits, onyxData} = createSplitsAndOnyxData(participants, currentUserLogin, currentUserAccountID, amount, comment, currency, category, tag, '', merchant);
     API.write(
         'SplitBillAndOpenReport',
         {
@@ -1302,6 +1278,8 @@ function splitBillAndOpenReport(participants, currentUserLogin, currentUserAccou
             currency,
             comment,
             category,
+            merchant,
+            tag,
             transactionID: splitData.transactionID,
             reportActionID: splitData.reportActionID,
             createdReportActionID: splitData.createdReportActionID,
@@ -1831,16 +1809,7 @@ function editRegularMoneyRequest(transactionID, transactionThreadReportID, trans
         updatedChatReport.lastMessageHtml = messageText;
     }
 
-    const optimisticPolicyRecentlyUsedTags = {};
-    if (_.has(transactionChanges, 'tag')) {
-        const tagListName = transactionChanges.tagListName;
-        const recentlyUsedPolicyTags = allRecentlyUsedTags[`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${iouReport.policyID}`];
-
-        const uniquePolicyRecentlyUsedTags = recentlyUsedPolicyTags
-            ? _.filter(recentlyUsedPolicyTags[tagListName], (recentlyUsedPolicyTag) => recentlyUsedPolicyTag !== transactionChanges.tag)
-            : [];
-        optimisticPolicyRecentlyUsedTags[tagListName] = [transactionChanges.tag, ...uniquePolicyRecentlyUsedTags];
-    }
+    const optimisticPolicyRecentlyUsedTags = Policy.buildOptimisticPolicyRecentlyUsedTags(iouReport.policyID, transactionChanges.tag);
 
     const isScanning = TransactionUtils.hasReceipt(updatedTransaction) && TransactionUtils.isReceiptBeingScanned(updatedTransaction);
 
@@ -2960,7 +2929,7 @@ function setUpDistanceTransaction() {
  */
 function navigateToNextPage(iou, iouType, report, path = '') {
     const moneyRequestID = `${iouType}${report.reportID || ''}`;
-    const shouldReset = iou.id !== moneyRequestID;
+    const shouldReset = iou.id !== moneyRequestID && !_.isEmpty(report.reportID);
 
     // If the money request ID in Onyx does not match the ID from params, we want to start a new request
     // with the ID from params. We need to clear the participants in case the new request is initiated from FAB.
diff --git a/src/libs/actions/Link.ts b/src/libs/actions/Link.ts
index d741ced6dc08..e6d33fec118d 100644
--- a/src/libs/actions/Link.ts
+++ b/src/libs/actions/Link.ts
@@ -2,8 +2,12 @@ import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
 import asyncOpenURL from '@libs/asyncOpenURL';
 import * as Environment from '@libs/Environment/Environment';
+import Navigation from '@libs/Navigation/Navigation';
 import * as Url from '@libs/Url';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES, {Route} from '@src/ROUTES';
 
 let isNetworkOffline = false;
 Onyx.connect({
@@ -56,4 +60,58 @@ function openOldDotLink(url: string) {
         (oldDotURL) => oldDotURL,
     );
 }
-export {buildOldDotURL, openOldDotLink, openExternalLink};
+
+function getInternalNewExpensifyPath(href: string) {
+    const attrPath = Url.getPathFromURL(href);
+    return (Url.hasSameExpensifyOrigin(href, CONST.NEW_EXPENSIFY_URL) || Url.hasSameExpensifyOrigin(href, CONST.STAGING_NEW_EXPENSIFY_URL) || href.startsWith(CONST.DEV_NEW_EXPENSIFY_URL)) &&
+        !CONST.PATHS_TO_TREAT_AS_EXTERNAL.find((path) => path === attrPath)
+        ? attrPath
+        : '';
+}
+
+function getInternalExpensifyPath(href: string) {
+    const attrPath = Url.getPathFromURL(href);
+    const hasExpensifyOrigin = Url.hasSameExpensifyOrigin(href, CONFIG.EXPENSIFY.EXPENSIFY_URL) || Url.hasSameExpensifyOrigin(href, CONFIG.EXPENSIFY.STAGING_API_ROOT);
+    if (!hasExpensifyOrigin || attrPath.startsWith(CONFIG.EXPENSIFY.CONCIERGE_URL_PATHNAME) || attrPath.startsWith(CONFIG.EXPENSIFY.DEVPORTAL_URL_PATHNAME)) {
+        return '';
+    }
+
+    return attrPath;
+}
+
+function openLink(href: string, environmentURL: string, isAttachment = false) {
+    const hasSameOrigin = Url.hasSameExpensifyOrigin(href, environmentURL);
+    const hasExpensifyOrigin = Url.hasSameExpensifyOrigin(href, CONFIG.EXPENSIFY.EXPENSIFY_URL) || Url.hasSameExpensifyOrigin(href, CONFIG.EXPENSIFY.STAGING_API_ROOT);
+    const internalNewExpensifyPath = getInternalNewExpensifyPath(href);
+    const internalExpensifyPath = getInternalExpensifyPath(href);
+
+    // There can be messages from Concierge with links to specific NewDot reports. Those URLs look like this:
+    // https://www.expensify.com.dev/newdotreport?reportID=3429600449838908 and they have a target="_blank" attribute. This is so that when a user is on OldDot,
+    // clicking on the link will open the chat in NewDot. However, when a user is in NewDot and clicks on the concierge link, the link needs to be handled differently.
+    // Normally, the link would be sent to Link.openOldDotLink() and opened in a new tab, and that's jarring to the user. Since the intention is to link to a specific NewDot chat,
+    // the reportID is extracted from the URL and then opened as an internal link, taking the user straight to the chat in the same tab.
+    if (hasExpensifyOrigin && href.indexOf('newdotreport?reportID=') > -1) {
+        const reportID = href.split('newdotreport?reportID=').pop();
+        const reportRoute = ROUTES.REPORT_WITH_ID.getRoute(reportID ?? '');
+        Navigation.navigate(reportRoute);
+        return;
+    }
+
+    // If we are handling a New Expensify link then we will assume this should be opened by the app internally. This ensures that the links are opened internally via react-navigation
+    // instead of in a new tab or with a page refresh (which is the default behavior of an anchor tag)
+    if (internalNewExpensifyPath && hasSameOrigin) {
+        Navigation.navigate(internalNewExpensifyPath as Route);
+        return;
+    }
+
+    // If we are handling an old dot Expensify link we need to open it with openOldDotLink() so we can navigate to it with the user already logged in.
+    // As attachments also use expensify.com we don't want it working the same as links.
+    if (internalExpensifyPath && !isAttachment) {
+        openOldDotLink(internalExpensifyPath);
+        return;
+    }
+
+    openExternalLink(href);
+}
+
+export {buildOldDotURL, openOldDotLink, openExternalLink, openLink, getInternalNewExpensifyPath, getInternalExpensifyPath};
diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts
index 02f0b49fe3d2..b3d1e3e23a24 100644
--- a/src/libs/actions/PaymentMethods.ts
+++ b/src/libs/actions/PaymentMethods.ts
@@ -11,7 +11,7 @@ import PaymentMethod from '@src/types/onyx/PaymentMethod';
 import {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
 
 type KYCWallRef = {
-    continue?: () => void;
+    continueAction?: () => void;
 };
 
 /**
@@ -23,14 +23,14 @@ const kycWallRef = createRef<KYCWallRef>();
  * When we successfully add a payment method or pass the KYC checks we will continue with our setup action if we have one set.
  */
 function continueSetup(fallbackRoute = ROUTES.HOME) {
-    if (!kycWallRef.current?.continue) {
+    if (!kycWallRef.current?.continueAction) {
         Navigation.goBack(fallbackRoute);
         return;
     }
 
     // Close the screen (Add Debit Card, Add Bank Account, or Enable Payments) on success and continue with setup
     Navigation.goBack(fallbackRoute);
-    kycWallRef.current.continue();
+    kycWallRef.current.continueAction();
 }
 
 function openWalletPage() {
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index bcc371b3a609..04f62ab0c393 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -91,6 +91,27 @@ Onyx.connect({
     callback: (val) => (allRecentlyUsedCategories = val),
 });
 
+let allPolicyTags = {};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY_TAGS,
+    waitForCollectionCallback: true,
+    callback: (value) => {
+        if (!value) {
+            allPolicyTags = {};
+            return;
+        }
+
+        allPolicyTags = value;
+    },
+});
+
+let allRecentlyUsedTags = {};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS,
+    waitForCollectionCallback: true,
+    callback: (val) => (allRecentlyUsedTags = val),
+});
+
 let networkStatus = {};
 Onyx.connect({
     key: ONYXKEYS.NETWORK,
@@ -1053,8 +1074,10 @@ function generateCustomUnitID() {
  * @returns {Object}
  */
 function buildOptimisticCustomUnits() {
+    const currency = lodashGet(allPersonalDetails, [sessionAccountID, 'localCurrencyCode'], CONST.CURRENCY.USD);
     const customUnitID = generateCustomUnitID();
     const customUnitRateID = generateCustomUnitID();
+
     const customUnits = {
         [customUnitID]: {
             customUnitID,
@@ -1067,6 +1090,7 @@ function buildOptimisticCustomUnits() {
                     customUnitRateID,
                     name: CONST.CUSTOM_UNITS.DEFAULT_RATE,
                     rate: CONST.CUSTOM_UNITS.MILEAGE_IRS_RATE * CONST.POLICY.CUSTOM_UNIT_RATE_BASE_OFFSET,
+                    currency,
                 },
             },
         },
@@ -1076,6 +1100,7 @@ function buildOptimisticCustomUnits() {
         customUnits,
         customUnitID,
         customUnitRateID,
+        outputCurrency: currency,
     };
 }
 
@@ -1089,7 +1114,7 @@ function buildOptimisticCustomUnits() {
  */
 function createDraftInitialWorkspace(policyOwnerEmail = '', policyName = '', policyID = generatePolicyID(), makeMeAdmin = false) {
     const workspaceName = policyName || generateDefaultWorkspaceName(policyOwnerEmail);
-    const {customUnits} = buildOptimisticCustomUnits();
+    const {customUnits, outputCurrency} = buildOptimisticCustomUnits();
 
     const optimisticData = [
         {
@@ -1102,7 +1127,7 @@ function createDraftInitialWorkspace(policyOwnerEmail = '', policyName = '', pol
                 role: CONST.POLICY.ROLE.ADMIN,
                 owner: sessionEmail,
                 isPolicyExpenseChatEnabled: true,
-                outputCurrency: lodashGet(allPersonalDetails, [sessionAccountID, 'localCurrencyCode'], CONST.CURRENCY.USD),
+                outputCurrency,
                 pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
                 customUnits,
                 makeMeAdmin,
@@ -1135,7 +1160,7 @@ function createDraftInitialWorkspace(policyOwnerEmail = '', policyName = '', pol
 function createWorkspace(policyOwnerEmail = '', makeMeAdmin = false, policyName = '', policyID = generatePolicyID()) {
     const workspaceName = policyName || generateDefaultWorkspaceName(policyOwnerEmail);
 
-    const {customUnits, customUnitID, customUnitRateID} = buildOptimisticCustomUnits();
+    const {customUnits, customUnitID, customUnitRateID, outputCurrency} = buildOptimisticCustomUnits();
 
     const {
         announceChatReportID,
@@ -1181,7 +1206,7 @@ function createWorkspace(policyOwnerEmail = '', makeMeAdmin = false, policyName
                         role: CONST.POLICY.ROLE.ADMIN,
                         owner: sessionEmail,
                         isPolicyExpenseChatEnabled: true,
-                        outputCurrency: lodashGet(allPersonalDetails, [sessionAccountID, 'localCurrencyCode'], CONST.CURRENCY.USD),
+                        outputCurrency,
                         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
                         customUnits,
                     },
@@ -1471,6 +1496,27 @@ function buildOptimisticPolicyRecentlyUsedCategories(policyID, category) {
     return lodashUnion([category], policyRecentlyUsedCategories);
 }
 
+/**
+ * @param {String} policyID
+ * @param {String} tag
+ * @returns {Object}
+ */
+function buildOptimisticPolicyRecentlyUsedTags(policyID, tag) {
+    if (!policyID || !tag) {
+        return {};
+    }
+
+    const policyTags = lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
+    // For now it only uses the first tag of the policy, since multi-tags are not yet supported
+    const tagListKey = _.first(_.keys(policyTags));
+    const policyRecentlyUsedTags = lodashGet(allRecentlyUsedTags, `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, {});
+
+    return {
+        ...policyRecentlyUsedTags,
+        [tagListKey]: lodashUnion([tag], lodashGet(policyRecentlyUsedTags, [tagListKey], [])),
+    };
+}
+
 /**
  * This flow is used for bottom up flow converting IOU report to an expense report. When user takes this action,
  * we create a Collect type workspace when the person taking the action becomes an owner and an admin, while we
@@ -1900,6 +1946,7 @@ export {
     dismissAddedWithPrimaryLoginMessages,
     openDraftWorkspaceRequest,
     buildOptimisticPolicyRecentlyUsedCategories,
+    buildOptimisticPolicyRecentlyUsedTags,
     createDraftInitialWorkspace,
     setWorkspaceInviteMessageDraft,
 };
diff --git a/src/libs/actions/PriorityMode.ts b/src/libs/actions/PriorityMode.ts
new file mode 100644
index 000000000000..d528c31d7453
--- /dev/null
+++ b/src/libs/actions/PriorityMode.ts
@@ -0,0 +1,138 @@
+import debounce from 'lodash/debounce';
+import Onyx, {OnyxCollection} from 'react-native-onyx';
+import * as CollectionUtils from '@libs/CollectionUtils';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {Report} from '@src/types/onyx';
+
+/**
+ * This actions file is used to automatically switch a user into #focus mode when they exceed a certain number of reports. We do this primarily for performance reasons.
+ * Similar to the "Welcome action" we must wait for a number of things to happen when the user signs in or refreshes the page:
+ *
+ *     - NVP that tracks whether they have already been switched over. We only do this once.
+ *     - Priority mode NVP (that dictates the ordering/filtering logic of the LHN)
+ *     - Reports to load (in ReconnectApp or OpenApp). As we check the count of the reports to determine whether the user is eligible to be automatically switched.
+ */
+
+let resolveIsReadyPromise: (args?: unknown[]) => void;
+let isReadyPromise = new Promise((resolve) => {
+    resolveIsReadyPromise = resolve;
+});
+
+let currentUserAccountID: number | undefined | null;
+Onyx.connect({
+    key: ONYXKEYS.SESSION,
+    callback: (val) => {
+        currentUserAccountID = val?.accountID;
+    },
+});
+
+/**
+ * Debounce the prompt to promote focus mode as many reports updates could happen in a short burst
+ */
+// eslint-disable-next-line @typescript-eslint/no-use-before-define
+const autoSwitchToFocusMode = debounce(tryFocusModeUpdate, 300, {leading: true});
+
+let allReports: OnyxCollection<Report> | undefined;
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.REPORT,
+    callback: (report, key) => {
+        if (!key || !report) {
+            return;
+        }
+
+        if (!allReports) {
+            allReports = {};
+        }
+
+        const reportID = CollectionUtils.extractCollectionItemID(key);
+
+        allReports[reportID] = report;
+
+        // Each time a new report is added we will check to see if the user should be switched
+        autoSwitchToFocusMode();
+    },
+});
+
+let isLoadingReportData = true;
+Onyx.connect({
+    key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+    initWithStoredValues: false,
+    callback: (value) => {
+        isLoadingReportData = value ?? false;
+
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        checkRequiredData();
+    },
+});
+
+let isInFocusMode: boolean | undefined;
+Onyx.connect({
+    key: ONYXKEYS.NVP_PRIORITY_MODE,
+    callback: (priorityMode) => {
+        isInFocusMode = priorityMode === CONST.PRIORITY_MODE.GSD;
+
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        checkRequiredData();
+    },
+});
+
+let hasTriedFocusMode: boolean | undefined | null;
+Onyx.connect({
+    key: ONYXKEYS.NVP_TRY_FOCUS_MODE,
+    callback: (val) => {
+        hasTriedFocusMode = val;
+
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        checkRequiredData();
+    },
+});
+
+function resetHasReadRequiredDataFromStorage() {
+    // Create a new promise and a new resolve function
+    isReadyPromise = new Promise((resolve) => {
+        resolveIsReadyPromise = resolve;
+    });
+    isLoadingReportData = true;
+    allReports = {};
+}
+
+function checkRequiredData() {
+    if (allReports === undefined || hasTriedFocusMode === undefined || isInFocusMode === undefined || isLoadingReportData) {
+        return;
+    }
+
+    resolveIsReadyPromise();
+}
+
+function tryFocusModeUpdate() {
+    isReadyPromise.then(() => {
+        // User is signed out so do not try to switch them
+        if (!currentUserAccountID) {
+            return;
+        }
+
+        // Check to see if the user is using #focus mode, has tried it before, or we have already switched them over automatically.
+        if ((isInFocusMode ?? false) || hasTriedFocusMode) {
+            Log.info('Not switching user to optimized focus mode.', false, {isInFocusMode, hasTriedFocusMode});
+            return;
+        }
+
+        const reportCount = Object.keys(allReports ?? {}).length;
+        if (reportCount < CONST.REPORT.MAX_COUNT_BEFORE_FOCUS_UPDATE) {
+            Log.info('Not switching user to optimized focus mode as they do not have enough reports', false, {reportCount});
+            return;
+        }
+
+        Log.info('Switching user to optimized focus mode', false, {reportCount, hasTriedFocusMode, isInFocusMode});
+
+        // Record that we automatically switched them so we don't ask again.
+        hasTriedFocusMode = true;
+
+        // Setting this triggers a modal to open and notify the user.
+        Onyx.set(ONYXKEYS.FOCUS_MODE_NOTIFICATION, true);
+    });
+}
+
+export {resetHasReadRequiredDataFromStorage, autoSwitchToFocusMode};
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index a03488429405..1233bcd5d707 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -1540,32 +1540,9 @@ function navigateToConciergeChat(ignoreConciergeReportID = false) {
 /**
  * Add a policy report (workspace room) optimistically and navigate to it.
  *
- * @param {String} policyID
- * @param {String} reportName
- * @param {String} visibility
- * @param {String} writeCapability
- * @param {String} welcomeMessage
- */
-function addPolicyReport(policyID, reportName, visibility, writeCapability = CONST.REPORT.WRITE_CAPABILITIES.ALL, welcomeMessage = '') {
-    const participants = [currentUserAccountID];
-    const parsedWelcomeMessage = ReportUtils.getParsedComment(welcomeMessage);
-    const policyReport = ReportUtils.buildOptimisticChatReport(
-        participants,
-        reportName,
-        CONST.REPORT.CHAT_TYPE.POLICY_ROOM,
-        policyID,
-        CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
-        false,
-        '',
-        visibility,
-        writeCapability,
-
-        // The room might contain all policy members so notifying always should be opt-in only.
-        CONST.REPORT.NOTIFICATION_PREFERENCE.DAILY,
-        '',
-        '',
-        parsedWelcomeMessage,
-    );
+ * @param {Object} policyReport
+ */
+function addPolicyReport(policyReport) {
     const createdReportAction = ReportUtils.buildOptimisticCreatedReportAction(CONST.POLICY.OWNER_EMAIL_FAKE);
 
     // Onyx.set is used on the optimistic data so that it is present before navigating to the workspace room. With Onyx.merge the workspace room reportID is not present when
@@ -1587,6 +1564,11 @@ function addPolicyReport(policyID, reportName, visibility, writeCapability = CON
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${policyReport.reportID}`,
             value: {[createdReportAction.reportActionID]: createdReportAction},
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.FORMS.NEW_ROOM_FORM,
+            value: {isLoading: true},
+        },
     ];
     const successData = [
         {
@@ -1607,6 +1589,11 @@ function addPolicyReport(policyID, reportName, visibility, writeCapability = CON
                 },
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.FORMS.NEW_ROOM_FORM,
+            value: {isLoading: false},
+        },
     ];
     const failureData = [
         {
@@ -1618,22 +1605,26 @@ function addPolicyReport(policyID, reportName, visibility, writeCapability = CON
                 },
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.FORMS.NEW_ROOM_FORM,
+            value: {isLoading: false},
+        },
     ];
 
     API.write(
         'AddWorkspaceRoom',
         {
             policyID: policyReport.policyID,
-            reportName,
-            visibility,
+            reportName: policyReport.reportName,
+            visibility: policyReport.visibility,
             reportID: policyReport.reportID,
             createdReportActionID: createdReportAction.reportActionID,
-            writeCapability,
-            welcomeMessage: parsedWelcomeMessage,
+            writeCapability: policyReport.writeCapability,
+            welcomeMessage: policyReport.welcomeMessage,
         },
         {optimisticData, successData, failureData},
     );
-    Navigation.dismissModal(policyReport.reportID);
 }
 
 /**
@@ -2490,7 +2481,7 @@ const debouncedSearchInServer = lodashDebounce(searchForReports, CONST.TIMING.SE
  * @param {string} searchInput
  */
 function searchInServer(searchInput) {
-    if (isNetworkOffline) {
+    if (isNetworkOffline || !searchInput.trim().length) {
         Onyx.set(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, false);
         return;
     }
@@ -2502,6 +2493,13 @@ function searchInServer(searchInput) {
     debouncedSearchInServer(searchInput);
 }
 
+function clearNewRoomFormError() {
+    Onyx.set(ONYXKEYS.FORMS.NEW_ROOM_FORM, {
+        isLoading: false,
+        errorFields: {},
+    });
+}
+
 export {
     searchInServer,
     addComment,
@@ -2563,4 +2561,5 @@ export {
     openRoomMembersPage,
     savePrivateNotesDraft,
     getDraftPrivateNote,
+    clearNewRoomFormError,
 };
diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
index 559f60a21c98..82b51651cacc 100644
--- a/src/libs/actions/Session/index.ts
+++ b/src/libs/actions/Session/index.ts
@@ -15,6 +15,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import Timers from '@libs/Timers';
 import {hideContextMenu} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as Device from '@userActions/Device';
+import * as PriorityMode from '@userActions/PriorityMode';
 import redirectToSignIn from '@userActions/SignInRedirect';
 import Timing from '@userActions/Timing';
 import * as Welcome from '@userActions/Welcome';
@@ -589,6 +590,7 @@ function cleanupSession() {
     Pusher.disconnect();
     Timers.clearAll();
     Welcome.resetReadyCheck();
+    PriorityMode.resetHasReadRequiredDataFromStorage();
 }
 
 function clearAccountMessages() {
diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index ad6fd7be10dd..1bd1cb0b763b 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -583,8 +583,10 @@ function updateFrequentlyUsedEmojis(frequentlyUsedEmojis) {
 /**
  * Sync user chat priority mode with Onyx and Server
  * @param {String} mode
+ * @param {boolean} [automatic] if we changed the mode automatically
  */
-function updateChatPriorityMode(mode) {
+function updateChatPriorityMode(mode, automatic = false) {
+    const autoSwitchedToFocusMode = mode === CONST.PRIORITY_MODE.GSD && automatic;
     const optimisticData = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -592,14 +594,31 @@ function updateChatPriorityMode(mode) {
             value: mode,
         },
     ];
+
+    if (autoSwitchedToFocusMode) {
+        optimisticData.push({
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_TRY_FOCUS_MODE,
+            value: true,
+        });
+    }
+
     API.write(
         'UpdateChatPriorityMode',
         {
             value: mode,
+            automatic,
         },
         {optimisticData},
     );
-    Navigation.goBack(ROUTES.SETTINGS_PREFERENCES);
+
+    if (!autoSwitchedToFocusMode) {
+        Navigation.goBack(ROUTES.SETTINGS_PREFERENCES);
+    }
+}
+
+function clearFocusModeNotification() {
+    Onyx.set(ONYXKEYS.FOCUS_MODE_NOTIFICATION, false);
 }
 
 /**
@@ -843,6 +862,7 @@ function clearDraftCustomStatus() {
 }
 
 export {
+    clearFocusModeNotification,
     closeAccount,
     resendValidateCode,
     requestContactMethodValidateCode,
diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts
index 618571ddf400..09cc1222310f 100644
--- a/src/libs/fileDownload/FileUtils.ts
+++ b/src/libs/fileDownload/FileUtils.ts
@@ -1,6 +1,7 @@
 import {Alert, Linking, Platform} from 'react-native';
 import DateUtils from '@libs/DateUtils';
 import * as Localize from '@libs/Localize';
+import Log from '@libs/Log';
 import CONST from '@src/CONST';
 import type {ReadFileAsync, SplitExtensionFromFileName} from './types';
 
@@ -75,13 +76,22 @@ function showCameraPermissionsAlert() {
 }
 
 /**
- * Generate a random file name with timestamp and file extension
+ * Extracts a filename from a given URL and sanitizes it for file system usage.
+ *
+ * This function takes a URL as input and performs the following operations:
+ * 1. Extracts the last segment of the URL, which could be a file name, a path segment,
+ *    or a query string parameter.
+ * 2. Decodes the extracted segment from URL encoding to a plain string for better readability.
+ * 3. Replaces any characters in the decoded string that are illegal in file names
+ *    with underscores.
  */
-function getAttachmentName(url: string): string {
-    if (!url) {
-        return '';
+function getFileName(url: string): string {
+    const fileName = url.split(/[#?/]/).pop() ?? '';
+    if (!fileName) {
+        Log.warn('[FileUtils] Could not get attachment name', {url});
     }
-    return `${DateUtils.getDBTime()}.${url.split(/[#?]/)[0].split('.').pop()?.trim()}`;
+
+    return decodeURIComponent(fileName).replace(CONST.REGEX.ILLEGAL_FILENAME_CHARACTERS, '_');
 }
 
 function isImage(fileName: string): boolean {
@@ -231,7 +241,7 @@ export {
     showPermissionErrorAlert,
     showCameraPermissionsAlert,
     splitExtensionFromFileName,
-    getAttachmentName,
+    getFileName,
     getFileType,
     cleanFileName,
     appendTimeToFileName,
diff --git a/src/libs/fileDownload/index.android.ts b/src/libs/fileDownload/index.android.ts
index 41c7cb29550a..8496c1cb6cf5 100644
--- a/src/libs/fileDownload/index.android.ts
+++ b/src/libs/fileDownload/index.android.ts
@@ -38,7 +38,7 @@ function handleDownload(url: string, fileName: string): Promise<void> {
 
         // Android files will download to Download directory
         const path = dirs.DownloadDir;
-        const attachmentName = FileUtils.appendTimeToFileName(fileName) || FileUtils.getAttachmentName(url);
+        const attachmentName = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
 
         const isLocalFile = url.startsWith('file://');
 
diff --git a/src/libs/fileDownload/index.ios.ts b/src/libs/fileDownload/index.ios.ts
index fdc4a78e0b9b..7672b4b14926 100644
--- a/src/libs/fileDownload/index.ios.ts
+++ b/src/libs/fileDownload/index.ios.ts
@@ -73,7 +73,7 @@ const fileDownload: FileDownload = (fileUrl, fileName) =>
     new Promise((resolve) => {
         let fileDownloadPromise;
         const fileType = FileUtils.getFileType(fileUrl);
-        const attachmentName = FileUtils.appendTimeToFileName(fileName) || FileUtils.getAttachmentName(fileUrl);
+        const attachmentName = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(fileUrl));
 
         switch (fileType) {
             case CONST.ATTACHMENT_FILE_TYPE.IMAGE:
diff --git a/src/libs/fileDownload/index.ts b/src/libs/fileDownload/index.ts
index ef36647e549d..4f43b215925f 100644
--- a/src/libs/fileDownload/index.ts
+++ b/src/libs/fileDownload/index.ts
@@ -29,10 +29,7 @@ const fileDownload: FileDownload = (url, fileName) => {
             // adding href to anchor
             link.href = href;
             link.style.display = 'none';
-            link.setAttribute(
-                'download',
-                FileUtils.appendTimeToFileName(fileName) || FileUtils.getAttachmentName(url), // generating the file name
-            );
+            link.download = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
 
             // Append to html link element page
             document.body.appendChild(link);
diff --git a/src/pages/EditRequestCreatedPage.js b/src/pages/EditRequestCreatedPage.js
index 78a2d28a925c..c2b05d9e6dfa 100644
--- a/src/pages/EditRequestCreatedPage.js
+++ b/src/pages/EditRequestCreatedPage.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -34,7 +34,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
             >
-                <NewDatePicker
+                <DatePicker
                     inputID="created"
                     label={translate('common.date')}
                     defaultValue={defaultCreated}
diff --git a/src/pages/EditRequestDescriptionPage.js b/src/pages/EditRequestDescriptionPage.js
index f6779ac83ead..caf7571c8719 100644
--- a/src/pages/EditRequestDescriptionPage.js
+++ b/src/pages/EditRequestDescriptionPage.js
@@ -77,7 +77,6 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
                         }}
                         autoGrowHeight
                         containerStyles={[styles.autoGrowHeightMultilineInput]}
-                        inputStyle={[styles.verticalAlignTop]}
                         submitOnEnter={!Browser.isMobile()}
                     />
                 </View>
diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js
index d7cabe144dd4..6d01e601b901 100644
--- a/src/pages/EnablePayments/AdditionalDetailsStep.js
+++ b/src/pages/EnablePayments/AdditionalDetailsStep.js
@@ -5,10 +5,10 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
@@ -230,7 +230,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
                         placeholder={translate('common.phoneNumberPlaceholder')}
                         shouldSaveDraft
                     />
-                    <NewDatePicker
+                    <DatePicker
                         inputID="dob"
                         containerStyles={[styles.mt4]}
                         label={translate(fieldNameTranslationKeys.dob)}
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/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index 8534961b3337..16d0c3909d62 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -125,5 +125,4 @@ LogInWithShortLivedAuthTokenPage.displayName = 'LogInWithShortLivedAuthTokenPage
 
 export default withOnyx({
     account: {key: ONYXKEYS.ACCOUNT},
-    session: {key: ONYXKEYS.SESSION},
 })(LogInWithShortLivedAuthTokenPage);
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index aae61b100cd7..2bbd0556aad8 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -210,9 +210,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
 
     // When search term updates we will fetch any reports
     const setSearchTermAndSearchInServer = useCallback((text = '') => {
-        if (text.length) {
-            Report.searchInServer(text);
-        }
+        Report.searchInServer(text);
         setSearchTerm(text);
     }, []);
 
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/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index 814a572b8f16..d7d622d309d6 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -7,10 +7,10 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import Picker from '@components/Picker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import StatePicker from '@components/StatePicker';
@@ -88,6 +88,10 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
         ];
         const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);
 
+        if (values.companyName && !ValidationUtils.isValidLegalName(values.companyName)) {
+            errors.companyName = 'bankAccount.error.companyName';
+        }
+
         if (values.addressStreet && !ValidationUtils.isValidAddress(values.addressStreet)) {
             errors.addressStreet = 'bankAccount.error.addressStreet';
         }
@@ -96,6 +100,10 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
             errors.addressZipCode = 'bankAccount.error.zipCode';
         }
 
+        if (values.addressCity && !ValidationUtils.isValidLegalName(values.addressCity)) {
+            errors.addressCity = 'bankAccount.error.addressCity';
+        }
+
         if (values.companyPhone && !ValidationUtils.isValidUSPhone(values.companyPhone, true)) {
             errors.companyPhone = 'bankAccount.error.phoneNumber';
         }
@@ -241,7 +249,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     />
                 </View>
                 <View style={styles.mt4}>
-                    <NewDatePicker
+                    <DatePicker
                         inputID="incorporationDate"
                         label={translate('companyStep.incorporationDate')}
                         placeholder={translate('companyStep.incorporationDatePlaceholder')}
diff --git a/src/pages/ReimbursementAccount/IdentityForm.js b/src/pages/ReimbursementAccount/IdentityForm.js
index f762dbd28954..5f31f94a0e28 100644
--- a/src/pages/ReimbursementAccount/IdentityForm.js
+++ b/src/pages/ReimbursementAccount/IdentityForm.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import DatePicker from '@components/DatePicker';
 import InputWrapper from '@components/Form/InputWrapper';
-import NewDatePicker from '@components/NewDatePicker';
 import TextInput from '@components/TextInput';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
@@ -171,7 +171,7 @@ function IdentityForm(props) {
                     />
                 </View>
             </View>
-            <NewDatePicker
+            <DatePicker
                 inputID={props.inputKeys.dob}
                 shouldSaveDraft={props.shouldSaveDraft}
                 label={`${props.translate('common.dob')}`}
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 4620ab1ddcae..1b6a188c521b 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -1,19 +1,18 @@
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import networkPropTypes from '@components/networkPropTypes';
-import {withNetwork} from '@components/OnyxProvider';
 import ReimbursementAccountLoadingIndicator from '@components/ReimbursementAccountLoadingIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import usePrevious from '@hooks/usePrevious';
 import compose from '@libs/compose';
 import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
 import BankAccount from '@libs/models/BankAccount';
@@ -21,6 +20,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import shouldReopenOnfido from '@libs/shouldReopenOnfido';
 import withPolicy from '@pages/workspace/withPolicy';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -39,6 +39,9 @@ const propTypes = {
     /** Plaid SDK token to use to initialize the widget */
     plaidLinkToken: PropTypes.string,
 
+    /** Plaid SDK current event */
+    plaidCurrentEvent: PropTypes.string,
+
     /** ACH data for the withdrawal account actively being set up */
     reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes,
 
@@ -48,6 +51,11 @@ const propTypes = {
     /** The token required to initialize the Onfido SDK */
     onfidoToken: PropTypes.string,
 
+    /** Policy values needed in the component */
+    policy: PropTypes.shape({
+        name: PropTypes.string,
+    }),
+
     /** Indicated whether the report data is loading */
     isLoadingReportData: PropTypes.bool,
 
@@ -57,9 +65,6 @@ const propTypes = {
         isLoading: PropTypes.bool,
     }),
 
-    /** Information about the network  */
-    network: networkPropTypes.isRequired,
-
     /** Current session for the user */
     session: PropTypes.shape({
         /** User login */
@@ -75,16 +80,15 @@ const propTypes = {
             policyID: PropTypes.string,
         }),
     }),
-
-    ...withLocalizePropTypes,
-    ...withThemeStylesPropTypes,
 };
 
 const defaultProps = {
     reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps,
     reimbursementAccountDraft: {},
     onfidoToken: '',
+    policy: {},
     plaidLinkToken: '',
+    plaidCurrentEvent: '',
     isLoadingReportData: false,
     account: {},
     session: {
@@ -98,99 +102,90 @@ const defaultProps = {
     },
 };
 
-class ReimbursementAccountPage extends React.Component {
-    constructor(props) {
-        super(props);
-        this.continue = this.continue.bind(this);
-        this.getDefaultStateForField = this.getDefaultStateForField.bind(this);
-        this.goBack = this.goBack.bind(this);
-        this.requestorStepRef = React.createRef();
-
-        // The first time we open this page, props.reimbursementAccount is either not available in Onyx
-        // or only partial data loaded where props.reimbursementAccount.achData.currentStep is not available
-        // Calculating shouldShowContinueSetupButton on first page open doesn't make sense, and we should recalculate
-        // it once we get the response from the server the first time in componentDidUpdate.
-        const hasACHDataBeenLoaded =
-            this.props.reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && _.has(this.props.reimbursementAccount, 'achData.currentStep');
-        this.state = {
-            hasACHDataBeenLoaded,
-            shouldShowContinueSetupButton: hasACHDataBeenLoaded ? this.getShouldShowContinueSetupButtonInitialValue() : false,
-        };
-    }
+const ROUTE_NAMES = {
+    COMPANY: 'company',
+    PERSONAL_INFORMATION: 'personal-information',
+    CONTRACT: 'contract',
+    VALIDATE: 'validate',
+    ENABLE: 'enable',
+    NEW: 'new',
+};
 
-    componentDidMount() {
-        this.fetchData();
+/**
+ * We can pass stepToOpen in the URL to force which step to show.
+ * Mainly needed when user finished the flow in verifying state, and Ops ask them to modify some fields from a specific step.
+ * @param {Object} route
+ * @returns {String}
+ */
+function getStepToOpenFromRouteParams(route) {
+    switch (lodashGet(route, ['params', 'stepToOpen'], '')) {
+        case ROUTE_NAMES.NEW:
+            return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+        case ROUTE_NAMES.COMPANY:
+            return CONST.BANK_ACCOUNT.STEP.COMPANY;
+        case ROUTE_NAMES.PERSONAL_INFORMATION:
+            return CONST.BANK_ACCOUNT.STEP.REQUESTOR;
+        case ROUTE_NAMES.CONTRACT:
+            return CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT;
+        case ROUTE_NAMES.VALIDATE:
+            return CONST.BANK_ACCOUNT.STEP.VALIDATION;
+        case ROUTE_NAMES.ENABLE:
+            return CONST.BANK_ACCOUNT.STEP.ENABLE;
+        default:
+            return '';
     }
+}
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.network.isOffline && !this.props.network.isOffline && prevProps.reimbursementAccount.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
-            this.fetchData();
-        }
-        if (!this.state.hasACHDataBeenLoaded) {
-            // If the ACHData has not been loaded yet, and we are seeing the default data for props.reimbursementAccount
-            // We don't need to do anything yet
-            if (this.props.reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && !this.props.reimbursementAccount.isLoading) {
-                // If we are here, it is because this is the first time we load the ACHData from the server and
-                // this.props.reimbursementAccount.isLoading just changed to false. From now on, it makes sense to run the code
-                // below updating states and the route, and this will happen in the next react lifecycle.
-                this.setState({
-                    shouldShowContinueSetupButton: this.getShouldShowContinueSetupButtonInitialValue(),
-                    hasACHDataBeenLoaded: true,
-                });
-            }
-            return;
-        }
-
-        if (
-            prevProps.reimbursementAccount.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
-            this.props.reimbursementAccount.pendingAction !== prevProps.reimbursementAccount.pendingAction
-        ) {
-            // We are here after the user tried to delete the bank account. We will want to set
-            // this.state.shouldShowContinueSetupButton to `false` if the bank account was deleted.
-            this.setState({shouldShowContinueSetupButton: this.hasInProgressVBBA()});
-        }
-
-        const currentStep = lodashGet(this.props.reimbursementAccount, 'achData.currentStep') || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-
-        if (this.state.shouldShowContinueSetupButton) {
-            // If we are showing the "Continue with setup" / "Start over" buttons:
-            // - We don't want to update the route in case the user reloads the page. If we update the route and the user reloads, we will
-            //   take the user to the step set in the route and skip chosing the options.
-            // - We don't want to clear possible errors because we want to allow the user to clear them clicking the X
-            return;
-        }
-
-        // Update the data that is returned from back-end to draft value
-        const draftStep = this.props.reimbursementAccount.draftStep;
-        if (draftStep) {
-            BankAccounts.updateReimbursementAccountDraft(this.getBankAccountFields(this.getFieldsForStep(draftStep)));
-        }
-
-        const currentStepRouteParam = this.getStepToOpenFromRouteParams();
-        if (currentStepRouteParam === currentStep) {
-            // The route is showing the correct step, no need to update the route param or clear errors.
-            return;
-        }
-        if (currentStepRouteParam !== '') {
-            // When we click "Connect bank account", we load the page without the current step param, if there
-            // was an error when we tried to disconnect or start over, we want the user to be able to see the error,
-            // so we don't clear it. We only want to clear the errors if we are moving between steps.
-            BankAccounts.hideBankAccountErrors();
-        }
-
-        // When the step changes we will navigate to update the route params. This is mostly cosmetic as we only use
-        // the route params when the component first mounts to jump to a specific route instead of picking up where the
-        // user left off in the flow.
-        const backTo = lodashGet(this.props.route.params, 'backTo');
-        const policyId = lodashGet(this.props.route.params, 'policyID');
-        Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(this.getRouteForCurrentStep(currentStep), policyId, backTo));
+/**
+ * @param {String} currentStep
+ * @returns {String}
+ */
+function getRouteForCurrentStep(currentStep) {
+    switch (currentStep) {
+        case CONST.BANK_ACCOUNT.STEP.COMPANY:
+            return ROUTE_NAMES.COMPANY;
+        case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
+            return ROUTE_NAMES.PERSONAL_INFORMATION;
+        case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
+            return ROUTE_NAMES.CONTRACT;
+        case CONST.BANK_ACCOUNT.STEP.VALIDATION:
+            return ROUTE_NAMES.VALIDATE;
+        case CONST.BANK_ACCOUNT.STEP.ENABLE:
+            return ROUTE_NAMES.ENABLE;
+        case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
+        default:
+            return ROUTE_NAMES.NEW;
     }
+}
+
+function ReimbursementAccountPage({reimbursementAccount, route, onfidoToken, policy, account, isLoadingReportData, session, plaidLinkToken, plaidCurrentEvent, reimbursementAccountDraft}) {
+    /**  
+        The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
+        user left off. This view will refer to the achData as the single source of truth to determine which route to
+        display. We can also specify a specific route to navigate to via route params when the component first
+        mounts which will set the achData.currentStep after the account data is fetched and overwrite the logical
+        next step.
+    */
+    const achData = lodashGet(reimbursementAccount, 'achData', {});
 
-    componentWillUnmount() {
-        BankAccounts.clearReimbursementAccount();
+    /**
+     * @param {Array} fieldNames
+     *
+     * @returns {Object}
+     */
+    function getBankAccountFields(fieldNames) {
+        return {
+            ..._.pick(lodashGet(reimbursementAccount, 'achData'), ...fieldNames),
+        };
     }
 
-    getFieldsForStep(step) {
+    /**
+     * Returns selected bank account fields based on field names provided.
+     *
+     * @param {string} step
+     * @returns {Array<string>}
+     */
+    function getFieldsForStep(step) {
         switch (step) {
             case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
                 return ['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings'];
@@ -215,129 +210,152 @@ class ReimbursementAccountPage extends React.Component {
         }
     }
 
+    // Update the data that is returned from back-end to draft value
+    const draftStep = reimbursementAccount.draftStep;
+    if (draftStep) {
+        BankAccounts.updateReimbursementAccountDraft(getBankAccountFields(getFieldsForStep(draftStep)));
+    }
+
     /**
-     * @param {Array} fieldNames
-     *
-     * @returns {*}
+     * Returns true if a VBBA exists in any state other than OPEN or LOCKED
+     * @returns {Boolean}
      */
-    getBankAccountFields(fieldNames) {
-        return {
-            ..._.pick(lodashGet(this.props.reimbursementAccount, 'achData'), ...fieldNames),
-        };
+    function hasInProgressVBBA() {
+        return achData.bankAccountID && achData.state !== BankAccount.STATE.OPEN && achData.state !== BankAccount.STATE.LOCKED;
     }
-
     /*
      * Calculates the state used to show the "Continue with setup" view. If a bank account setup is already in progress and
      * no specific further step was passed in the url we'll show the workspace bank account reset modal if the user wishes to start over
      */
-    getShouldShowContinueSetupButtonInitialValue() {
-        if (!this.hasInProgressVBBA()) {
+    function getShouldShowContinueSetupButtonInitialValue() {
+        if (!hasInProgressVBBA()) {
             // Since there is no VBBA in progress, we won't need to show the component ContinueBankAccountSetup
             return false;
         }
-        const achData = lodashGet(this.props.reimbursementAccount, 'achData', {});
-        return achData.state === BankAccount.STATE.PENDING || _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''], this.getStepToOpenFromRouteParams());
-    }
-
-    /**
-     * @param {String} fieldName
-     * @param {*} defaultValue
-     *
-     * @returns {*}
-     */
-    getDefaultStateForField(fieldName, defaultValue = '') {
-        return lodashGet(this.props.reimbursementAccount, ['achData', fieldName], defaultValue);
-    }
-
-    /**
-     * We can pass stepToOpen in the URL to force which step to show.
-     * Mainly needed when user finished the flow in verifying state, and Ops ask them to modify some fields from a specific step.
-     * @returns {String}
-     */
-    getStepToOpenFromRouteParams() {
-        switch (lodashGet(this.props.route, ['params', 'stepToOpen'], '')) {
-            case 'new':
-                return CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-            case 'company':
-                return CONST.BANK_ACCOUNT.STEP.COMPANY;
-            case 'personal-information':
-                return CONST.BANK_ACCOUNT.STEP.REQUESTOR;
-            case 'contract':
-                return CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT;
-            case 'validate':
-                return CONST.BANK_ACCOUNT.STEP.VALIDATION;
-            case 'enable':
-                return CONST.BANK_ACCOUNT.STEP.ENABLE;
-            default:
-                return '';
-        }
-    }
-
-    /**
-     * @param {String} currentStep
-     * @returns {String}
-     */
-    getRouteForCurrentStep(currentStep) {
-        switch (currentStep) {
-            case CONST.BANK_ACCOUNT.STEP.COMPANY:
-                return 'company';
-            case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
-                return 'personal-information';
-            case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
-                return 'contract';
-            case CONST.BANK_ACCOUNT.STEP.VALIDATION:
-                return 'validate';
-            case CONST.BANK_ACCOUNT.STEP.ENABLE:
-                return 'enable';
-            case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
-            default:
-                return 'new';
-        }
+        return achData.state === BankAccount.STATE.PENDING || _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, ''], getStepToOpenFromRouteParams(route));
     }
 
-    /**
-     * Returns true if a VBBA exists in any state other than OPEN or LOCKED
-     * @returns {Boolean}
+    /** 
+        When this page is first opened, `reimbursementAccount` prop might not yet be fully loaded from Onyx
+        or could be partially loaded such that `reimbursementAccount.achData.currentStep` is unavailable.
+        Calculating `shouldShowContinueSetupButton` immediately on initial render doesn't make sense as
+        it relies on complete data. Thus, we should wait to calculate it until we have received
+        the full `reimbursementAccount` data from the server. This logic is handled within the useEffect hook,
+        which acts similarly to `componentDidUpdate` when the `reimbursementAccount` dependency changes.
      */
-    hasInProgressVBBA() {
-        const achData = lodashGet(this.props.reimbursementAccount, 'achData', {});
-        return achData.bankAccountID && achData.state !== BankAccount.STATE.OPEN && achData.state !== BankAccount.STATE.LOCKED;
-    }
+    const [hasACHDataBeenLoaded, setHasACHDataBeenLoaded] = useState(
+        reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && _.has(reimbursementAccount, 'achData.currentStep'),
+    );
+
+    const [shouldShowContinueSetupButton, setShouldShowContinueSetupButton] = useState(hasACHDataBeenLoaded ? getShouldShowContinueSetupButtonInitialValue() : false);
+
+    const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+    const policyName = lodashGet(policy, 'name', '');
+    const policyID = lodashGet(route.params, 'policyID', '');
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const requestorStepRef = useRef(null);
+    const prevReimbursementAccount = usePrevious(reimbursementAccount);
+    const prevIsOffline = usePrevious(isOffline);
 
     /**
      * Retrieve verified business bank account currently being set up.
      * @param {boolean} ignoreLocalCurrentStep Pass true if you want the last "updated" view (from db), not the last "viewed" view (from onyx).
      */
-    fetchData(ignoreLocalCurrentStep) {
+    function fetchData(ignoreLocalCurrentStep) {
         // Show loader right away, as optimisticData might be set only later in case multiple calls are in the queue
         BankAccounts.setReimbursementAccountLoading(true);
 
         // We can specify a step to navigate to by using route params when the component mounts.
         // We want to use the same stepToOpen variable when the network state changes because we can be redirected to a different step when the account refreshes.
-        const stepToOpen = this.getStepToOpenFromRouteParams();
-        const achData = lodashGet(this.props.reimbursementAccount, 'achData', {});
+        const stepToOpen = getStepToOpenFromRouteParams(route);
         const subStep = achData.subStep || '';
         const localCurrentStep = achData.currentStep || '';
         BankAccounts.openReimbursementAccountPage(stepToOpen, subStep, ignoreLocalCurrentStep ? '' : localCurrentStep);
     }
 
-    continue() {
-        this.setState({
-            shouldShowContinueSetupButton: false,
-        });
-        this.fetchData(true);
-    }
+    useEffect(
+        () => {
+            fetchData();
+            return () => {
+                BankAccounts.clearReimbursementAccount();
+            };
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    ); // The empty dependency array ensures this runs only once after the component mounts.
+
+    useEffect(
+        () => {
+            // Check for network change from offline to online
+            if (prevIsOffline && !isOffline && prevReimbursementAccount && prevReimbursementAccount.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
+                fetchData();
+            }
+
+            if (!hasACHDataBeenLoaded) {
+                if (reimbursementAccount !== ReimbursementAccountProps.reimbursementAccountDefaultProps && reimbursementAccount.isLoading === false) {
+                    setShouldShowContinueSetupButton(getShouldShowContinueSetupButtonInitialValue());
+                    setHasACHDataBeenLoaded(true);
+                }
+                return;
+            }
+
+            if (
+                prevReimbursementAccount &&
+                prevReimbursementAccount.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE &&
+                reimbursementAccount.pendingAction !== prevReimbursementAccount.pendingAction
+            ) {
+                setShouldShowContinueSetupButton(hasInProgressVBBA());
+            }
+
+            if (shouldShowContinueSetupButton) {
+                return;
+            }
+
+            const currentStepRouteParam = getStepToOpenFromRouteParams(route);
+            if (currentStepRouteParam === currentStep) {
+                // The route is showing the correct step, no need to update the route param or clear errors.
+                return;
+            }
+            if (currentStepRouteParam !== '') {
+                // When we click "Connect bank account", we load the page without the current step param, if there
+                // was an error when we tried to disconnect or start over, we want the user to be able to see the error,
+                // so we don't clear it. We only want to clear the errors if we are moving between steps.
+                BankAccounts.hideBankAccountErrors();
+            }
+
+            const backTo = lodashGet(route.params, 'backTo');
+            const policyId = lodashGet(route.params, 'policyID');
+
+            Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute(getRouteForCurrentStep(currentStep), policyId, backTo));
+        },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [isOffline, reimbursementAccount, route, hasACHDataBeenLoaded, shouldShowContinueSetupButton],
+    );
+
+    const continueFunction = () => {
+        setShouldShowContinueSetupButton(false);
+        fetchData(true);
+    };
 
-    goBack() {
-        const achData = lodashGet(this.props.reimbursementAccount, 'achData', {});
-        const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
+    /**
+     * @param {String} fieldName
+     * @param {String} defaultValue
+     *
+     * @returns {String}
+     */
+    const getDefaultStateForField = (fieldName, defaultValue = '') => lodashGet(reimbursementAccount, ['achData', fieldName], defaultValue);
+
+    const goBack = () => {
         const subStep = achData.subStep;
-        const shouldShowOnfido = this.props.onfidoToken && !achData.isOnfidoSetupComplete;
-        const backTo = lodashGet(this.props.route.params, 'backTo', ROUTES.HOME);
+        const shouldShowOnfido = onfidoToken && !achData.isOnfidoSetupComplete;
+        const backTo = lodashGet(route.params, 'backTo', ROUTES.HOME);
+
         switch (currentStep) {
             case CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT:
-                if (this.hasInProgressVBBA()) {
-                    this.setState({shouldShowContinueSetupButton: true});
+                if (hasInProgressVBBA()) {
+                    setShouldShowContinueSetupButton(true);
                 }
                 if (subStep) {
                     BankAccounts.setBankAccountSubStep(null);
@@ -346,9 +364,11 @@ class ReimbursementAccountPage extends React.Component {
                     Navigation.goBack(backTo);
                 }
                 break;
+
             case CONST.BANK_ACCOUNT.STEP.COMPANY:
                 BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, {subStep: CONST.BANK_ACCOUNT.SUBSTEP.MANUAL});
                 break;
+
             case CONST.BANK_ACCOUNT.STEP.REQUESTOR:
                 if (shouldShowOnfido) {
                     BankAccounts.clearOnfidoToken();
@@ -356,184 +376,168 @@ class ReimbursementAccountPage extends React.Component {
                     BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.COMPANY);
                 }
                 break;
+
             case CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT:
                 BankAccounts.clearOnfidoToken();
                 BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.REQUESTOR);
                 break;
+
             case CONST.BANK_ACCOUNT.STEP.VALIDATION:
                 if (_.contains([BankAccount.STATE.VERIFYING, BankAccount.STATE.SETUP], achData.state)) {
                     BankAccounts.goToWithdrawalAccountSetupStep(CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT);
-                } else if (!this.props.network.isOffline && achData.state === BankAccount.STATE.PENDING) {
-                    this.setState({
-                        shouldShowContinueSetupButton: true,
-                    });
+                } else if (!isOffline && achData.state === BankAccount.STATE.PENDING) {
+                    setShouldShowContinueSetupButton(true);
                 } else {
                     Navigation.goBack(backTo);
                 }
                 break;
+
             default:
                 Navigation.goBack(backTo);
         }
+    };
+
+    if (_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy)) {
+        return (
+            <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
+                <FullPageNotFoundView
+                    shouldShow
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
+                    subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'}
+                />
+            </ScreenWrapper>
+        );
     }
 
-    render() {
-        // The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
-        // user left off. This view will refer to the achData as the single source of truth to determine which route to
-        // display. We can also specify a specific route to navigate to via route params when the component first
-        // mounts which will set the achData.currentStep after the account data is fetched and overwrite the logical
-        // next step.
-        const achData = lodashGet(this.props.reimbursementAccount, 'achData', {});
-        const currentStep = achData.currentStep || CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT;
-        const policyName = lodashGet(this.props.policy, 'name');
-        const policyID = lodashGet(this.props.route.params, 'policyID');
-
-        if (_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)) {
-            return (
-                <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
-                    <FullPageNotFoundView
-                        shouldShow
-                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
-                        subtitleKey={_.isEmpty(this.props.policy) ? undefined : 'workspace.common.notAuthorized'}
-                    />
-                </ScreenWrapper>
-            );
-        }
-        const isLoading =
-            (this.props.isLoadingReportData || this.props.account.isLoading || this.props.reimbursementAccount.isLoading) &&
-            (!this.props.plaidCurrentEvent || this.props.plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);
-
-        // Prevent the full-page blocking offline view from being displayed for these steps if the device goes offline.
-        const shouldShowOfflineLoader = !(
-            this.props.network.isOffline &&
-            _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep)
+    const isLoading = (isLoadingReportData || account.isLoading || reimbursementAccount.isLoading) && (!plaidCurrentEvent || plaidCurrentEvent === CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.EXIT);
+    const shouldShowOfflineLoader = !(
+        isOffline && _.contains([CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT, CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep)
+    );
+
+    // Show loading indicator when page is first time being opened and props.reimbursementAccount yet to be loaded from the server
+    // or when data is being loaded. Don't show the loading indicator if we're offline and restarted the bank account setup process
+    // On Android, when we open the app from the background, Onfido activity gets destroyed, so we need to reopen it.
+    if ((!hasACHDataBeenLoaded || isLoading) && shouldShowOfflineLoader && (shouldReopenOnfido || !requestorStepRef.current)) {
+        const isSubmittingVerificationsData = _.contains([CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep);
+        return (
+            <ReimbursementAccountLoadingIndicator
+                isSubmittingVerificationsData={isSubmittingVerificationsData}
+                onBackButtonPress={goBack}
+            />
         );
+    }
 
-        // Show loading indicator when page is first time being opened and props.reimbursementAccount yet to be loaded from the server
-        // or when data is being loaded. Don't show the loading indicator if we're offline and restarted the bank account setup process
-        // On Android, when we open the app from the background, Onfido activity gets destroyed, so we need to reopen it.
-        if ((!this.state.hasACHDataBeenLoaded || isLoading) && shouldShowOfflineLoader && (shouldReopenOnfido || !this.requestorStepRef.current)) {
-            const isSubmittingVerificationsData = _.contains([CONST.BANK_ACCOUNT.STEP.COMPANY, CONST.BANK_ACCOUNT.STEP.REQUESTOR, CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT], currentStep);
-            return (
-                <ReimbursementAccountLoadingIndicator
-                    isSubmittingVerificationsData={isSubmittingVerificationsData}
-                    onBackButtonPress={this.goBack}
-                />
-            );
-        }
-
-        let errorText;
-        const userHasPhonePrimaryEmail = Str.endsWith(this.props.session.email, CONST.SMS.DOMAIN);
-        const throttledDate = lodashGet(this.props.reimbursementAccount, 'throttledDate');
-        const hasUnsupportedCurrency = lodashGet(this.props.policy, 'outputCurrency', '') !== CONST.CURRENCY.USD;
-
-        if (userHasPhonePrimaryEmail) {
-            errorText = this.props.translate('bankAccount.hasPhoneLoginError');
-        } else if (throttledDate) {
-            errorText = this.props.translate('bankAccount.hasBeenThrottledError');
-        } else if (hasUnsupportedCurrency) {
-            errorText = this.props.translate('bankAccount.hasCurrencyError');
-        }
-
-        if (errorText) {
-            return (
-                <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
-                    <HeaderWithBackButton
-                        title={this.props.translate('workspace.common.connectBankAccount')}
-                        subtitle={policyName}
-                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
-                    />
-
-                    <View style={[this.props.themeStyles.m5, this.props.themeStyles.mv3, this.props.themeStyles.flex1]}>
-                        <Text>{errorText}</Text>
-                    </View>
-                </ScreenWrapper>
-            );
-        }
+    let errorText;
+    const userHasPhonePrimaryEmail = Str.endsWith(session.email, CONST.SMS.DOMAIN);
+    const throttledDate = lodashGet(reimbursementAccount, 'throttledDate', '');
+    const hasUnsupportedCurrency = lodashGet(policy, 'outputCurrency', '') !== CONST.CURRENCY.USD;
+
+    if (userHasPhonePrimaryEmail) {
+        errorText = translate('bankAccount.hasPhoneLoginError');
+    } else if (throttledDate) {
+        errorText = translate('bankAccount.hasBeenThrottledError');
+    } else if (hasUnsupportedCurrency) {
+        errorText = translate('bankAccount.hasCurrencyError');
+    }
 
-        if (this.state.shouldShowContinueSetupButton) {
-            return (
-                <ContinueBankAccountSetup
-                    reimbursementAccount={this.props.reimbursementAccount}
-                    continue={this.continue}
-                    policyName={policyName}
-                    onBackButtonPress={() => {
-                        Navigation.goBack(lodashGet(this.props.route.params, 'backTo', ROUTES.HOME));
-                    }}
+    if (errorText) {
+        return (
+            <ScreenWrapper testID={ReimbursementAccountPage.displayName}>
+                <HeaderWithBackButton
+                    title={translate('workspace.common.connectBankAccount')}
+                    subtitle={policyName}
+                    onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                 />
-            );
-        }
+                <View style={[styles.m5, styles.mv3, styles.flex1]}>
+                    <Text>{errorText}</Text>
+                </View>
+            </ScreenWrapper>
+        );
+    }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT) {
-            return (
-                <BankAccountStep
-                    reimbursementAccount={this.props.reimbursementAccount}
-                    reimbursementAccountDraft={this.props.reimbursementAccountDraft}
-                    onBackButtonPress={this.goBack}
-                    receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
-                    plaidLinkOAuthToken={this.props.plaidLinkToken}
-                    getDefaultStateForField={this.getDefaultStateForField}
-                    policyName={policyName}
-                    policyID={policyID}
-                />
-            );
-        }
+    if (shouldShowContinueSetupButton) {
+        return (
+            <ContinueBankAccountSetup
+                reimbursementAccount={reimbursementAccount}
+                continue={continueFunction}
+                policyName={policyName}
+                onBackButtonPress={() => {
+                    Navigation.goBack(lodashGet(route.params, 'backTo', ROUTES.HOME));
+                }}
+            />
+        );
+    }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY) {
-            return (
-                <CompanyStep
-                    reimbursementAccount={this.props.reimbursementAccount}
-                    reimbursementAccountDraft={this.props.reimbursementAccountDraft}
-                    onBackButtonPress={this.goBack}
-                    getDefaultStateForField={this.getDefaultStateForField}
-                    policyID={policyID}
-                />
-            );
-        }
+    if (currentStep === CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT) {
+        return (
+            <BankAccountStep
+                reimbursementAccount={reimbursementAccount}
+                reimbursementAccountDraft={reimbursementAccountDraft}
+                onBackButtonPress={goBack}
+                receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                plaidLinkOAuthToken={plaidLinkToken}
+                getDefaultStateForField={getDefaultStateForField}
+                policyName={policyName}
+                policyID={policyID}
+            />
+        );
+    }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
-            const shouldShowOnfido = this.props.onfidoToken && !achData.isOnfidoSetupComplete;
-            return (
-                <RequestorStep
-                    ref={this.requestorStepRef}
-                    reimbursementAccount={this.props.reimbursementAccount}
-                    onBackButtonPress={this.goBack}
-                    shouldShowOnfido={Boolean(shouldShowOnfido)}
-                    getDefaultStateForField={this.getDefaultStateForField}
-                />
-            );
-        }
+    if (currentStep === CONST.BANK_ACCOUNT.STEP.COMPANY) {
+        return (
+            <CompanyStep
+                reimbursementAccount={reimbursementAccount}
+                reimbursementAccountDraft={reimbursementAccountDraft}
+                onBackButtonPress={goBack}
+                getDefaultStateForField={getDefaultStateForField}
+                policyID={policyID}
+            />
+        );
+    }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT) {
-            return (
-                <ACHContractStep
-                    reimbursementAccount={this.props.reimbursementAccount}
-                    reimbursementAccountDraft={this.props.reimbursementAccountDraft}
-                    onBackButtonPress={this.goBack}
-                    companyName={achData.companyName}
-                    getDefaultStateForField={this.getDefaultStateForField}
-                />
-            );
-        }
+    if (currentStep === CONST.BANK_ACCOUNT.STEP.REQUESTOR) {
+        const shouldShowOnfido = onfidoToken && !achData.isOnfidoSetupComplete;
+        return (
+            <RequestorStep
+                ref={requestorStepRef}
+                reimbursementAccount={reimbursementAccount}
+                onBackButtonPress={goBack}
+                shouldShowOnfido={Boolean(shouldShowOnfido)}
+                getDefaultStateForField={getDefaultStateForField}
+            />
+        );
+    }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION) {
-            return (
-                <ValidationStep
-                    reimbursementAccount={this.props.reimbursementAccount}
-                    onBackButtonPress={this.goBack}
-                    policyID={policyID}
-                />
-            );
-        }
+    if (currentStep === CONST.BANK_ACCOUNT.STEP.ACH_CONTRACT) {
+        return (
+            <ACHContractStep
+                reimbursementAccount={reimbursementAccount}
+                reimbursementAccountDraft={reimbursementAccountDraft}
+                onBackButtonPress={goBack}
+                companyName={achData.companyName}
+                getDefaultStateForField={getDefaultStateForField}
+            />
+        );
+    }
 
-        if (currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE) {
-            return (
-                <EnableStep
-                    reimbursementAccount={this.props.reimbursementAccount}
-                    policyName={policyName}
-                    onBackButtonPress={this.goBack}
-                />
-            );
-        }
+    if (currentStep === CONST.BANK_ACCOUNT.STEP.VALIDATION) {
+        return (
+            <ValidationStep
+                reimbursementAccount={reimbursementAccount}
+                onBackButtonPress={goBack}
+                policyID={policyID}
+            />
+        );
+    }
+
+    if (currentStep === CONST.BANK_ACCOUNT.STEP.ENABLE) {
+        return (
+            <EnableStep
+                reimbursementAccount={reimbursementAccount}
+                policyName={policyName}
+                onBackButtonPress={goBack}
+            />
+        );
     }
 }
 
@@ -542,7 +546,6 @@ ReimbursementAccountPage.defaultProps = defaultProps;
 ReimbursementAccountPage.displayName = 'ReimbursementAccountPage';
 
 export default compose(
-    withNetwork(),
     withOnyx({
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
@@ -569,7 +572,5 @@ export default compose(
             key: ONYXKEYS.ACCOUNT,
         },
     }),
-    withLocalize,
     withPolicy,
-    withThemeStyles,
 )(ReimbursementAccountPage);
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index 6d1a1e4db077..c5e6bf43fa1d 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -9,6 +9,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MultipleAvatars from '@components/MultipleAvatars';
+import {withNetwork} from '@components/OnyxProvider';
 import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
 import participantPropTypes from '@components/participantPropTypes';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -76,6 +77,17 @@ function ReportDetailsPage(props) {
 
     const isGroupDMChat = useMemo(() => ReportUtils.isDM(props.report) && participants.length > 1, [props.report, participants.length]);
 
+    const isPrivateNotesFetchTriggered = !_.isUndefined(props.report.isLoadingPrivateNotes);
+
+    useEffect(() => {
+        // Do not fetch private notes if isLoadingPrivateNotes is already defined, or if network is offline.
+        if (isPrivateNotesFetchTriggered || props.network.isOffline) {
+            return;
+        }
+
+        Report.getReportPrivateNote(props.report.reportID);
+    }, [props.report.reportID, props.network.isOffline, isPrivateNotesFetchTriggered]);
+
     const menuItems = useMemo(() => {
         const items = [];
 
@@ -93,7 +105,7 @@ function ReportDetailsPage(props) {
             return items;
         }
 
-        if ((!isUserCreatedPolicyRoom && participants.length) || (isUserCreatedPolicyRoom && isPolicyMember)) {
+        if ((!isUserCreatedPolicyRoom && participants.length) || (isUserCreatedPolicyRoom && (!ReportUtils.isPublicRoom(props.report) || isPolicyMember))) {
             items.push({
                 key: CONST.REPORT_DETAILS_MENU_ITEM.MEMBERS,
                 translationKey: 'common.members',
@@ -108,7 +120,7 @@ function ReportDetailsPage(props) {
                     }
                 },
             });
-        } else if ((!participants.length || !isPolicyMember) && isUserCreatedPolicyRoom && !props.report.parentReportID) {
+        } else if (isUserCreatedPolicyRoom && (!participants.length || !isPolicyMember) && !props.report.parentReportID) {
             items.push({
                 key: CONST.REPORT_DETAILS_MENU_ITEM.INVITE,
                 translationKey: 'common.invite',
@@ -137,13 +149,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;
@@ -249,6 +261,7 @@ ReportDetailsPage.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withReportOrNotFound(),
+    withNetwork(),
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
@@ -256,5 +269,8 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(ReportDetailsPage);
diff --git a/src/pages/ReportWelcomeMessagePage.js b/src/pages/ReportWelcomeMessagePage.js
index a0e471d00df6..fcf9da89ad69 100644
--- a/src/pages/ReportWelcomeMessagePage.js
+++ b/src/pages/ReportWelcomeMessagePage.js
@@ -5,7 +5,8 @@ import React, {useCallback, useRef, useState} 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 InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
@@ -86,7 +87,7 @@ function ReportWelcomeMessagePage(props) {
                     title={props.translate('welcomeMessagePage.welcomeMessage')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(props.report.reportID))}
                 />
-                <Form
+                <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM}
                     onSubmit={submitForm}
@@ -95,7 +96,8 @@ function ReportWelcomeMessagePage(props) {
                 >
                     <Text style={[styles.mb5]}>{props.translate('welcomeMessagePage.explainerText')}</Text>
                     <View style={[styles.mb6]}>
-                        <TextInput
+                        <InputWrapper
+                            InputComponent={TextInput}
                             inputID="welcomeMessage"
                             label={props.translate('welcomeMessagePage.welcomeMessage')}
                             accessibilityLabel={props.translate('welcomeMessagePage.welcomeMessage')}
@@ -112,11 +114,10 @@ function ReportWelcomeMessagePage(props) {
                             value={welcomeMessage}
                             onChangeText={handleWelcomeMessageChange}
                             autoCapitalize="none"
-                            inputStyle={[styles.verticalAlignTop]}
                             containerStyles={[styles.autoGrowHeightMultilineInput]}
                         />
                     </View>
-                </Form>
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
diff --git a/src/pages/RoomInvitePage.js b/src/pages/RoomInvitePage.js
index a1f7d22c3dc3..9b5b4f461652 100644
--- a/src/pages/RoomInvitePage.js
+++ b/src/pages/RoomInvitePage.js
@@ -14,7 +14,6 @@ import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import Permissions from '@libs/Permissions';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -73,16 +72,6 @@ function RoomInvitePage(props) {
     // Any existing participants and Expensify emails should not be eligible for invitation
     const excludedUsers = useMemo(() => [...PersonalDetailsUtils.getLoginsByAccountIDs(lodashGet(props.report, 'participantAccountIDs', [])), ...CONST.EXPENSIFY_EMAILS], [props.report]);
 
-    useEffect(() => {
-        // Kick the user out if they tried to navigate to this via the URL
-        if (Permissions.canUsePolicyRooms(props.betas)) {
-            return;
-        }
-        Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID));
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     useEffect(() => {
         const inviteOptions = OptionsListUtils.getMemberInviteOptions(props.personalDetails, props.betas, searchTerm, excludedUsers);
 
diff --git a/src/pages/RoomMembersPage.js b/src/pages/RoomMembersPage.js
index 2b96536c9719..23722625b961 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';
@@ -17,7 +18,6 @@ import compose from '@libs/compose';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import Permissions from '@libs/Permissions';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
@@ -27,16 +27,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),
-
     /** The report currently being looked at */
     report: reportPropTypes.isRequired,
 
@@ -67,13 +60,11 @@ const propTypes = {
 };
 
 const defaultProps = {
-    personalDetails: {},
     session: {
         accountID: 0,
     },
     report: {},
     policies: {},
-    betas: [],
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -83,6 +74,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
@@ -93,11 +85,6 @@ function RoomMembersPage(props) {
     }, [props.report.reportID]);
 
     useEffect(() => {
-        // Kick the user out if they tried to navigate to this via the URL
-        if (!PolicyUtils.isPolicyMember(props.report.policyID, props.policies) || !Permissions.canUsePolicyRooms(props.betas)) {
-            Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID));
-            return;
-        }
         getRoomMembers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -187,7 +174,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}`);
@@ -250,7 +237,7 @@ function RoomMembersPage(props) {
             testID={RoomMembersPage.displayName}
         >
             <FullPageNotFoundView
-                shouldShow={_.isEmpty(props.report) || !isPolicyMember}
+                shouldShow={_.isEmpty(props.report) || (ReportUtils.isPublicRoom(props.report) && !isPolicyMember)}
                 subtitleKey={_.isEmpty(props.report) ? undefined : 'roomMembersPage.notAuthorized'}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID))}
             >
@@ -299,7 +286,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,18 +306,12 @@ export default compose(
     withWindowDimensions,
     withReportOrNotFound(),
     withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
     }),
     withCurrentUserPersonalDetails,
 )(RoomMembersPage);
diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
index 3332c3d2058a..5d111e7c181f 100755
--- a/src/pages/SearchPage.js
+++ b/src/pages/SearchPage.js
@@ -84,10 +84,7 @@ class SearchPage extends Component {
     }
 
     onChangeText(searchValue = '') {
-        if (searchValue.length) {
-            Report.searchInServer(searchValue);
-        }
-
+        Report.searchInServer(searchValue);
         this.setState({searchValue}, this.debouncedUpdateOptions);
     }
 
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index d81593fb552a..c63db694159f 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -108,12 +108,6 @@ class ShareCodePage extends React.Component {
                             onPress={() => Clipboard.setString(url)}
                         />
 
-                        <MenuItem
-                            title={this.props.translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
-                            icon={Expensicons.Cash}
-                            onPress={() => Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))}
-                        />
-
                         {isNative && (
                             <MenuItem
                                 isAnonymousAction
@@ -123,6 +117,12 @@ class ShareCodePage extends React.Component {
                                 onPress={() => this.qrCodeRef.current?.download()}
                             />
                         )}
+
+                        <MenuItem
+                            title={this.props.translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.buttonText1`)}
+                            icon={Expensicons.Cash}
+                            onPress={() => Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE))}
+                        />
                     </View>
                 </ScrollView>
             </ScreenWrapper>
diff --git a/src/pages/TeachersUnite/SaveTheWorldPage.js b/src/pages/TeachersUnite/SaveTheWorldPage.js
index 6d448b6b08b1..d179b7d1db95 100644
--- a/src/pages/TeachersUnite/SaveTheWorldPage.js
+++ b/src/pages/TeachersUnite/SaveTheWorldPage.js
@@ -38,7 +38,7 @@ function SaveTheWorldPage(props) {
         <IllustratedHeaderPageLayout
             shouldShowBackButton
             title={translate('sidebarScreen.saveTheWorld')}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SAVE_THE_WORLD.ROOT]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SAVE_THE_WORLD.ROOT].backgroundColor}
             onBackButtonPress={() => Navigation.goBack(ROUTES.HOME)}
             illustration={LottieAnimations.SaveTheWorld}
         >
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 68d2af8beb63..e9b79c41dcd7 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -314,7 +314,7 @@ function ReportScreen({
                 prevOnyxReportID === routeReportID &&
                 !onyxReportID &&
                 prevReport.statusNum === CONST.REPORT.STATUS.OPEN &&
-                (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID)))
+                (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID && prevReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ROOM)))
         ) {
             Navigation.dismissModal();
             if (Navigation.getTopmostReportId() === prevOnyxReportID) {
@@ -339,7 +339,7 @@ function ReportScreen({
 
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
-    }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, prevUserLeavingStatus, userLeavingStatus, prevReport.statusNum, prevReport.parentReportID]);
+    }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, prevUserLeavingStatus, userLeavingStatus, prevReport.statusNum, prevReport.parentReportID, prevReport.chatType]);
 
     useEffect(() => {
         if (!ReportUtils.isValidReportIDFromPath(reportID)) {
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..2d4e6bfbb35a 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';
 
@@ -26,13 +27,14 @@ const defaultProps = {
 };
 
 function HeaderReactionList(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     return (
         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.emojiReactionListHeader, !props.isSmallScreenWidth && styles.pt4]}>
             <View style={styles.flexRow}>
-                <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(false, props.hasUserReacted)]}>
+                <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(theme, false, props.hasUserReacted)]}>
                     <Text style={[styles.miniQuickEmojiReactionText, StyleUtils.getEmojiReactionBubbleTextStyle(true)]}>{props.emojiCodes.join('')}</Text>
-                    <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.emojiCount}</Text>
+                    <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(theme, props.hasUserReacted)]}>{props.emojiCount}</Text>
                 </View>
                 <Text style={styles.reactionListHeaderText}>{`:${EmojiUtils.getLocalizedEmojiName(props.emojiName, props.preferredLocale)}:`}</Text>
             </View>
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index 02f041ce092e..a3fdc7f574f6 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);
 
@@ -436,18 +427,7 @@ function ComposerWithSuggestions({
                 return;
             }
 
-            // If the key pressed is non-character keys like Enter, Shift, ... do not focus
-            if (e.key.length > 1) {
-                return;
-            }
-
-            // If a key is pressed in combination with Meta, Control or Alt do not focus
-            if (e.metaKey || e.ctrlKey || e.altKey) {
-                return;
-            }
-
-            // If the space key is pressed, do not focus
-            if (e.code === 'Space') {
+            if (!ReportUtils.shouldAutoFocusOnKeyPress(e)) {
                 return;
             }
 
@@ -498,7 +478,7 @@ function ComposerWithSuggestions({
         // We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
         // We avoid doing this on native platforms since the software keyboard popping
         // open creates a jarring and broken UX.
-        if (!(willBlurTextInputOnTapOutside && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
+        if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
             return;
         }
 
@@ -507,7 +487,8 @@ function ComposerWithSuggestions({
             return;
         }
         focus(true);
-    }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);
+    }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef, shouldAutoFocus]);
+
     useEffect(() => {
         // Scrolls the composer to the bottom and sets the selection to the end, so that longer drafts are easier to edit
         updateMultilineInputRange(textInputRef.current, shouldAutoFocus);
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index 7bce37dc3826..2632324a963f 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -11,8 +11,7 @@ import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton';
 import ExceededCommentLength from '@components/ExceededCommentLength';
 import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {withNetwork} from '@components/OnyxProvider';
-import participantPropTypes from '@components/participantPropTypes';
+import {usePersonalDetails, withNetwork} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -49,9 +48,6 @@ const propTypes = {
     /** Array of report actions for this report */
     reportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)),
 
-    /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
-
     /** The report currently being looked at */
     report: reportPropTypes,
 
@@ -84,7 +80,6 @@ const propTypes = {
 const defaultProps = {
     report: {},
     blockedFromConcierge: {},
-    personalDetails: {},
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
     isComposerFullSize: false,
     pendingAction: null,
@@ -108,7 +103,6 @@ function ReportActionCompose({
     network,
     onSubmit,
     pendingAction,
-    personalDetails,
     report,
     reportID,
     reportActions,
@@ -121,7 +115,7 @@ function ReportActionCompose({
     const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
     const animatedRef = useAnimatedRef();
     const actionButtonRef = useRef(null);
-
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     /**
      * Updates the Highlight state of the composer
      */
@@ -195,8 +189,9 @@ function ReportActionCompose({
     };
 
     const isKeyboardVisibleWhenShowingModalRef = useRef(false);
+    const isNextModalWillOpenRef = useRef(false);
     const restoreKeyboardState = useCallback(() => {
-        if (!isKeyboardVisibleWhenShowingModalRef.current) {
+        if (!isKeyboardVisibleWhenShowingModalRef.current || isNextModalWillOpenRef.current) {
             return;
         }
         focus();
@@ -271,13 +266,7 @@ function ReportActionCompose({
         [onSubmit],
     );
 
-    const isNextModalWillOpenRef = useRef(false);
     const onTriggerAttachmentPicker = useCallback(() => {
-        // Set a flag to block suggestion calculation until we're finished using the file picker,
-        // which will stop any flickering as the file picker opens on non-native devices.
-        if (willBlurTextInputOnTapOutside) {
-            suggestionsRef.current.setShouldBlockSuggestionCalc(true);
-        }
         isNextModalWillOpenRef.current = true;
         isKeyboardVisibleWhenShowingModalRef.current = true;
     }, []);
@@ -385,7 +374,10 @@ function ReportActionCompose({
                                         setMenuVisibility={setMenuVisibility}
                                         isMenuVisible={isMenuVisible}
                                         onTriggerAttachmentPicker={onTriggerAttachmentPicker}
-                                        onCanceledAttachmentPicker={restoreKeyboardState}
+                                        onCanceledAttachmentPicker={() => {
+                                            isNextModalWillOpenRef.current = false;
+                                            restoreKeyboardState();
+                                        }}
                                         onMenuClosed={restoreKeyboardState}
                                         onAddActionPressed={onAddActionPressed}
                                         onItemSelected={onItemSelected}
@@ -474,9 +466,6 @@ export default compose(
         blockedFromConcierge: {
             key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         shouldShowComposeInput: {
             key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
         },
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
index 6e8d8d12afaf..e35d1e90bd5a 100644
--- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
+++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.js
@@ -63,7 +63,7 @@ function SuggestionEmoji({
 }) {
     const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);
 
-    const isEmojiSuggestionsMenuVisible = !_.isEmpty(suggestionValues.suggestedEmojis) && suggestionValues.shouldShowEmojiSuggestionMenu;
+    const isEmojiSuggestionsMenuVisible = !_.isEmpty(suggestionValues.suggestedEmojis) && suggestionValues.shouldShowSuggestionMenu;
 
     const [highlightedEmojiIndex, setHighlightedEmojiIndex] = useArrowKeyFocusManager({
         isActive: isEmojiSuggestionsMenuVisible,
@@ -166,13 +166,13 @@ function SuggestionEmoji({
             const nextState = {
                 suggestedEmojis: [],
                 colonIndex,
-                shouldShowEmojiSuggestionMenu: false,
+                shouldShowSuggestionMenu: false,
             };
             const newSuggestedEmojis = EmojiUtils.suggestEmojis(leftString, preferredLocale);
 
             if (newSuggestedEmojis.length && isCurrentlyShowingEmojiSuggestion) {
                 nextState.suggestedEmojis = newSuggestedEmojis;
-                nextState.shouldShowEmojiSuggestionMenu = !_.isEmpty(newSuggestedEmojis);
+                nextState.shouldShowSuggestionMenu = !_.isEmpty(newSuggestedEmojis);
             }
 
             setSuggestionValues((prevState) => ({...prevState, ...nextState}));
diff --git a/src/pages/home/report/ReportActionCompose/Suggestions.js b/src/pages/home/report/ReportActionCompose/Suggestions.js
index 05f35713c5f8..5dc71fec6419 100644
--- a/src/pages/home/report/ReportActionCompose/Suggestions.js
+++ b/src/pages/home/report/ReportActionCompose/Suggestions.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useImperativeHandle, useRef} from 'react';
+import React, {useCallback, useContext, useEffect, useImperativeHandle, useRef} from 'react';
 import {View} from 'react-native';
+import {DragAndDropContext} from '@components/DragAndDrop/Provider';
+import usePrevious from '@hooks/usePrevious';
 import SuggestionEmoji from './SuggestionEmoji';
 import SuggestionMention from './SuggestionMention';
 import * as SuggestionProps from './suggestionProps';
@@ -45,6 +47,8 @@ function Suggestions({
 }) {
     const suggestionEmojiRef = useRef(null);
     const suggestionMentionRef = useRef(null);
+    const {isDraggingOver} = useContext(DragAndDropContext);
+    const prevIsDraggingOver = usePrevious(isDraggingOver);
 
     const getSuggestions = useCallback(() => {
         if (suggestionEmojiRef.current && suggestionEmojiRef.current.getSuggestions) {
@@ -111,6 +115,13 @@ function Suggestions({
         [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
     );
 
+    useEffect(() => {
+        if (!(!prevIsDraggingOver && isDraggingOver)) {
+            return;
+        }
+        updateShouldShowSuggestionMenuToFalse();
+    }, [isDraggingOver, prevIsDraggingOver, updateShouldShowSuggestionMenuToFalse]);
+
     const baseProps = {
         value,
         setValue,
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 828a793a8565..92bb370155c9 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -34,6 +34,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import usePrevious from '@hooks/usePrevious';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import focusTextInputAfterAnimation from '@libs/focusTextInputAfterAnimation';
 import Navigation from '@libs/Navigation/Navigation';
@@ -45,9 +46,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 +135,8 @@ const defaultProps = {
 };
 
 function ReportActionItem(props) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(props.action.reportActionID));
     const [isHidden, setIsHidden] = useState(false);
@@ -148,7 +151,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
@@ -413,6 +416,11 @@ function ReportActionItem(props) {
                     </>
                 </ReportActionItemBasicMessage>
             );
+        } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTDEQUEUED) {
+            const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [props.report.ownerAccountID, 'displayName']);
+            const amount = CurrencyUtils.convertToDisplayString(props.report.total, props.report.currency);
+
+            children = <ReportActionItemBasicMessage message={props.translate('iou.canceledRequest', {submitterDisplayName, amount})} />;
         } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE) {
             children = <ReportActionItemBasicMessage message={ReportUtils.getModifiedExpenseMessage(props.action)} />;
         } else {
@@ -685,7 +693,7 @@ function ReportActionItem(props) {
                             draftMessage={props.draftMessage}
                             isChronosReport={ReportUtils.chatIncludesChronos(originalReport)}
                         />
-                        <View style={StyleUtils.getReportActionItemStyle(hovered || isWhisper || isContextMenuActive || props.draftMessage)}>
+                        <View style={StyleUtils.getReportActionItemStyle(theme, styles, hovered || isWhisper || isContextMenuActive || props.draftMessage)}>
                             <OfflineWithFeedback
                                 onClose={() => ReportActions.clearReportActionErrors(props.report.reportID, props.action)}
                                 pendingAction={props.draftMessage ? null : props.action.pendingAction}
diff --git a/src/pages/home/report/ReportActionItemBasicMessage.js b/src/pages/home/report/ReportActionItemBasicMessage.tsx
similarity index 52%
rename from src/pages/home/report/ReportActionItemBasicMessage.js
rename to src/pages/home/report/ReportActionItemBasicMessage.tsx
index 219564e5a8ec..bf53ee16450d 100644
--- a/src/pages/home/report/ReportActionItemBasicMessage.js
+++ b/src/pages/home/report/ReportActionItemBasicMessage.tsx
@@ -1,30 +1,23 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import useThemeStyles from '@styles/useThemeStyles';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const propTypes = {
-    message: PropTypes.string.isRequired,
-    children: PropTypes.element,
+type ReportActionItemBasicMessageProps = ChildrenProps & {
+    message: string;
 };
 
-const defaultProps = {
-    children: null,
-};
-
-function ReportActionItemBasicMessage(props) {
+function ReportActionItemBasicMessage({message, children}: ReportActionItemBasicMessageProps) {
     const styles = useThemeStyles();
     return (
         <View>
-            <Text style={[styles.chatItemMessage, styles.colorMuted]}>{props.message}</Text>
-            {props.children}
+            <Text style={[styles.chatItemMessage, styles.colorMuted]}>{message}</Text>
+            {children}
         </View>
     );
 }
 
-ReportActionItemBasicMessage.propTypes = propTypes;
-ReportActionItemBasicMessage.defaultProps = defaultProps;
 ReportActionItemBasicMessage.displayName = 'ReportActionBasicMessage';
 
 export default ReportActionItemBasicMessage;
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 9c641d879de3..b13d57ad2976 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -21,7 +21,7 @@ import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 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';
@@ -79,6 +79,7 @@ const showWorkspaceDetails = (reportID) => {
 };
 
 function ReportActionItemSingle(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID;
@@ -155,7 +156,9 @@ function ReportActionItemSingle(props) {
     }, [isWorkspaceActor, reportID, actorAccountID, props.action.delegateAccountID, iouReportID, displayAllActors]);
 
     const shouldDisableDetailPage = useMemo(
-        () => !isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID),
+        () =>
+            actorAccountID === CONST.ACCOUNT_ID.NOTIFICATIONS ||
+            (!isWorkspaceActor && ReportUtils.isOptimisticPersonalDetail(props.action.delegateAccountID ? props.action.delegateAccountID : actorAccountID)),
         [props.action, isWorkspaceActor, actorAccountID],
     );
 
@@ -166,10 +169,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]}
                 />
             );
         }
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/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index b4d21de919bf..607d98039070 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -103,8 +103,9 @@ function ReportActionsView(props) {
     const isReportFullyVisible = useMemo(() => getIsReportFullyVisible(isFocused), [isFocused]);
 
     const openReportIfNecessary = () => {
+        const createChatError = _.get(props.report, ['errorFields', 'createChat']);
         // If the report is optimistic (AKA not yet created) we don't need to call openReport again
-        if (props.report.isOptimisticReport) {
+        if (props.report.isOptimisticReport || !_.isEmpty(createChatError)) {
             return;
         }
 
diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js
index c580da7887a2..8ecbb036a756 100644
--- a/src/pages/home/report/ReportAttachments.js
+++ b/src/pages/home/report/ReportAttachments.js
@@ -23,7 +23,10 @@ const propTypes = {
 function ReportAttachments(props) {
     const reportID = _.get(props, ['route', 'params', 'reportID']);
     const report = ReportUtils.getReport(reportID);
-    const source = decodeURI(_.get(props, ['route', 'params', 'source']));
+
+    // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource
+    const decodedSource = decodeURI(_.get(props, ['route', 'params', 'source']));
+    const source = Number(decodedSource) || decodedSource;
 
     const onCarouselAttachmentChange = useCallback(
         (attachment) => {
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index a1ba7042f158..21e712c418e6 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -128,8 +128,8 @@ function FloatingActionButtonAndPopover(props) {
             if (!isCreateMenuActive) {
                 return;
             }
-            props.onHideCreateMenu();
             setIsCreateMenuActive(false);
+            props.onHideCreateMenu();
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [isCreateMenuActive],
@@ -182,7 +182,7 @@ function FloatingActionButtonAndPopover(props) {
         <View>
             <PopoverMenu
                 onClose={hideCreateMenu}
-                isVisible={isCreateMenuActive}
+                isVisible={isCreateMenuActive && (!props.isSmallScreenWidth || props.isFocused)}
                 anchorPosition={styles.createMenuPositionSidebar(props.windowHeight)}
                 onItemSelected={hideCreateMenu}
                 fromSidebarMediumScreen={!props.isSmallScreenWidth}
diff --git a/src/pages/iou/MoneyRequestDatePage.js b/src/pages/iou/MoneyRequestDatePage.js
index 2eae14b2e180..9f80cbce9984 100644
--- a/src/pages/iou/MoneyRequestDatePage.js
+++ b/src/pages/iou/MoneyRequestDatePage.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
@@ -99,7 +99,7 @@ function MoneyRequestDatePage({iou, route, selectedTab}) {
                 submitButtonText={translate('common.save')}
                 enabledWhenOffline
             >
-                <NewDatePicker
+                <DatePicker
                     inputID="moneyRequestCreated"
                     label={translate('common.date')}
                     defaultValue={iou.created}
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
index 43d7b58bfc7f..8598f355435b 100644
--- a/src/pages/iou/MoneyRequestDescriptionPage.js
+++ b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -142,7 +142,6 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
                             }}
                             autoGrowHeight
                             containerStyles={[styles.autoGrowHeightMultilineInput]}
-                            inputStyle={[styles.verticalAlignTop]}
                             submitOnEnter={!Browser.isMobile()}
                         />
                     </View>
diff --git a/src/pages/iou/SplitBillDetailsPage.js b/src/pages/iou/SplitBillDetailsPage.js
index d1fe21d8cf4e..46734b223150 100644
--- a/src/pages/iou/SplitBillDetailsPage.js
+++ b/src/pages/iou/SplitBillDetailsPage.js
@@ -101,6 +101,7 @@ function SplitBillDetailsPage(props) {
         merchant: splitMerchant,
         created: splitCreated,
         category: splitCategory,
+        tag: splitTag,
     } = isEditingSplitBill && props.draftTransaction ? ReportUtils.getTransactionDetails(props.draftTransaction) : ReportUtils.getTransactionDetails(props.transaction);
 
     const onConfirm = useCallback(
@@ -131,6 +132,7 @@ function SplitBillDetailsPage(props) {
                             iouCreated={splitCreated}
                             iouMerchant={splitMerchant}
                             iouCategory={splitCategory}
+                            iouTag={splitTag}
                             iouType={CONST.IOU.TYPE.SPLIT}
                             isReadOnly={!isEditingSplitBill}
                             shouldShowSmartScanFields
@@ -144,6 +146,7 @@ function SplitBillDetailsPage(props) {
                             transactionID={props.transaction.transactionID}
                             onConfirm={onConfirm}
                             isPolicyExpenseChat={ReportUtils.isPolicyExpenseChat(props.report)}
+                            policyID={ReportUtils.isPolicyExpenseChat(props.report) && props.report.policyID}
                         />
                     )}
                 </View>
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index 74a3a353ef50..7d5362251715 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -2,13 +2,13 @@ import {useNavigation} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useMemo, useRef, useState} from 'react';
-import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddressSearch from '@components/AddressSearch';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ConfirmModal from '@components/ConfirmModal';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -144,6 +144,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
                 lat: null,
                 lng: null,
                 address: waypointValue,
+                name: null,
             };
             saveWaypoint(waypoint);
         }
@@ -163,7 +164,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
             lat: values.lat,
             lng: values.lng,
             address: values.address,
-            name: values.name,
+            name: values.name || null,
         };
         saveWaypoint(waypoint);
 
@@ -208,7 +209,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
                     cancelText={translate('common.cancel')}
                     danger
                 />
-                <Form
+                <FormProvider
                     style={[styles.flexGrow1, styles.mh5]}
                     formID={ONYXKEYS.FORMS.WAYPOINT_FORM}
                     enabledWhenOffline
@@ -218,33 +219,32 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
                     shouldValidateOnBlur={false}
                     submitButtonText={translate('common.save')}
                 >
-                    <View>
-                        <AddressSearch
-                            canUseCurrentLocation
-                            inputID={`waypoint${waypointIndex}`}
-                            ref={(e) => (textInput.current = e)}
-                            hint={!isOffline ? 'distance.errors.selectSuggestedAddress' : ''}
-                            containerStyles={[styles.mt3]}
-                            label={translate('distance.address')}
-                            defaultValue={waypointAddress}
-                            onPress={selectWaypoint}
-                            maxInputLength={CONST.FORM_CHARACTER_LIMIT}
-                            renamedInputKeys={{
-                                address: `waypoint${waypointIndex}`,
-                                city: null,
-                                country: null,
-                                street: null,
-                                street2: null,
-                                zipCode: null,
-                                lat: null,
-                                lng: null,
-                                state: null,
-                            }}
-                            predefinedPlaces={recentWaypoints}
-                            resultTypes=""
-                        />
-                    </View>
-                </Form>
+                    <InputWrapper
+                        InputComponent={AddressSearch}
+                        canUseCurrentLocation
+                        inputID={`waypoint${waypointIndex}`}
+                        ref={(e) => (textInput.current = e)}
+                        hint={!isOffline ? 'distance.errors.selectSuggestedAddress' : ''}
+                        containerStyles={[styles.mt3]}
+                        label={translate('distance.address')}
+                        defaultValue={waypointAddress}
+                        onPress={selectWaypoint}
+                        maxInputLength={CONST.FORM_CHARACTER_LIMIT}
+                        renamedInputKeys={{
+                            address: `waypoint${waypointIndex}`,
+                            city: null,
+                            country: null,
+                            street: null,
+                            street2: null,
+                            zipCode: null,
+                            lat: null,
+                            lng: null,
+                            state: null,
+                        }}
+                        predefinedPlaces={recentWaypoints}
+                        resultTypes=""
+                    />
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index a69abeb94089..d6000e4e48cc 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;
@@ -123,7 +118,7 @@ function MoneyRequestConfirmPage(props) {
 
         // Reset the money request Onyx if the ID in Onyx does not match the ID from params
         const moneyRequestId = `${iouType}${reportID}`;
-        const shouldReset = !isDistanceRequest && props.iou.id !== moneyRequestId;
+        const shouldReset = !isDistanceRequest && props.iou.id !== moneyRequestId && !_.isEmpty(reportID);
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
@@ -239,7 +234,9 @@ function MoneyRequestConfirmPage(props) {
                     trimmedComment,
                     props.iou.currency,
                     props.iou.category,
+                    props.iou.tag,
                     reportID,
+                    props.iou.merchant,
                 );
                 return;
             }
@@ -254,6 +251,8 @@ function MoneyRequestConfirmPage(props) {
                     trimmedComment,
                     props.iou.currency,
                     props.iou.category,
+                    props.iou.tag,
+                    props.iou.merchant,
                 );
                 return;
             }
@@ -277,6 +276,7 @@ function MoneyRequestConfirmPage(props) {
             props.currentUserPersonalDetails.accountID,
             props.iou.currency,
             props.iou.category,
+            props.iou.tag,
             props.iou.receiptPath,
             props.iou.receiptFilename,
             isDistanceRequest,
@@ -285,6 +285,7 @@ function MoneyRequestConfirmPage(props) {
             receiptFile,
             iouType,
             reportID,
+            props.iou.merchant,
         ],
     );
 
@@ -419,9 +420,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/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
index 9a114de98ea7..d0982e6296db 100644
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import lodashGet from 'lodash/get';
 import lodashSize from 'lodash/size';
 import PropTypes from 'prop-types';
@@ -111,7 +112,7 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route, transaction}) {
 
         // Reset the money request Onyx if the ID in Onyx does not match the ID from params
         const moneyRequestId = `${iouType}${reportID}`;
-        const shouldReset = iou.id !== moneyRequestId;
+        const shouldReset = iou.id !== moneyRequestId && !_.isEmpty(reportID);
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 61ca7853cc27..c08c8c0a21b8 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -259,9 +259,7 @@ function MoneyRequestParticipantsSelector({
 
     // When search term updates we will fetch any reports
     const setSearchTermAndSearchInServer = useCallback((text = '') => {
-        if (text.length) {
-            Report.searchInServer(text);
-        }
+        Report.searchInServer(text);
         setSearchTerm(text);
     }, []);
 
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 61950e14337f..8ca1f96b3796 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -381,7 +381,7 @@ function InitialSettingsPage(props) {
             title={translate('common.settings')}
             headerContent={headerContent}
             headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentCenter]}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.ROOT]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ROOT].backgroundColor}
         >
             <View style={styles.w100}>
                 {getMenuItems}
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
index 4dbc5fda9198..b010c3790056 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.js
@@ -46,7 +46,7 @@ function PreferencesPage(props) {
         <IllustratedHeaderPageLayout
             title={translate('common.preferences')}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES].backgroundColor}
             illustration={LottieAnimations.PreferencesDJ}
         >
             <View style={styles.mb6}>
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
index 6e0663a41a72..a17dd8f2c17e 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.js
@@ -1,7 +1,7 @@
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useCallback} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -111,6 +111,14 @@ function ContactMethodsPage(props) {
         );
     });
 
+    const onNewContactMethodButtonPress = useCallback(() => {
+        if (navigateBackTo === ROUTES.SETTINGS_PROFILE) {
+            Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.route);
+            return;
+        }
+        Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
+    }, [navigateBackTo]);
+
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
@@ -136,7 +144,7 @@ function ContactMethodsPage(props) {
                     <Button
                         success
                         text={props.translate('contacts.newContactMethod')}
-                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD)}
+                        onPress={onNewContactMethodButtonPress}
                         pressOnEnter
                     />
                 </FixedFooter>
diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 718c414bac87..70d137d2a5fd 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -1,7 +1,7 @@
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useRef} from 'react';
+import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -61,6 +61,8 @@ function NewContactMethodPage(props) {
     const styles = useThemeStyles();
     const loginInputRef = useRef(null);
 
+    const navigateBackTo = lodashGet(props.route, 'params.backTo', ROUTES.SETTINGS_PROFILE);
+
     const validate = React.useCallback(
         (values) => {
             const phoneLogin = LoginUtils.getPhoneLogin(values.phoneOrEmail);
@@ -89,6 +91,14 @@ function NewContactMethodPage(props) {
         [],
     );
 
+    const onBackButtonPress = useCallback(() => {
+        if (navigateBackTo === ROUTES.SETTINGS_PROFILE) {
+            Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.route);
+            return;
+        }
+        Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(navigateBackTo));
+    }, [navigateBackTo]);
+
     return (
         <ScreenWrapper
             onEntryTransitionEnd={() => {
@@ -104,7 +114,7 @@ function NewContactMethodPage(props) {
         >
             <HeaderWithBackButton
                 title={props.translate('contacts.newContactMethod')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.route)}
+                onBackButtonPress={onBackButtonPress}
             />
             <FormProvider
                 formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
index 3bb999261d44..f0aea2301383 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -209,7 +209,7 @@ function BaseValidateCodeForm(props) {
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
                     >
-                        <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
+                        <Text style={[StyleUtils.getDisabledLinkStyles(theme, styles, shouldDisableResendValidateCode)]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
                     </PressableWithFeedback>
                     {props.hasMagicCodeBeenSent && (
                         <DotIndicatorMessage
diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.js b/src/pages/settings/Profile/CustomStatus/StatusPage.js
index 285a3072f859..6850684cfda2 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.js
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.js
@@ -91,7 +91,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
                 />
             }
             headerContainerStyles={[styles.staticHeaderImage]}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.STATUS]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.STATUS].backgroundColor}
             footer={footerComponent}
         >
             <View style={[styles.mh5, styles.mb5]}>
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index b343d35fe868..10a6d8807afc 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -3,10 +3,10 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import NewDatePicker from '@components/NewDatePicker';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
@@ -81,7 +81,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) {
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >
-                    <NewDatePicker
+                    <DatePicker
                         inputID="dob"
                         label={translate('common.date')}
                         defaultValue={privatePersonalDetails.dob || ''}
diff --git a/src/pages/settings/Security/CloseAccountPage.js b/src/pages/settings/Security/CloseAccountPage.js
index 8daac64bd271..8c1b851ee176 100644
--- a/src/pages/settings/Security/CloseAccountPage.js
+++ b/src/pages/settings/Security/CloseAccountPage.js
@@ -110,7 +110,6 @@ function CloseAccountPage(props) {
                         label={props.translate('closeAccountPage.enterMessageHere')}
                         aria-label={props.translate('closeAccountPage.enterMessageHere')}
                         role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        inputStyle={[styles.verticalAlignTop]}
                         containerStyles={[styles.mt5, styles.autoGrowHeightMultilineInput]}
                     />
                     <Text style={[styles.mt5]}>
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index bf1edd7b806d..95a0efa2fc39 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -69,7 +69,7 @@ function SecuritySettingsPage(props) {
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             shouldShowBackButton
             illustration={LottieAnimations.Safe}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.SECURITY]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
index 3534ef5c064c..e45b4ad67f4e 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -134,7 +134,7 @@ function ActivatePhysicalCardPage({
         <IllustratedHeaderPageLayout
             title={translate('activateCardPage.activateCard')}
             onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES].backgroundColor}
             illustration={LottieAnimations.Magician}
             scrollViewContainerStyles={[styles.mnh100]}
             childrenContainerStyles={[styles.flex1]}
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index 79a7c5480954..5af4129aefbc 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';
@@ -206,6 +207,7 @@ function PaymentMethodList({
     shouldEnableScroll,
     style,
 }) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -264,14 +266,14 @@ function PaymentMethodList({
             return {
                 ...paymentMethod,
                 onPress: (e) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID),
-                iconFill: isMethodActive ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
-                wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
+                iconFill: isMethodActive ? StyleUtils.getIconFillColor(theme, CONST.BUTTON_STATES.PRESSED) : null,
+                wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(theme, CONST.BUTTON_STATES.PRESSED)] : null,
                 disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
             };
         });
 
         return combinedPaymentMethods;
-    }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles]);
+    }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles, theme]);
 
     /**
      * Render placeholder when there are no payments methods
diff --git a/src/pages/settings/Wallet/WalletEmptyState.js b/src/pages/settings/Wallet/WalletEmptyState.js
index 8eacd322d695..f2235dfafef2 100644
--- a/src/pages/settings/Wallet/WalletEmptyState.js
+++ b/src/pages/settings/Wallet/WalletEmptyState.js
@@ -36,7 +36,7 @@ function WalletEmptyState({onAddPaymentMethod}) {
     const {translate} = useLocalize();
     return (
         <IllustratedHeaderPageLayout
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.WALLET]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WALLET].backgroundColor}
             illustration={LottieAnimations.FastMoney}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             title={translate('common.wallet')}
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index e48446360605..e7ac249582a9 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
@@ -14,7 +15,6 @@ import GoogleSignIn from '@components/SignInButtons/GoogleSignIn';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withNavigationFocus from '@components/withNavigationFocus';
 import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
@@ -75,9 +75,6 @@ const propTypes = {
 
     isVisible: PropTypes.bool.isRequired,
 
-    /** Whether navigation is focused */
-    isFocused: PropTypes.bool.isRequired,
-
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -101,6 +98,7 @@ function LoginForm(props) {
     const [formError, setFormError] = useState(false);
     const prevIsVisible = usePrevious(props.isVisible);
     const firstBlurred = useRef(false);
+    const isFocused = useIsFocused();
 
     const {translate} = props;
 
@@ -204,10 +202,11 @@ function LoginForm(props) {
     useEffect(() => {
         // Just call clearAccountMessages on the login page (home route), because when the user is in the transition route and not yet authenticated,
         // this component will also be mounted, resetting account.isLoading will cause the app to briefly display the session expiration page.
-        if (props.isFocused && props.isVisible) {
+
+        if (isFocused && props.isVisible) {
             Session.clearAccountMessages();
         }
-        if (!canFocusInputOnScreenFocus() || !input.current || !props.isVisible) {
+        if (!canFocusInputOnScreenFocus() || !input.current || !props.isVisible || !isFocused) {
             return;
         }
         let focusTimeout;
@@ -346,7 +345,6 @@ const LoginFormWithRef = forwardRef((props, ref) => (
 LoginFormWithRef.displayName = 'LoginFormWithRef';
 
 export default compose(
-    withNavigationFocus,
     withOnyx({
         account: {key: ONYXKEYS.ACCOUNT},
         credentials: {key: ONYXKEYS.CREDENTIALS},
diff --git a/src/pages/signin/SAMLSignInPage/index.js b/src/pages/signin/SAMLSignInPage/index.js
index b93e05c7a2b1..ec3cc01197bd 100644
--- a/src/pages/signin/SAMLSignInPage/index.js
+++ b/src/pages/signin/SAMLSignInPage/index.js
@@ -1,14 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
-import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import Icon from '@components/Icon';
-import * as Expensicons from '@components/Icon/Expensicons';
-import * as Illustrations from '@components/Icon/Illustrations';
-import Text from '@components/Text';
-import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
+import SAMLLoadingIndicator from '@components/SAMLLoadingIndicator';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -25,39 +18,11 @@ const defaultProps = {
 };
 
 function SAMLSignInPage({credentials}) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const {translate} = useLocalize();
-
     useEffect(() => {
         window.open(`${CONFIG.EXPENSIFY.SAML_URL}?email=${credentials.login}&referer=${CONFIG.EXPENSIFY.EXPENSIFY_CASH_REFERER}`, '_self');
     }, [credentials.login]);
 
-    return (
-        <View style={styles.deeplinkWrapperContainer}>
-            <View style={styles.deeplinkWrapperMessage}>
-                <View style={styles.mb2}>
-                    <Icon
-                        width={200}
-                        height={164}
-                        src={Illustrations.RocketBlue}
-                    />
-                </View>
-                <Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('samlSignIn.launching')}</Text>
-                <View style={[styles.mt2, styles.mh2, styles.fontSizeNormal, styles.textAlignCenter]}>
-                    <Text style={[styles.textAlignCenter]}>{translate('samlSignIn.oneMoment')}</Text>
-                </View>
-            </View>
-            <View style={styles.deeplinkWrapperFooter}>
-                <Icon
-                    width={154}
-                    height={34}
-                    fill={theme.success}
-                    src={Expensicons.ExpensifyWordmark}
-                />
-            </View>
-        </View>
-    );
+    return <SAMLLoadingIndicator />;
 }
 
 SAMLSignInPage.propTypes = propTypes;
diff --git a/src/pages/signin/SAMLSignInPage/index.native.js b/src/pages/signin/SAMLSignInPage/index.native.js
new file mode 100644
index 000000000000..502e26e337b9
--- /dev/null
+++ b/src/pages/signin/SAMLSignInPage/index.native.js
@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types';
+import React, {useCallback, useState} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import WebView from 'react-native-webview';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import SAMLLoadingIndicator from '@components/SAMLLoadingIndicator';
+import ScreenWrapper from '@components/ScreenWrapper';
+import getPlatform from '@libs/getPlatform';
+import Navigation from '@libs/Navigation/Navigation';
+import * as Session from '@userActions/Session';
+import CONFIG from '@src/CONFIG';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+const propTypes = {
+    /** The credentials of the logged in person */
+    credentials: PropTypes.shape({
+        /** The email/phone the user logged in with */
+        login: PropTypes.string,
+    }),
+};
+
+const defaultProps = {
+    credentials: {},
+};
+
+function SAMLSignInPage({credentials}) {
+    const samlLoginURL = `${CONFIG.EXPENSIFY.SAML_URL}?email=${credentials.login}&referer=${CONFIG.EXPENSIFY.EXPENSIFY_CASH_REFERER}&platform=${getPlatform()}`;
+    const [showNavigation, shouldShowNavigation] = useState(true);
+
+    /**
+     * Handles in-app navigation once we get a response back from Expensify
+     *
+     * @param {String} params.url
+     */
+    const handleNavigationStateChange = useCallback(
+        ({url}) => {
+            // If we've gotten a callback then remove the option to navigate back to the sign in page
+            if (url.includes('loginCallback')) {
+                shouldShowNavigation(false);
+            }
+
+            const searchParams = new URLSearchParams(new URL(url).search);
+            if (searchParams.has('shortLivedAuthToken')) {
+                const shortLivedAuthToken = searchParams.get('shortLivedAuthToken');
+                Session.signInWithShortLivedAuthToken(credentials.login, shortLivedAuthToken);
+            }
+
+            // If the login attempt is unsuccessful, set the error message for the account and redirect to sign in page
+            if (searchParams.has('error')) {
+                Session.clearSignInData();
+                Session.setAccountError(searchParams.get('error'));
+                Navigation.navigate(ROUTES.HOME);
+            }
+        },
+        [credentials.login, shouldShowNavigation],
+    );
+
+    return (
+        <ScreenWrapper
+            shouldShowOfflineIndicator={false}
+            includeSafeAreaPaddingBottom={false}
+            testID={SAMLSignInPage.displayName}
+        >
+            {showNavigation && (
+                <HeaderWithBackButton
+                    title=""
+                    onBackButtonPress={() => {
+                        Session.clearSignInData();
+                        Navigation.navigate(ROUTES.HOME);
+                    }}
+                />
+            )}
+            <FullPageOfflineBlockingView>
+                <WebView
+                    originWhitelist={['https://*']}
+                    source={{uri: samlLoginURL}}
+                    incognito // 'incognito' prop required for Android, issue here https://github.com/react-native-webview/react-native-webview/issues/1352
+                    startInLoadingState
+                    renderLoading={() => <SAMLLoadingIndicator />}
+                    onNavigationStateChange={handleNavigationStateChange}
+                />
+            </FullPageOfflineBlockingView>
+        </ScreenWrapper>
+    );
+}
+
+SAMLSignInPage.propTypes = propTypes;
+SAMLSignInPage.defaultProps = defaultProps;
+SAMLSignInPage.displayName = 'SAMLSignInPage';
+
+export default withOnyx({
+    credentials: {key: ONYXKEYS.CREDENTIALS},
+})(SAMLSignInPage);
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index b0ced580b30e..6676dc99b911 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import _ from 'underscore';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
+import CustomStatusBar from '@components/CustomStatusBar';
 import useLocalize from '@hooks/useLocalize';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
-import getPlatform from '@libs/getPlatform';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
@@ -101,15 +102,9 @@ function getRenderOptions({hasLogin, hasValidateCode, account, isPrimaryLogin, i
     const isSAMLRequired = Boolean(account.isSAMLRequired);
     const hasEmailDeliveryFailure = Boolean(account.hasEmailDeliveryFailure);
 
-    // SAML is temporarily restricted to users on the beta or to users signing in on web and mweb
-    let shouldShowChooseSSOOrMagicCode = false;
-    let shouldInitiateSAMLLogin = false;
-    const platform = getPlatform();
-    if (platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP) {
-        // True if the user has SAML required and we haven't already initiated SAML for their account
-        shouldInitiateSAMLLogin = hasAccount && hasLogin && isSAMLRequired && !hasInitiatedSAMLLogin && account.isLoading;
-        shouldShowChooseSSOOrMagicCode = hasAccount && hasLogin && isSAMLEnabled && !isSAMLRequired && !isUsingMagicCode;
-    }
+    // True if the user has SAML required and we haven't already initiated SAML for their account
+    const shouldInitiateSAMLLogin = hasAccount && hasLogin && isSAMLRequired && !hasInitiatedSAMLLogin && account.isLoading;
+    const shouldShowChooseSSOOrMagicCode = hasAccount && hasLogin && isSAMLEnabled && !isSAMLRequired && !isUsingMagicCode;
 
     // SAML required users may reload the login page after having already entered their login details, in which
     // case we want to clear their sign in data so they don't end up in an infinite loop redirecting back to their
@@ -165,6 +160,19 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
         }
         App.setLocale(Localize.getDevicePreferredLocale());
     }, [preferredLocale]);
+    useEffect(() => {
+        if (credentials.login) {
+            return;
+        }
+
+        // If we don't have a login set, reset the user's SAML login preferences
+        if (isUsingMagicCode) {
+            setIsUsingMagicCode(false);
+        }
+        if (hasInitiatedSAMLLogin) {
+            setHasInitiatedSAMLLogin(false);
+        }
+    }, [credentials.login, isUsingMagicCode, setIsUsingMagicCode, hasInitiatedSAMLLogin, setHasInitiatedSAMLLogin]);
 
     const {
         shouldShowLoginForm,
@@ -229,7 +237,7 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
         if (shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) {
             welcomeText = '';
         }
-    } else if (!shouldInitiateSAMLLogin) {
+    } else if (!shouldInitiateSAMLLogin && !hasInitiatedSAMLLogin) {
         Log.warn('SignInPage in unexpected state!');
     }
 
@@ -259,7 +267,6 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
                             <ValidateCodeForm
                                 isUsingRecoveryCode={isUsingRecoveryCode}
                                 setIsUsingRecoveryCode={setIsUsingRecoveryCode}
-                                setIsUsingMagicCode={setIsUsingMagicCode}
                             />
                         )}
                         {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
@@ -279,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/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index f5651e45aeb8..7c48d557cd16 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -70,9 +70,6 @@ const propTypes = {
     /** Function to change `isUsingRecoveryCode` state when user toggles between 2fa code and recovery code */
     setIsUsingRecoveryCode: PropTypes.func.isRequired,
 
-    /** Function to change `isUsingMagicCode` state when the user goes back to the login page */
-    setIsUsingMagicCode: PropTypes.func.isRequired,
-
     ...withLocalizePropTypes,
 };
 
@@ -210,8 +207,6 @@ function BaseValidateCodeForm(props) {
      * Clears local and Onyx sign in states
      */
     const clearSignInData = () => {
-        // Reset the user's preference for signing in with SAML versus magic codes
-        props.setIsUsingMagicCode(false);
         clearLocalSignInData();
         Session.clearSignInData();
     };
@@ -383,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/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index 002ca2944e52..dfb77219ae24 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -81,7 +81,6 @@ function NewTaskDescriptionPage(props) {
                             autoGrowHeight
                             submitOnEnter={!Browser.isMobile()}
                             containerStyles={[styles.autoGrowHeightMultilineInput]}
-                            inputStyle={[styles.verticalAlignTop]}
                         />
                     </View>
                 </FormProvider>
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index 818ae4440842..94cb804a39e1 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}>
@@ -112,9 +113,7 @@ function NewTaskDetailsPage(props) {
                         autoGrowHeight
                         submitOnEnter={!Browser.isMobile()}
                         containerStyles={[styles.autoGrowHeightMultilineInput]}
-                        textAlignVertical="top"
                         defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))}
-                        inputStyle={[styles.verticalAlignTop]}
                         value={taskDescription}
                         onValueChange={(value) => setTaskDescription(value)}
                     />
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index 0dd2b65480a0..c61990b1c347 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -7,6 +7,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
@@ -16,7 +17,6 @@ import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
@@ -28,9 +28,6 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** All of the personal details for everyone */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
@@ -65,7 +62,6 @@ const propTypes = {
 
 const defaultProps = {
     betas: [],
-    personalDetails: {},
     reports: {},
     session: {},
     route: {},
@@ -81,13 +77,14 @@ function TaskAssigneeSelectorModal(props) {
     const [filteredUserToInvite, setFilteredUserToInvite] = useState(null);
     const [filteredCurrentUserOption, setFilteredCurrentUserOption] = useState(null);
     const [isLoading, setIsLoading] = React.useState(true);
+    const allPersonalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     const {inputCallbackRef} = useAutoFocusInput();
 
     const updateOptions = useCallback(() => {
         const {recentReports, personalDetails, userToInvite, currentUserOption} = OptionsListUtils.getFilteredOptions(
             props.reports,
-            props.personalDetails,
+            allPersonalDetails,
             props.betas,
             searchValue.trim(),
             [],
@@ -112,7 +109,7 @@ function TaskAssigneeSelectorModal(props) {
         if (isLoading) {
             setIsLoading(false);
         }
-    }, [props, searchValue, isLoading]);
+    }, [props, searchValue, allPersonalDetails, isLoading]);
 
     useEffect(() => {
         const debouncedSearch = _.debounce(updateOptions, 200);
@@ -253,9 +250,6 @@ export default compose(
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         betas: {
             key: ONYXKEYS.BETAS,
         },
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 6901f2562ee3..a2f908e2596e 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -118,7 +118,6 @@ function TaskDescriptionPage(props) {
                             autoGrowHeight
                             submitOnEnter={!Browser.isMobile()}
                             containerStyles={[styles.autoGrowHeightMultilineInput]}
-                            inputStyle={[styles.verticalAlignTop]}
                         />
                     </View>
                 </FormProvider>
diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js
index cb7ee9704021..914afa34bd85 100644
--- a/src/pages/tasks/TaskShareDestinationSelectorModal.js
+++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js
@@ -119,9 +119,7 @@ function TaskShareDestinationSelectorModal(props) {
 
     // When search term updates we will fetch any reports
     const setSearchTermAndSearchInServer = useCallback((text = '') => {
-        if (text.length) {
-            Report.searchInServer(text);
-        }
+        Report.searchInServer(text);
         setSearchValue(text);
     }, []);
 
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index c0a12c9208bf..b5973e35e07c 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -229,7 +229,6 @@ class WorkspaceInviteMessagePage extends React.Component {
                                 autoCompleteType="off"
                                 autoCorrect={false}
                                 autoGrowHeight
-                                inputStyle={[this.props.themeStyles.verticalAlignTop]}
                                 containerStyles={[this.props.themeStyles.autoGrowHeightMultilineInput]}
                                 defaultValue={this.state.welcomeNote}
                                 value={this.state.welcomeNote}
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index df78539bf665..7ddd78621d2d 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -16,9 +16,11 @@ import withNavigationFocus from '@components/withNavigationFocus';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
 import Permissions from '@libs/Permissions';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -62,11 +64,33 @@ const propTypes = {
 
     /** Whether navigation is focused */
     isFocused: PropTypes.bool.isRequired,
+
+    /** Form state for NEW_ROOM_FORM */
+    formState: PropTypes.shape({
+        /** Loading state for the form */
+        isLoading: PropTypes.bool,
+
+        /** Field errors in the form */
+        errorFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
+    }),
+
+    /** Session details for the user */
+    session: PropTypes.shape({
+        /** accountID of current user */
+        accountID: PropTypes.number,
+    }),
 };
 const defaultProps = {
     betas: [],
     reports: {},
     policies: {},
+    formState: {
+        isLoading: false,
+        errorFields: {},
+    },
+    session: {
+        accountID: 0,
+    },
 };
 
 function WorkspaceNewRoomPage(props) {
@@ -77,6 +101,7 @@ function WorkspaceNewRoomPage(props) {
     const [visibility, setVisibility] = useState(CONST.REPORT.VISIBILITY.RESTRICTED);
     const [policyID, setPolicyID] = useState(null);
     const [writeCapability, setWriteCapability] = useState(CONST.REPORT.WRITE_CAPABILITIES.ALL);
+    const wasLoading = usePrevious(props.formState.isLoading);
     const visibilityDescription = useMemo(() => translate(`newRoomPage.${visibility}Description`), [translate, visibility]);
     const isPolicyAdmin = useMemo(() => {
         if (!policyID) {
@@ -85,14 +110,47 @@ function WorkspaceNewRoomPage(props) {
 
         return ReportUtils.isPolicyAdmin(policyID, props.policies);
     }, [policyID, props.policies]);
+    const [newRoomReportID, setNewRoomReportID] = useState(undefined);
 
     /**
      * @param {Object} values - form input values passed by the Form component
      */
     const submit = (values) => {
-        Report.addPolicyReport(policyID, values.roomName, visibility, writeCapability, values.welcomeMessage);
+        const participants = [props.session.accountID];
+        const parsedWelcomeMessage = ReportUtils.getParsedComment(values.welcomeMessage);
+        const policyReport = ReportUtils.buildOptimisticChatReport(
+            participants,
+            values.roomName,
+            CONST.REPORT.CHAT_TYPE.POLICY_ROOM,
+            policyID,
+            CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
+            false,
+            '',
+            visibility,
+            writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL,
+
+            // The room might contain all policy members so notifying always should be opt-in only.
+            CONST.REPORT.NOTIFICATION_PREFERENCE.DAILY,
+            '',
+            '',
+            parsedWelcomeMessage,
+        );
+        setNewRoomReportID(policyReport.reportID);
+        Report.addPolicyReport(policyReport);
     };
 
+    useEffect(() => {
+        Report.clearNewRoomFormError();
+    }, []);
+
+    useEffect(() => {
+        if (!(((wasLoading && !props.formState.isLoading) || (isOffline && props.formState.isLoading)) && _.isEmpty(props.formState.errorFields))) {
+            return;
+        }
+        Navigation.dismissModal(newRoomReportID);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want this to update on changing the form State
+    }, [props.formState]);
+
     useEffect(() => {
         if (isPolicyAdmin) {
             return;
@@ -207,7 +265,6 @@ function WorkspaceNewRoomPage(props) {
                                     autoGrowHeight
                                     maxLength={CONST.MAX_COMMENT_LENGTH}
                                     autoCapitalize="none"
-                                    textAlignVertical="top"
                                     containerStyles={[styles.autoGrowHeightMultilineInput]}
                                 />
                             </View>
@@ -265,5 +322,11 @@ export default compose(
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
+        formState: {
+            key: ONYXKEYS.FORMS.NEW_ROOM_FORM,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(WorkspaceNewRoomPage);
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..6473b1074f17 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -69,10 +69,9 @@ function Template(args) {
                 containerStyles={[styles.mt4]}
                 hint="No PO box"
             />
-            <InputWrapper
-                InputComponent={DatePicker}
-                label="Date of birth"
+            <DatePicker
                 inputID="dob"
+                label="Date of Birth"
                 containerStyles={[styles.mt4]}
             />
             <View>
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index aada3a1f70e4..64ef54a8ab84 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 {type ThemeStyles} from './styles';
+import {type 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};
 
@@ -70,6 +69,7 @@ type ModalPaddingStylesParams = {
 };
 
 type AvatarBorderStyleParams = {
+    theme: ThemeColors;
     isHovered: boolean;
     isPressed: boolean;
     isInReportAction: boolean;
@@ -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({theme, isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false}: 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,10 +1373,12 @@ 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};
 }
 
+export type {AvatarSizeName};
+
 export {
     combineStyles,
     displayIfTrue,
@@ -1441,7 +1430,6 @@ export {
     getEmojiReactionBubbleStyle,
     getEmojiReactionBubbleTextStyle,
     getEmojiReactionCounterTextStyle,
-    getEmptyAvatarStyle,
     getErrorPageContainerStyle,
     getFontFamilyMonospace,
     getCodeFontSize,
diff --git a/src/styles/addOutlineWidth/index.native.ts b/src/styles/addOutlineWidth/index.native.ts
index 4384a3f811e2..d081e2a9af70 100644
--- a/src/styles/addOutlineWidth/index.native.ts
+++ b/src/styles/addOutlineWidth/index.native.ts
@@ -4,6 +4,7 @@
  */
 import AddOutlineWidth from './types';
 
-const addOutlineWidth: AddOutlineWidth = (obj) => obj;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const addOutlineWidth: AddOutlineWidth = (_theme, obj) => obj;
 
 export default addOutlineWidth;
diff --git a/src/styles/addOutlineWidth/index.ts b/src/styles/addOutlineWidth/index.ts
index 5d99e369b79a..c1ac1af52a8b 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 = (theme, obj, 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..91e3f7409259 100644
--- a/src/styles/addOutlineWidth/types.ts
+++ b/src/styles/addOutlineWidth/types.ts
@@ -1,5 +1,6 @@
 import {TextStyle} from 'react-native';
+import {type ThemeColors} from '@styles/themes/types';
 
-type AddOutlineWidth = (obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
+type AddOutlineWidth = (theme: ThemeColors, obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
 
 export default AddOutlineWidth;
diff --git a/src/styles/containerComposeStyles/types.ts b/src/styles/containerComposeStyles/types.ts
index 0b2305f52b56..9930e0230016 100644
--- a/src/styles/containerComposeStyles/types.ts
+++ b/src/styles/containerComposeStyles/types.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
-import themeStyles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
-type ContainerComposeStyles = (styles: typeof themeStyles) => ViewStyle[];
+type ContainerComposeStyles = (styles: ThemeStyles) => ViewStyle[];
 
 export default ContainerComposeStyles;
diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/getContextMenuItemStyles/types.ts
index 5393a630b79a..60b25acec0cb 100644
--- a/src/styles/getContextMenuItemStyles/types.ts
+++ b/src/styles/getContextMenuItemStyles/types.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
-type GetContextMenuItemStyle = (themeStyles: typeof styles, windowWidth?: number) => ViewStyle[];
+type GetContextMenuItemStyle = (themeStyles: ThemeStyles, windowWidth?: number) => ViewStyle[];
 
 export default GetContextMenuItemStyle;
diff --git a/src/styles/getModalStyles.ts b/src/styles/getModalStyles.ts
index c250bdf9498d..b11b350e4e9d 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 {type ThemeStyles} from './styles';
+import {type 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 {
@@ -37,6 +37,8 @@ type GetModalStyles = {
 };
 
 export default function getModalStyles(
+    theme: ThemeColors,
+    styles: ThemeStyles,
     type: ModalType | undefined,
     windowDimensions: WindowDimensions,
     popoverAnchorPosition: 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..86dd14cb8446 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 {type ThemeStyles} from './styles';
+import {type 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..fa2b5ee308e2 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 {type ThemeStyles} from './styles';
+import {type ThemeColors} from './themes/types';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
 import variables from './variables';
@@ -101,6 +101,23 @@ type TooltipStyles = {
     pointerStyle: ViewStyle;
 };
 
+type TooltipParams = {
+    tooltip: View | HTMLDivElement;
+    currentSize: number;
+    windowWidth: number;
+    xOffset: number;
+    yOffset: number;
+    tooltipTargetWidth: number;
+    tooltipTargetHeight: number;
+    maxWidth: number;
+    tooltipContentWidth: number;
+    tooltipWrapperHeight: number;
+    theme: ThemeColors;
+    themeStyles: ThemeStyles;
+    manualShiftHorizontal?: number;
+    manualShiftVertical?: number;
+};
+
 /**
  * Generate styles for the tooltip component.
  *
@@ -122,20 +139,22 @@ type TooltipStyles = {
  * @param [manualShiftVertical] - Any additional amount to manually shift the tooltip up or down.
  *                                       A positive value shifts it down, and a negative value shifts it up.
  */
-export default function getTooltipStyles(
-    tooltip: View | HTMLDivElement,
-    currentSize: number,
-    windowWidth: number,
-    xOffset: number,
-    yOffset: number,
-    tooltipTargetWidth: number,
-    tooltipTargetHeight: number,
-    maxWidth: number,
-    tooltipContentWidth: number,
-    tooltipWrapperHeight: number,
+export default function getTooltipStyles({
+    tooltip,
+    currentSize,
+    windowWidth,
+    xOffset,
+    yOffset,
+    tooltipTargetWidth,
+    tooltipTargetHeight,
+    maxWidth,
+    tooltipContentWidth,
+    tooltipWrapperHeight,
+    theme,
+    themeStyles,
     manualShiftHorizontal = 0,
     manualShiftVertical = 0,
-): TooltipStyles {
+}: TooltipParams): TooltipStyles {
     const tooltipVerticalPadding = spacing.pv1;
 
     // We calculate tooltip width based on the tooltip's content width
@@ -226,7 +245,7 @@ export default function getTooltipStyles(
         //      at the center of the hovered component.
         pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - POINTER_WIDTH / 2);
 
-        pointerAdditionalStyle = shouldShowBelow ? styles.flipUpsideDown : {};
+        pointerAdditionalStyle = shouldShowBelow ? themeStyles.flipUpsideDown : {};
     }
 
     return {
@@ -238,7 +257,7 @@ export default function getTooltipStyles(
         },
         rootWrapperStyle: {
             ...positioning.pFixed,
-            backgroundColor: themeColors.heading,
+            backgroundColor: theme.heading,
             borderRadius: variables.componentBorderRadiusSmall,
             ...tooltipVerticalPadding,
             ...spacing.ph2,
@@ -249,11 +268,11 @@ export default function getTooltipStyles(
             left: rootWrapperLeft,
 
             // We are adding this to prevent the tooltip text from being selected and copied on CTRL + A.
-            ...styles.userSelectNone,
-            ...styles.pointerEventsNone,
+            ...themeStyles.userSelectNone,
+            ...themeStyles.pointerEventsNone,
         },
         textStyle: {
-            color: themeColors.textReversed,
+            color: theme.textReversed,
             fontFamily: fontFamily.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             overflow: 'hidden',
@@ -268,14 +287,14 @@ export default function getTooltipStyles(
         pointerStyle: {
             width: 0,
             height: 0,
-            backgroundColor: themeColors.transparent,
+            backgroundColor: theme.transparent,
             borderStyle: 'solid',
             borderLeftWidth: POINTER_WIDTH / 2,
             borderRightWidth: POINTER_WIDTH / 2,
             borderTopWidth: POINTER_HEIGHT,
-            borderLeftColor: themeColors.transparent,
-            borderRightColor: themeColors.transparent,
-            borderTopColor: themeColors.heading,
+            borderLeftColor: theme.transparent,
+            borderRightColor: theme.transparent,
+            borderTopColor: theme.heading,
             ...pointerAdditionalStyle,
         },
     };
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts
index a9f9358521b8..8dc5d5cc9419 100644
--- a/src/styles/optionRowStyles/types.ts
+++ b/src/styles/optionRowStyles/types.ts
@@ -1,6 +1,6 @@
 import {ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import {type ThemeStyles} from '@styles/styles';
 
-type CompactContentContainerStyles = (themeStyles: typeof styles) => ViewStyle;
+type CompactContentContainerStyles = (themeStyles: ThemeStyles) => ViewStyle;
 
 export default CompactContentContainerStyles;
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 45736295d4be..7ff7240f4ed0 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -21,7 +21,7 @@ import pointerEventsAuto from './pointerEventsAuto';
 import pointerEventsBoxNone from './pointerEventsBoxNone';
 import pointerEventsNone from './pointerEventsNone';
 import defaultTheme from './themes/default';
-import {ThemeColors} from './themes/types';
+import {type ThemeColors} from './themes/types';
 import borders from './utilities/borders';
 import cursor from './utilities/cursor';
 import display from './utilities/display';
@@ -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;
@@ -583,7 +586,7 @@ const styles = (theme: ThemeColors) =>
         buttonDivider: {
             height: variables.dropDownButtonDividerHeight,
             borderWidth: 0.7,
-            borderColor: theme.text,
+            borderColor: theme.textLight,
         },
 
         noBorderRadius: {
@@ -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,
@@ -1147,7 +1150,7 @@ const styles = (theme: ThemeColors) =>
         textReceiptUpload: {
             ...headlineFont,
             fontSize: variables.fontSizeXLarge,
-            color: theme.textLight,
+            color: theme.text,
             textAlign: 'center',
         },
 
@@ -1155,7 +1158,7 @@ const styles = (theme: ThemeColors) =>
             fontFamily: fontFamily.EXP_NEUE,
             lineHeight: variables.lineHeightLarge,
             textAlign: 'center',
-            color: theme.textLight,
+            color: theme.text,
         },
 
         furtherDetailsText: {
@@ -1776,6 +1779,7 @@ const styles = (theme: ThemeColors) =>
         // Be extremely careful when editing the compose styles, as it is easy to introduce regressions.
         // Make sure you run the following tests against any changes: #12669
         textInputCompose: addOutlineWidth(
+            theme,
             {
                 backgroundColor: theme.componentBG,
                 borderColor: theme.border,
@@ -2615,6 +2619,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         iouAmountTextInput: addOutlineWidth(
+            theme,
             {
                 ...headlineFont,
                 fontSize: variables.iouAmountTextSize,
@@ -3348,7 +3353,7 @@ const styles = (theme: ThemeColors) =>
             fontFamily: fontFamily.EXP_NEUE,
             fontSize: variables.fontSizeXLarge,
             lineHeight: variables.lineHeightXXLarge,
-            color: theme.text,
+            color: theme.textColorfulBackground,
         },
 
         eReceiptWaypointTitle: {
@@ -3603,7 +3608,7 @@ const styles = (theme: ThemeColors) =>
                 marginLeft: 8,
                 fontFamily: isSelected ? fontFamily.EXP_NEUE_BOLD : fontFamily.EXP_NEUE,
                 fontWeight: isSelected ? fontWeightBold : '400',
-                color: isSelected ? theme.textLight : theme.textSupporting,
+                color: isSelected ? theme.text : theme.textSupporting,
             } satisfies TextStyle),
 
         tabBackground: (hovered: boolean, isFocused: boolean, background: string) => ({
@@ -3984,12 +3989,14 @@ const styles = (theme: ThemeColors) =>
         singleOptionSelectorCircle: {
             borderColor: theme.icon,
         },
+
+        colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}),
     } satisfies Styles);
 
+type ThemeStyles = ReturnType<typeof styles>;
+
 const stylesGenerator = styles;
 const defaultStyles = styles(defaultTheme);
 
-type ThemeStyle = typeof defaultStyles;
-
 export default defaultStyles;
-export {stylesGenerator, type Styles, type ThemeStyle};
+export {stylesGenerator, type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
diff --git a/src/styles/themes/ThemeContext.ts b/src/styles/themes/ThemeContext.ts
index 8c57cc9c7e9f..3c969c7393c5 100644
--- a/src/styles/themes/ThemeContext.ts
+++ b/src/styles/themes/ThemeContext.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 import darkTheme from './default';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 const ThemeContext = React.createContext<ThemeColors>(darkTheme);
 
diff --git a/src/styles/themes/Themes.ts b/src/styles/themes/Themes.ts
index a87407790502..5de65c7316b4 100644
--- a/src/styles/themes/Themes.ts
+++ b/src/styles/themes/Themes.ts
@@ -1,7 +1,7 @@
 import CONST from '@src/CONST';
 import darkTheme from './default';
 import lightTheme from './light';
-import {ThemeColors, ThemePreferenceWithoutSystem} from './types';
+import {type ThemeColors, ThemePreferenceWithoutSystem} from './types';
 
 const Themes = {
     [CONST.THEME.LIGHT]: lightTheme,
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 8dd76a4776a4..59de9b7269a8 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -1,6 +1,7 @@
 import colors from '@styles/colors';
+import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 const darkTheme = {
     // Figma keys
@@ -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..1541c0e723d7 100644
--- a/src/styles/themes/light.ts
+++ b/src/styles/themes/light.ts
@@ -1,6 +1,7 @@
 import colors from '@styles/colors';
+import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 const lightTheme = {
     // Figma keys
@@ -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/themes/useTheme.ts b/src/styles/themes/useTheme.ts
index 8bb4fe73c106..adeaffbcae8a 100644
--- a/src/styles/themes/useTheme.ts
+++ b/src/styles/themes/useTheme.ts
@@ -1,6 +1,6 @@
 import {useContext} from 'react';
 import ThemeContext from './ThemeContext';
-import {ThemeColors} from './types';
+import {type ThemeColors} from './types';
 
 function useTheme(): ThemeColors {
     const theme = useContext(ThemeContext);
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.js b/src/styles/utilities/overscrollBehaviorContain/index.js
deleted file mode 100644
index 1377e4b47d28..000000000000
--- a/src/styles/utilities/overscrollBehaviorContain/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-    overscrollBehavior: 'contain',
-};
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.native.js b/src/styles/utilities/overscrollBehaviorContain/index.native.js
deleted file mode 100644
index ff8b4c56321a..000000000000
--- a/src/styles/utilities/overscrollBehaviorContain/index.native.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.native.ts b/src/styles/utilities/overscrollBehaviorContain/index.native.ts
new file mode 100644
index 000000000000..fd6b2f496912
--- /dev/null
+++ b/src/styles/utilities/overscrollBehaviorContain/index.native.ts
@@ -0,0 +1,5 @@
+import OverscrollBehaviorStyles from './types';
+
+const overscrollBehaviorContain: OverscrollBehaviorStyles = {};
+
+export default overscrollBehaviorContain;
diff --git a/src/styles/utilities/overscrollBehaviorContain/index.ts b/src/styles/utilities/overscrollBehaviorContain/index.ts
new file mode 100644
index 000000000000..18cbe810d336
--- /dev/null
+++ b/src/styles/utilities/overscrollBehaviorContain/index.ts
@@ -0,0 +1,7 @@
+import OverscrollBehaviorStyles from './types';
+
+const overscrollBehaviorContain: OverscrollBehaviorStyles = {
+    overscrollBehavior: 'contain',
+};
+
+export default overscrollBehaviorContain;
diff --git a/src/styles/utilities/overscrollBehaviorContain/types.ts b/src/styles/utilities/overscrollBehaviorContain/types.ts
new file mode 100644
index 000000000000..1e806eb60642
--- /dev/null
+++ b/src/styles/utilities/overscrollBehaviorContain/types.ts
@@ -0,0 +1,5 @@
+import {ViewStyle} from 'react-native';
+
+type OverscrollBehaviorStyles = Pick<ViewStyle, 'overscrollBehavior'>;
+
+export default OverscrollBehaviorStyles;
diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts
index 79484e7886af..601e82cde836 100644
--- a/src/types/onyx/AccountData.ts
+++ b/src/types/onyx/AccountData.ts
@@ -1,10 +1,11 @@
+import {BankName} from './Bank';
 import * as OnyxCommon from './OnyxCommon';
 
 type AdditionalData = {
     isP2PDebitCard?: boolean;
     beneficialOwners?: string[];
     currency?: string;
-    bankName?: string;
+    bankName?: BankName;
     fieldsType?: string;
     country?: string;
 };
diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts
new file mode 100644
index 000000000000..b6312e039079
--- /dev/null
+++ b/src/types/onyx/Bank.ts
@@ -0,0 +1,18 @@
+import {CSSProperties} from 'react';
+import {ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+
+type BankIcon = {
+    icon: React.FC<SvgProps>;
+    iconSize?: number;
+    iconHeight?: number;
+    iconWidth?: number;
+    iconStyles?: Array<ViewStyle | CSSProperties>;
+};
+
+type BankName = ValueOf<typeof CONST.BANK_NAMES>;
+type BankNameKey = keyof typeof CONST.BANK_NAMES;
+
+export type {BankIcon, BankName, BankNameKey};
diff --git a/src/types/onyx/Fund.ts b/src/types/onyx/Fund.ts
index 4e6cbc695a8d..82c15c5089d7 100644
--- a/src/types/onyx/Fund.ts
+++ b/src/types/onyx/Fund.ts
@@ -1,4 +1,5 @@
 import CONST from '@src/CONST';
+import {BankName} from './Bank';
 import * as OnyxCommon from './OnyxCommon';
 
 type AdditionalData = {
@@ -21,7 +22,7 @@ type AccountData = {
     created?: string;
     currency?: string;
     fundID?: number;
-    bank?: string;
+    bank?: BankName;
 };
 
 type Fund = {
diff --git a/src/types/onyx/Locale.ts b/src/types/onyx/Locale.ts
new file mode 100644
index 000000000000..1a5124684995
--- /dev/null
+++ b/src/types/onyx/Locale.ts
@@ -0,0 +1,6 @@
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+
+type Locale = ValueOf<typeof CONST.LOCALES>;
+
+export default Locale;
diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts
index 49d3428be532..956e9ff36b24 100644
--- a/src/types/onyx/OnyxCommon.ts
+++ b/src/types/onyx/OnyxCommon.ts
@@ -10,12 +10,14 @@ type ErrorFields<TKey extends string = string> = Record<TKey, Errors | null | un
 
 type Errors = Record<string, string>;
 
+type AvatarType = typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+
 type Icon = {
     /** Avatar source to display */
     source: AvatarSource;
 
     /** Denotes whether it is an avatar or a workspace avatar */
-    type: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+    type: AvatarType;
 
     /** Owner of the avatar. If user, displayName. If workspace, policy name */
     name: string;
@@ -27,4 +29,4 @@ type Icon = {
     fallbackIcon?: AvatarSource;
 };
 
-export type {Icon, PendingAction, PendingFields, ErrorFields, Errors};
+export type {Icon, PendingAction, PendingFields, ErrorFields, Errors, AvatarType};
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index 0dc532ebeded..f76fbd5ffd7d 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -197,6 +197,11 @@ type OriginalMessageReimbursementQueued = {
     originalMessage: unknown;
 };
 
+type OriginalMessageReimbursementDequeued = {
+    actionName: typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTDEQUEUED;
+    originalMessage: unknown;
+};
+
 type OriginalMessageMoved = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.MOVED;
     originalMessage: {
@@ -222,6 +227,7 @@ type OriginalMessage =
     | OriginalMessagePolicyTask
     | OriginalMessageModifiedExpense
     | OriginalMessageReimbursementQueued
+    | OriginalMessageReimbursementDequeued
     | OriginalMessageMoved;
 
 export default OriginalMessage;
diff --git a/src/types/onyx/PolicyCategory.ts b/src/types/onyx/PolicyCategory.ts
index adaf16e1acec..b6dfb7bbab9a 100644
--- a/src/types/onyx/PolicyCategory.ts
+++ b/src/types/onyx/PolicyCategory.ts
@@ -19,4 +19,6 @@ type PolicyCategory = {
     origin: string;
 };
 
+type PolicyCategories = Record<string, PolicyCategory>;
 export default PolicyCategory;
+export type {PolicyCategories};
diff --git a/src/types/onyx/Report.ts b/src/types/onyx/Report.ts
index 81a92c4bf603..b49599913543 100644
--- a/src/types/onyx/Report.ts
+++ b/src/types/onyx/Report.ts
@@ -19,6 +19,9 @@ type Report = {
     /** Whether the user is not an admin of policyExpenseChat chat */
     isOwnPolicyExpenseChat?: boolean;
 
+    /** Whether the report is policyExpenseChat */
+    isPolicyExpenseChat?: boolean;
+
     /** Indicates if the report is pinned to the LHN or not */
     isPinned?: boolean;
 
@@ -118,6 +121,9 @@ type Report = {
     /** Whether the report is waiting on a bank account */
     isWaitingOnBankAccount?: boolean;
 
+    /** Whether the report is cancelled */
+    isCancelledIOU?: boolean;
+
     /** Whether the last message was deleted */
     isLastMessageDeletedParentAction?: boolean;
 
@@ -139,6 +145,7 @@ type Report = {
     isChatRoom?: boolean;
     participantsList?: Array<Partial<PersonalDetails>>;
     text?: string;
+    privateNotes?: Record<string, {note: string}>;
 };
 
 export default Report;
diff --git a/src/types/onyx/ReportAction.ts b/src/types/onyx/ReportAction.ts
index 891a0ffcb7b8..64e1eb0b7c88 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -1,5 +1,5 @@
-import {SvgProps} from 'react-native-svg';
 import {ValueOf} from 'type-fest';
+import {AvatarSource} from '@libs/UserUtils';
 import CONST from '@src/CONST';
 import * as OnyxCommon from './OnyxCommon';
 import OriginalMessage, {Decision, Reaction} from './OriginalMessage';
@@ -85,7 +85,7 @@ type ReportActionBase = {
     /** accountIDs of the people to which the whisper was sent to (if any). Returns empty array if it is not a whisper */
     whisperedToAccountIDs?: number[];
 
-    avatar?: string | React.FC<SvgProps>;
+    avatar?: AvatarSource;
 
     automatic?: boolean;
 
@@ -145,4 +145,4 @@ type ReportAction = ReportActionBase & OriginalMessage;
 type ReportActions = Record<string, ReportAction>;
 
 export default ReportAction;
-export type {ReportActions, Message};
+export type {Message, ReportActions};
diff --git a/src/types/onyx/TransactionViolation.ts b/src/types/onyx/TransactionViolation.ts
new file mode 100644
index 000000000000..f7bc5ea1ee8b
--- /dev/null
+++ b/src/types/onyx/TransactionViolation.ts
@@ -0,0 +1,46 @@
+/**
+ * Names of transaction violations
+ */
+type ViolationName =
+    | 'allTagLevelsRequired'
+    | 'autoReportedRejectedExpense'
+    | 'billableExpense'
+    | 'cashExpenseWithNoReceipt'
+    | 'categoryOutOfPolicy'
+    | 'conversionSurcharge'
+    | 'customUnitOutOfPolicy'
+    | 'duplicatedTransaction'
+    | 'fieldRequired'
+    | 'futureDate'
+    | 'invoiceMarkup'
+    | 'maxAge'
+    | 'missingCategory'
+    | 'missingComment'
+    | 'missingTag'
+    | 'modifiedAmount'
+    | 'modifiedDate'
+    | 'nonExpensiworksExpense'
+    | 'overAutoApprovalLimit'
+    | 'overCategoryLimit'
+    | 'overLimit'
+    | 'overLimitAttendee'
+    | 'perDayLimit'
+    | 'receiptNotSmartScanned'
+    | 'receiptRequired'
+    | 'rter'
+    | 'smartscanFailed'
+    | 'someTagLevelsRequired'
+    | 'tagOutOfPolicy'
+    | 'taxAmountChanged'
+    | 'taxOutOfPolicy'
+    | 'taxRateChanged'
+    | 'taxRequired';
+
+type TransactionViolation = {
+    type: string;
+    name: ViolationName;
+    userMessage: string;
+    data?: Record<string, string>;
+};
+
+export type {TransactionViolation, ViolationName};
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index e7b9c7661c79..8329b56dc4b8 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -12,6 +12,7 @@ import Form, {AddDebitCardForm, DateOfBirthForm} from './Form';
 import FrequentlyUsedEmoji from './FrequentlyUsedEmoji';
 import Fund from './Fund';
 import IOU from './IOU';
+import Locale from './Locale';
 import Login from './Login';
 import MapboxAccessToken from './MapboxAccessToken';
 import Modal from './Modal';
@@ -21,7 +22,7 @@ import PersonalBankAccount from './PersonalBankAccount';
 import PersonalDetails from './PersonalDetails';
 import PlaidData from './PlaidData';
 import Policy from './Policy';
-import PolicyCategory from './PolicyCategory';
+import PolicyCategory, {PolicyCategories} from './PolicyCategory';
 import PolicyMember, {PolicyMembers} from './PolicyMember';
 import PolicyTag, {PolicyTags} from './PolicyTag';
 import PrivatePersonalDetails from './PrivatePersonalDetails';
@@ -42,6 +43,7 @@ import SecurityGroup from './SecurityGroup';
 import Session from './Session';
 import Task from './Task';
 import Transaction from './Transaction';
+import {TransactionViolation, ViolationName} from './TransactionViolation';
 import User from './User';
 import UserLocation from './UserLocation';
 import UserWallet from './UserWallet';
@@ -69,6 +71,7 @@ export type {
     FrequentlyUsedEmoji,
     Fund,
     IOU,
+    Locale,
     Login,
     MapboxAccessToken,
     Modal,
@@ -80,6 +83,7 @@ export type {
     PlaidData,
     Policy,
     PolicyCategory,
+    PolicyCategories,
     PolicyMember,
     PolicyMembers,
     PolicyTag,
@@ -103,8 +107,10 @@ export type {
     Session,
     Task,
     Transaction,
+    TransactionViolation,
     User,
     UserWallet,
+    ViolationName,
     WalletAdditionalDetails,
     WalletOnfido,
     WalletStatement,
diff --git a/tests/actions/IOUTest.js b/tests/actions/IOUTest.js
index 944ec944648a..18793e88d624 100644
--- a/tests/actions/IOUTest.js
+++ b/tests/actions/IOUTest.js
@@ -1115,9 +1115,7 @@ describe('actions/IOU', () => {
                                     expect(carlosTransaction.merchant).toBe(CONST.TRANSACTION.DEFAULT_MERCHANT);
                                     expect(julesTransaction.merchant).toBe(CONST.TRANSACTION.DEFAULT_MERCHANT);
                                     expect(vitTransaction.merchant).toBe(CONST.TRANSACTION.DEFAULT_MERCHANT);
-                                    expect(groupTransaction.merchant).toBe(
-                                        `Split bill with ${RORY_EMAIL}, ${CARLOS_EMAIL}, ${JULES_EMAIL}, and ${VIT_EMAIL} [${DateUtils.getDBTime().slice(0, 10)}]`,
-                                    );
+                                    expect(groupTransaction.merchant).toBe(CONST.TRANSACTION.DEFAULT_MERCHANT);
 
                                     expect(carlosTransaction.comment.source).toBe(CONST.IOU.TYPE.SPLIT);
                                     expect(julesTransaction.comment.source).toBe(CONST.IOU.TYPE.SPLIT);
diff --git a/tests/perf-test/ReportActionsUtils.perf-test.js b/tests/perf-test/ReportActionsUtils.perf-test.js
deleted file mode 100644
index 8e9f5570d5d8..000000000000
--- a/tests/perf-test/ReportActionsUtils.perf-test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import Onyx from 'react-native-onyx';
-import {measureFunction} from 'reassure';
-import _ from 'underscore';
-import CONST from '../../src/CONST';
-import * as ReportActionsUtils from '../../src/libs/ReportActionsUtils';
-import ONYXKEYS from '../../src/ONYXKEYS';
-import * as LHNTestUtils from '../utils/LHNTestUtils';
-import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
-
-beforeAll(() =>
-    Onyx.init({
-        keys: ONYXKEYS,
-        safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
-        registerStorageEventListener: () => {},
-    }),
-);
-
-// Clear out Onyx after each test so that each test starts with a clean slate
-afterEach(() => {
-    Onyx.clear();
-});
-
-const getMockedReportActionsMap = (reportsLength = 10, actionsPerReportLength = 100) => {
-    const mockReportActions = Array.from({length: actionsPerReportLength}, (_reportAction, i) => {
-        const reportActionKey = i + 1;
-        const email = `actor+${reportActionKey}@mail.com`;
-        const reportAction = LHNTestUtils.getFakeReportAction(email);
-
-        return {[reportActionKey]: reportAction};
-    });
-
-    const reportKeysMap = Array.from({length: reportsLength}, (_report, i) => {
-        const key = i + 1;
-
-        return {[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${key}`]: _.assign({}, ...mockReportActions)};
-    });
-
-    return _.assign({}, ...reportKeysMap);
-};
-
-const mockedReportActionsMap = getMockedReportActionsMap(2, 10000);
-
-/**
- * This function will be executed 20 times and the average time will be used on the comparison.
- * It will fail based on the CI configuration around Reassure:
- * @see /.github/workflows/reassurePerformanceTests.yml
- *
- * Max deviation on the duration is set to 20% at the time of writing.
- *
- * More on the measureFunction API:
- * @see https://callstack.github.io/reassure/docs/api#measurefunction-function
- */
-test('getLastVisibleAction on 10k reportActions', async () => {
-    const reportId = '1';
-
-    await Onyx.multiSet({
-        ...mockedReportActionsMap,
-    });
-    await waitForBatchedUpdates();
-    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId), {runs: 20});
-});
-
-test('getLastVisibleAction on 10k reportActions with actionsToMerge', async () => {
-    const reportId = '1';
-    const parentReportActionId = '1';
-    const fakeParentAction = mockedReportActionsMap[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportId}`][parentReportActionId];
-    const actionsToMerge = {
-        [parentReportActionId]: {
-            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
-            previousMessage: fakeParentAction.message,
-            message: [
-                {
-                    translationKey: '',
-                    type: 'COMMENT',
-                    html: '',
-                    text: '',
-                    isEdited: true,
-                    isDeletedParentAction: true,
-                },
-            ],
-            errors: null,
-            linkMetaData: [],
-        },
-    };
-
-    await Onyx.multiSet({
-        ...mockedReportActionsMap,
-    });
-    await waitForBatchedUpdates();
-    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId, actionsToMerge), {runs: 20});
-});
diff --git a/tests/perf-test/ReportActionsUtils.perf-test.ts b/tests/perf-test/ReportActionsUtils.perf-test.ts
new file mode 100644
index 000000000000..a52e75c8b75f
--- /dev/null
+++ b/tests/perf-test/ReportActionsUtils.perf-test.ts
@@ -0,0 +1,167 @@
+import Onyx from 'react-native-onyx';
+import {measureFunction} from 'reassure';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
+import createCollection from '../utils/collections/createCollection';
+import createRandomReportAction from '../utils/collections/reportActions';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+beforeAll(() =>
+    Onyx.init({
+        keys: ONYXKEYS,
+        safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+    }),
+);
+
+// Clear out Onyx after each test so that each test starts with a clean slate
+afterEach(() => {
+    Onyx.clear();
+});
+
+const getMockedReportActionsMap = (reportsLength = 10, actionsPerReportLength = 100) => {
+    const mockReportActions = Array.from({length: actionsPerReportLength}, (v, i) => {
+        const reportActionKey = i + 1;
+        const reportAction = createRandomReportAction(reportActionKey);
+
+        return {[reportActionKey]: reportAction};
+    });
+
+    const reportKeysMap = Array.from({length: reportsLength}, (v, i) => {
+        const key = i + 1;
+
+        return {[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${key}`]: Object.assign({}, ...mockReportActions)};
+    });
+
+    return Object.assign({}, ...reportKeysMap) as Partial<ReportAction>;
+};
+
+const mockedReportActionsMap = getMockedReportActionsMap(2, 10000);
+
+const reportActions = createCollection<ReportAction>(
+    (item) => `${item.reportActionID}`,
+    (index) => createRandomReportAction(index),
+);
+
+const reportId = '1';
+
+const runs = CONST.PERFORMANCE_TESTS.RUNS;
+
+/**
+ * This function will be executed 20 times and the average time will be used on the comparison.
+ * It will fail based on the CI configuration around Reassure:
+ * @see /.github/workflows/reassurePerformanceTests.yml
+ *
+ * Max deviation on the duration is set to 20% at the time of writing.
+ *
+ * More on the measureFunction API:
+ * @see https://callstack.github.io/reassure/docs/api#measurefunction-function
+ */
+test('getLastVisibleAction on 10k reportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId), {runs});
+});
+
+test('getLastVisibleAction on 10k reportActions with actionsToMerge', async () => {
+    const parentReportActionId = '1';
+    const fakeParentAction = reportActions[parentReportActionId];
+    const actionsToMerge = {
+        [parentReportActionId]: {
+            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+            previousMessage: fakeParentAction.message,
+            message: [
+                {
+                    translationKey: '',
+                    type: 'COMMENT',
+                    html: '',
+                    text: '',
+                    isEdited: true,
+                    isDeletedParentAction: true,
+                },
+            ],
+            errors: null,
+            linkMetaData: [],
+        },
+    } as unknown as ReportActions;
+
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleAction(reportId, actionsToMerge), {runs});
+});
+
+test('getMostRecentIOURequestActionID on 10k ReportActions', async () => {
+    const reportActionsArray = ReportActionsUtils.getSortedReportActionsForDisplay(reportActions);
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getMostRecentIOURequestActionID(reportActionsArray), {runs});
+});
+
+test('getLastVisibleMessage on 10k ReportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleMessage(reportId), {runs});
+});
+
+test('getLastVisibleMessage on 10k ReportActions with actionsToMerge', async () => {
+    const parentReportActionId = '1';
+    const fakeParentAction = reportActions[parentReportActionId];
+    const actionsToMerge = {
+        [parentReportActionId]: {
+            pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+            previousMessage: fakeParentAction.message,
+            message: [
+                {
+                    translationKey: '',
+                    type: 'COMMENT',
+                    html: '',
+                    text: '',
+                    isEdited: true,
+                    isDeletedParentAction: true,
+                },
+            ],
+            errors: null,
+            linkMetaData: [],
+        },
+    } as unknown as ReportActions;
+
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastVisibleMessage(reportId, actionsToMerge), {runs});
+});
+
+test('getSortedReportActionsForDisplay on 10k ReportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions), {runs});
+});
+
+test('getLastClosedReportAction on 10k ReportActions', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getLastClosedReportAction(reportActions), {runs});
+});
+
+test('getMostRecentReportActionLastModified', async () => {
+    await Onyx.multiSet({
+        ...mockedReportActionsMap,
+    });
+    await waitForBatchedUpdates();
+    await measureFunction(() => ReportActionsUtils.getMostRecentReportActionLastModified(), {runs});
+});
diff --git a/tests/perf-test/ReportScreen.perf-test.js b/tests/perf-test/ReportScreen.perf-test.js
index 20af5603d177..b901888bba0f 100644
--- a/tests/perf-test/ReportScreen.perf-test.js
+++ b/tests/perf-test/ReportScreen.perf-test.js
@@ -155,7 +155,7 @@ test('should render ReportScreen with composer interactions', () => {
     };
 
     const report = LHNTestUtils.getFakeReport();
-    const reportActions = ReportTestUtils.getMockedReportsMap(1000);
+    const reportActions = ReportTestUtils.getMockedReportActionsMap(1000);
     const mockRoute = {params: {reportID: '1'}};
 
     return waitForBatchedUpdates()
@@ -198,7 +198,7 @@ test('should press of the report item', () => {
     };
 
     const report = LHNTestUtils.getFakeReport();
-    const reportActions = ReportTestUtils.getMockedReportsMap(1000);
+    const reportActions = ReportTestUtils.getMockedReportActionsMap(1000);
     const mockRoute = {params: {reportID: '2'}};
 
     return waitForBatchedUpdates()
diff --git a/tests/perf-test/SidebarUtils.perf-test.ts b/tests/perf-test/SidebarUtils.perf-test.ts
new file mode 100644
index 000000000000..7f9957232cfb
--- /dev/null
+++ b/tests/perf-test/SidebarUtils.perf-test.ts
@@ -0,0 +1,97 @@
+import Onyx, {OnyxCollection} from 'react-native-onyx';
+import {measureFunction} from 'reassure';
+import SidebarUtils from '@libs/SidebarUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {PersonalDetails} from '@src/types/onyx';
+import Policy from '@src/types/onyx/Policy';
+import Report from '@src/types/onyx/Report';
+import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
+import createCollection from '../utils/collections/createCollection';
+import createPersonalDetails from '../utils/collections/personalDetails';
+import createRandomPolicy from '../utils/collections/policies';
+import createRandomReportAction from '../utils/collections/reportActions';
+import createRandomReport from '../utils/collections/reports';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+beforeAll(() =>
+    Onyx.init({
+        keys: ONYXKEYS,
+        safeEvictionKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
+    }),
+);
+
+// Clear out Onyx after each test so that each test starts with a clean slate
+afterEach(() => {
+    Onyx.clear();
+});
+
+const getMockedReports = (length = 500) =>
+    createCollection<Report>(
+        (item) => `${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`,
+        (index) => createRandomReport(index),
+        length,
+    );
+
+const reportActions = createCollection<ReportAction>(
+    (item) => `${item.reportActionID}`,
+    (index) => createRandomReportAction(index),
+);
+
+const personalDetails = createCollection<PersonalDetails>(
+    (item) => item.accountID,
+    (index) => createPersonalDetails(index),
+);
+
+const mockedResponseMap = getMockedReports(5000) as Record<`${typeof ONYXKEYS.COLLECTION.REPORT}`, Report>;
+const runs = CONST.PERFORMANCE_TESTS.RUNS;
+
+test('getOptionData on 5k reports', async () => {
+    const report = createRandomReport(1);
+    const preferredLocale = 'en';
+    const policy = createRandomPolicy(1);
+    const parentReportAction = createRandomReportAction(1);
+
+    Onyx.multiSet({
+        ...mockedResponseMap,
+    });
+
+    await waitForBatchedUpdates();
+    await measureFunction(() => SidebarUtils.getOptionData(report, reportActions, personalDetails, preferredLocale, policy, parentReportAction), {runs});
+});
+
+test('getOrderedReportIDs on 5k reports', async () => {
+    const currentReportId = '1';
+    const allReports = getMockedReports();
+    const betas = [CONST.BETAS.DEFAULT_ROOMS, CONST.BETAS.POLICY_ROOMS];
+
+    const policies = createCollection<Policy>(
+        (item) => `${ONYXKEYS.COLLECTION.POLICY}${item.id}`,
+        (index) => createRandomPolicy(index),
+    );
+
+    const allReportActions = Object.fromEntries(
+        Object.keys(reportActions).map((key) => [
+            key,
+            [
+                {
+                    errors: reportActions[key].errors ?? [],
+                    message: [
+                        {
+                            moderationDecision: {
+                                decision: reportActions[key].message?.[0]?.moderationDecision?.decision,
+                            },
+                        },
+                    ],
+                },
+            ],
+        ]),
+    ) as unknown as OnyxCollection<ReportActions>;
+
+    Onyx.multiSet({
+        ...mockedResponseMap,
+    });
+
+    await waitForBatchedUpdates();
+    await measureFunction(() => SidebarUtils.getOrderedReportIDs(currentReportId, allReports, betas, policies, CONST.PRIORITY_MODE.DEFAULT, allReportActions), {runs});
+});
diff --git a/tests/unit/CalendarPickerTest.js b/tests/unit/CalendarPickerTest.js
index 92092acc4cd7..9c5ea4bc72f6 100644
--- a/tests/unit/CalendarPickerTest.js
+++ b/tests/unit/CalendarPickerTest.js
@@ -1,6 +1,6 @@
 import {fireEvent, render, within} from '@testing-library/react-native';
-import {addYears, subYears} from 'date-fns';
-import CalendarPicker from '../../src/components/NewDatePicker/CalendarPicker';
+import {addMonths, addYears, subYears} from 'date-fns';
+import CalendarPicker from '../../src/components/DatePicker/CalendarPicker';
 import CONST from '../../src/CONST';
 import DateUtils from '../../src/libs/DateUtils';
 
@@ -64,7 +64,7 @@ describe('CalendarPicker', () => {
 
         fireEvent.press(getByTestId('next-month-arrow'));
 
-        const nextMonth = new Date().getMonth() + 1;
+        const nextMonth = addMonths(new Date(), 1).getMonth();
         expect(getByText(monthNames[nextMonth])).toBeTruthy();
     });
 
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index dff19baabd3d..2f4294e53c73 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -1292,6 +1292,65 @@ describe('OptionsListUtils', () => {
             },
         ];
 
+        const smallTagsListWithParentChild = {
+            Movies: {
+                enabled: true,
+                name: 'Movies',
+            },
+            'Movies: Avengers: Endgame': {
+                enabled: true,
+                name: 'Movies: Avengers: Endgame',
+                unencodedName: 'Movies: Avengers: Endgame',
+            },
+            Places: {
+                enabled: false,
+                name: 'Places',
+            },
+            Task: {
+                enabled: true,
+                name: 'Task',
+            },
+        };
+
+        const smallResultListWithParentChild = [
+            {
+                title: '',
+                shouldShow: false,
+                indexOffset: 0,
+                // data sorted alphabetically by name
+                data: [
+                    {
+                        text: 'Movies',
+                        keyForList: 'Movies',
+                        searchText: 'Movies',
+                        tooltipText: 'Movies',
+                        isDisabled: false,
+                    },
+                    {
+                        text: '    Avengers',
+                        keyForList: 'Movies: Avengers',
+                        searchText: 'Movies: Avengers',
+                        tooltipText: 'Avengers',
+                        isDisabled: true,
+                    },
+                    {
+                        text: '        Endgame',
+                        keyForList: 'Movies: Avengers: Endgame',
+                        searchText: 'Movies: Avengers: Endgame',
+                        tooltipText: 'Endgame',
+                        isDisabled: false,
+                    },
+                    {
+                        text: 'Task',
+                        keyForList: 'Task',
+                        searchText: 'Task',
+                        tooltipText: 'Task',
+                        isDisabled: false,
+                    },
+                ],
+            },
+        ];
+
         const smallResult = OptionsListUtils.getFilteredOptions(REPORTS, PERSONAL_DETAILS, [], emptySearch, [], [], false, false, false, {}, [], true, smallTagsList);
         expect(smallResult.tagOptions).toStrictEqual(smallResultList);
 
@@ -1354,9 +1413,26 @@ describe('OptionsListUtils', () => {
             recentlyUsedTags,
         );
         expect(largeWrongSearchResult.tagOptions).toStrictEqual(largeWrongSearchResultList);
+
+        const smallResultWithParentChild = OptionsListUtils.getFilteredOptions(
+            REPORTS,
+            PERSONAL_DETAILS,
+            [],
+            emptySearch,
+            [],
+            [],
+            false,
+            false,
+            false,
+            {},
+            [],
+            true,
+            smallTagsListWithParentChild,
+        );
+        expect(smallResultWithParentChild.tagOptions).toStrictEqual(smallResultListWithParentChild);
     });
 
-    it('getCategoryOptionTree()', () => {
+    it('getIndentedOptionTree()', () => {
         const categories = {
             Meals: {
                 enabled: true,
@@ -1669,8 +1745,8 @@ describe('OptionsListUtils', () => {
             },
         ];
 
-        expect(OptionsListUtils.getCategoryOptionTree(categories)).toStrictEqual(result);
-        expect(OptionsListUtils.getCategoryOptionTree(categories, true)).toStrictEqual(resultOneLine);
+        expect(OptionsListUtils.getIndentedOptionTree(categories)).toStrictEqual(result);
+        expect(OptionsListUtils.getIndentedOptionTree(categories, true)).toStrictEqual(resultOneLine);
     });
 
     it('sortCategories', () => {
diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js
index e9caed9f3dc7..6eef3e40bf1c 100644
--- a/tests/unit/SidebarOrderTest.js
+++ b/tests/unit/SidebarOrderTest.js
@@ -242,6 +242,181 @@ describe('Sidebar', () => {
             );
         });
 
+        it('reorders the reports to have a newly created task report on top', () => {
+            // Given three reports in the recently updated order of 3, 2, 1
+            const report1 = LHNTestUtils.getFakeReport([1, 2], 4);
+            const report2 = LHNTestUtils.getFakeReport([3, 4], 3);
+            const report3 = LHNTestUtils.getFakeReport([5, 6], 2);
+
+            const taskReportName = 'Buy Grocery';
+            const taskReport = {
+                ...LHNTestUtils.getFakeReport([7, 8], 1),
+                type: CONST.REPORT.TYPE.TASK,
+                reportName: taskReportName,
+                managerID: 2,
+                stateNum: CONST.REPORT.STATE_NUM.OPEN,
+                statusNum: CONST.REPORT.STATUS.OPEN,
+            };
+
+            // Each report has at least one ADDCOMMENT action so should be rendered in the LNH
+            Report.addComment(report1.reportID, 'Hi, this is a comment');
+            Report.addComment(report2.reportID, 'Hi, this is a comment');
+            Report.addComment(report3.reportID, 'Hi, this is a comment');
+
+            LHNTestUtils.getDefaultRenderedSidebarLinks(taskReport.reportID);
+
+            return (
+                waitForBatchedUpdates()
+                    // When Onyx is updated with the data and the sidebar re-renders
+                    .then(() =>
+                        Onyx.multiSet({
+                            [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.DEFAULT,
+                            [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
+                            [ONYXKEYS.IS_LOADING_REPORT_DATA]: false,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report1.reportID}`]: report1,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report2.reportID}`]: report2,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report3.reportID}`]: report3,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${taskReport.reportID}`]: taskReport,
+                        }),
+                    )
+
+                    // Then the order of the reports should be 4 > 3 > 2 > 1
+                    .then(() => {
+                        const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                        const displayNames = screen.queryAllByLabelText(hintText);
+                        expect(displayNames).toHaveLength(4);
+                        expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe(taskReportName);
+                        expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six');
+                        expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four');
+                        expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('One, Two');
+                    })
+            );
+        });
+
+        it('reorders the reports to have a newly created iou report on top', () => {
+            // Given three reports in the recently updated order of 3, 2, 1
+            const report1 = LHNTestUtils.getFakeReport([1, 2], 4);
+            const report2 = LHNTestUtils.getFakeReport([3, 4], 3);
+            const report3 = {
+                ...LHNTestUtils.getFakeReport([5, 6], 2),
+                hasOutstandingChildRequest: false,
+
+                // This has to be added after the IOU report is generated
+                iouReportID: null,
+            };
+            const iouReport = {
+                ...LHNTestUtils.getFakeReport([7, 8], 1),
+                type: CONST.REPORT.TYPE.IOU,
+                ownerAccountID: 2,
+                managerID: 2,
+                hasOutstandingIOU: true,
+                hasOutstandingChildRequest: true,
+                total: 10000,
+                currency: 'USD',
+                chatReportID: report3.reportID,
+            };
+            report3.iouReportID = iouReport.reportID;
+
+            // Each report has at least one ADDCOMMENT action so should be rendered in the LNH
+            Report.addComment(report1.reportID, 'Hi, this is a comment');
+            Report.addComment(report2.reportID, 'Hi, this is a comment');
+            Report.addComment(report3.reportID, 'Hi, this is a comment');
+
+            LHNTestUtils.getDefaultRenderedSidebarLinks(report3.reportID);
+
+            return (
+                waitForBatchedUpdates()
+                    // When Onyx is updated with the data and the sidebar re-renders
+                    .then(() =>
+                        Onyx.multiSet({
+                            [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.DEFAULT,
+                            [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
+                            [ONYXKEYS.IS_LOADING_REPORT_DATA]: false,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report1.reportID}`]: report1,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report2.reportID}`]: report2,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report3.reportID}`]: report3,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`]: iouReport,
+                        }),
+                    )
+
+                    // Then the order of the reports should be 4 > 3 > 2 > 1
+                    .then(() => {
+                        const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                        const displayNames = screen.queryAllByLabelText(hintText);
+                        expect(displayNames).toHaveLength(4);
+                        expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Email Two owes $100.00');
+                        expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six');
+                        expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four');
+                        expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('One, Two');
+                    })
+            );
+        });
+
+        it('reorders the reports to have a newly created expense report on top', () => {
+            // Given three reports in the recently updated order of 3, 2, 1
+            const report1 = LHNTestUtils.getFakeReport([1, 2], 4);
+            const report2 = LHNTestUtils.getFakeReport([3, 4], 3);
+            const fakeReport = LHNTestUtils.getFakeReportWithPolicy([5, 6], 2);
+            const fakePolicy = LHNTestUtils.getFakePolicy(fakeReport.policyID);
+            const report3 = {
+                ...fakeReport,
+                hasOutstandingChildRequest: false,
+
+                // This has to be added after the IOU report is generated
+                iouReportID: null,
+            };
+            const expenseReport = {
+                ...LHNTestUtils.getFakeReport([7, 8], 1),
+                type: CONST.REPORT.TYPE.EXPENSE,
+                ownerAccountID: 7,
+                managerID: 7,
+                policyName: 'Workspace',
+                hasOutstandingIOU: true,
+                total: -10000,
+                currency: 'USD',
+                state: CONST.REPORT.STATE.SUBMITTED,
+                stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
+                chatReportID: report3.reportID,
+                parentReportID: report3.reportID,
+            };
+            report3.iouReportID = expenseReport.reportID;
+
+            // Each report has at least one ADDCOMMENT action so should be rendered in the LNH
+            Report.addComment(report1.reportID, 'Hi, this is a comment');
+            Report.addComment(report2.reportID, 'Hi, this is a comment');
+            Report.addComment(report3.reportID, 'Hi, this is a comment');
+
+            LHNTestUtils.getDefaultRenderedSidebarLinks(report3.reportID);
+
+            return (
+                waitForBatchedUpdates()
+                    // When Onyx is updated with the data and the sidebar re-renders
+                    .then(() =>
+                        Onyx.multiSet({
+                            [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.DEFAULT,
+                            [ONYXKEYS.PERSONAL_DETAILS_LIST]: LHNTestUtils.fakePersonalDetails,
+                            [ONYXKEYS.IS_LOADING_REPORT_DATA]: false,
+                            [`${ONYXKEYS.COLLECTION.POLICY}${fakeReport.policyID}`]: fakePolicy,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report1.reportID}`]: report1,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report2.reportID}`]: report2,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${report3.reportID}`]: report3,
+                            [`${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`]: expenseReport,
+                        }),
+                    )
+
+                    // Then the order of the reports should be 4 > 3 > 2 > 1
+                    .then(() => {
+                        const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames');
+                        const displayNames = screen.queryAllByLabelText(hintText);
+                        expect(displayNames).toHaveLength(4);
+                        expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Workspace owes $100.00');
+                        expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Email Five');
+                        expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four');
+                        expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('One, Two');
+                    })
+            );
+        });
+
         it('reorders the reports to keep draft reports on top', () => {
             // Given three reports in the recently updated order of 3, 2, 1
             // And the second report has a draft
diff --git a/tests/unit/ViolationUtilsTest.js b/tests/unit/ViolationUtilsTest.js
new file mode 100644
index 000000000000..cc84c547da2e
--- /dev/null
+++ b/tests/unit/ViolationUtilsTest.js
@@ -0,0 +1,194 @@
+import {beforeEach} from '@jest/globals';
+import Onyx from 'react-native-onyx';
+import ViolationsUtils from '@libs/ViolationsUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+const categoryOutOfPolicyViolation = {
+    name: 'categoryOutOfPolicy',
+    type: 'violation',
+    userMessage: '',
+};
+
+const missingCategoryViolation = {
+    name: 'missingCategory',
+    type: 'violation',
+    userMessage: '',
+};
+
+const tagOutOfPolicyViolation = {
+    name: 'tagOutOfPolicy',
+    type: 'violation',
+    userMessage: '',
+};
+
+const missingTagViolation = {
+    name: 'missingTag',
+    type: 'violation',
+    userMessage: '',
+};
+
+describe('getViolationsOnyxData', () => {
+    let transaction;
+    let transactionViolations;
+    let policyRequiresTags;
+    let policyTags;
+    let policyRequiresCategories;
+    let policyCategories;
+
+    beforeEach(() => {
+        transaction = {transactionID: '123'};
+        transactionViolations = [];
+        policyRequiresTags = false;
+        policyTags = {};
+        policyRequiresCategories = false;
+        policyCategories = {};
+    });
+
+    it('should return an object with correct shape and with empty transactionViolations array', () => {
+        const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+        expect(result).toEqual({
+            onyxMethod: Onyx.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS}${transaction.transactionID}`,
+            value: transactionViolations,
+        });
+    });
+
+    it('should handle multiple violations', () => {
+        transactionViolations = [
+            {name: 'duplicatedTransaction', type: 'violation', userMessage: ''},
+            {name: 'receiptRequired', type: 'violation', userMessage: ''},
+        ];
+        const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+        expect(result.value).toEqual(expect.arrayContaining(transactionViolations));
+    });
+
+    describe('policyRequiresCategories', () => {
+        beforeEach(() => {
+            policyRequiresCategories = true;
+            policyCategories = {Food: {enabled: true}};
+            transaction.category = 'Food';
+        });
+
+        it('should add missingCategory violation if no category is included', () => {
+            transaction.category = null;
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+            expect(result.value).toEqual(expect.arrayContaining([missingCategoryViolation, ...transactionViolations]));
+        });
+
+        it('should add categoryOutOfPolicy violation when category is not in policy', () => {
+            transaction.category = 'Bananas';
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+            expect(result.value).toEqual(expect.arrayContaining([categoryOutOfPolicyViolation, ...transactionViolations]));
+        });
+
+        it('should not include a categoryOutOfPolicy violation when category is in policy', () => {
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+            expect(result.value).not.toContainEqual(categoryOutOfPolicyViolation);
+        });
+
+        it('should add categoryOutOfPolicy violation to existing violations if they exist', () => {
+            transaction.category = 'Bananas';
+            transactionViolations = [
+                {name: 'duplicatedTransaction', type: 'violation', userMessage: ''},
+                {name: 'receiptRequired', type: 'violation', userMessage: ''},
+            ];
+
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).toEqual(expect.arrayContaining([categoryOutOfPolicyViolation, ...transactionViolations]));
+        });
+
+        it('should add missingCategory violation to existing violations if they exist', () => {
+            transaction.category = undefined;
+            transactionViolations = [
+                {name: 'duplicatedTransaction', type: 'violation', userMessage: ''},
+                {name: 'receiptRequired', type: 'violation', userMessage: ''},
+            ];
+
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).toEqual(expect.arrayContaining([missingCategoryViolation, ...transactionViolations]));
+        });
+    });
+
+    describe('policy does not require Categories', () => {
+        beforeEach(() => {
+            policyRequiresCategories = false;
+        });
+
+        it('should not add any violations when categories are not required', () => {
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).not.toContainEqual([categoryOutOfPolicyViolation]);
+            expect(result.value).not.toContainEqual([missingCategoryViolation]);
+        });
+    });
+
+    describe('policyRequiresTags', () => {
+        beforeEach(() => {
+            policyRequiresTags = true;
+            policyTags = {Lunch: {enabled: true}, Dinner: {enabled: true}};
+            transaction.tag = 'Lunch';
+        });
+
+        it("shouldn't update the transactionViolations if the policy requires tags and the transaction has a tag from the policy", () => {
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).toEqual(transactionViolations);
+        });
+
+        it('should add a missingTag violation if none is provided and policy requires tags', () => {
+            transaction.tag = undefined;
+
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).toEqual(expect.arrayContaining([missingTagViolation]));
+        });
+
+        it('should add a tagOutOfPolicy violation when policy requires tags and tag is not in the policy', () => {
+            policyTags = {};
+
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).toEqual(expect.arrayContaining([tagOutOfPolicyViolation]));
+        });
+
+        it('should add tagOutOfPolicy violation to existing violations if transaction has tag that is not in the policy', () => {
+            transaction.tag = 'Bananas';
+            transactionViolations = [
+                {name: 'duplicatedTransaction', type: 'violation', userMessage: ''},
+                {name: 'receiptRequired', type: 'violation', userMessage: ''},
+            ];
+
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).toEqual(expect.arrayContaining([tagOutOfPolicyViolation, ...transactionViolations]));
+        });
+
+        it('should add missingTag violation to existing violations if transaction does not have a tag', () => {
+            transaction.tag = undefined;
+            transactionViolations = [
+                {name: 'duplicatedTransaction', type: 'violation', userMessage: ''},
+                {name: 'receiptRequired', type: 'violation', userMessage: ''},
+            ];
+
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).toEqual(expect.arrayContaining([missingTagViolation, ...transactionViolations]));
+        });
+    });
+
+    describe('policy does not require Tags', () => {
+        beforeEach(() => {
+            policyRequiresTags = false;
+        });
+
+        it('should not add any violations when tags are not required', () => {
+            const result = ViolationsUtils.getViolationsOnyxData(transaction, transactionViolations, policyRequiresTags, policyTags, policyRequiresCategories, policyCategories);
+
+            expect(result.value).not.toContainEqual([tagOutOfPolicyViolation]);
+            expect(result.value).not.toContainEqual([missingTagViolation]);
+        });
+    });
+});
diff --git a/tests/unit/generateMonthMatrixTest.js b/tests/unit/generateMonthMatrixTest.js
index 9f565a6e3a78..e65543b82f17 100644
--- a/tests/unit/generateMonthMatrixTest.js
+++ b/tests/unit/generateMonthMatrixTest.js
@@ -1,4 +1,4 @@
-import generateMonthMatrix from '../../src/components/NewDatePicker/CalendarPicker/generateMonthMatrix';
+import generateMonthMatrix from '../../src/components/DatePicker/CalendarPicker/generateMonthMatrix';
 
 describe('generateMonthMatrix', () => {
     it('returns the correct matrix for January 2022', () => {
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 a7630b1a2cdc..967873fe586c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -31,9 +31,6 @@
         #root > div > div {
             height: 100% !important;
         }
-        :root {
-            color-scheme: dark !important;
-        }
         * {
             touch-action: pan-x pan-y;
         }
@@ -74,6 +71,17 @@
         }
 
         /* Customizes the background and text colors for autofill inputs in Chrome */
+        /* Chrome on iOS does not support the autofill pseudo class because it is a non-standard webkit feature.
+        We should rely on the chrome-autofilled property being added to the input when users use auto-fill */
+        input[chrome-autofilled],
+        input[chrome-autofilled]:hover,
+        input[chrome-autofilled]:focus,
+        textarea[chrome-autofilled],
+        textarea[chrome-autofilled]:hover,
+        textarea[chrome-autofilled]:focus,
+        select[chrome-autofilled],
+        select[chrome-autofilled]:hover,
+        select[chrome-autofilled]:focus,
         input:-webkit-autofill,
         input:-webkit-autofill:hover,
         input:-webkit-autofill:focus,
@@ -89,7 +97,7 @@
         }
 
         /* Prevent autofill from overlapping with the input label in Chrome */
-        div:has(input:-webkit-autofill) > label {
+        div:has(input:-webkit-autofill, input[chrome-autofilled]) > label {
             transform: translateY(var(--active-label-translate-y)) scale(var(--active-label-scale)) !important;
             transition: transform var(--label-transition-duration);
         }