diff --git a/.github/workflows/authorChecklist.yml b/.github/workflows/authorChecklist.yml
index ecb0b87a6416..907b1e7be6ca 100644
--- a/.github/workflows/authorChecklist.yml
+++ b/.github/workflows/authorChecklist.yml
@@ -13,7 +13,8 @@ jobs:
     runs-on: ubuntu-latest
     if: github.actor != 'OSBotify' && github.actor != 'imgbot[bot]'
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout
+        uses: actions/checkout@v4
 
       - name: authorChecklist.js
         uses: ./.github/actions/javascript/authorChecklist
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index f6deaae963e4..63148f9e4eb5 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -14,8 +14,9 @@ jobs:
         with:
           ref: staging
           token: ${{ secrets.OS_BOTIFY_TOKEN }}
-
-      - uses: ./.github/actions/composite/setupGitForOSBotifyApp
+          
+      - name: Setup git for OSBotify
+        uses: ./.github/actions/composite/setupGitForOSBotifyApp
         id: setupGitForOSBotify
         with:
           GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
@@ -38,7 +39,8 @@ jobs:
           ref: production
           token: ${{ secrets.OS_BOTIFY_TOKEN }}
 
-      - uses: ./.github/actions/composite/setupGitForOSBotifyApp
+      - name: Setup git for OSBotify
+        uses: ./.github/actions/composite/setupGitForOSBotifyApp
         id: setupGitForOSBotify
         with:
           GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
diff --git a/.github/workflows/deployBlocker.yml b/.github/workflows/deployBlocker.yml
index d118b3fee252..cb5dc6d28b32 100644
--- a/.github/workflows/deployBlocker.yml
+++ b/.github/workflows/deployBlocker.yml
@@ -22,6 +22,13 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ github.token }}
 
+      - name: Escape html characters in GH issue title
+        env:
+          GH_ISSUE_TITLE: ${{ github.event.issue.title }}
+        run: |
+          escaped_title=$(echo "$GH_ISSUE_TITLE" | sed -e 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#039;/g; s/|/\&verbar;/g')
+          echo "GH_ISSUE_TITLE=$escaped_title" >> "$GITHUB_ENV"
+
       - name: 'Post the issue in the #expensify-open-source slack room'
         if: ${{ success() }}
         uses: 8398a7/action-slack@v3
@@ -32,7 +39,7 @@ jobs:
               channel: '#expensify-open-source',
               attachments: [{
                 color: "#DB4545",
-                text: '💥 We have found a New Expensify Deploy Blocker, if you have any idea which PR could be causing this, please comment in the issue: <${{ github.event.issue.html_url }}|${{ github.event.issue.title }}>'.replace(/[&<>"'|]/g, function(m) { return {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;', '|': '&verbar;'}[m]; }),
+                text: '💥 We have found a New Expensify Deploy Blocker, if you have any idea which PR could be causing this, please comment in the issue: <${{ github.event.issue.html_url }}|${{ env.GH_ISSUE_TITLE }}>'
               }]
             }
         env:
diff --git a/.github/workflows/e2ePerformanceTests.yml b/.github/workflows/e2ePerformanceTests.yml
index 016fe89ccfce..92b4e52c159c 100644
--- a/.github/workflows/e2ePerformanceTests.yml
+++ b/.github/workflows/e2ePerformanceTests.yml
@@ -211,7 +211,9 @@ jobs:
           test_spec_file: tests/e2e/TestSpec.yml
           test_spec_type: APPIUM_NODE_TEST_SPEC
           remote_src: false
-          file_artifacts: Customer Artifacts.zip
+          file_artifacts: |
+            Customer Artifacts.zip
+            Test spec output.txt
           log_artifacts: debug.log
           cleanup: true
           timeout: 5400
@@ -220,6 +222,7 @@ jobs:
         if: failure()
         run: |
           echo ${{ steps.schedule-awsdf-main.outputs.data }}
+          cat "./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/Test spec output.txt"
           unzip "Customer Artifacts.zip" -d mainResults
           cat ./mainResults/Host_Machine_Files/\$WORKING_DIRECTORY/debug.log
 
diff --git a/.github/workflows/finishReleaseCycle.yml b/.github/workflows/finishReleaseCycle.yml
index 7fb5feaf6084..2285eec56065 100644
--- a/.github/workflows/finishReleaseCycle.yml
+++ b/.github/workflows/finishReleaseCycle.yml
@@ -18,7 +18,8 @@ jobs:
           ref: main
           token: ${{ secrets.OS_BOTIFY_TOKEN }}
 
-      - uses: ./.github/actions/composite/setupGitForOSBotifyApp
+      - name: Setup git for OSBotify
+        uses: ./.github/actions/composite/setupGitForOSBotifyApp
         id: setupGitForOSBotify
         with:
           GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
@@ -82,7 +83,7 @@ jobs:
           ref: staging
           token: ${{ secrets.OS_BOTIFY_TOKEN }}
 
-      - name: Setup Git for OSBotify
+      - name: Setup git for OSBotify
         id: setupGitForOSBotify
         uses: ./.github/actions/composite/setupGitForOSBotifyApp
         with:
@@ -124,7 +125,7 @@ jobs:
           ref: main
           token: ${{ secrets.OS_BOTIFY_TOKEN }}
 
-      - name: Setup Git for OSBotify
+      - name: Setup git for OSBotify
         uses: ./.github/actions/composite/setupGitForOSBotifyApp
         with:
           GPG_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
diff --git a/.github/workflows/platformDeploy.yml b/.github/workflows/platformDeploy.yml
index 291bd80816b9..bf27006e34a2 100644
--- a/.github/workflows/platformDeploy.yml
+++ b/.github/workflows/platformDeploy.yml
@@ -56,6 +56,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+      
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         with:
diff --git a/.github/workflows/testBuild.yml b/.github/workflows/testBuild.yml
index 6f222398d04b..94a51a2d11bd 100644
--- a/.github/workflows/testBuild.yml
+++ b/.github/workflows/testBuild.yml
@@ -84,6 +84,12 @@ jobs:
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
 
+      - name: Setup Java
+        uses: actions/setup-java@v3
+        with:
+          distribution: 'oracle'
+          java-version: '17'
+
       - name: Setup Ruby
         uses: ruby/setup-ruby@a05e47355e80e57b9a67566a813648fa67d92011
         with:
diff --git a/.github/workflows/testGithubActionsWorkflows.yml b/.github/workflows/testGithubActionsWorkflows.yml
new file mode 100644
index 000000000000..58de3ba2d9f3
--- /dev/null
+++ b/.github/workflows/testGithubActionsWorkflows.yml
@@ -0,0 +1,35 @@
+name: Test GitHub Actions workflows
+
+on:
+  workflow_dispatch:
+  workflow_call:
+  pull_request:
+    types: [opened, reopened, edited, synchronize]
+    branches-ignore: [staging, production]
+    paths: ['.github/**']
+
+jobs:
+  testGHWorkflows:
+    if: ${{ github.actor != 'OSBotify' && github.actor != 'imgbot[bot]' || github.event_name == 'workflow_call' }}
+    runs-on: ubuntu-latest
+    env:
+      CI: true
+    name: test GitHub Workflows
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: Expensify/App/.github/actions/composite/setupNode@main
+
+      - name: Setup Homebrew
+        uses: Homebrew/actions/setup-homebrew@master
+
+      - name: Install Act
+        run: brew install act
+
+      - name: Set ACT_BINARY
+        run: echo "ACT_BINARY=$(which act)" >> "$GITHUB_ENV"
+
+      - name: Run tests
+        run: npm run workflow-test
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/Gemfile.lock b/Gemfile.lock
index 079b5a5b742b..93dab195ebdd 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -18,21 +18,21 @@ GEM
       rubyzip (~> 2.0)
     artifactory (3.0.15)
     atomos (0.1.3)
-    aws-eventstream (1.2.0)
-    aws-partitions (1.824.0)
-    aws-sdk-core (3.181.1)
+    aws-eventstream (1.3.0)
+    aws-partitions (1.857.0)
+    aws-sdk-core (3.188.0)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.5)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.71.0)
-      aws-sdk-core (~> 3, >= 3.177.0)
+    aws-sdk-kms (1.73.0)
+      aws-sdk-core (~> 3, >= 3.188.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.134.0)
-      aws-sdk-core (~> 3, >= 3.181.0)
+    aws-sdk-s3 (1.140.0)
+      aws-sdk-core (~> 3, >= 3.188.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.6)
-    aws-sigv4 (1.6.0)
+    aws-sigv4 (1.7.0)
       aws-eventstream (~> 1, >= 1.0.2)
     babosa (1.0.4)
     claide (1.1.0)
@@ -81,14 +81,13 @@ GEM
     declarative (0.0.20)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
-    domain_name (0.5.20190701)
-      unf (>= 0.0.5, < 1.0.0)
+    domain_name (0.6.20231109)
     dotenv (2.8.1)
     emoji_regex (3.2.3)
     escape (0.0.4)
     ethon (0.16.0)
       ffi (>= 1.15.0)
-    excon (0.103.0)
+    excon (0.104.0)
     faraday (1.10.3)
       faraday-em_http (~> 1.0)
       faraday-em_synchrony (~> 1.0)
@@ -118,7 +117,7 @@ GEM
     faraday_middleware (1.2.0)
       faraday (~> 1.0)
     fastimage (2.2.7)
-    fastlane (2.215.1)
+    fastlane (2.217.0)
       CFPropertyList (>= 2.3, < 4.0.0)
       addressable (>= 2.8, < 3.0.0)
       artifactory (~> 3.0)
@@ -166,9 +165,9 @@ GEM
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
-    google-apis-androidpublisher_v3 (0.49.0)
+    google-apis-androidpublisher_v3 (0.53.0)
       google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-core (0.11.1)
+    google-apis-core (0.11.2)
       addressable (~> 2.5, >= 2.5.1)
       googleauth (>= 0.16.2, < 2.a)
       httpclient (>= 2.8.1, < 3.a)
@@ -181,23 +180,23 @@ GEM
       google-apis-core (>= 0.11.0, < 2.a)
     google-apis-playcustomapp_v1 (0.13.0)
       google-apis-core (>= 0.11.0, < 2.a)
-    google-apis-storage_v1 (0.19.0)
-      google-apis-core (>= 0.9.0, < 2.a)
+    google-apis-storage_v1 (0.29.0)
+      google-apis-core (>= 0.11.0, < 2.a)
     google-cloud-core (1.6.0)
       google-cloud-env (~> 1.0)
       google-cloud-errors (~> 1.0)
     google-cloud-env (1.6.0)
       faraday (>= 0.17.3, < 3.0)
     google-cloud-errors (1.3.1)
-    google-cloud-storage (1.44.0)
+    google-cloud-storage (1.45.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
       google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-storage_v1 (~> 0.19.0)
+      google-apis-storage_v1 (~> 0.29.0)
       google-cloud-core (~> 1.6)
       googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    googleauth (1.8.0)
+    googleauth (1.8.1)
       faraday (>= 0.17.3, < 3.a)
       jwt (>= 1.4, < 3.0)
       multi_json (~> 1.11)
@@ -229,7 +228,7 @@ GEM
     os (1.1.4)
     plist (3.7.0)
     public_suffix (4.0.7)
-    rake (13.0.6)
+    rake (13.1.0)
     representable (3.2.0)
       declarative (< 0.1.0)
       trailblazer-option (>= 0.1.1, < 0.2.0)
@@ -262,13 +261,10 @@ GEM
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     uber (0.1.0)
-    unf (0.1.4)
-      unf_ext
-    unf_ext (0.0.8.2)
-    unicode-display_width (2.4.2)
+    unicode-display_width (2.5.0)
     webrick (1.8.1)
     word_wrap (1.0.0)
-    xcodeproj (1.22.0)
+    xcodeproj (1.23.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 025fa63b2a05..2e735cbaf419 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040203
-        versionName "1.4.2-3"
+        versionCode 1001040700
+        versionName "1.4.7-0"
     }
 
     flavorDimensions "default"
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index aa0e8136957f..a040598e982d 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -11,7 +11,6 @@
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
         <item name="popupTheme">@style/AppTheme.Popup</item>
         <item name="android:spinnerDropDownItemStyle">@style/TextViewSpinnerDropDownItem</item>
-        <item name="android:datePickerDialogTheme">@style/DatePickerDialogTheme</item>
         <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
     </style>
 
@@ -28,18 +27,6 @@
         <item name="android:fontFamily">@font/expneuebold</item>
     </style>
 
-    <!-- Theme used by the DatePicker dialog -->
-    <style name="DatePickerDialogTheme" parent="Theme.AppCompat.Dialog">
-        <item name="android:windowBackground">@drawable/datepicker_background</item>
-        <item name="android:datePickerStyle">@style/DatePickerStyle</item>
-        <item name="android:fontFamily">@font/expneuebold</item>
-        <item name="colorAccent">@color/accent</item>
-    </style>
-
-    <style name="DatePickerStyle" parent="android:Widget.Material.DatePicker">
-        <item name="android:headerBackground">@color/card_highlight_bg</item> <!-- header background color -->
-    </style>
-
     <!-- Theme used by the Alert dialog -->
     <style name="AlertDialogTheme" parent="Theme.AppCompat.Dialog.Alert">
         <item name="android:windowBackground">@drawable/alert_background</item>
diff --git a/assets/images/empty-state_background-fade-dark.png b/assets/images/empty-state_background-fade-dark.png
new file mode 100644
index 000000000000..1caf5630bee3
Binary files /dev/null and b/assets/images/empty-state_background-fade-dark.png differ
diff --git a/assets/images/empty-state_background-fade-light.png b/assets/images/empty-state_background-fade-light.png
new file mode 100644
index 000000000000..98456609b502
Binary files /dev/null and b/assets/images/empty-state_background-fade-light.png differ
diff --git a/assets/images/empty-state_background-fade.png b/assets/images/empty-state_background-fade.png
deleted file mode 100644
index 816ff7343310..000000000000
Binary files a/assets/images/empty-state_background-fade.png and /dev/null differ
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 22d035368c42..8c74ebfd1686 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -66,7 +66,8 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             template: 'web/index.html',
             filename: 'index.html',
             splashLogo: fs.readFileSync(path.resolve(__dirname, `../../assets/images/new-expensify${mapEnvToLogoSuffix(envFile)}.svg`), 'utf-8'),
-            usePolyfillIO: platform === 'web',
+            isWeb: platform === 'web',
+            isProduction: envFile === '.env.production',
             isStaging: envFile === '.env.staging',
         }),
         new FontPreloadPlugin({
diff --git a/contributingGuides/NAVIGATION.md b/contributingGuides/NAVIGATION.md
index d7a94c2a4337..32d3919efbe4 100644
--- a/contributingGuides/NAVIGATION.md
+++ b/contributingGuides/NAVIGATION.md
@@ -40,9 +40,22 @@ When creating RHP flows, you have to remember a couple things:
 
 An example of adding `Settings_Workspaces` page:
 
-1. Add path to `ROUTES.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/ROUTES.js#L36
+1. Add path to `ROUTES.ts`: https://github.com/Expensify/App/blob/main/src/ROUTES.ts
+
+```ts
+export const ROUTES = {
+    // static route
+    SETTINGS_WORKSPACES: 'settings/workspaces',
+    // dynamic route
+    SETTINGS_WORKSPACES: {
+        route: 'settings/:accountID',
+        getRoute: (accountID: number) => `settings/${accountID}` as const,
+    },
+};
+
+```
 
-2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.js`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
+2. Add `Settings_Workspaces` page to proper RHP flow in `linkingConfig.ts`: https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/linkingConfig.js#L40-L42
 
 3. Add your page to proper navigator (it should be aligned with where you've put it in the previous step) https://github.com/Expensify/App/blob/3531af22dcadaa94ed11eccf370517dca0b8c305/src/libs/Navigation/AppNavigator/ModalStackNavigators.js#L334-L338
 
diff --git a/docs/articles/expensify-classic/account-settings/Account-Details.md b/docs/articles/expensify-classic/account-settings/Account-Details.md
index 8f80a35f3525..bc4b94bf8a51 100644
--- a/docs/articles/expensify-classic/account-settings/Account-Details.md
+++ b/docs/articles/expensify-classic/account-settings/Account-Details.md
@@ -59,3 +59,11 @@ Is your Secondary Login (personal email) invalidated in your company account? If
 3. You will be presented with a confirmation message saying Expensify sent you an email with a validation link
 4. Head to your personal email account and follow the prompts
 5. You'll receive a link in the email to click that will unlink the two accounts
+
+# FAQ
+## The profile picture on my account updated automatically. Why did this happen? 
+Our focus is always on making your experience user-friendly and saving you valuable time. One of the ways we achieve this is by utilizing a public API to retrieve public data linked to your email address.
+
+This tool searches for public accounts or profiles associated with your email address, such as on LinkedIn. When it identifies one, it pulls in the uploaded profile picture and name to Expensify.
+
+While this automated process is generally accurate, there may be instances where it's not entirely correct. If this happens, we apologize for any inconvenience caused. The good news is that rectifying such situations is a straightforward process. You can quickly update your information manually by following the directions provided above, ensuring your data is accurate and up to date in no time. 
diff --git a/docs/articles/expensify-classic/account-settings/Merge-Accounts.md b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md
index 7fc355b30bd9..abb218c74118 100644
--- a/docs/articles/expensify-classic/account-settings/Merge-Accounts.md
+++ b/docs/articles/expensify-classic/account-settings/Merge-Accounts.md
@@ -5,29 +5,32 @@ description: How to merge two Expensify accounts and why this is useful.
 
 # Overview
 
-Merging accounts allows you to combine two accounts. When you combine two accounts, all receipts, expenses, expense reports, invoices, bills, imported cards, secondary logins, co-pilots, and group policy settings will be combined into one account. 
+Merging accounts allows you to combine two accounts. When you combine two accounts, all receipts, expenses, expense reports, invoices, bills, imported cards, secondary logins, co-pilots, and group workspace settings will be combined into one account. 
 This can be useful if you start off with an account of your own but your organization creates a separate account for you. You can then track both personal and business expenses via one account. 
 
 # How to merge accounts
 Merging two accounts together is fairly straightforward. Let’s go over how to do that below:
 1. Navigate to [expensify.com](https://www.expensify.com)
 2. Log into the account you want to set as the Primary account
-3. Navigate to Settings > Account > Account Details
-4. Scroll down to the Merge Accounts section and fill in the fields. Once you click Merge, a magic code link will be sent to you via email and you'll be prompted to enter the magic code
-5. Copy the magic code, switch back to the expensify.com page, and paste the code into the required field
+3. Navigate to **Settings > Account > Account Details**
+4. Scroll down to Merge Accounts and fill in the fields
 6. Click Merge Accounts
+7. Once you click Merge, a magic code is sent to you via email
+8. Paste the code into the required field
 If you have any questions about this process, feel free to reach out to Concierge for some assistance!
 
 # FAQ
 ## Can you merge accounts from the mobile app?
 No, accounts can only be merged from the full website at expensify.com.
 ## Can I administratively merge two accounts together?
-No, only the account holder (user) can perform account merging.
+No, only the account holder (member) can perform account merging.
 ## Is merging accounts reversible?
 No, merging accounts is not reversible. It is a permanent action that cannot be undone.
+## I have open expenses in the account I'm merging from. Will those expenses merge into the new account?
+All expenses must be reported and submitted for them to merge into the new account. Any open expenses will not merge.  
 ## Are there any restrictions on account merging?
 Yes! Please see below:
-* If your email address belongs to a verified domain (verified in Expensify), you must start the process from the email account under the verified domain. You cannot merge a verified company email account into a personal account.
-* If you have two accounts with two different verified domains, you cannot merge them together.
-## What happens to my “personal” Individual policy when merging accounts?
-The old “personal” Individual policy will be deleted. If you plan to submit reports under a different policy in the future, ensure that any reports on the Individual policy in the old account are marked as Open before merging the accounts. You can typically do this by selecting “Undo Submit” on any submitted reports. 
+- If your email address belongs to a verified domain (verified in Expensify), you must start the process from the email account under the verified domain. You cannot merge a verified company email account into a personal account.
+- If you have two accounts with two different verified domains, you cannot merge them together.
+## What happens to my “personal” Individual workspace when merging accounts?
+The old “personal” Individual workspace is deleted. If you plan to submit reports under a different workspace in the future, ensure that any reports on the Individual workspace in the old account are marked as Open before merging the accounts. You can typically do this by selecting “Undo Submit” on any submitted reports. 
diff --git a/docs/articles/expensify-classic/account-settings/Notification-Troubbleshooting.md b/docs/articles/expensify-classic/account-settings/Notification-Troubbleshooting.md
new file mode 100644
index 000000000000..22df0dc7f6ca
--- /dev/null
+++ b/docs/articles/expensify-classic/account-settings/Notification-Troubbleshooting.md
@@ -0,0 +1,75 @@
+---
+title: Notification Troubleshooting
+description: This article is about how to troubleshoot notifications from Expensify. 
+--- 
+
+# Overview 
+Sometimes, members may have trouble receiving important email notifications from Expensify, such as Expensify Magic Code emails, account validation emails, secondary login validations, integration emails, or report action notifications (rejections, approvals, etc.). 
+
+# Here's how to troubleshoot missing Expensify notifications:
+
+1. **No error message, but the email is never received**
+The email might be delayed; give it 30-60 minutes to arrive in your inbox.
+Check **Email Preferences** on the web via **Settings > Your Account > Preferences**In the **Contact Preferences** section. Ensure that the relevant boxes are checked for the email type you're missing. Check your email spam and trash folders, as Expensify messages might end up there inadvertently.
+Check to make sure you haven't unintentionally blocked Expensify emails and whitelist [expensify.com](https://community.expensify.com/home/leaving?allowTrusted=1&target=http%3A%2F%2Fexpensify.com%2F), mg.expensify.com, and [amazonSES.com](https://community.expensify.com/home/leaving?allowTrusted=1&target=http%3A%2F%2Famazonses.com%2F) with your email provider.
+
+2. **A "We're having trouble emailing you" banner at the top of your screen**
+Verify that your email address in your account settings is correct and is a real deliverable email address. 
+Re-send Verification Email: Look for an option to re-send a verification email, usually provided when this banner appears.
+
+![ExpensifyHelp_EmailError]({{site.url}}/assets/images/ExpensifyHelp_EmailError.png){:width="100%"}
+
+# Deep Dive 
+
+**For Private Domains**:
+
+If your organization uses a private domain, consult your IT department or IT person to ensure that the following domains are whitelisted to receive our emails: expensify.com, mg.expensify.com, and amazonSES.com. These domains are the sources of various notification emails, so make sure they aren't being blocked.
+
+**For Public Domains (e.g., Gmail, Yahoo, Hotmail)**:
+
+To whitelist our emails on public email services:
+
+1. Check your Spam Folder: Search for messages from expensify.com in your Spam folder, open them, and click "Not Spam" at the top of the message.
+2. Create a Filter: Set up a filter that identifies the entire expensify.com domain and directs all incoming messages to your inbox, preventing them from going to Spam.
+3. Add Specific Contacts: While optional, adding specific email addresses from Expensify as contacts can further prevent emails from going to Spam.
+
+Please note that even if you receive emails from our Concierge support communication, ensure that both expensify.com and mg.expensify.com are whitelisted as they use different servers.
+
+**Email Server Blocking**:
+Your email server may be blocking our emails due to spam filters or other services. Check with your IT department to investigate and resolve any server-level email blocking issues.
+
+**Mimecast**:
+If your company uses Mimecast, a service that can affect email deliverability, check with your IT department. If Mimecast is in use, reach out to us at concierge@expensify.com through a new email, as this should ensure delivery to your inbox. Mimecast should eventually recognize the Expensify domain, preventing future filtering.
+
+**For Outlook Users**:
+For Outlook users specifically:
+
+1. Click the gear icon in Outlook and select "View all Outlook settings."
+2. Choose "Mail" from the settings menu.
+3. Under the "Junk email" submenu, click "Add" under "Safe senders and domains."
+4. Enter the email address you want to whitelist.
+5. Click "Save."
+
+When you click the "Settings" link in the banner in Expensify, you'll be directed to your account settings page, where you may encounter a few different scenarios:
+
+- "Temporarily Suspended Emails": If the message mentions "temporarily suspended emails to," follow the steps provided in the yellow box. This situation typically occurs when we can't find a valid inbox to send our emails to. Possible reasons include:
+     - A misspelled email address during account creation.
+     - Use of a distribution list email (acting as an "alias" email) without a linked inbox.
+     - An auto-responder that has been responding to our emails for an extended period.
+- To resolve this issue, confirm that the email address is indeed associated with an active inbox. Then, click the link that says "here," and your email should be unblocked shortly.
+- SMTP Error (Gray Box): In some cases, you might encounter a gray box with an SMTP error message. This error can vary, but it typically looks something like this:
+
+![ExpensifyHelp_SMTPError]({{site.url}}/assets/images/ExpensifyHelp_SMTPError.png){:width="100%"}
+
+**These look a bit cryptic, yes, but hang in there!** 
+
+The error messages you see are the raw message text received from your email provider's server to Amazon. These messages can vary in text, but the best course of action is to follow the link provided (by copying and pasting) in the text for the next steps.
+
+**Scenario 1**: If the message in the gray box includes "mimecast.com": It means that our emails are being blocked by the server. In this case, you should contact your IT person or team to address the issue.
+
+**Scenario 2**: If the message in the gray box mentions "blacklist at org/.com/.net," or resembles the screenshot provided, it indicates that your IT team has configured your email to use a third-party email reputation or blacklisting service. Here's what you need to know:
+- All our emails are SPF and DKIM-signed, meaning they are cryptographically signed as coming from us and are not spam.
+- The problem arises because we send mail from a cloud-based service. This means that the sender's IP serves multiple vendors, including Expensify. If one of those vendors is marked as spam, it can block all messages from that IP, even if they're from different vendors (including us).
+- The better approach is for the server to flag spam via DKIM and SPF (rather than solely relying on the sender's IP address), as our messages are correctly signed and encrypted to prevent spoofing.
+
+To resolve these issues, consider discussing them with your IT team, as they can help implement the necessary changes to ensure you receive our emails without interruption.
diff --git a/docs/articles/expensify-classic/account-settings/Preferences.md b/docs/articles/expensify-classic/account-settings/Preferences.md
index 532da4d8a986..8131cd0e80c5 100644
--- a/docs/articles/expensify-classic/account-settings/Preferences.md
+++ b/docs/articles/expensify-classic/account-settings/Preferences.md
@@ -1,5 +1,28 @@
 ---
-title: Preferences
-description: Preferences
+title: Account Preferences
+description: Expensify Account Preferences
 ---
-## Resource Coming Soon!
+
+# Overview
+Customize your Expensify experience by updating your account details and preferences. Here you can update your profile picture, adjust contact preferences, and perform other actions to personalize your account.
+
+# How to manage contact preferences
+To edit your notification preferences or unsubscribe from Expensify updates: 
+- On the web, navigate to **Settings > Account > Preferences**
+Scroll down to find the ‘Contact Preferences’ section. To stop receiving a specific type of email, uncheck the corresponding box.
+
+# How to set your time zone
+Wherever you are, we'll time-stamp your report actions according to your local time. This helps you keep track of when submissions or approvals occurred. Setting your time zone in Expensify is simple and ensures accurate time-stamping for your report actions, especially in the comments section of the expense report you're reviewing.
+
+To set your time zone:
+Navigate to **Settings > Account > Preferences > Scroll down to Time Zone**
+
+![ExpensifyHelp_Timezone]({{site.url}}/assets/images/ExpensifyHelp_Timezone.png){:width="100%"}
+
+ **Note:** To set your time zone automatically based on your location, tick the box that says **Set my time zone automatically**.
+
+If you prefer to set your time zone manually, leave the box unticked and select your time zone from the searchable list of locations.
+
+When you add a comment to a report, all the report actions will be time-stamped in your local time. Adjusting your time zone to the appropriate location makes tracking and understanding submission and approval times much easier.
+
+![ExpensifyHelp_Time]({{site.url}}/assets/images/ExpensifyHelp_Time.png){:width="100%"}
diff --git a/docs/articles/expensify-classic/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/integrations/accounting-integrations/QuickBooks-Desktop.md b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Desktop.md
index d8c7c145a670..958e423273ce 100644
--- a/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Desktop.md
+++ b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Desktop.md
@@ -76,6 +76,7 @@ Expensify's integration with QuickBooks brings in your Chart of Accounts as Cate
 3. Expensify offers Auto-Categorization to automatically assign expenses to the appropriate expense categories.
 4. If needed, you can edit the names of the imported Categories to simplify expense coding for your employees. Keep in mind that if you make changes to these accounts in QuickBooks Desktop, the category names in Expensify will update to match them during the next sync.
 5. _**Important:**_ Each expense must have a category selected to export to QuickBooks Desktop. The selected category must be one imported from QuickBooks Desktop; you cannot manually create categories within Expensify policy settings.
+
 ## Classes
 Classes can be imported from QuickBooks as either tags (line-item level) or report fields (header level).
 
diff --git a/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md
index 3ee1c8656b4b..4075aaf18016 100644
--- a/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md
+++ b/docs/articles/expensify-classic/integrations/accounting-integrations/QuickBooks-Online.md
@@ -1,5 +1,322 @@
 ---
-title: Coming Soon
-description: Coming Soon
+title: QuickBooks Online
+description: Everything you need to know about using Expensify's direct integration with QuickBooks Online.
 ---
-## Resource Coming Soon!
+# Overview
+
+The Expensify integration with QuickBooks Online brings in your expense accounts and other data and even exports reports directly to QuickBooks for easy reconciliation. Plus, with advanced features in QuickBooks Online, you can fine-tune coding settings in Expensify for automated data export to optimize your accounting workflow.
+
+## Before connecting
+
+It's crucial to understand the requirements based on your specific QuickBooks subscription:
+
+- While all the features are available in Expensify, their accessibility may vary depending on your QuickBooks Online subscription.
+- 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
+
+Employees must be set up as either Vendors or Employees in QuickBooks Online. Make sure to include the submitter's email in their record.
+
+If you use vendor records, you can export as Vendor Bills, Checks, or Journal Entries. If you use employee records, you can export as Checks or Journal Entries (if exporting against a liability account).
+
+Additional Options for Streamlined Setup:
+
+- Automatic Vendor Creation: Enable “Automatically Create Entities” in your connection settings to automatically generate Vendor or Employee records upon export for submitters that don't already exist in QBO.
+- Employee Setup Considerations: If setting up submitters as Employees, ensure you activate QuickBooks Online Payroll. This will grant access to the Employee Profile tab to input employee email addresses.
+
+## Step 2: Connect Expensify and QuickBooks Online
+
+- Navigate to Settings > Workspaces > Group > [Workspace Name] > Connections > QuickBooks Online. Click Connect to QuickBooks.
+- Enter your QuickBooks Online Administrator’s login information and choose the QuickBooks Online Company File you want to connect to Expensify (you can connect one Company File per Workspace). Then click Authorize.
+- Enter your QuickBooks Online Administrator’s login information and choose the QuickBooks Online Company File you want to connect to Expensify (you can connect one Company File per Workspace):
+
+## Exporting historical Reports to QuickBooks Online:
+
+After connecting QuickBooks Online to Expensify, you may receive a prompt to export all historical reports from Expensify. To export multiple reports at once, follow these steps:
+
+- Go to the Reports page on the web.
+- Tick the checkbox next to the reports you want to export.
+- Click 'Export To' and select 'QuickBooks Online' from the drop-down list.
+
+If you don't want to export specific reports, click “Mark as manually entered” on the report.
+
+# How to configure export settings for QuickBooks Online
+
+Our QuickBooks Online integration offers a range of features. This section will focus on Export Settings and how to set them up.
+
+## Preferred Exporter
+
+Any Workspace admin can export to your accounting integration, but the Preferred Exporter can be chosen to automate specific steps. You can set this role from Settings > Workspaces > Group > [Workspace Name] > Connections > Configure > Export > Preferred Exporter.
+
+The Preferred Exporter:
+
+- Is the user whose Concierge performs all automated exports on behalf of.
+- Is the only user who will see reports awaiting export in their **Home.**
+- Must be a **Domain Admin** if you have set individual GL accounts for Company Card export.
+- Must be a **Domain Admin** if this is the Preferred Workspace for any Expensify Card domain using Automatic Reconciliation.
+
+## Date
+
+When exporting reports to QuickBooks Online, you can choose the report's **submitted date**, the report's **exported date**, or the **date of the last expense on the report.**
+
+Most export options (Check, Journal Entry, and Vendor Bill) will create a single itemized entry with one date. 
+Please note that if you choose a Credit Card or Debit Card for non-reimbursable expenses, we'll use the transaction date on each expense during export. 
+
+# Reimbursable expenses 
+
+Reimbursable expenses export to QuickBooks Online as:
+
+- Vendor Bills
+- Checks
+- Journal Entries
+
+## Vendor bill (recommended)
+
+This is a single itemized vendor bill for each Expensify report. If the accounting period is closed, we will post the vendor bill on the first day of the next open period. If you export as Vendor Bills, you can also choose to Sync reimbursed reports (set on the Advanced tab). **An A/P account is required to export to a vendor bill.**
+
+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:
+
+- Credit Card expenses
+- Debit Card Expenses
+- Vendor Bills
+
+## Credit/debit card
+
+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.
+
+![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.
+
+## Vendor Bill
+
+- A single detailed vendor bill is generated for each Expensify report. If the accounting period is closed, the vendor bill will be posted on the first day of the next open period. If you choose to export non-reimbursable expenses as Vendor Bills, you can assign a default vendor to the bill.
+- The export will use your default vendor if you have Default Vendor enabled. If the Default Vendor is disabled, the report's submitter will be set as the Vendor in QuickBooks.
+
+## Billable Expenses
+
+- In Expensify, you can designate expenses as billable. These will be exported to QuickBooks Online with the billable flag. This feature applies only to expenses exported as Vendor Bills or Checks. To maximize this functionality, ensure that any billable expense is associated with a Customer/Job.
+
+## Export Invoices
+
+If you are creating Invoices in Expensify and exporting these to QuickBooks Online, this is the account the invoice will appear against.
+
+# Configure coding for QuickBooks Online
+
+The coding tab is where your information is configured for Expensify; this will allow employees to code expenses and reports accurately.
+
+- Categories
+- Classes and/or Customers/Projects
+- Locations
+- Items
+- Tax 
+
+## Categories
+
+QuickBooks Online expense accounts will be automatically imported into Expensify as Categories.
+
+## Account Import
+
+Equity type accounts will also be imported as categories.
+
+Important notes:
+
+- Other Current Liabilities can only be exported as Journal Entries if the submitter is set up as an Employee in QuickBooks.
+- Exchange Gain or Loss detail type does not import.
+  
+Recommended steps to take after importing the expense accounts from QuickBooks to Expensify:
+
+- Go to Settings > Workspaces > Groups > [Workspace Name] > Categories to see the accounts imported from QuickBooks Online.
+- Use the enable/disable button to choose which Categories to make available to your employees, and set Category specific rules via the blue settings cog.
+- If necessary, edit the names of imported Categories to make expense coding easier for your employees. (Please Note: If you make any changes to these accounts in QuickBooks Online, the category names on Expensify's side will revert to match the name of the account in QuickBooks Online the next time you sync). 
+- If you use Items in QuickBooks Online, you can import them into Expensify as Categories.
+
+Please note that each expense has to have a category selected to export to QuickBooks Online. The chosen category has to be imported from QuickBooks Online and cannot be manually created within the Workspace settings. 
+
+## Classes and Customers/Projects
+
+If you use Classes or Customers/Projects in QuickBooks Online, you can import those into Expensify as Tags or Report Fields:
+
+- Tags let you apply a Class and/or Customer/Project to each expense.
+- Report Fields enables you to apply a Class and/or Customer/Project to all expenses on a report.
+
+Note: Although Projects can be imported into Expensify and coded to expenses, due to the limitations of the QuickBooks API, expenses cannot be created within the Projects module in QuickBooks. 
+
+## Locations
+
+Locations can be imported into Expensify as a Report Field or, if you export reimbursable expenses as Journal Entries and non-reimbursable expenses as Credit/Debit Card, you can import Locations as Tags.
+
+## Items
+
+If you use Items in QuickBooks Online, you can import Items defined with Purchasing Information (with or without Sales Information) into Expensify as Categories.
+
+## Tax
+
+- Using our tax tracking feature, you can assign a tax rate and amount to each expense.
+- To activate tax tracking, go to connection configuration and enable it. This will automatically import purchasing taxes from QuickBooks Online into Expensify.
+- After the connection is set, navigate to Settings > Workspaces > Groups > [Workspace Name] > Tax. Here, you can view the taxes imported from QuickBooks Online.
+- Use the enable/disable button to choose which taxes are accessible to your employees.
+- Set a default tax for the Company Workspace, which will automatically apply to all new expenses.
+- Please note that, at present, tax cannot be exported to Journal Entries in QuickBooks Online.
+- Expensify performs a daily sync to ensure your information is up-to-date. This minimizes errors from outdated QuickBooks Online data and saves you time on syncing.
+
+# How to configure advanced settings for QuickBooks Online
+
+The advanced settings are where functionality for automating and customizing the QuickBooks Online integration can be enabled.
+Navigate to this section of your Workspace by following Settings > Workspaces > Group > [Workspace Name] > Connections > Configure button > Advanced tab.
+
+## Auto Sync
+With QuickBooks Online auto-sync, once a non-reimbursable report is final approved in Expensify, it's automatically queued for export to QuickBooks Online. For expenses eligible for reimbursement with a linked business bank account, they'll sync when marked as reimbursed.
+
+## Newly Imported Categories
+
+This setting determines the default status of newly imported categories from QuickBooks Online to Expensify, either enabled or disabled.
+
+## Invite Employees
+
+Enabling this automatically invites all Employees from QuickBooks Online to the connected Expensify Company Workspace. If not, you can manually invite or import them using a CSV file.
+
+## Automatically Create Entities
+
+When exporting reimbursable expenses as Vendor Bills or Journal Entries, Expensify will automatically create a vendor in QuickBooks if one doesn't exist. It will also generate a customer when exporting Invoices.
+
+## Sync Reimbursed Reports
+
+Enabling this marks the Vendor Bill as paid in QuickBooks Online when you reimburse a report via ACH direct deposit in Expensify. If reimbursing outside Expensify, marking the Vendor Bill as paid will automatically in QuickBooks Online update the report as reimbursed in Expensify. Note: After enabling this feature, select your QuickBooks Account in the drop-down, indicating the bank account for reimbursements.
+
+## Collection Account
+
+If you are exporting Invoices from Expensify to Quickbooks Online, this is the account the Invoice will appear against once marked as Paid.
+
+# Deep Dive
+
+## Preventing Duplicate Transactions in QuickBooks
+
+When importing a banking feed directly into QuickBooks Online while also importing transactions from Expensify, it's possible to encounter duplicate entries in QuickBooks. To prevent this, follow these steps:
+
+Step 1: Complete the Approval Process in Expensify
+
+- Before exporting any expenses to QuickBooks Online, ensure they are added to a report and the report receives approval. Depending on your Workspace setup, reports may require approval from one or more individuals. The approval process concludes when the last user who views the report selects "Final Approve."
+
+Step 2: Exporting Reports to QuickBooks Online
+
+- To ensure expenses exported from Expensify match seamlessly in the QuickBooks Banking platform, make sure these expenses are marked as non-reimbursable within Expensify and that “Credit Card” is selected as the non-reimbursable export option for your expenses.
+
+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.
+
+To get started:
+
+- Go to Settings > Workspaces > Group > [Workspace Name] > Connections, and click Configure.
+- Navigate to the Coding tab.
+- Turn on **Tax**.
+- Click Save. This imports the Tax Name and rate from QuickBooks Online.
+- Visit Settings > Workspaces > Group > [Workspace Name] > Tax to view the imported taxes.
+- Use the enable/disable button in the Tax tab to choose which taxes your employees can use.
+
+Remember, you can also set a default tax rate for the entire Workspace. This will be automatically applied to all new expenses. The user can still choose a different tax rate for each expense.
+
+Tax information can't be sent to Journal Entries in QuickBooks Online. Also, when dealing with multiple tax rates, where one receipt has different tax rates (like in the EU, UK, and Canada), users should split the expense into the respective parts and set the appropriate tax rate for each part.
+
+## Multi-currency
+
+When working with QuickBooks Online Multi-Currency, there are some things to remember when exporting Vendor Bills and Check! Make sure the vendor's currency and the Accounts Payable (A/P) bank account match.
+
+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:
+
+If multi-currency is enabled and the Vendor's currency is different from the Workspace currency, OR if QuickBooks Online home currency is foreign from the Workspace currency, then:
+
+- We create the Vendor Bill in the Vendor's currency (this is a QuickBooks Online requirement - we don't have a choice)
+- We set the exchange rate between the home currency and the Vendor's currency
+- We convert line item amounts to the vendor's currency
+
+Let's consider this example:
+
+- QuickBooks Online home currency is USD
+- Vendor's currency is VND
+- Workspace (report) currency is JPY
+
+Upon export, we:
+
+1. Specified the bill is in VND
+2. Set the exchange rate between VND and USD (home currency), computed at the time of export.
+3. Converted line items from JPY (currency in Expensify) to VND
+4. QuickBooks Online automatically computed the USD amount (home currency) based on the exchange rate we specified
+5. Journal Entries, Credit Card, and Debit Card:
+
+Multi-currency exports will fail as the account currency must match both the vendor and home currencies. 
+
+## Report Fields
+
+Report fields are a handy way to collect specific information for a report tailored to your organization's needs. They can specify a project, business trip, client, location, and more!
+
+When integrating Expensify with Your Accounting Software, you can create your report fields in your accounting software so the next time you sync your Workspace, these fields will be imported into Expensify.
+
+To select how a specific field imports to Expensify, head to Settings > Workspaces > Group > 
+[Workspace Name] > Connections > Accounting Integrations > QuickBooks Online > Configure > Coding.
+
+Here are the QuickBooks Online fields that can be mapped as a report field within Expensify:
+
+- Classes
+- Customers/Projects
+- Locations
+
+# FAQ
+
+## What happens if the report can't be exported to QuickBooks Online automatically?
+
+If a report encounters an issue during automatic export to QuickBooks Online, you'll receive an email with details about the problem, including any specific error messages. These messages will also be recorded in the report's history section. 
+
+The report will be placed in your Home for your attention. You can address the issues there. If you need further assistance, refer to our QuickBooks Online Export Errors page or export the report manually.
+
+## How can I ensure that I final approve reports before they're exported to QuickBooks Online?
+
+To ensure reports are reviewed before export, set up your Workspaces with the appropriate workflow in Expensify. Additionally, consider changing your Workspace settings to enforce expense Workspace workflows strictly. This guarantees that your Workspace's workflow is consistently followed.
+
+## What happens to existing approved and reimbursed reports if I enable Auto Sync?
+
+- If Auto Sync was disabled when your Workspace was linked to QuickBooks Online, enabling it won't impact existing reports that haven't been exported.
+- If a report has been exported and reimbursed via ACH, it will be automatically marked as paid in QuickBooks Online during the next sync.
+- If a report has been exported and marked as paid in QuickBooks Online, it will be automatically marked as reimbursed in Expensify during the next sync.
+- Reports that have yet to be exported to QuickBooks Online won't be automatically exported.
diff --git a/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approving-Reports.md b/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approving-Reports.md
index 3ee1c8656b4b..32ce41d3cbf3 100644
--- a/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approving-Reports.md
+++ b/docs/articles/expensify-classic/manage-employees-and-report-approvals/Approving-Reports.md
@@ -1,5 +1,189 @@
 ---
-title: Coming Soon
-description: Coming Soon
+title: How To Manage Employees and Reports > Approving Reports
+description: This page will help you understand the lifecycle of a report and how to approve reports that are submitted to you.
 ---
-## Resource Coming Soon!
+# About
+This article provides a comprehensive guide on report management within our platform. From viewing, editing, and submitting your employees' Open reports to handling rejections and unapproving, as well as harnessing the power of our "Guided Review" feature. Additionally, we'll delve into best practices for Concierge, offering insights on how to streamline and automate your report approval processes for maximum efficiency.
+Let's dive in!
+
+
+# How-to manage reports
+This section covers the most essential information a user needs to operate a feature i.e. what to click on. We’ll go over any action the user might take when configuring or using the feature, starting from configuration and moving to usage.
+
+
+What options does a user have when configuring this feature?
+
+
+What options does a user have then interacting with this feature?
+
+
+What elements of this feature are pay-walled vs. free?
+
+
+As a Workspace admin, you have the ability to view, edit, and submit your employees' Open reports.
+
+
+We recommend beginning this process from the web version of Expensify because it offers more functionality compared to the mobile app. Here's how to get started:
+Click on the "Reports" tab.
+Select the "All Submitters" and "Open" filters.
+This will display all employee reports on your Workspaces that have not yet been submitted.
+​
+## Viewing Employee Reports
+Viewing employee reports can vary depending on whether you're using the web or mobile versions of Expensify. We generally recommend using the web version for this purpose, as it offers the following advantages:
+
+
+You will only receive reports directly submitted to you when using the mobile app.
+
+
+The option to filter reports via the Reports page is exclusively available in the web version, making it more convenient when reviewing multiple reports during a session.
+​
+## Viewing employee reports on the mobile app
+When using the mobile app to view reports, please note the following:
+
+
+Tapping on the Reports list will only display your own reports; you won't see reports from other Workspace members.
+
+
+To view another Workspace member's report in the Expensify app, it must be submitted directly to you, and you must access it through a link from an email or via Home.
+
+
+When you access a report in this manner, you will have the option to approve/reject it or go through the review process if there are expenses that require your attention.
+
+
+Once you've approved or rejected the report, it won't be accessible in the app anymore. To view it again, please visit the website and follow the steps mentioned above.
+​
+## Editing employee reports
+If a report has been submitted directly to you, follow these steps to edit the expense details. Please note that you cannot change the expense amount; to make changes affecting the report total, you must reject it and return it to the employee.
+
+
+Here's what to do:
+- Click on any expense within the report to edit the expense details.
+- Remember that you cannot modify the expense amount directly. To make changes affecting the report total, reject the report, and it will be sent back to the employee for revisions.
+- If you're a Workspace admin and need to edit a report that wasn't submitted directly to you, use the "Take Control" button at the top of the report. Keep in mind that taking control of a report will disrupt the approval workflow.
+​
+Additionally, here are some other editing options for Admins:
+- Undelete deleted company card expenses via the Reconciliation Dashboard (requires Domain Admin privileges).
+- Add unreported company card expenses to an existing Open (unsubmitted) report or create a new report via the Reconciliation Dashboard (requires Domain Admin privileges).
+- Add or modify expense coding, including Category, Tag(s), and Attendees.
+- Attach a receipt to an expense that doesn't have one.
+- Move card expenses between two Open (unsubmitted) reports.
+- Merge duplicate expenses (only applicable if they are not card transactions).
+- Change the Workspace associated with a report.​
+
+
+## Submitting Employee Reports
+As a Workspace Admin, you have the option to submit any of your employee's Open reports. If an employee is unable to do it themselves, a Workspace admin can submit an expense report on their behalf to initiate the approval process. Follow these steps:
+Click the "Submit" button located at the top of the report.
+
+
+## Report History and Comments
+Please keep in mind that any changes made by the admin are tracked under "Report History and Comments." If you change the reimbursable status of an expense (e.g., from Reimbursable to Non-Reimbursable), an email notification will be sent to the employee to notify them of this change.
+
+
+## Rejecting or Unapproving a Report
+If you need to reject a report that has been submitted to you or Unapprove a report that has already been approved.
+
+
+To reject the report, click Reject rather than beginning the Review process. If there are multiple approvers involved, you can choose how far back to reject the report.
+
+
+Rejecting a report will return the report back to the submitter in an Open status or, in the case of a multi-level approval workflow, back to the previous approver in a Processing status (awaiting their approval). You may need to do this if the submitter is not ready to submit the report, or perhaps the report as a whole needs to be rejected based on the configuration of your organization's expense Workspace.
+
+
+## Unapprove a Report
+You can click the red Unapprove button at the top of the report to undo approving a report. Keep in mind that you'll only see the Unapprove button if you're a report approver on an admin that has taken control of the report.​
+
+
+## Marking a Report as Reimbursed Outside of Expensify
+If you are reimbursing reports via paper check, through payroll or any other method that takes place outside of Expensify, you'll want to keep track of which reports have been taken care of by marking reports as reimbursed.
+
+
+1. Log into your Expensify account using your preferred web browser, (ie: Chrome or Safari)
+2. Head to your Reports page and locate the report
+3. Click the report name to open it
+4. Click on Reimburse
+5. Choose "I'll do it manually - just mark it as reimbursed". This will change the report status to Reimbursed
+6. The submitter can then go into the report and confirm that they received the reimbursement by clicking the button at the top of the report.
+7. This will change the report status to Reimbursed: CONFIRMED
+
+
+# How to Use Guided Review to Approve Reports
+Guided Review helps alert you to what might be out-of-Workspace for an Expense Report. You'll be guided through all report violations and warnings and given the option to Reject or Edit items that need review prior to approving a report.
+
+
+Guided Review helps approvers quickly identify reports that need more attention so they can pass over reports that can be quickly approved. Both Submitters and Approvers have actionable notifications for the following: violations, warnings, and notices. These notifications are important since they will be included in “review mode” for the approver to make clear approve or reject decisions.
+
+
+Via the Website:​
+1. Simply click Review at the top left of the report and the system will begin to walk you through the entire report.
+2. Choose to Reject, View, or skip over an item needing review. If you wish to stop the process at any time, click the X in the progress bar in the top right corner.
+Reject: This will remove the expense from the report and send it back to the submitter. An email will be sent to the submitter explaining this expense has been rejected.
+View: This will allow you to open the expense so you can view and fix any incorrect data.
+Next: This will allow you to skip over the current item and move forward to review the rest of the report.
+Finish: Click this to finish reviewing the report!
+3. Click the Finish button if you are done reviewing, or reject/edit the last item to finish the review process.
+4. Approve the report! Approve and Forward the report if there is another person who needs to review the report in your approval workflow, or you can Final Approve if you are the final approver. Note: When in Guided Review, you'll automatically Approve the report adhering to your Company's Approval Workflow once you Approve the final expense on the report. You'll then be immediately taken to the next report requiring your attention - making Approving multiple expenses a quick and painless process!
+
+
+
+
+Via the Mobile App:​
+1. From Home, under Reports that need your attention, click Begin Review, and the system will bring you to the first expense on the oldest report in Home.
+2. Edit the expense: Make any necessary edits to the expense by tapping the corresponding field. Be sure to address any Violations and Notes on the expense! Notes are indicated at the top of the expense with a yellow exclamation point, while violations appear on the expense with a red exclamation point:
+3. Choose Reject or Accept at the top of the expense.
+
+
+Reject: This will remove the expense from the report and send it back to the submitter. An email will be sent to the submitter explaining this expense has been rejected, and a comment will be added to the report it was rejected from. If this is the only expense on the report, the entire report will be rejected (and the expense will remain on the report).
+
+
+If Scheduled Submit is being used, rejected expenses will auto-report to the next Open report on the Workspace (as if it were a new expense). If an open report doesn't exist, Concierge will create a new one.
+​
+
+
+If Scheduled Submit is not being used, any rejected expenses will be Unreported in the submitter's account and need to be manually applied to a new report.
+​
+Accept: This will move to the next expense on the report, leaving behind any outstanding violations or notes. If this is the last expense on the report, you'll be all done!
+Once you've made it through all of the expenses on the report, you'll be all set!
+
+
+# Deep Dive
+## Concierge Report Management
+
+
+Concierge report approval removes the need for you to manually click "Approve" on endless reports! Instead, you can set up your group Workspace to capture all the requirements you have for your team's expenses. As long as all the rules have been followed and Concierge's additional audit is passed (more below), we will automatically approve such reports on behalf of the approver after submission.
+​
+Before you start:
+Ensure are a Workspace admin on a group Workspace
+Set your workflow to Submit-and-Approve or Advanced Approval workflow​
+
+
+## Then follow these steps:
+Set up your group Workspace so that all of your expense requirements are defined. Setting automatic categories for employees and category rules (e.g., maximum amounts, receipt requirements, etc.) are great examples!
+
+
+Navigate to Settings > Workspaces > Group > [Workspace Name] > Members.​
+
+
+Scroll down to Approval Mode and select either Submit-and-Approve or Advanced Approval.
+
+
+Under Expense Approvals, select a Manual Approval Threshold greater than $0.​
+
+
+With this setup, manual approval will only be required:
+- For reports that fail audit (i.e. there is at least one Workspace violation on the report)
+- For reports that contain at least one expense over the Manual Approval Threshold
+- For any percentage of reports that you'd like to spot-check (this is set at 5% or 1 in 20 by default).
+- If the report meets all of the requirements you specify in your Workspace settings and all expenses are under the Manual Approval Threshold, then Concierge will automatically move your report through each step of your designated approval workflow (unless it's routed for a spot-check).​
+
+
+
+
+## Concierge Receipt Audit
+Concierge Receipt Audit is a real-time audit and compliance of receipts submitted by employees and Workspace users. Concierge checks every receipt for accuracy and compliance, flagging any expenses that seem fishy before expense reports are even submitted for approval. All risky expenses are highlighted for manual review, leaving you with more control over and visibility into employee expenses.
+
+
+1. Concierge will SmartScan every receipt to verify the data input by the user matches the currency, date, and amount on the physical receipt.
+2. After the report is submitted for approval, Concierge highlights any differences between the SmartScanned values and the employee's chosen input.
+3. Each receipt that has been verified will show the "Verified" logo.
+
diff --git a/docs/articles/expensify-classic/send-payments/Pay-Bills.md b/docs/articles/expensify-classic/send-payments/Pay-Bills.md
index 41c0146126ba..8a5c7c5c7f88 100644
--- a/docs/articles/expensify-classic/send-payments/Pay-Bills.md
+++ b/docs/articles/expensify-classic/send-payments/Pay-Bills.md
@@ -1,5 +1,110 @@
 ---
 title: Pay Bills
-description: Pay Bills
+description: How to receive and pay company bills in Expensify 
 ---
-## Resource Coming Soon!
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# Overview
+Simplify your back office by receiving bills from vendors and suppliers in Expensify. Anyone with or without an Expensify account can send you a bill, and Expensify will file it as a Bill and help you issue the payment.
+
+# How to Receive Vendor or Supplier Bills in Expensify 
+
+There are three ways to get a vendor or supplier bill into Expensify: 
+
+**Option 1:** Have vendors send bills to Expensify directly: Ask your vendors to email all bills to your Expensify billing intake email. 
+
+**Option 2:** Forward bills to Expensify: If your bills are emailed to you, you can forward those bills to your Expensify billing intake email yourself. 
+
+**Option 3:** Manually upload bills to Expensify: If you receive physical bills, you can manually create a Bill in Expensify on the web from the Reports page: 
+1. Click **New Report** and choose **Bill**
+2. Add the expense details and vendor's email address to the pop-up window
+3. Upload a pdf/image of the bill
+4. Click **Submit**
+
+# How to Pay Bills 
+
+There are multiple ways to pay Bills in Expensify. Let’s go over each method below: 
+
+## ACH bank-to-bank transfer
+
+To use this payment method, you must have a business bank account connected to your Expensify account. 
+
+To pay with an ACH bank-to-bank transfer: 
+
+1. Sign in to your Expensify account on the web at www.expensify.com.
+2. Go to the Inbox or Reports page and locate the Bill that needs to be paid. 
+3. Click the **Pay** button to be redirected to the Bill. 
+4. Choose the ACH option from the drop-down list.
+5. Follow the prompts to connect your business bank account to Expensify.
+
+**Fees:** None
+
+## Pay using a credit or debit card
+
+This option is available to all US and International customers receiving an bill from a US vendor with a US business bank account. 
+
+To pay with a credit or debit card: 
+1. Sign-in to your Expensify account on the web app at www.expensify.com.
+2, Click on the Bill you’d like to pay to see the details.
+3, Click the **Pay** button.
+4. You’ll be prompted to enter your credit card or debit card details. 
+
+**Fees:** Includes 2.9% credit card payment fee
+
+## Venmo
+
+If both you and the vendor have Venmo setup in their Expensify account, you can opt to pay the bill through Venmo.
+
+**Fees:** Venmo charges a 3% sender’s fee
+
+## Pay Outside of Expensify 
+
+If you are not able to pay using one of the above methods, then you can mark the Bill  as paid manually in Expensify to update its status and indicate that you have made payment outside Expensify. 
+
+To mark a Bill as paid outside of Expensify: 
+
+1. Sign-in to your Expensify account on the web app at www.expensify.com.
+2. Click on the Bill you’d like to pay to see the details.
+3. Click on the **Reimburse** button. 
+4. Choose **I’ll do it manually**
+
+**Fees:** None
+
+# FAQ
+
+## What is my company's billing intake email? 
+Your billing intake email is [yourdomain.com]@expensify.cash. Example, if your domain is `company.io` your billing email is `company.io@expensify.cash`. 
+
+## When a vendor or supplier bill is sent to Expensify, who receives it? 
+
+Bills are received by the Primary Contact for the domain. This is the email address listed at **Settings > Domains > Domain Admins**.
+
+## Who can view a Bill in Expensify? 
+
+Only the primary contact of the domain can view a Bill. 
+
+## Who can pay a Bill?
+
+Only the primary domain contact (owner of the bill) will be able to pay the Mill.
+
+## How can you share access to Bills?
+
+To give others the ability to view a Bill, the primary contact can manually “share” the Bill under the Details section of the report via the Sharing Options button. 
+To give someone else the ability to pay Bills,  the primary domain contact will need to grant those individuals Copilot access to the primary domain contact's account. 
+
+## Is Bill Pay supported internationally? 
+
+Payments are currently only supported for users paying in United States Dollars (USD). 
+
+## What’s the difference between a Bill and an Invoice in Expensify? 
+
+A Bill is a payable which represents an amount owed to a payee (usually a vendor or supplier), and is usually created from a vendor invoice. An Invoice is a receivable, and indicates an amount owed to you by someone else. 
+
+# Deep Dive: How company bills and vendor invoices are processed in Expensify 
+
+Here is how a vendor or supplier bill goes from received to paid in Expensify: 
+
+1. When a vendor or supplier bill is received in Expensify via, the document is SmartScanned automatically and a Bill is created. The Bill is owned by the primary domain contact, who will see the Bill on the Reports page on their default group policy. 
+2. When the Bill is ready for processing, it is submitted and follows the primary domain contact’s approval workflow. Each time the Bill is approved, it is visible in the next approver's Inbox. 
+3. The final approver pays the Bill from their Expensify account on the web via one of the methods.
+4. The Bill is coded with the relevant imported GL codes from a connected accounting software. After it has finished going through the approval workflow the Bill can be exported back to the accounting package connected to the policy.
diff --git a/docs/articles/new-expensify/chat/Introducing-Expensify-Chat.md b/docs/articles/new-expensify/chat/Introducing-Expensify-Chat.md
index 669d960275e6..25ccdefad261 100644
--- a/docs/articles/new-expensify/chat/Introducing-Expensify-Chat.md
+++ b/docs/articles/new-expensify/chat/Introducing-Expensify-Chat.md
@@ -24,30 +24,30 @@ After downloading the app, log into your new.expensify.com account (you’ll use
 
 ## How to send messages
 
-Click **+** then **Send message** in New Expensify 
-Choose **Chat**
-Search for any name, email or phone number
-Select the individual to begin chatting 
+1. Click **+** then **Send message** in New Expensify 
+2. Choose **Chat**
+3. Search for any name, email or phone number
+4. Select the individual to begin chatting 
 
 ## How to create a group
 
-Click **+**, then **Send message** in New Expensify
-Search for any name, email or phone number
-Click **Add to group**
-Group participants are listed with a green check
-Repeat steps 1-3 to add more participants to the group 
-Click **Create chat** to start chatting
+1. Click **+**, then **Send message** in New Expensify
+2. Search for any name, email or phone number
+3. Click **Add to group**
+4. Group participants are listed with a green check
+5. Repeat steps 1-3 to add more participants to the group
+6. Click **Create chat** to start chatting
 
 ## How to create a room 
 
-Click **+**, then **Send message** in New Expensify
-Click **Room**
-Enter a room name that doesn’t already exist on the intended Workspace
-Choose the Workspace you want to associate the room with.
-Choose the room’s visibility setting:
-Private: Only people explicitly invited can find the room*
-Restricted: Workspace members can find the room*
-Public: Anyone can find the room
+1. Click **+**, then **Send message** in New Expensify
+2. Click **Room**
+3. Enter a room name that doesn’t already exist on the intended Workspace
+4. Choose the Workspace you want to associate the room with.
+5. Choose the room’s visibility setting:
+6. Private: Only people explicitly invited can find the room*
+7. Restricted: Workspace members can find the room*
+8. Public: Anyone can find the room
 
 *Anyone, including non-Workspace Members, can be invited to a Private or Restricted room.
 
@@ -56,26 +56,29 @@ Public: Anyone can find the room
 You can invite people to a Group or Room by @mentioning them or from the Members pane.
 
 ## Mentions:
-Type **@** and start typing the person’s name or email address 
-Choose one or more contacts
-Input message, if desired, then send 
+
+1. Type **@** and start typing the person’s name or email address 
+2. Choose one or more contacts
+3. Input message, if desired, then send 
 
 
 ## Members pane invites:
-Click the **Room** or **Group** header
-Select **Members**
-Click **Invite**
-Find and select any contact/s you’d like to invite
-Click **Next**
-Write a custom invitation if you like 
-Click **Invite**
+
+1. Click the **Room** or **Group** header
+2. Select **Members**
+3. Click **Invite**
+4. Find and select any contact/s you’d like to invite
+5. Click **Next**
+6. Write a custom invitation if you like 
+7. Click **Invite**
 
 ## Members pane removals:
-Click the **Room** or **Group** header
-Select **Members**
-Find and select any contact/s you’d like to remove
-Click **Remove**
-Click **Remove members**
+
+1. Click the **Room** or **Group** header
+2. Select **Members**
+3. Find and select any contact/s you’d like to remove
+4. Click **Remove**
+5. Click **Remove members**
 
 ## How to format text
 
diff --git a/docs/articles/new-expensify/get-paid-back/Distance-Requests.md b/docs/articles/new-expensify/get-paid-back/Distance-Requests.md
new file mode 100644
index 000000000000..91b88409be8b
--- /dev/null
+++ b/docs/articles/new-expensify/get-paid-back/Distance-Requests.md
@@ -0,0 +1,27 @@
+---
+title: Distance Requests
+description: How to create a distance request and request reimbursement for mileage
+---
+<!-- The lines above are required by Jekyll to process the .md file -->
+
+# Overview
+
+Expensify allows you to request reimbursement for mileage by creating a distance request from a map. You can send a distance request in Expensify's mobile, desktop, or web app.
+
+
+# How to create and send a distance request
+
+1. Click the green + button and select Request Money.
+2. Select Distance along the top row of the Request Money window.
+3. Enter the Start and Finish addresses then click Next. If there are multiple stops, you can add them before clicking Next.
+4. Choose who to send the request to by selecting your organization's workspace from the list of recent workspaces.
+5. On the confirmation page, confirm the amount, date, distance, and optionally add a description or category. Click the Request button.
+6. A workspace admin will receive your request and can reimburse you through Expensify or elsewhere!
+
+
+
+# FAQs
+
+## Is there an easy way to reuse recent locations?
+
+Yes! We save your recently used locations and list them out on the page where you select the Start and Finish.
diff --git a/docs/assets/images/Cancel Reimbursement.png b/docs/assets/images/Cancel Reimbursement.png
new file mode 100644
index 000000000000..a1322202ded3
Binary files /dev/null and b/docs/assets/images/Cancel Reimbursement.png differ
diff --git a/docs/assets/images/CompanyCards_Assign.png b/docs/assets/images/CompanyCards_Assign.png
new file mode 100644
index 000000000000..53effeb56b88
Binary files /dev/null and b/docs/assets/images/CompanyCards_Assign.png differ
diff --git a/docs/assets/images/CompanyCards_EmailAssign.png b/docs/assets/images/CompanyCards_EmailAssign.png
new file mode 100644
index 000000000000..a3d9683518a7
Binary files /dev/null and b/docs/assets/images/CompanyCards_EmailAssign.png differ
diff --git a/docs/assets/images/CompanyCards_Unassign.png b/docs/assets/images/CompanyCards_Unassign.png
new file mode 100644
index 000000000000..14a2fdc205a7
Binary files /dev/null and b/docs/assets/images/CompanyCards_Unassign.png differ
diff --git a/docs/assets/images/ExpensifyHelp_EmailError.png b/docs/assets/images/ExpensifyHelp_EmailError.png
new file mode 100644
index 000000000000..203f0cfe2b76
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_EmailError.png differ
diff --git a/docs/assets/images/ExpensifyHelp_SMTPError.png b/docs/assets/images/ExpensifyHelp_SMTPError.png
new file mode 100644
index 000000000000..b95ea70a9dfa
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_SMTPError.png differ
diff --git a/docs/assets/images/ExpensifyHelp_Time.png b/docs/assets/images/ExpensifyHelp_Time.png
new file mode 100644
index 000000000000..f4d91b1e8aeb
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_Time.png differ
diff --git a/docs/assets/images/ExpensifyHelp_Timezone.png b/docs/assets/images/ExpensifyHelp_Timezone.png
new file mode 100644
index 000000000000..d2afc9e693e7
Binary files /dev/null and b/docs/assets/images/ExpensifyHelp_Timezone.png differ
diff --git a/docs/assets/images/QBO1.png b/docs/assets/images/QBO1.png
new file mode 100644
index 000000000000..4037db44d3bb
Binary files /dev/null and b/docs/assets/images/QBO1.png differ
diff --git a/docs/assets/images/QBO2-Bill.png b/docs/assets/images/QBO2-Bill.png
new file mode 100644
index 000000000000..f75716a85079
Binary files /dev/null and b/docs/assets/images/QBO2-Bill.png differ
diff --git a/docs/assets/images/QBO3-Checktoprint.png b/docs/assets/images/QBO3-Checktoprint.png
new file mode 100644
index 000000000000..732141a74353
Binary files /dev/null and b/docs/assets/images/QBO3-Checktoprint.png differ
diff --git a/docs/assets/images/QBO4-JournalEntry.png b/docs/assets/images/QBO4-JournalEntry.png
new file mode 100644
index 000000000000..342d20e49608
Binary files /dev/null and b/docs/assets/images/QBO4-JournalEntry.png differ
diff --git a/docs/assets/images/QBO5-Expense.png b/docs/assets/images/QBO5-Expense.png
new file mode 100644
index 000000000000..5d71f3955557
Binary files /dev/null and b/docs/assets/images/QBO5-Expense.png differ
diff --git a/docs/assets/images/QBO6-Check.png b/docs/assets/images/QBO6-Check.png
new file mode 100644
index 000000000000..087720a76875
Binary files /dev/null and b/docs/assets/images/QBO6-Check.png differ
diff --git a/docs/assets/images/QBO7-Transactions.png b/docs/assets/images/QBO7-Transactions.png
new file mode 100644
index 000000000000..c7752c42870b
Binary files /dev/null and b/docs/assets/images/QBO7-Transactions.png differ
diff --git a/docs/assets/images/Reimbursing Default.png b/docs/assets/images/Reimbursing Default.png
new file mode 100644
index 000000000000..23ffd557ca14
Binary files /dev/null and b/docs/assets/images/Reimbursing Default.png differ
diff --git a/docs/assets/images/Reimbursing Manual Warning.png b/docs/assets/images/Reimbursing Manual Warning.png
new file mode 100644
index 000000000000..2579e21fe2e3
Binary files /dev/null and b/docs/assets/images/Reimbursing Manual Warning.png differ
diff --git a/docs/assets/images/Reimbursing Manual.png b/docs/assets/images/Reimbursing Manual.png
new file mode 100644
index 000000000000..3b9eb27bfa0b
Binary files /dev/null and b/docs/assets/images/Reimbursing Manual.png differ
diff --git a/docs/assets/images/Reimbursing Reports Dropdown.png b/docs/assets/images/Reimbursing Reports Dropdown.png
new file mode 100644
index 000000000000..2e9c6329ae19
Binary files /dev/null and b/docs/assets/images/Reimbursing Reports Dropdown.png differ
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index fb8390ed33da..a01a04f71b3c 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.2</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.2.3</string>
+	<string>1.4.7.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 555d20bf7323..095122c37ce4 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.2</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.2.3</string>
+	<string>1.4.7.0</string>
 </dict>
 </plist>
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index d94e36b0b3c9..390511397b0e 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -256,7 +256,7 @@ PODS:
     - Onfido (~> 28.3.0)
     - React
   - OpenSSL-Universal (1.1.1100)
-  - Plaid (4.1.0)
+  - Plaid (4.7.0)
   - PromisesObjC (2.2.0)
   - RCT-Folly (2021.07.22.00):
     - boost
@@ -569,7 +569,7 @@ PODS:
     - react-native-config/App (= 1.4.6)
   - react-native-config/App (1.4.6):
     - React-Core
-  - react-native-document-picker (8.1.1):
+  - react-native-document-picker (8.2.1):
     - React-Core
   - react-native-flipper (0.159.0):
     - React-Core
@@ -585,12 +585,12 @@ PODS:
     - React-Core
   - react-native-pager-view (6.2.0):
     - React-Core
-  - react-native-pdf (6.7.1):
+  - react-native-pdf (6.7.3):
     - React-Core
   - react-native-performance (5.1.0):
     - React-Core
-  - react-native-plaid-link-sdk (10.0.0):
-    - Plaid (~> 4.1.0)
+  - react-native-plaid-link-sdk (10.8.0):
+    - Plaid (~> 4.7.0)
     - React-Core
   - react-native-quick-sqlite (8.0.0-beta.2):
     - React
@@ -726,8 +726,6 @@ PODS:
     - React-Core
   - RNCPicker (2.4.4):
     - React-Core
-  - RNDateTimePicker (3.5.2):
-    - React-Core
   - RNDeviceInfo (10.3.0):
     - React-Core
   - RNDevMenu (4.1.1):
@@ -919,7 +917,6 @@ DEPENDENCIES:
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
-  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNDevMenu (from `../node_modules/react-native-dev-menu`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
@@ -1121,8 +1118,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCPicker:
     :path: "../node_modules/@react-native-picker/picker"
-  RNDateTimePicker:
-    :path: "../node_modules/@react-native-community/datetimepicker"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNDevMenu:
@@ -1212,7 +1207,7 @@ SPEC CHECKSUMS:
   Onfido: c7d010d9793790d44a07799d9be25aa8e3814ee7
   onfido-react-native-sdk: b346a620af5669f9fecb6dc3052314a35a94ad9f
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  Plaid: 7d340abeadb46c7aa1a91f896c5b22395a31fcf2
+  Plaid: 431ef9be5314a1345efb451bc5e6b067bfb3b4c6
   PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: c0569ecc035894e4a68baecb30fe6a7ea6e399f9
@@ -1233,7 +1228,7 @@ SPEC CHECKSUMS:
   react-native-blob-util: 99f4d79189252f597fe0d810c57a3733b1b1dea6
   react-native-cameraroll: 8ffb0af7a5e5de225fd667610e2979fc1f0c2151
   react-native-config: 7cd105e71d903104e8919261480858940a6b9c0e
-  react-native-document-picker: f68191637788994baed5f57d12994aa32cf8bf88
+  react-native-document-picker: 69ca2094d8780cfc1e7e613894d15290fdc54bba
   react-native-flipper: dc5290261fbeeb2faec1bdc57ae6dd8d562e1de4
   react-native-geolocation: 0f7fe8a4c2de477e278b0365cce27d089a8c5903
   react-native-image-manipulator: c48f64221cfcd46e9eec53619c4c0374f3328a56
@@ -1241,9 +1236,9 @@ SPEC CHECKSUMS:
   react-native-key-command: 5af6ee30ff4932f78da6a2109017549042932aa5
   react-native-netinfo: ccbe1085dffd16592791d550189772e13bf479e2
   react-native-pager-view: 0ccb8bf60e2ebd38b1f3669fa3650ecce81db2df
-  react-native-pdf: 7c0e91ada997bac8bac3bb5bea5b6b81f5a3caae
+  react-native-pdf: b4ca3d37a9a86d9165287741c8b2ef4d8940c00e
   react-native-performance: cef2b618d47b277fb5c3280b81a3aad1e72f2886
-  react-native-plaid-link-sdk: 9eb0f71dad94b3bdde649c7a384cba93024af46c
+  react-native-plaid-link-sdk: df1618a85a615d62ff34e34b76abb7a56497fbc1
   react-native-quick-sqlite: bcc7a7a250a40222f18913a97cd356bf82d0a6c4
   react-native-render-html: 96c979fe7452a0a41559685d2f83b12b93edac8c
   react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
@@ -1270,7 +1265,6 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60
   RNCClipboard: d77213bfa269013bf4b857b7a9ca37ee062d8ef1
   RNCPicker: 0b65be85fe7954fbb2062ef079e3d1cde252d888
-  RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140
   RNDeviceInfo: 4701f0bf2a06b34654745053db0ce4cb0c53ada7
   RNDevMenu: 72807568fe4188bd4c40ce32675d82434b43c45d
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8
diff --git a/package-lock.json b/package-lock.json
index 18f74f2422cb..65173ccec496 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.4.2-3",
+  "version": "1.4.7-0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.4.2-3",
+      "version": "1.4.7-0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -26,7 +26,6 @@
         "@react-native-async-storage/async-storage": "^1.17.10",
         "@react-native-camera-roll/camera-roll": "5.4.0",
         "@react-native-clipboard/clipboard": "^1.12.1",
-        "@react-native-community/datetimepicker": "^3.5.2",
         "@react-native-community/geolocation": "^3.0.6",
         "@react-native-community/netinfo": "^9.3.10",
         "@react-native-firebase/analytics": "^12.3.0",
@@ -78,7 +77,7 @@
         "react-native-config": "^1.4.5",
         "react-native-dev-menu": "^4.1.1",
         "react-native-device-info": "^10.3.0",
-        "react-native-document-picker": "^8.0.0",
+        "react-native-document-picker": "^8.2.1",
         "react-native-draggable-flatlist": "^4.0.1",
         "react-native-fast-image": "^8.6.3",
         "react-native-fs": "^2.20.0",
@@ -94,11 +93,11 @@
         "react-native-modal": "^13.0.0",
         "react-native-onyx": "1.0.118",
         "react-native-pager-view": "^6.2.0",
-        "react-native-pdf": "^6.7.1",
+        "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-plaid-link-sdk": "^10.0.0",
+        "react-native-plaid-link-sdk": "10.8.0",
         "react-native-qrcode-svg": "^6.2.0",
         "react-native-quick-sqlite": "^8.0.0-beta.2",
         "react-native-reanimated": "3.5.4",
@@ -8292,15 +8291,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/@react-native-community/datetimepicker": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz",
-      "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==",
-      "license": "MIT",
-      "dependencies": {
-        "invariant": "^2.2.4"
-      }
-    },
     "node_modules/@react-native-community/eslint-config": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-3.0.0.tgz",
@@ -25886,10 +25876,9 @@
       }
     },
     "node_modules/crypto-js": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
-      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==",
-      "license": "MIT"
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
     "node_modules/css-box-model": {
       "version": "1.2.1",
@@ -44225,8 +44214,9 @@
       }
     },
     "node_modules/react-native-document-picker": {
-      "version": "8.1.1",
-      "license": "MIT",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-8.2.1.tgz",
+      "integrity": "sha512-luH2hKdq4cUwE651OscyGderLMsCusOsBzw4MBca91CgprlAGVMm1/pDwJDV5t9LIewVK8DIgXGXzgrsusKVhA==",
       "dependencies": {
         "invariant": "^2.2.4"
       },
@@ -44476,11 +44466,11 @@
       }
     },
     "node_modules/react-native-pdf": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/react-native-pdf/-/react-native-pdf-6.7.1.tgz",
-      "integrity": "sha512-zszQygtNBYoUfEtP/fV7zhzGeohDlUksh2p3OzshLrxdY9mw7Tm5VXAxYq4d8HsomRJUbFlJ7rHaTU9AQL800g==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/react-native-pdf/-/react-native-pdf-6.7.3.tgz",
+      "integrity": "sha512-bK1fVkj18kBA5YlRFNJ3/vJ1bEX3FDHyAPY6ArtIdVs+vv0HzcK5WH9LSd2bxUsEMIyY9CSjP4j8BcxNXTiQkQ==",
       "dependencies": {
-        "crypto-js": "^3.2.0",
+        "crypto-js": "4.2.0",
         "deprecated-react-native-prop-types": "^2.3.0"
       },
       "peerDependencies": {
@@ -44536,8 +44526,12 @@
       }
     },
     "node_modules/react-native-plaid-link-sdk": {
-      "version": "10.0.0",
-      "license": "MIT",
+      "version": "10.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-plaid-link-sdk/-/react-native-plaid-link-sdk-10.8.0.tgz",
+      "integrity": "sha512-rhyI19SZdwKCsHtkJ0ZOCD/r0vNLS1vqUAS3HPPa97IIN6nS2ln9krLA7lFfMKtWxY5Z5d73SqTmqhd1qqdNuA==",
+      "dependencies": {
+        "react-native-plaid-link-sdk": "^10.4.0"
+      },
       "peerDependencies": {
         "react": "*",
         "react-native": ">=0.66.0"
@@ -58708,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",
@@ -71516,9 +71502,9 @@
       }
     },
     "crypto-js": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
-      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
     "css-box-model": {
       "version": "1.2.1",
@@ -84700,7 +84686,9 @@
       "requires": {}
     },
     "react-native-document-picker": {
-      "version": "8.1.1",
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-document-picker/-/react-native-document-picker-8.2.1.tgz",
+      "integrity": "sha512-luH2hKdq4cUwE651OscyGderLMsCusOsBzw4MBca91CgprlAGVMm1/pDwJDV5t9LIewVK8DIgXGXzgrsusKVhA==",
       "requires": {
         "invariant": "^2.2.4"
       }
@@ -84838,11 +84826,11 @@
       "requires": {}
     },
     "react-native-pdf": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/react-native-pdf/-/react-native-pdf-6.7.1.tgz",
-      "integrity": "sha512-zszQygtNBYoUfEtP/fV7zhzGeohDlUksh2p3OzshLrxdY9mw7Tm5VXAxYq4d8HsomRJUbFlJ7rHaTU9AQL800g==",
+      "version": "6.7.3",
+      "resolved": "https://registry.npmjs.org/react-native-pdf/-/react-native-pdf-6.7.3.tgz",
+      "integrity": "sha512-bK1fVkj18kBA5YlRFNJ3/vJ1bEX3FDHyAPY6ArtIdVs+vv0HzcK5WH9LSd2bxUsEMIyY9CSjP4j8BcxNXTiQkQ==",
       "requires": {
-        "crypto-js": "^3.2.0",
+        "crypto-js": "4.2.0",
         "deprecated-react-native-prop-types": "^2.3.0"
       }
     },
@@ -84874,8 +84862,12 @@
       }
     },
     "react-native-plaid-link-sdk": {
-      "version": "10.0.0",
-      "requires": {}
+      "version": "10.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-plaid-link-sdk/-/react-native-plaid-link-sdk-10.8.0.tgz",
+      "integrity": "sha512-rhyI19SZdwKCsHtkJ0ZOCD/r0vNLS1vqUAS3HPPa97IIN6nS2ln9krLA7lFfMKtWxY5Z5d73SqTmqhd1qqdNuA==",
+      "requires": {
+        "react-native-plaid-link-sdk": "^10.4.0"
+      }
     },
     "react-native-qrcode-svg": {
       "version": "6.2.0",
diff --git a/package.json b/package.json
index 88c2ab282bd5..1693afc40b04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.2-3",
+  "version": "1.4.7-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
@@ -73,7 +73,6 @@
     "@react-native-async-storage/async-storage": "^1.17.10",
     "@react-native-camera-roll/camera-roll": "5.4.0",
     "@react-native-clipboard/clipboard": "^1.12.1",
-    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/geolocation": "^3.0.6",
     "@react-native-community/netinfo": "^9.3.10",
     "@react-native-firebase/analytics": "^12.3.0",
@@ -125,7 +124,7 @@
     "react-native-config": "^1.4.5",
     "react-native-dev-menu": "^4.1.1",
     "react-native-device-info": "^10.3.0",
-    "react-native-document-picker": "^8.0.0",
+    "react-native-document-picker": "^8.2.1",
     "react-native-draggable-flatlist": "^4.0.1",
     "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",
@@ -141,11 +140,11 @@
     "react-native-modal": "^13.0.0",
     "react-native-onyx": "1.0.118",
     "react-native-pager-view": "^6.2.0",
-    "react-native-pdf": "^6.7.1",
+    "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-plaid-link-sdk": "^10.0.0",
+    "react-native-plaid-link-sdk": "10.8.0",
     "react-native-qrcode-svg": "^6.2.0",
     "react-native-quick-sqlite": "^8.0.0-beta.2",
     "react-native-reanimated": "3.5.4",
diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh
index 88ab17e7a2bd..025559dc4671 100755
--- a/scripts/build-desktop.sh
+++ b/scripts/build-desktop.sh
@@ -25,4 +25,4 @@ npx webpack --config config/webpack/webpack.desktop.js --env envFile=$ENV_FILE
 title "Building Desktop App Archive Using Electron"
 info ""
 shift 1
-npx electron-builder --config config/electronBuilder.config.js "$@"
+npx electron-builder --config config/electronBuilder.config.js --publish always "$@"
diff --git a/scripts/start-android.sh b/scripts/start-android.sh
old mode 100644
new mode 100755
diff --git a/src/App.js b/src/App.js
index 698dfe4437b2..2caa6b9ffc29 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,8 +6,10 @@ import Onyx from 'react-native-onyx';
 import {PickerStateProvider} from 'react-native-picker-select';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import '../wdyr';
+import ColorSchemeWrapper from './components/ColorSchemeWrapper';
 import ComposeProviders from './components/ComposeProviders';
 import CustomStatusBar from './components/CustomStatusBar';
+import CustomStatusBarContextProvider from './components/CustomStatusBar/CustomStatusBarContextProvider';
 import ErrorBoundary from './components/ErrorBoundary';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import {LocaleContextProvider} from './components/LocaleContextProvider';
@@ -24,6 +26,7 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';
 import * as Session from './libs/actions/Session';
 import * as Environment from './libs/Environment/Environment';
 import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext';
+import ThemeIllustrationsProvider from './styles/illustrations/ThemeIllustrationsProvider';
 import ThemeProvider from './styles/themes/ThemeProvider';
 import ThemeStylesProvider from './styles/ThemeStylesProvider';
 
@@ -64,11 +67,15 @@ function App() {
                     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 436ac4ebbc31..13b79179f431 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -248,88 +248,9 @@ const CONST = {
     BETAS: {
         ALL: 'all',
         CHRONOS_IN_CASH: 'chronosInCash',
-        PAY_WITH_EXPENSIFY: 'payWithExpensify',
-        FREE_PLAN: 'freePlan',
         DEFAULT_ROOMS: 'defaultRooms',
-        BETA_EXPENSIFY_WALLET: 'expensifyWallet',
         BETA_COMMENT_LINKING: 'commentLinking',
-        INTERNATIONALIZATION: 'internationalization',
         POLICY_ROOMS: 'policyRooms',
-        PASSWORDLESS: 'passwordless',
-        TASKS: 'tasks',
-        THREADS: 'threads',
-        CUSTOM_STATUS: 'customStatus',
-        NEW_DOT_SAML: 'newDotSAML',
-        PDF_META_STORE: 'pdfMetaStore',
-        REPORT_ACTION_CONTEXT_MENU: 'reportActionContextMenu',
-        SUBMIT_POLICY: 'submitPolicy',
-        ATTENDEES: 'attendees',
-        AUTO_EXPORT: 'autoExport',
-        AUTO_EXPORT_INTACCT: 'autoExportIntacct',
-        AUTO_EXPORT_QBO: 'autoExportQbo',
-        AUTO_EXPORT_XERO: 'autoExportXero',
-        AUTO_JOIN_POLICY: 'autoJoinPolicy',
-        AUTOMATED_TAX_EXEMPTION: 'automatedTaxExemption',
-        BILL_PAY: 'billPay',
-        CATEGORY_DEFAULT_TAX: 'categoryDefaultTax',
-        COLLECTABLE_DEPOSIT_ACCOUNTS: 'collectableDepositAccounts',
-        CONCIERGE_TRAVEL: 'conciergeTravel',
-        CONNECTED_CARDS: 'connectedCards',
-        DISCREPANCY: 'discrepancy',
-        DOMAIN_CONTACT_BILLING: 'domainContactBilling',
-        DOMAIN_TWO_FACTOR_AUTH: 'domainTwoFactorAuth',
-        DUPLICATE_DETECTION: 'duplicateDetection',
-        EMAIL_SUPPRESSION_BETA: 'emailSuppressionBeta',
-        EXPENSES_V2: 'expensesV2',
-        EXPENSIFY_CARD: 'expensifyCard',
-        EXPENSIFY_CARD_INTACCT_RECONCILIATION: 'expensifyCardIntacctReconciliation',
-        EXPENSIFY_CARD_NETSUITE_RECONCILIATION: 'expensifyCardNetSuiteReconciliation',
-        EXPENSIFY_CARD_QBO_RECONCILIATION: 'expensifyCardQBOReconciliation',
-        EXPENSIFY_CARD_RAPID_INCREASE_FRAUD: 'expensifyCardRapidIncreaseFraud',
-        EXPENSIFY_CARD_XERO_RECONCILIATION: 'expensifyCardXeroReconciliation',
-        EXPENSIFY_ORG: 'expensifyOrg',
-        FIX_VIOLATION_PUSH_NOTIFICATION: 'fixViolationPushNotification',
-        FREE_PLAN_FULL_LAUNCH: 'freePlanFullLaunch',
-        FREE_PLAN_SOFT_LAUNCH: 'freePlanSoftLaunch',
-        GUSTO: 'gusto',
-        INBOX_CACHE: 'inboxCache',
-        INBOX_HIDDEN_TASKS: 'inboxHiddenTasks',
-        INDIRECT_INTEGRATION_SETUP: 'indirectIntegrationSetup',
-        IOU: 'IOU',
-        JOIN_POLICY: 'joinPolicy',
-        LOAD_POLICY_ASYNC: 'loadPolicyAsync',
-        MAP_RECEIPT: 'mapReceipt',
-        MERGE_API: 'mergeAPI',
-        MOBILE_REALTIME_REPORT_COMMENTS: 'mobileRealtimeReportComments',
-        MOBILE_SECURE_RECEIPTS: 'mobileSecureReceipts',
-        MONTHLY_SETTLEMENT: 'monthlySettlement',
-        NAMES_AND_AVATARS: 'namesAndAvatars',
-        NATIVE_CHAT: 'nativeChat',
-        NEW_PRICING: 'newPricing',
-        NEWSLETTER_THREE: 'newsletterThree',
-        NEXT_STEPS: 'nextSteps',
-        OPEN_FACE_HAMBURGER: 'openFaceHamburger',
-        PER_DIEM: 'perDiem',
-        PER_DIEM_INTERNATIONAL: 'perDiemInternational',
-        PRICING_COPY_CHANGES: 'pricingCopyChanges',
-        QBO_INVOICES: 'qboInvoices',
-        QUICKBOOKS_DESKTOP_V2: 'quickbooksDesktopV2',
-        REALTIME_REPORT_COMMENTS: 'realtimeReportComments',
-        S2W_ANNOUNCEMENT: 's2wAnnouncement',
-        SCHEDULED_AUTO_REPORTING: 'scheduledAutoReporting',
-        SECURE_RECEIPTS: 'secureReceipts',
-        SECURE_RECEIPTS_REPORTS: 'secureReceiptsReports',
-        SELF_SERVICE_HARD_LAUNCH: 'selfServiceHardLaunch',
-        SEND_MONEY: 'sendMoney',
-        SMART_SCAN_USER_DISPUTES: 'smartScanUserDisputes',
-        SMS_SIGN_UP: 'smsSignUp',
-        STRIPE_CONNECT: 'stripeConnect',
-        SUMMARY_EMAIL: 'summaryEmail',
-        SWIPE_TO_WIN: 'swipeToWin',
-        TAX_FOR_MILEAGE: 'taxForMileage',
-        TWO_FACTOR_AUTH: 'twoFactorAuth',
-        VENMO_INTEGRATION: 'venmoIntegration',
-        ZENEFITS_INTEGRATION: 'zenefitsIntegration',
         VIOLATIONS: 'violations',
     },
     BUTTON_STATES: {
@@ -576,6 +497,7 @@ const CONST = {
                 MODIFIEDEXPENSE: 'MODIFIEDEXPENSE',
                 MOVED: 'MOVED',
                 REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',
+                REIMBURSEMENTDEQUEUED: 'REIMBURSEMENTDEQUEUED',
                 RENAMED: 'RENAMED',
                 REPORTPREVIEW: 'REPORTPREVIEW',
                 SUBMITTED: 'SUBMITTED',
@@ -635,6 +557,7 @@ const CONST = {
                     UPDATE_REIMBURSEMENT_CHOICE: 'POLICYCHANGELOG_UPDATE_REIMBURSEMENT_CHOICE',
                     UPDATE_REPORT_FIELD: 'POLICYCHANGELOG_UPDATE_REPORT_FIELD',
                     UPDATE_TAG: 'POLICYCHANGELOG_UPDATE_TAG',
+                    UPDATE_TAG_ENABLED: 'POLICYCHANGELOG_UPDATE_TAG_ENABLED',
                     UPDATE_TAG_LIST_NAME: 'POLICYCHANGELOG_UPDATE_TAG_LIST_NAME',
                     UPDATE_TAG_NAME: 'POLICYCHANGELOG_UPDATE_TAG_NAME',
                     UPDATE_TIME_ENABLED: 'POLICYCHANGELOG_UPDATE_TIME_ENABLED',
@@ -678,6 +601,7 @@ const CONST = {
             ADMINS: '#admins',
         },
         STATE: {
+            OPEN: 'OPEN',
             SUBMITTED: 'SUBMITTED',
             PROCESSING: 'PROCESSING',
         },
@@ -776,6 +700,14 @@ const CONST = {
         DARK: 'dark',
         SYSTEM: 'system',
     },
+    COLOR_SCHEME: {
+        LIGHT: 'light',
+        DARK: 'dark',
+    },
+    STATUS_BAR_STYLE: {
+        LIGHT_CONTENT: 'light-content',
+        DARK_CONTENT: 'dark-content',
+    },
     TRANSACTION: {
         DEFAULT_MERCHANT: 'Request',
         UNKNOWN_MERCHANT: 'Unknown Merchant',
@@ -1234,6 +1166,9 @@ const CONST = {
             SVG: 'svg',
         },
         RECEIPT_ERROR: 'receiptError',
+        CANCEL_REASON: {
+            PAYMENT_EXPIRED: 'CANCEL_REASON_PAYMENT_EXPIRED',
+        },
     },
 
     GROWL: {
@@ -1437,7 +1372,6 @@ const CONST = {
         TIME_STARTS_01: /^01:\d{2} [AP]M$/,
         TIME_FORMAT: /^\d{2}:\d{2} [AP]M$/,
         DATE_TIME_FORMAT: /^\d{2}-\d{2} \d{2}:\d{2} [AP]M$/,
-        ATTACHMENT_ROUTE: /\/r\/(\d*)\/attachment/,
         ILLEGAL_FILENAME_CHARACTERS: /\/|<|>|\*|"|:|\?|\\|\|/g,
 
         ENCODE_PERCENT_CHARACTER: /%(25)+/g,
@@ -2892,6 +2826,7 @@ const CONST = {
             START_CHAT: 'startChat',
             SEND_MONEY: 'sendMoney',
             REFER_FRIEND: 'referralFriend',
+            SHARE_CODE: 'shareCode',
         },
         REVENUE: 250,
         LEARN_MORE_LINK: 'https://help.expensify.com/articles/new-expensify/billing-and-plan-types/Referral-Program',
@@ -2908,12 +2843,52 @@ const CONST = {
 
     BACK_BUTTON_NATIVE_ID: 'backButton',
 
+    /**
+     * The maximum count of items per page for OptionsSelector.
+     * When paginate, it multiplies by page number.
+     */
+    MAX_OPTIONS_SELECTOR_PAGE_LENGTH: 500,
+
     /**
      * Performance test setup - run the same test multiple times to get a more accurate result
      */
     PERFORMANCE_TESTS: {
         RUNS: 20,
     },
+
+    /**
+     * Bank account names
+     */
+    BANK_NAMES: {
+        EXPENSIFY: 'expensify',
+        AMERICAN_EXPRESS: 'americanexpress',
+        BANK_OF_AMERICA: 'bank of america',
+        BB_T: 'bbt',
+        CAPITAL_ONE: 'capital one',
+        CHASE: 'chase',
+        CHARLES_SCHWAB: 'charles schwab',
+        CITIBANK: 'citibank',
+        CITIZENS_BANK: 'citizens bank',
+        DISCOVER: 'discover',
+        FIDELITY: 'fidelity',
+        GENERIC_BANK: 'generic bank',
+        HUNTINGTON_BANK: 'huntington bank',
+        NAVY_FEDERAL_CREDIT_UNION: 'navy federal credit union',
+        PNC: 'pnc',
+        REGIONS_BANK: 'regions bank',
+        SUNTRUST: 'suntrust',
+        TD_BANK: 'td bank',
+        US_BANK: 'us bank',
+        USAA: 'usaa',
+    },
+
+    /**
+     * Constants for maxToRenderPerBatch parameter that is used for FlatList or SectionList. This controls the amount of items rendered per batch, which is the next chunk of items rendered on every scroll.
+     */
+    MAX_TO_RENDER_PER_BATCH: {
+        DEFAULT: 5,
+        CAROUSEL: 3,
+    },
 } as const;
 
 export default CONST;
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 75c284fb9546..5576eb64736d 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -84,6 +84,9 @@ const ONYXKEYS = {
     /** Contains all the users settings for the Settings page and sub pages */
     USER: 'user',
 
+    /** Contains latitude and longitude of user's last known location */
+    USER_LOCATION: 'userLocation',
+
     /** Contains metadata (partner, login, validation date) for all of the user's logins */
     LOGIN_LIST: 'loginList',
 
@@ -246,6 +249,7 @@ const ONYXKEYS = {
         POLICY_TAGS: 'policyTags_',
         POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
         WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
+        WORKSPACE_INVITE_MESSAGE_DRAFT: 'workspaceInviteMessageDraft_',
         REPORT: 'report_',
         // REPORT_METADATA is a perf optimization used to hold loading states (isLoadingInitialReportActions, isLoadingOlderReportActions, isLoadingNewerReportActions).
         // A lot of components are connected to the Report entity and do not care about the actions. Setting the loading state
@@ -371,6 +375,7 @@ type OnyxValues = {
     [ONYXKEYS.COUNTRY_CODE]: number;
     [ONYXKEYS.COUNTRY]: string;
     [ONYXKEYS.USER]: OnyxTypes.User;
+    [ONYXKEYS.USER_LOCATION]: OnyxTypes.UserLocation;
     [ONYXKEYS.LOGIN_LIST]: Record<string, OnyxTypes.Login>;
     [ONYXKEYS.SESSION]: OnyxTypes.Session;
     [ONYXKEYS.BETAS]: OnyxTypes.Beta[];
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 26589a3db0e0..a3aa28c44609 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -1,30 +1,28 @@
-import {ValueOf} from 'type-fest';
+import {IsEqual, ValueOf} from 'type-fest';
 import CONST from './CONST';
 
-/**
- * This is a file containing constants for all the routes we want to be able to go to
- */
+// This is a file containing constants for all the routes we want to be able to go to
 
 /**
  * Builds a URL with an encoded URI component for the `backTo` param which can be added to the end of URLs
  */
-function getUrlWithBackToParam(url: string, backTo?: string): string {
-    const backToParam = backTo ? `${url.includes('?') ? '&' : '?'}backTo=${encodeURIComponent(backTo)}` : '';
-    return url + backToParam;
+function getUrlWithBackToParam<TUrl extends string>(url: TUrl, backTo?: string): `${TUrl}` | `${TUrl}?backTo=${string}` | `${TUrl}&backTo=${string}` {
+    const backToParam = backTo ? (`${url.includes('?') ? '&' : '?'}backTo=${encodeURIComponent(backTo)}` as const) : '';
+    return `${url}${backToParam}` as const;
 }
 
-export default {
+const ROUTES = {
     HOME: '',
     /** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {
         route: 'flag/:reportID/:reportActionID',
-        getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}`,
+        getRoute: (reportID: string, reportActionID: string) => `flag/${reportID}/${reportActionID}` as const,
     },
     SEARCH: 'search',
     DETAILS: {
         route: 'details',
-        getRoute: (login: string) => `details?login=${encodeURIComponent(login)}`,
+        getRoute: (login: string) => `details?login=${encodeURIComponent(login)}` as const,
     },
     PROFILE: {
         route: 'a/:accountID',
@@ -35,7 +33,7 @@ export default {
     VALIDATE_LOGIN: 'v/:accountID/:validateCode',
     GET_ASSISTANCE: {
         route: 'get-assistance/:taskID',
-        getRoute: (taskID: string) => `get-assistance/${taskID}`,
+        getRoute: (taskID: string) => `get-assistance/${taskID}` as const,
     },
     UNLINK_LOGIN: 'u/:accountID/:validateCode',
     APPLE_SIGN_IN: 'sign-in-with-apple',
@@ -54,7 +52,7 @@ export default {
     BANK_ACCOUNT_PERSONAL: 'bank-account/personal',
     BANK_ACCOUNT_WITH_STEP_TO_OPEN: {
         route: 'bank-account/:stepToOpen?',
-        getRoute: (stepToOpen = '', policyID = '', backTo?: string): string => getUrlWithBackToParam(`bank-account/${stepToOpen}?policyID=${policyID}`, backTo),
+        getRoute: (stepToOpen = '', policyID = '', backTo?: string) => getUrlWithBackToParam(`bank-account/${stepToOpen}?policyID=${policyID}`, backTo),
     },
 
     SETTINGS: 'settings',
@@ -77,44 +75,44 @@ export default {
     SETTINGS_WALLET: 'settings/wallet',
     SETTINGS_WALLET_DOMAINCARD: {
         route: '/settings/wallet/card/:domain',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}`,
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}` as const,
     },
     SETTINGS_REPORT_FRAUD: {
         route: '/settings/wallet/card/:domain/report-virtual-fraud',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-virtual-fraud`,
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-virtual-fraud` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_NAME: {
         route: '/settings/wallet/card/:domain/get-physical/name',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/name`,
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/name` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_PHONE: {
         route: '/settings/wallet/card/:domain/get-physical/phone',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/phone`,
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/phone` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_ADDRESS: {
         route: '/settings/wallet/card/:domain/get-physical/address',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/address`,
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/address` as const,
     },
     SETTINGS_WALLET_CARD_GET_PHYSICAL_CONFIRM: {
         route: '/settings/wallet/card/:domain/get-physical/confirm',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/confirm`,
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}/get-physical/confirm` as const,
     },
     SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
     SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
     SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments',
     SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: {
         route: 'settings/wallet/card/:domain/digital-details/update-address',
-        getRoute: (domain: string) => `settings/wallet/card/${domain}/digital-details/update-address`,
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/digital-details/update-address` as const,
     },
     SETTINGS_WALLET_TRANSFER_BALANCE: 'settings/wallet/transfer-balance',
     SETTINGS_WALLET_CHOOSE_TRANSFER_ACCOUNT: 'settings/wallet/choose-transfer-account',
     SETTINGS_WALLET_REPORT_CARD_LOST_OR_DAMAGED: {
         route: '/settings/wallet/card/:domain/report-card-lost-or-damaged',
-        getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-card-lost-or-damaged`,
+        getRoute: (domain: string) => `/settings/wallet/card/${domain}/report-card-lost-or-damaged` as const,
     },
     SETTINGS_WALLET_CARD_ACTIVATE: {
         route: 'settings/wallet/card/:domain/activate',
-        getRoute: (domain: string) => `settings/wallet/card/${domain}/activate`,
+        getRoute: (domain: string) => `settings/wallet/card/${domain}/activate` as const,
     },
     SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details',
     SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name',
@@ -130,10 +128,16 @@ export default {
     },
     SETTINGS_CONTACT_METHOD_DETAILS: {
         route: 'settings/profile/contact-methods/:contactMethod/details',
-        getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details`,
+        getRoute: (contactMethod: string) => `settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details` as const,
+    },
+    SETTINGS_NEW_CONTACT_METHOD: {
+        route: 'settings/profile/contact-methods/new',
+        getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods/new', backTo),
+    },
+    SETTINGS_2FA: {
+        route: 'settings/security/two-factor-auth',
+        getRoute: (backTo?: string) => getUrlWithBackToParam('settings/security/two-factor-auth', backTo),
     },
-    SETTINGS_NEW_CONTACT_METHOD: 'settings/profile/contact-methods/new',
-    SETTINGS_2FA: 'settings/security/two-factor-auth',
     SETTINGS_STATUS: 'settings/profile/status',
     SETTINGS_STATUS_SET: 'settings/profile/status/set',
 
@@ -146,157 +150,158 @@ export default {
     REPORT: 'r',
     REPORT_WITH_ID: {
         route: 'r/:reportID?/:reportActionID?',
-        getRoute: (reportID: string) => `r/${reportID}`,
+        getRoute: (reportID: string) => `r/${reportID}` as const,
     },
     EDIT_REQUEST: {
         route: 'r/:threadReportID/edit/:field',
-        getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${threadReportID}/edit/${field}`,
+        getRoute: (threadReportID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${threadReportID}/edit/${field}` as const,
     },
     EDIT_CURRENCY_REQUEST: {
         route: 'r/:threadReportID/edit/currency',
-        getRoute: (threadReportID: string, currency: string, backTo: string) => `r/${threadReportID}/edit/currency?currency=${currency}&backTo=${backTo}`,
+        getRoute: (threadReportID: string, currency: string, backTo: string) => `r/${threadReportID}/edit/currency?currency=${currency}&backTo=${backTo}` as const,
     },
     REPORT_WITH_ID_DETAILS_SHARE_CODE: {
         route: 'r/:reportID/details/shareCode',
-        getRoute: (reportID: string) => `r/${reportID}/details/shareCode`,
+        getRoute: (reportID: string) => `r/${reportID}/details/shareCode` as const,
     },
     REPORT_ATTACHMENTS: {
         route: 'r/:reportID/attachment',
-        getRoute: (reportID: string, source: string) => `r/${reportID}/attachment?source=${encodeURI(source)}`,
+        getRoute: (reportID: string, source: string) => `r/${reportID}/attachment?source=${encodeURI(source)}` as const,
     },
     REPORT_PARTICIPANTS: {
         route: 'r/:reportID/participants',
-        getRoute: (reportID: string) => `r/${reportID}/participants`,
+        getRoute: (reportID: string) => `r/${reportID}/participants` as const,
     },
     REPORT_WITH_ID_DETAILS: {
         route: 'r/:reportID/details',
-        getRoute: (reportID: string) => `r/${reportID}/details`,
+        getRoute: (reportID: string) => `r/${reportID}/details` as const,
     },
     REPORT_SETTINGS: {
         route: 'r/:reportID/settings',
-        getRoute: (reportID: string) => `r/${reportID}/settings`,
+        getRoute: (reportID: string) => `r/${reportID}/settings` as const,
     },
     REPORT_SETTINGS_ROOM_NAME: {
         route: 'r/:reportID/settings/room-name',
-        getRoute: (reportID: string) => `r/${reportID}/settings/room-name`,
+        getRoute: (reportID: string) => `r/${reportID}/settings/room-name` as const,
     },
     REPORT_SETTINGS_NOTIFICATION_PREFERENCES: {
         route: 'r/:reportID/settings/notification-preferences',
-        getRoute: (reportID: string) => `r/${reportID}/settings/notification-preferences`,
+        getRoute: (reportID: string) => `r/${reportID}/settings/notification-preferences` as const,
     },
     REPORT_SETTINGS_WRITE_CAPABILITY: {
         route: 'r/:reportID/settings/who-can-post',
-        getRoute: (reportID: string) => `r/${reportID}/settings/who-can-post`,
+        getRoute: (reportID: string) => `r/${reportID}/settings/who-can-post` as const,
     },
     REPORT_WELCOME_MESSAGE: {
         route: 'r/:reportID/welcomeMessage',
-        getRoute: (reportID: string) => `r/${reportID}/welcomeMessage`,
+        getRoute: (reportID: string) => `r/${reportID}/welcomeMessage` as const,
     },
     SPLIT_BILL_DETAILS: {
         route: 'r/:reportID/split/:reportActionID',
-        getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}`,
+        getRoute: (reportID: string, reportActionID: string) => `r/${reportID}/split/${reportActionID}` as const,
     },
     EDIT_SPLIT_BILL: {
         route: `r/:reportID/split/:reportActionID/edit/:field`,
-        getRoute: (reportID: string, reportActionID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${reportID}/split/${reportActionID}/edit/${field}`,
+        getRoute: (reportID: string, reportActionID: string, field: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>) => `r/${reportID}/split/${reportActionID}/edit/${field}` as const,
     },
     EDIT_SPLIT_BILL_CURRENCY: {
         route: 'r/:reportID/split/:reportActionID/edit/currency',
-        getRoute: (reportID: string, reportActionID: string, currency: string, backTo: string) => `r/${reportID}/split/${reportActionID}/edit/currency?currency=${currency}&backTo=${backTo}`,
+        getRoute: (reportID: string, reportActionID: string, currency: string, backTo: string) =>
+            `r/${reportID}/split/${reportActionID}/edit/currency?currency=${currency}&backTo=${backTo}` as const,
     },
     TASK_TITLE: {
         route: 'r/:reportID/title',
-        getRoute: (reportID: string) => `r/${reportID}/title`,
+        getRoute: (reportID: string) => `r/${reportID}/title` as const,
     },
     TASK_DESCRIPTION: {
         route: 'r/:reportID/description',
-        getRoute: (reportID: string) => `r/${reportID}/description`,
+        getRoute: (reportID: string) => `r/${reportID}/description` as const,
     },
     TASK_ASSIGNEE: {
         route: 'r/:reportID/assignee',
-        getRoute: (reportID: string) => `r/${reportID}/assignee`,
+        getRoute: (reportID: string) => `r/${reportID}/assignee` as const,
     },
     PRIVATE_NOTES_VIEW: {
         route: 'r/:reportID/notes/:accountID',
-        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}`,
+        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}` as const,
     },
     PRIVATE_NOTES_LIST: {
         route: 'r/:reportID/notes',
-        getRoute: (reportID: string) => `r/${reportID}/notes`,
+        getRoute: (reportID: string) => `r/${reportID}/notes` as const,
     },
     PRIVATE_NOTES_EDIT: {
         route: 'r/:reportID/notes/:accountID/edit',
-        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit`,
+        getRoute: (reportID: string, accountID: string | number) => `r/${reportID}/notes/${accountID}/edit` as const,
     },
     ROOM_MEMBERS: {
         route: 'r/:reportID/members',
-        getRoute: (reportID: string) => `r/${reportID}/members`,
+        getRoute: (reportID: string) => `r/${reportID}/members` as const,
     },
     ROOM_INVITE: {
         route: 'r/:reportID/invite',
-        getRoute: (reportID: string) => `r/${reportID}/invite`,
+        getRoute: (reportID: string) => `r/${reportID}/invite` as const,
     },
 
     // To see the available iouType, please refer to CONST.IOU.TYPE
     MONEY_REQUEST: {
         route: ':iouType/new/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}` as const,
     },
     MONEY_REQUEST_AMOUNT: {
         route: ':iouType/new/amount/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/amount/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/amount/${reportID}` as const,
     },
     MONEY_REQUEST_PARTICIPANTS: {
         route: ':iouType/new/participants/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/participants/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/participants/${reportID}` as const,
     },
     MONEY_REQUEST_CONFIRMATION: {
         route: ':iouType/new/confirmation/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/confirmation/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/confirmation/${reportID}` as const,
     },
     MONEY_REQUEST_DATE: {
         route: ':iouType/new/date/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/date/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/date/${reportID}` as const,
     },
     MONEY_REQUEST_CURRENCY: {
         route: ':iouType/new/currency/:reportID?',
-        getRoute: (iouType: string, reportID: string, currency: string, backTo: string) => `${iouType}/new/currency/${reportID}?currency=${currency}&backTo=${backTo}`,
+        getRoute: (iouType: string, reportID: string, currency: string, backTo: string) => `${iouType}/new/currency/${reportID}?currency=${currency}&backTo=${backTo}` as const,
     },
     MONEY_REQUEST_DESCRIPTION: {
         route: ':iouType/new/description/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/description/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/description/${reportID}` as const,
     },
     MONEY_REQUEST_CATEGORY: {
         route: ':iouType/new/category/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/category/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/category/${reportID}` as const,
     },
     MONEY_REQUEST_TAG: {
         route: ':iouType/new/tag/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/tag/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/tag/${reportID}` as const,
     },
     MONEY_REQUEST_MERCHANT: {
         route: ':iouType/new/merchant/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/merchant/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/merchant/${reportID}` as const,
     },
     MONEY_REQUEST_WAYPOINT: {
         route: ':iouType/new/waypoint/:waypointIndex',
-        getRoute: (iouType: string, waypointIndex: number) => `${iouType}/new/waypoint/${waypointIndex}`,
+        getRoute: (iouType: string, waypointIndex: number) => `${iouType}/new/waypoint/${waypointIndex}` as const,
     },
     MONEY_REQUEST_RECEIPT: {
         route: ':iouType/new/receipt/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/receipt/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/receipt/${reportID}` as const,
     },
     MONEY_REQUEST_DISTANCE: {
         route: ':iouType/new/address/:reportID?',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/address/${reportID}`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/address/${reportID}` as const,
     },
     MONEY_REQUEST_EDIT_WAYPOINT: {
         route: 'r/:threadReportID/edit/distance/:transactionID/waypoint/:waypointIndex',
-        getRoute: (threadReportID: number, transactionID: string, waypointIndex: number) => `r/${threadReportID}/edit/distance/${transactionID}/waypoint/${waypointIndex}`,
+        getRoute: (threadReportID: number, transactionID: string, waypointIndex: number) => `r/${threadReportID}/edit/distance/${transactionID}/waypoint/${waypointIndex}` as const,
     },
     MONEY_REQUEST_DISTANCE_TAB: {
         route: ':iouType/new/:reportID?/distance',
-        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance`,
+        getRoute: (iouType: string, reportID = '') => `${iouType}/new/${reportID}/distance` as const,
     },
     MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual',
     MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan',
@@ -321,63 +326,63 @@ export default {
 
     ERECEIPT: {
         route: 'eReceipt/:transactionID',
-        getRoute: (transactionID: string) => `eReceipt/${transactionID}`,
+        getRoute: (transactionID: string) => `eReceipt/${transactionID}` as const,
     },
 
     WORKSPACE_NEW: 'workspace/new',
     WORKSPACE_NEW_ROOM: 'workspace/new-room',
     WORKSPACE_INITIAL: {
         route: 'workspace/:policyID',
-        getRoute: (policyID: string) => `workspace/${policyID}`,
+        getRoute: (policyID: string) => `workspace/${policyID}` as const,
     },
     WORKSPACE_INVITE: {
         route: 'workspace/:policyID/invite',
-        getRoute: (policyID: string) => `workspace/${policyID}/invite`,
+        getRoute: (policyID: string) => `workspace/${policyID}/invite` as const,
     },
     WORKSPACE_INVITE_MESSAGE: {
         route: 'workspace/:policyID/invite-message',
-        getRoute: (policyID: string) => `workspace/${policyID}/invite-message`,
+        getRoute: (policyID: string) => `workspace/${policyID}/invite-message` as const,
     },
     WORKSPACE_SETTINGS: {
         route: 'workspace/:policyID/settings',
-        getRoute: (policyID: string) => `workspace/${policyID}/settings`,
+        getRoute: (policyID: string) => `workspace/${policyID}/settings` as const,
     },
     WORKSPACE_SETTINGS_CURRENCY: {
         route: 'workspace/:policyID/settings/currency',
-        getRoute: (policyID: string) => `workspace/${policyID}/settings/currency`,
+        getRoute: (policyID: string) => `workspace/${policyID}/settings/currency` as const,
     },
     WORKSPACE_CARD: {
         route: 'workspace/:policyID/card',
-        getRoute: (policyID: string) => `workspace/${policyID}/card`,
+        getRoute: (policyID: string) => `workspace/${policyID}/card` as const,
     },
     WORKSPACE_REIMBURSE: {
         route: 'workspace/:policyID/reimburse',
-        getRoute: (policyID: string) => `workspace/${policyID}/reimburse`,
+        getRoute: (policyID: string) => `workspace/${policyID}/reimburse` as const,
     },
     WORKSPACE_RATE_AND_UNIT: {
         route: 'workspace/:policyID/rateandunit',
-        getRoute: (policyID: string) => `workspace/${policyID}/rateandunit`,
+        getRoute: (policyID: string) => `workspace/${policyID}/rateandunit` as const,
     },
     WORKSPACE_BILLS: {
         route: 'workspace/:policyID/bills',
-        getRoute: (policyID: string) => `workspace/${policyID}/bills`,
+        getRoute: (policyID: string) => `workspace/${policyID}/bills` as const,
     },
     WORKSPACE_INVOICES: {
         route: 'workspace/:policyID/invoices',
-        getRoute: (policyID: string) => `workspace/${policyID}/invoices`,
+        getRoute: (policyID: string) => `workspace/${policyID}/invoices` as const,
     },
     WORKSPACE_TRAVEL: {
         route: 'workspace/:policyID/travel',
-        getRoute: (policyID: string) => `workspace/${policyID}/travel`,
+        getRoute: (policyID: string) => `workspace/${policyID}/travel` as const,
     },
     WORKSPACE_MEMBERS: {
         route: 'workspace/:policyID/members',
-        getRoute: (policyID: string) => `workspace/${policyID}/members`,
+        getRoute: (policyID: string) => `workspace/${policyID}/members` as const,
     },
     // Referral program promotion
     REFERRAL_DETAILS_MODAL: {
         route: 'referral/:contentType',
-        getRoute: (contentType: string) => `referral/${contentType}`,
+        getRoute: (contentType: string) => `referral/${contentType}` as const,
     },
 
     // These are some one-off routes that will be removed once they're no longer needed (see GH issues for details)
@@ -385,3 +390,24 @@ export default {
     SBE: 'sbe',
     MONEY2020: 'money2020',
 } as const;
+
+export default ROUTES;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ExtractRouteName<TRoute> = TRoute extends {getRoute: (...args: any[]) => infer TRouteName} ? TRouteName : TRoute;
+
+type AllRoutes = {
+    [K in keyof typeof ROUTES]: ExtractRouteName<(typeof ROUTES)[K]>;
+}[keyof typeof ROUTES];
+
+type RouteIsPlainString = IsEqual<AllRoutes, string>;
+
+/**
+ * Represents all routes in the app as a union of literal strings.
+ *
+ * If this type resolves to `never`, it implies that one or more routes defined within `ROUTES` have not correctly used
+ * `as const` in their `getRoute` function return value.
+ */
+type Route = RouteIsPlainString extends true ? never : AllRoutes;
+
+export type {Route};
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index f957a1dbb25e..f4cbcf4f2564 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -9,13 +9,13 @@ const PROTECTED_SCREENS = {
     REPORT_ATTACHMENTS: 'ReportAttachments',
 } as const;
 
-export default {
+const SCREENS = {
     ...PROTECTED_SCREENS,
-    LOADING: 'Loading',
     REPORT: 'Report',
     NOT_FOUND: 'not-found',
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
     VALIDATE_LOGIN: 'ValidateLogin',
+    UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS: {
         ROOT: 'Settings_Root',
         PREFERENCES: 'Settings_Preferences',
@@ -40,4 +40,5 @@ export default {
     SAML_SIGN_IN: 'SAMLSignIn',
 } as const;
 
+export default SCREENS;
 export {PROTECTED_SCREENS};
diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
index 4f1500132106..4d01fa108e2a 100644
--- a/src/components/AddPaymentMethodMenu.js
+++ b/src/components/AddPaymentMethodMenu.js
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
-import Permissions from '@libs/Permissions';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
@@ -41,9 +40,6 @@ const propTypes = {
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
 
-    /** List of betas available to current user */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** Popover anchor ref */
     anchorRef: refPropTypes,
 
@@ -61,14 +57,19 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
     },
-    betas: [],
     anchorRef: () => {},
     session: {},
 };
 
-function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, betas}) {
+function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session}) {
     const {translate} = useLocalize();
 
+    // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report
+    // which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee.
+    const canUseBusinessBankAccount =
+        ReportUtils.isExpenseReport(iouReport) ||
+        (ReportUtils.isIOUReport(iouReport) && !ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0)));
+
     return (
         <PopoverMenu
             isVisible={isVisible}
@@ -89,7 +90,7 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme
                           },
                       ]
                     : []),
-                ...(!ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0))
+                ...(canUseBusinessBankAccount
                     ? [
                           {
                               text: translate('common.businessBankAccount'),
@@ -98,15 +99,13 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme
                           },
                       ]
                     : []),
-                ...(Permissions.canUseWallet(betas)
-                    ? [
-                          {
-                              text: translate('common.debitCard'),
-                              icon: Expensicons.CreditCard,
-                              onSelected: () => onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
-                          },
-                      ]
-                    : []),
+                ...[
+                    {
+                        text: translate('common.debitCard'),
+                        icon: Expensicons.CreditCard,
+                        onSelected: () => onItemSelected(CONST.PAYMENT_METHODS.DEBIT_CARD),
+                    },
+                ],
             ]}
             withoutOverlay
         />
@@ -120,9 +119,6 @@ AddPaymentMethodMenu.displayName = 'AddPaymentMethodMenu';
 export default compose(
     withWindowDimensions,
     withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js
index ec4ddd623929..c18b706e1acf 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.js
@@ -168,7 +168,7 @@ function AddPlaidBankAccount({
         value: account.plaidAccountID,
         label: `${account.addressName} ${account.mask}`,
     }));
-    const {icon, iconSize, iconStyles} = getBankIcon();
+    const {icon, iconSize, iconStyles} = getBankIcon({themeStyles: styles});
     const plaidErrors = lodashGet(plaidData, 'errors');
     const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : '';
     const bankName = lodashGet(plaidData, 'bankName');
@@ -209,7 +209,7 @@ function AddPlaidBankAccount({
                             // Handle Plaid login errors (will potentially reset plaid token and item depending on the error)
                             if (event === 'ERROR') {
                                 Log.hmmm('[PlaidLink] Error: ', metadata);
-                                if (bankAccountID && metadata.error_code) {
+                                if (bankAccountID && metadata && metadata.error_code) {
                                     BankAccounts.handlePlaidError(bankAccountID, metadata.error_code, metadata.error_message, metadata.request_id);
                                 }
                             }
diff --git a/src/components/AddressForm.js b/src/components/AddressForm.js
index 19ab35f036c1..98650f94232b 100644
--- a/src/components/AddressForm.js
+++ b/src/components/AddressForm.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import AddressSearch from './AddressSearch';
 import CountrySelector from './CountrySelector';
@@ -63,6 +63,7 @@ const defaultProps = {
 };
 
 function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldSaveDraft, state, street1, street2, submitButtonText, zip}) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const zipSampleFormat = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, [country, 'samples'], '');
     const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});
@@ -122,7 +123,6 @@ function AddressForm({city, country, formID, onAddressChanged, onSubmit, shouldS
             submitButtonText={submitButtonText}
             enabledWhenOffline
         >
-            <View style={styles.formSpaceVertical} />
             <View>
                 <AddressSearch
                     inputID="addressLine1"
diff --git a/src/components/AddressSearch/CurrentLocationButton.js b/src/components/AddressSearch/CurrentLocationButton.js
index 3c7feb8fb70c..a955cf821f7f 100644
--- a/src/components/AddressSearch/CurrentLocationButton.js
+++ b/src/components/AddressSearch/CurrentLocationButton.js
@@ -8,6 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import colors from '@styles/colors';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
@@ -25,12 +26,13 @@ const defaultProps = {
 
 function CurrentLocationButton({onPress, isDisabled}) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
 
     return (
         <PressableWithFeedback
             style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
-            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
+            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(true), true)}
             onPress={onPress}
             accessibilityLabel={translate('location.useCurrent')}
             disabled={isDisabled}
diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
index 73472beeb48d..9f16766a22ae 100644
--- a/src/components/AddressSearch/index.js
+++ b/src/components/AddressSearch/index.js
@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, Keyboard, LogBox, ScrollView, Text, View} from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import _ from 'underscore';
@@ -140,29 +140,48 @@ const defaultProps = {
     resultTypes: 'address',
 };
 
-// Do not convert to class component! It's been tried before and presents more challenges than it's worth.
-// Relevant thread: https://expensify.slack.com/archives/C03TQ48KC/p1634088400387400
-// Reference: https://github.com/FaridSafi/react-native-google-places-autocomplete/issues/609#issuecomment-886133839
-function AddressSearch(props) {
+function AddressSearch({
+    canUseCurrentLocation,
+    containerStyles,
+    defaultValue,
+    errorText,
+    hint,
+    innerRef,
+    inputID,
+    isLimitedToUSA,
+    label,
+    maxInputLength,
+    network,
+    onBlur,
+    onInputChange,
+    onPress,
+    predefinedPlaces,
+    preferredLocale,
+    renamedInputKeys,
+    resultTypes,
+    shouldSaveDraft,
+    translate,
+    value,
+}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const [displayListViewBorder, setDisplayListViewBorder] = useState(false);
     const [isTyping, setIsTyping] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
-    const [searchValue, setSearchValue] = useState(props.value || props.defaultValue || '');
+    const [searchValue, setSearchValue] = useState(value || defaultValue || '');
     const [locationErrorCode, setLocationErrorCode] = useState(null);
     const [isFetchingCurrentLocation, setIsFetchingCurrentLocation] = useState(false);
     const shouldTriggerGeolocationCallbacks = useRef(true);
     const containerRef = useRef();
     const query = useMemo(
         () => ({
-            language: props.preferredLocale,
-            types: props.resultTypes,
-            components: props.isLimitedToUSA ? 'country:us' : undefined,
+            language: preferredLocale,
+            types: resultTypes,
+            components: isLimitedToUSA ? 'country:us' : undefined,
         }),
-        [props.preferredLocale, props.resultTypes, props.isLimitedToUSA],
+        [preferredLocale, resultTypes, isLimitedToUSA],
     );
-    const shouldShowCurrentLocationButton = props.canUseCurrentLocation && searchValue.trim().length === 0 && isFocused;
+    const shouldShowCurrentLocationButton = canUseCurrentLocation && searchValue.trim().length === 0 && isFocused;
 
     const saveLocationDetails = (autocompleteData, details) => {
         const addressComponents = details.address_components;
@@ -171,7 +190,7 @@ function AddressSearch(props) {
             // to this component which don't match the usual properties coming from auto-complete. In that case, only a limited
             // amount of data massaging needs to happen for what the parent expects to get from this function.
             if (_.size(details)) {
-                props.onPress({
+                onPress({
                     address: lodashGet(details, 'description'),
                     lat: lodashGet(details, 'geometry.location.lat', 0),
                     lng: lodashGet(details, 'geometry.location.lng', 0),
@@ -269,7 +288,7 @@ function AddressSearch(props) {
 
         // Not all pages define the Address Line 2 field, so in that case we append any additional address details
         // (e.g. Apt #) to Address Line 1
-        if (subpremise && typeof props.renamedInputKeys.street2 === 'undefined') {
+        if (subpremise && typeof renamedInputKeys.street2 === 'undefined') {
             values.street += `, ${subpremise}`;
         }
 
@@ -278,19 +297,19 @@ function AddressSearch(props) {
             values.country = country;
         }
 
-        if (props.inputID) {
-            _.each(values, (value, key) => {
-                const inputKey = lodashGet(props.renamedInputKeys, key, key);
+        if (inputID) {
+            _.each(values, (inputValue, key) => {
+                const inputKey = lodashGet(renamedInputKeys, key, key);
                 if (!inputKey) {
                     return;
                 }
-                props.onInputChange(value, inputKey);
+                onInputChange(inputValue, inputKey);
             });
         } else {
-            props.onInputChange(values);
+            onInputChange(values);
         }
 
-        props.onPress(values);
+        onPress(values);
     };
 
     /** Gets the user's current location and registers success/error callbacks */
@@ -320,7 +339,7 @@ function AddressSearch(props) {
                     lng: successData.coords.longitude,
                     address: CONST.YOUR_LOCATION_TEXT,
                 };
-                props.onPress(location);
+                onPress(location);
             },
             (errorData) => {
                 if (!shouldTriggerGeolocationCallbacks.current) {
@@ -338,16 +357,16 @@ function AddressSearch(props) {
     };
 
     const renderHeaderComponent = () =>
-        props.predefinedPlaces.length > 0 && (
+        predefinedPlaces.length > 0 && (
             <>
                 {/* This will show current location button in list if there are some recent destinations */}
                 {shouldShowCurrentLocationButton && (
                     <CurrentLocationButton
                         onPress={getCurrentLocation}
-                        isDisabled={props.network.isOffline}
+                        isDisabled={network.isOffline}
                     />
                 )}
-                {!props.value && <Text style={[styles.textLabel, styles.colorMuted, styles.pv2, styles.ph3, styles.overflowAuto]}>{props.translate('common.recentDestinations')}</Text>}
+                {!value && <Text style={[styles.textLabel, styles.colorMuted, styles.pv2, styles.ph3, styles.overflowAuto]}>{translate('common.recentDestinations')}</Text>}
             </>
         );
 
@@ -359,6 +378,26 @@ function AddressSearch(props) {
         };
     }, []);
 
+    const listEmptyComponent = useCallback(
+        () =>
+            network.isOffline || !isTyping ? null : (
+                <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{translate('common.noResultsFound')}</Text>
+            ),
+        [network.isOffline, isTyping, styles, translate],
+    );
+
+    const listLoader = useCallback(
+        () => (
+            <View style={[styles.pv4]}>
+                <ActivityIndicator
+                    color={theme.spinner}
+                    size="small"
+                />
+            </View>
+        ),
+        [styles.pv4, theme.spinner],
+    );
+
     return (
         /*
          * The GooglePlacesAutocomplete component uses a VirtualizedList internally,
@@ -385,20 +424,10 @@ function AddressSearch(props) {
                         fetchDetails
                         suppressDefaultStyles
                         enablePoweredByContainer={false}
-                        predefinedPlaces={props.predefinedPlaces}
-                        listEmptyComponent={
-                            props.network.isOffline || !isTyping ? null : (
-                                <Text style={[styles.textLabel, styles.colorMuted, styles.pv4, styles.ph3, styles.overflowAuto]}>{props.translate('common.noResultsFound')}</Text>
-                            )
-                        }
-                        listLoaderComponent={
-                            <View style={[styles.pv4]}>
-                                <ActivityIndicator
-                                    color={theme.spinner}
-                                    size="small"
-                                />
-                            </View>
-                        }
+                        predefinedPlaces={predefinedPlaces}
+                        listEmptyComponent={listEmptyComponent}
+                        listLoaderComponent={listLoader}
+                        renderHeaderComponent={renderHeaderComponent}
                         renderRow={(data) => {
                             const title = data.isPredefinedPlace ? data.name : data.structured_formatting.main_text;
                             const subtitle = data.isPredefinedPlace ? data.description : data.structured_formatting.secondary_text;
@@ -409,7 +438,6 @@ function AddressSearch(props) {
                                 </View>
                             );
                         }}
-                        renderHeaderComponent={renderHeaderComponent}
                         onPress={(data, details) => {
                             saveLocationDetails(data, details);
                             setIsTyping(false);
@@ -424,34 +452,31 @@ function AddressSearch(props) {
                         query={query}
                         requestUrl={{
                             useOnPlatform: 'all',
-                            url: props.network.isOffline ? null : ApiUtils.getCommandURL({command: 'Proxy_GooglePlaces&proxyUrl='}),
+                            url: network.isOffline ? null : ApiUtils.getCommandURL({command: 'Proxy_GooglePlaces&proxyUrl='}),
                         }}
                         textInputProps={{
                             InputComp: TextInput,
                             ref: (node) => {
-                                if (!props.innerRef) {
+                                if (!innerRef) {
                                     return;
                                 }
 
-                                if (_.isFunction(props.innerRef)) {
-                                    props.innerRef(node);
+                                if (_.isFunction(innerRef)) {
+                                    innerRef(node);
                                     return;
                                 }
 
                                 // eslint-disable-next-line no-param-reassign
-                                props.innerRef.current = node;
+                                innerRef.current = node;
                             },
-                            label: props.label,
-                            containerStyles: props.containerStyles,
-                            errorText: props.errorText,
-                            hint:
-                                displayListViewBorder || (props.predefinedPlaces.length === 0 && shouldShowCurrentLocationButton) || (props.canUseCurrentLocation && isTyping)
-                                    ? undefined
-                                    : props.hint,
-                            value: props.value,
-                            defaultValue: props.defaultValue,
-                            inputID: props.inputID,
-                            shouldSaveDraft: props.shouldSaveDraft,
+                            label,
+                            containerStyles,
+                            errorText,
+                            hint: displayListViewBorder || (predefinedPlaces.length === 0 && shouldShowCurrentLocationButton) || (canUseCurrentLocation && isTyping) ? undefined : hint,
+                            value,
+                            defaultValue,
+                            inputID,
+                            shouldSaveDraft,
                             onFocus: () => {
                                 setIsFocused(true);
                             },
@@ -461,30 +486,36 @@ function AddressSearch(props) {
                                     setIsFocused(false);
                                     setIsTyping(false);
                                 }
-                                props.onBlur();
+                                onBlur();
                             },
                             autoComplete: 'off',
                             onInputChange: (text) => {
                                 setSearchValue(text);
                                 setIsTyping(true);
-                                if (props.inputID) {
-                                    props.onInputChange(text);
+                                if (inputID) {
+                                    onInputChange(text);
                                 } else {
-                                    props.onInputChange({street: text});
+                                    onInputChange({street: text});
                                 }
 
                                 // If the text is empty and we have no predefined places, we set displayListViewBorder to false to prevent UI flickering
-                                if (_.isEmpty(text) && _.isEmpty(props.predefinedPlaces)) {
+                                if (_.isEmpty(text) && _.isEmpty(predefinedPlaces)) {
                                     setDisplayListViewBorder(false);
                                 }
                             },
-                            maxLength: props.maxInputLength,
+                            maxLength: maxInputLength,
                             spellCheck: false,
                             selectTextOnFocus: true,
                         }}
                         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],
@@ -500,17 +531,18 @@ function AddressSearch(props) {
                         }}
                         inbetweenCompo={
                             // We want to show the current location button even if there are no recent destinations
-                            props.predefinedPlaces.length === 0 && shouldShowCurrentLocationButton ? (
-                                <View style={[StyleUtils.getGoogleListViewStyle(true), styles.overflowAuto, styles.borderLeft, styles.borderRight]}>
+                            predefinedPlaces.length === 0 && shouldShowCurrentLocationButton ? (
+                                <View style={[StyleUtils.getGoogleListViewStyle(styles, true), styles.overflowAuto, styles.borderLeft, styles.borderRight]}>
                                     <CurrentLocationButton
                                         onPress={getCurrentLocation}
-                                        isDisabled={props.network.isOffline}
+                                        isDisabled={network.isOffline}
                                     />
                                 </View>
                             ) : (
                                 <></>
                             )
                         }
+                        placeholder=""
                     />
                     <LocationErrorMessage
                         onClose={() => setLocationErrorCode(null)}
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
index 763ca4615c6e..33d6cb014df2 100644
--- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
+++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -51,7 +51,7 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
         linkProps.href = href;
     }
     const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer};
-    const isEmail = Str.isValidEmailMarkdown(href.replace(/mailto:/i, ''));
+    const isEmail = Str.isValidEmail(href.replace(/mailto:/i, ''));
 
     return (
         <PressableWithSecondaryInteraction
diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
index 607f4f0a4b11..1a87592cba9b 100644
--- a/src/components/AnimatedStep/index.tsx
+++ b/src/components/AnimatedStep/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import useNativeDriver from '@libs/useNativeDriver';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import {AnimationDirection} from './AnimatedStepContext';
@@ -18,18 +18,15 @@ type AnimatedStepProps = ChildrenProps & {
     onAnimationEnd: () => void;
 };
 
-function getAnimationStyle(direction: AnimationDirection) {
-    let transitionValue;
+function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style, children}: AnimatedStepProps) {
+    const styles = useThemeStyles();
 
-    if (direction === 'in') {
-        transitionValue = CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    } else {
-        transitionValue = -CONST.ANIMATED_TRANSITION_FROM_VALUE;
-    }
-    return styles.makeSlideInTranslation('translateX', transitionValue);
-}
+    const animationStyle = useMemo(() => {
+        const transitionValue = direction === 'in' ? CONST.ANIMATED_TRANSITION_FROM_VALUE : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+
+        return styles.makeSlideInTranslation('translateX', transitionValue);
+    }, [direction, styles]);
 
-function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style = [], children}: AnimatedStepProps) {
     return (
         <Animatable.View
             onAnimationEnd={() => {
@@ -39,7 +36,7 @@ function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN,
                 onAnimationEnd();
             }}
             duration={CONST.ANIMATED_TRANSITION}
-            animation={getAnimationStyle(direction)}
+            animation={animationStyle}
             useNativeDriver={useNativeDriver}
             style={style}
         >
diff --git a/src/components/AnonymousReportFooter.js b/src/components/AnonymousReportFooter.tsx
similarity index 51%
rename from src/components/AnonymousReportFooter.js
rename to src/components/AnonymousReportFooter.tsx
index 387e2ab01930..65dc813a829d 100644
--- a/src/components/AnonymousReportFooter.js
+++ b/src/components/AnonymousReportFooter.tsx
@@ -1,57 +1,52 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Text, View} from 'react-native';
-import reportPropTypes from '@pages/reportPropTypes';
+import {OnyxCollection} from 'react-native-onyx';
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
+import {PersonalDetails, Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
-import participantPropTypes from './participantPropTypes';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-const propTypes = {
+type AnonymousReportFooterProps = {
     /** The report currently being looked at */
-    report: reportPropTypes,
+    report: OnyxEntry<Report>;
 
-    isSmallSizeLayout: PropTypes.bool,
+    /** Whether the small screen size layout should be used */
+    isSmallSizeLayout?: boolean;
 
     /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    report: {},
-    isSmallSizeLayout: false,
-    personalDetails: {},
+    personalDetails: OnyxCollection<PersonalDetails>;
 };
 
-function AnonymousReportFooter(props) {
+function AnonymousReportFooter({isSmallSizeLayout = false, personalDetails, report}: AnonymousReportFooterProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
-        <View style={styles.anonymousRoomFooter(props.isSmallSizeLayout)}>
+        <View style={styles.anonymousRoomFooter(isSmallSizeLayout)}>
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <AvatarWithDisplayName
-                    report={props.report}
-                    personalDetails={props.personalDetails}
+                    report={report}
+                    personalDetails={personalDetails}
                     isAnonymous
                     shouldEnableDetailPageNavigation
                 />
             </View>
-            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(props.isSmallSizeLayout)}>
-                <View style={[props.isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
-                    <View style={[props.isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
+            <View style={styles.anonymousRoomFooterWordmarkAndLogoContainer(isSmallSizeLayout)}>
+                <View style={[isSmallSizeLayout ? styles.mr1 : styles.mr4, styles.flexShrink1]}>
+                    <View style={[isSmallSizeLayout ? styles.alignItemsStart : styles.alignItemsEnd]}>
                         <ExpensifyWordmark style={styles.anonymousRoomFooterLogo} />
                     </View>
-                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{props.translate('anonymousReportFooter.logoTagline')}</Text>
+                    <Text style={styles.anonymousRoomFooterLogoTaglineText}>{translate('anonymousReportFooter.logoTagline')}</Text>
                 </View>
                 <View style={[styles.anonymousRoomFooterSignInButton]}>
                     <Button
                         medium
                         success
-                        text={props.translate('common.signIn')}
+                        text={translate('common.signIn')}
                         onPress={() => Session.signOutAndRedirectToSignIn()}
                     />
                 </View>
@@ -60,8 +55,6 @@ function AnonymousReportFooter(props) {
     );
 }
 
-AnonymousReportFooter.propTypes = propTypes;
-AnonymousReportFooter.defaultProps = defaultProps;
 AnonymousReportFooter.displayName = 'AnonymousReportFooter';
 
-export default withLocalize(AnonymousReportFooter);
+export default AnonymousReportFooter;
diff --git a/src/components/ArchivedReportFooter.js b/src/components/ArchivedReportFooter.js
deleted file mode 100644
index b1fac827d273..000000000000
--- a/src/components/ArchivedReportFooter.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import _ from 'lodash';
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import compose from '@libs/compose';
-import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
-import reportPropTypes from '@pages/reportPropTypes';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import Banner from './Banner';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const propTypes = {
-    /** The reason this report was archived */
-    reportClosedAction: PropTypes.shape({
-        /** Message attached to the report closed action */
-        originalMessage: PropTypes.shape({
-            /** The reason the report was closed */
-            reason: PropTypes.string.isRequired,
-
-            /** (For accountMerged reason only), the accountID of the previous owner of this report. */
-            oldAccountID: PropTypes.number,
-
-            /** (For accountMerged reason only), the accountID of the account the previous owner was merged into */
-            newAccountID: PropTypes.number,
-        }).isRequired,
-    }),
-
-    /** The archived report */
-    report: reportPropTypes.isRequired,
-
-    /** Personal details of all users */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    reportClosedAction: {
-        originalMessage: {
-            reason: CONST.REPORT.ARCHIVE_REASON.DEFAULT,
-        },
-    },
-    personalDetails: {},
-};
-
-function ArchivedReportFooter(props) {
-    const styles = useThemeStyles();
-    const archiveReason = lodashGet(props.reportClosedAction, 'originalMessage.reason', CONST.REPORT.ARCHIVE_REASON.DEFAULT);
-    let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [props.report.ownerAccountID, 'displayName']);
-
-    let oldDisplayName;
-    if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) {
-        const newAccountID = props.reportClosedAction.originalMessage.newAccountID;
-        const oldAccountID = props.reportClosedAction.originalMessage.oldAccountID;
-        displayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [newAccountID, 'displayName']);
-        oldDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(props.personalDetails, [oldAccountID, 'displayName']);
-    }
-
-    const shouldRenderHTML = archiveReason !== CONST.REPORT.ARCHIVE_REASON.DEFAULT;
-
-    let policyName = ReportUtils.getPolicyName(props.report);
-
-    if (shouldRenderHTML) {
-        oldDisplayName = _.escape(oldDisplayName);
-        displayName = _.escape(displayName);
-        policyName = _.escape(policyName);
-    }
-
-    return (
-        <Banner
-            containerStyles={[styles.archivedReportFooter]}
-            text={props.translate(`reportArchiveReasons.${archiveReason}`, {
-                displayName: `<strong>${displayName}</strong>`,
-                oldDisplayName: `<strong>${oldDisplayName}</strong>`,
-                policyName: `<strong>${policyName}</strong>`,
-            })}
-            shouldRenderHTML={shouldRenderHTML}
-            shouldShowIcon
-        />
-    );
-}
-
-ArchivedReportFooter.propTypes = propTypes;
-ArchivedReportFooter.defaultProps = defaultProps;
-ArchivedReportFooter.displayName = 'ArchivedReportFooter';
-
-export default compose(
-    withLocalize,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-        reportClosedAction: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-            canEvict: false,
-            selector: ReportActionsUtils.getLastClosedReportAction,
-        },
-    }),
-)(ArchivedReportFooter);
diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx
new file mode 100644
index 000000000000..3187bf3604e8
--- /dev/null
+++ b/src/components/ArchivedReportFooter.tsx
@@ -0,0 +1,82 @@
+import lodashEscape from 'lodash/escape';
+import React from 'react';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import useThemeStyles from '@styles/useThemeStyles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {PersonalDetails, Report, ReportAction} from '@src/types/onyx';
+import Banner from './Banner';
+
+type ArchivedReportFooterOnyxProps = {
+    /** The reason this report was archived */
+    reportClosedAction: OnyxEntry<ReportAction>;
+
+    /** Personal details of all users */
+    personalDetails: OnyxEntry<Record<string, PersonalDetails>>;
+};
+
+type ArchivedReportFooterProps = ArchivedReportFooterOnyxProps & {
+    /** The archived report */
+    report: Report;
+};
+
+function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}}: ArchivedReportFooterProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const originalMessage = reportClosedAction?.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED ? reportClosedAction.originalMessage : null;
+    const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT;
+    let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [report.ownerAccountID, 'displayName']);
+
+    let oldDisplayName: string | undefined;
+    if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) {
+        const newAccountID = originalMessage?.newAccountID;
+        const oldAccountID = originalMessage?.oldAccountID;
+        displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [newAccountID, 'displayName']);
+        oldDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [oldAccountID, 'displayName']);
+    }
+
+    const shouldRenderHTML = archiveReason !== CONST.REPORT.ARCHIVE_REASON.DEFAULT;
+
+    let policyName = ReportUtils.getPolicyName(report);
+
+    if (shouldRenderHTML) {
+        oldDisplayName = lodashEscape(oldDisplayName);
+        displayName = lodashEscape(displayName);
+        policyName = lodashEscape(policyName);
+    }
+
+    const text = shouldRenderHTML
+        ? translate(`reportArchiveReasons.${archiveReason}`, {
+              displayName: `<strong>${displayName}</strong>`,
+              oldDisplayName: `<strong>${oldDisplayName}</strong>`,
+              policyName: `<strong>${policyName}</strong>`,
+          })
+        : translate(`reportArchiveReasons.${archiveReason}`);
+
+    return (
+        <Banner
+            containerStyles={[styles.archivedReportFooter]}
+            text={text}
+            shouldRenderHTML={shouldRenderHTML}
+            shouldShowIcon
+        />
+    );
+}
+
+ArchivedReportFooter.displayName = 'ArchivedReportFooter';
+
+export default withOnyx<ArchivedReportFooterProps, ArchivedReportFooterOnyxProps>({
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
+    reportClosedAction: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
+        canEvict: false,
+        selector: ReportActionsUtils.getLastClosedReportAction,
+    },
+})(ArchivedReportFooter);
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 4ab81ae462c9..356e75b1e1bb 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -128,6 +128,8 @@ function AttachmentModal(props) {
     const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
     const {windowWidth} = useWindowDimensions();
 
+    const isOverlayModalVisible = (isAttachmentReceipt && isDeleteReceiptConfirmModalVisible) || (!isAttachmentReceipt && isAttachmentInvalid);
+
     const [file, setFile] = useState(
         props.originalFileName
             ? {
@@ -361,7 +363,9 @@ function AttachmentModal(props) {
         const menuItems = [];
         const parentReportAction = props.parentReportActions[props.report.parentReportActionID];
 
-        const canEdit = ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, props.parentReport.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT);
+        const canEdit =
+            ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, props.parentReport.reportID, CONST.EDIT_REQUEST_FIELD.RECEIPT) &&
+            !TransactionUtils.isDistanceRequest(props.transaction);
         if (canEdit) {
             menuItems.push({
                 icon: Expensicons.Camera,
@@ -406,7 +410,7 @@ function AttachmentModal(props) {
             <Modal
                 type={modalType}
                 onSubmit={submitAndClose}
-                onClose={closeModal}
+                onClose={isOverlayModalVisible ? closeConfirmModal : closeModal}
                 isVisible={isModalOpen}
                 backgroundColor={theme.componentBG}
                 onModalShow={() => {
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index fa4ff50512d0..141e619e489e 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -12,6 +12,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import AttachmentCarouselCellRenderer from './AttachmentCarouselCellRenderer';
 import {defaultProps, propTypes} from './attachmentCarouselPropTypes';
@@ -203,7 +204,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                             initialScrollIndex={page}
                             initialNumToRender={3}
                             windowSize={5}
-                            maxToRenderPerBatch={3}
+                            maxToRenderPerBatch={CONST.MAX_TO_RENDER_PER_BATCH.CAROUSEL}
                             data={attachments}
                             CellRendererComponent={AttachmentCarouselCellRenderer}
                             renderItem={renderItem}
diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
index 46afd23daa4c..b9dd65e2716b 100644
--- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
+++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js
@@ -3,11 +3,12 @@ import {StyleSheet, View} from 'react-native';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import Animated, {useSharedValue} from 'react-native-reanimated';
 import AttachmentCarouselPagerContext from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import BaseAttachmentViewPdf from './BaseAttachmentViewPdf';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
 function AttachmentViewPdf(props) {
+    const styles = useThemeStyles();
     const {onScaleChanged, ...restProps} = props;
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const scaleRef = useSharedValue(1);
@@ -41,7 +42,7 @@ function AttachmentViewPdf(props) {
     return (
         <View
             collapsable={false}
-            style={[styles.flex1]}
+            style={styles.flex1}
         >
             <GestureDetector gesture={Pan}>
                 <Animated.View
diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
similarity index 74%
rename from src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
rename to src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
index ec53507d4d8e..f24b82d8e867 100644
--- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js
+++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx
@@ -1,20 +1,18 @@
 import {FlashList} from '@shopify/flash-list';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {ForwardedRef, forwardRef, ReactElement, useCallback, useEffect, useRef} from 'react';
+import {View} from 'react-native';
 // We take ScrollView from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
 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 {propTypes} from './autoCompleteSuggestionsPropTypes';
+import viewForwardedRef from '@src/types/utils/viewForwardedRef';
+import type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps} from './types';
 
-/**
- * @param {Number} numRows
- * @param {Boolean} isSuggestionPickerLarge
- * @returns {Number}
- */
-const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
+const measureHeightOfSuggestionRows = (numRows: number, isSuggestionPickerLarge: boolean): number => {
     if (isSuggestionPickerLarge) {
         if (numRows > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER) {
             // On large screens, if there are more than 5 suggestions, we display a scrollable window with a height of 5 items, indicating that there are more items available
@@ -29,30 +27,29 @@ const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
     return numRows * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT;
 };
 
-function BaseAutoCompleteSuggestions({
-    highlightedSuggestionIndex,
-    onSelect,
-    renderSuggestionMenuItem,
-    suggestions,
-    accessibilityLabelExtractor,
-    keyExtractor,
-    isSuggestionPickerLarge,
-    forwardedRef,
-}) {
+function BaseAutoCompleteSuggestions<TSuggestion>(
+    {
+        highlightedSuggestionIndex,
+        onSelect,
+        accessibilityLabelExtractor,
+        renderSuggestionMenuItem,
+        suggestions,
+        isSuggestionPickerLarge,
+        keyExtractor,
+    }: AutoCompleteSuggestionsProps<TSuggestion>,
+    ref: ForwardedRef<View | HTMLDivElement>,
+) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const rowHeight = useSharedValue(0);
-    const scrollRef = useRef(null);
+    const scrollRef = useRef<FlashList<TSuggestion>>(null);
     /**
      * Render a suggestion menu item component.
-     * @param {Object} params
-     * @param {Object} params.item
-     * @param {Number} params.index
-     * @returns {JSX.Element}
      */
     const renderItem = useCallback(
-        ({item, index}) => (
+        ({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)}
@@ -62,7 +59,7 @@ function BaseAutoCompleteSuggestions({
                 {renderSuggestionMenuItem(item, index)}
             </PressableWithFeedback>
         ),
-        [highlightedSuggestionIndex, renderSuggestionMenuItem, onSelect, accessibilityLabelExtractor],
+        [highlightedSuggestionIndex, renderSuggestionMenuItem, onSelect, accessibilityLabelExtractor, theme],
     );
 
     const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length;
@@ -84,7 +81,7 @@ function BaseAutoCompleteSuggestions({
 
     return (
         <Animated.View
-            ref={forwardedRef}
+            ref={viewForwardedRef(ref)}
             style={[styles.autoCompleteSuggestionsContainer, animatedStyles]}
             exiting={FadeOutDown.duration(100).easing(Easing.inOut(Easing.ease))}
         >
@@ -104,17 +101,6 @@ function BaseAutoCompleteSuggestions({
     );
 }
 
-BaseAutoCompleteSuggestions.propTypes = propTypes;
 BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
 
-const BaseAutoCompleteSuggestionsWithRef = React.forwardRef((props, ref) => (
-    <BaseAutoCompleteSuggestions
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-BaseAutoCompleteSuggestionsWithRef.displayName = 'BaseAutoCompleteSuggestionsWithRef';
-
-export default BaseAutoCompleteSuggestionsWithRef;
+export default forwardRef(BaseAutoCompleteSuggestions);
diff --git a/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js b/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js
deleted file mode 100644
index 8c6dca1902c5..000000000000
--- a/src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types';
-
-const propTypes = {
-    /** Array of suggestions */
-    // eslint-disable-next-line react/forbid-prop-types
-    suggestions: PropTypes.arrayOf(PropTypes.object).isRequired,
-
-    /** Function used to render each suggestion, returned JSX will be enclosed inside a Pressable component */
-    renderSuggestionMenuItem: PropTypes.func.isRequired,
-
-    /** Create unique keys for each suggestion item */
-    keyExtractor: PropTypes.func.isRequired,
-
-    /** The index of the highlighted suggestion */
-    highlightedSuggestionIndex: PropTypes.number.isRequired,
-
-    /** Fired when the user selects a suggestion */
-    onSelect: PropTypes.func.isRequired,
-
-    /** Show that we can use large auto-complete suggestion picker.
-     * Depending on available space and whether the input is expanded, we can have a small or large mention suggester.
-     * When this value is false, the suggester will have a height of 2.5 items. When this value is true, the height can be up to 5 items.  */
-    isSuggestionPickerLarge: PropTypes.bool.isRequired,
-
-    /** create accessibility label for each item */
-    accessibilityLabelExtractor: PropTypes.func.isRequired,
-
-    /** Meaures the parent container's position and dimensions. */
-    measureParentContainer: PropTypes.func,
-};
-
-const defaultProps = {
-    measureParentContainer: () => {},
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/AutoCompleteSuggestions/index.native.js b/src/components/AutoCompleteSuggestions/index.native.tsx
similarity index 61%
rename from src/components/AutoCompleteSuggestions/index.native.js
rename to src/components/AutoCompleteSuggestions/index.native.tsx
index 439fa45eae78..fbfa7d953581 100644
--- a/src/components/AutoCompleteSuggestions/index.native.js
+++ b/src/components/AutoCompleteSuggestions/index.native.tsx
@@ -1,18 +1,17 @@
 import {Portal} from '@gorhom/portal';
 import React from 'react';
-import {propTypes} from './autoCompleteSuggestionsPropTypes';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
+import type {AutoCompleteSuggestionsProps} from './types';
 
-function AutoCompleteSuggestions({measureParentContainer, ...props}) {
+function AutoCompleteSuggestions<TSuggestion>({measureParentContainer, ...props}: AutoCompleteSuggestionsProps<TSuggestion>) {
     return (
         <Portal hostName="suggestions">
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <BaseAutoCompleteSuggestions {...props} />
+            <BaseAutoCompleteSuggestions<TSuggestion> {...props} />
         </Portal>
     );
 }
 
-AutoCompleteSuggestions.propTypes = propTypes;
 AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
 
 export default AutoCompleteSuggestions;
diff --git a/src/components/AutoCompleteSuggestions/index.js b/src/components/AutoCompleteSuggestions/index.tsx
similarity index 76%
rename from src/components/AutoCompleteSuggestions/index.js
rename to src/components/AutoCompleteSuggestions/index.tsx
index 30654caf5708..24b846c265a9 100644
--- a/src/components/AutoCompleteSuggestions/index.js
+++ b/src/components/AutoCompleteSuggestions/index.tsx
@@ -4,8 +4,8 @@ import {View} from 'react-native';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as StyleUtils from '@styles/StyleUtils';
-import {propTypes} from './autoCompleteSuggestionsPropTypes';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
+import type {AutoCompleteSuggestionsProps} from './types';
 
 /**
  * On the mobile-web platform, when long-pressing on auto-complete suggestions,
@@ -14,8 +14,8 @@ import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
  * On the native platform, tapping on auto-complete suggestions will not blur the main input.
  */
 
-function AutoCompleteSuggestions({measureParentContainer, ...props}) {
-    const containerRef = React.useRef(null);
+function AutoCompleteSuggestions<TSuggestion>({measureParentContainer = () => {}, ...props}: AutoCompleteSuggestionsProps<TSuggestion>) {
+    const containerRef = React.useRef<HTMLDivElement>(null);
     const {windowHeight, windowWidth} = useWindowDimensions();
     const [{width, left, bottom}, setContainerState] = React.useState({
         width: 0,
@@ -25,7 +25,7 @@ function AutoCompleteSuggestions({measureParentContainer, ...props}) {
     React.useEffect(() => {
         const container = containerRef.current;
         if (!container) {
-            return;
+            return () => {};
         }
         container.onpointerdown = (e) => {
             if (DeviceCapabilities.hasHoverSupport()) {
@@ -44,20 +44,20 @@ function AutoCompleteSuggestions({measureParentContainer, ...props}) {
     }, [measureParentContainer, windowHeight, windowWidth]);
 
     const componentToRender = (
-        <BaseAutoCompleteSuggestions
+        <BaseAutoCompleteSuggestions<TSuggestion>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={containerRef}
         />
     );
 
+    const bodyElement = document.querySelector('body');
+
     return (
-        Boolean(width) &&
-        ReactDOM.createPortal(<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>, document.querySelector('body'))
+        !!width && bodyElement && ReactDOM.createPortal(<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>, bodyElement)
     );
 }
 
-AutoCompleteSuggestions.propTypes = propTypes;
 AutoCompleteSuggestions.displayName = 'AutoCompleteSuggestions';
 
 export default AutoCompleteSuggestions;
diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts
new file mode 100644
index 000000000000..9130f5139d71
--- /dev/null
+++ b/src/components/AutoCompleteSuggestions/types.ts
@@ -0,0 +1,38 @@
+import {ReactElement} from 'react';
+
+type MeasureParentContainerCallback = (x: number, y: number, width: number) => void;
+
+type RenderSuggestionMenuItemProps<TSuggestion> = {
+    item: TSuggestion;
+    index: number;
+};
+
+type AutoCompleteSuggestionsProps<TSuggestion> = {
+    /** Array of suggestions */
+    suggestions: TSuggestion[];
+
+    /** Function used to render each suggestion, returned JSX will be enclosed inside a Pressable component */
+    renderSuggestionMenuItem: (item: TSuggestion, index: number) => ReactElement;
+
+    /** Create unique keys for each suggestion item */
+    keyExtractor: (item: TSuggestion, index: number) => string;
+
+    /** The index of the highlighted suggestion */
+    highlightedSuggestionIndex: number;
+
+    /** Fired when the user selects a suggestion */
+    onSelect: (index: number) => void;
+
+    /** Show that we can use large auto-complete suggestion picker.
+     * Depending on available space and whether the input is expanded, we can have a small or large mention suggester.
+     * When this value is false, the suggester will have a height of 2.5 items. When this value is true, the height can be up to 5 items.  */
+    isSuggestionPickerLarge: boolean;
+
+    /** create accessibility label for each item */
+    accessibilityLabelExtractor: (item: TSuggestion, index: number) => string;
+
+    /** Meaures the parent container's position and dimensions. */
+    measureParentContainer?: (callback: MeasureParentContainerCallback) => void;
+};
+
+export type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps};
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 2e67dd0025e1..d394a84bd207 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -75,8 +75,8 @@ function Avatar({
     const isWorkspace = type === CONST.ICON_TYPE_WORKSPACE;
     const iconSize = StyleUtils.getAvatarSize(size);
 
-    const imageStyle = [StyleUtils.getAvatarStyle(size), imageStyles, styles.noBorderRadius];
-    const iconStyle = imageStyles ? [StyleUtils.getAvatarStyle(size), styles.bgTransparent, imageStyles] : undefined;
+    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;
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 340fc9dfedbf..eabcd3aa85c5 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -8,8 +8,8 @@ import * as Browser from '@libs/Browser';
 import * as FileUtils from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import AttachmentModal from './AttachmentModal';
@@ -142,6 +142,8 @@ function AvatarWithImagePicker({
     onImageSelected,
     editorMaskImage,
 }) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
     const [isMenuVisible, setIsMenuVisible] = useState(false);
     const [errorData, setErrorData] = useState({
         validationError: null,
@@ -319,7 +321,7 @@ function AvatarWithImagePicker({
                                     src={Expensicons.Camera}
                                     width={variables.iconSizeSmall}
                                     height={variables.iconSizeSmall}
-                                    fill={themeColors.textLight}
+                                    fill={theme.textLight}
                                 />
                             </View>
                         </PressableWithoutFeedback>
diff --git a/src/components/AvatarWithIndicator.js b/src/components/AvatarWithIndicator.tsx
similarity index 62%
rename from src/components/AvatarWithIndicator.js
rename to src/components/AvatarWithIndicator.tsx
index f3607b69a73f..3ae9507350c8 100644
--- a/src/components/AvatarWithIndicator.js
+++ b/src/components/AvatarWithIndicator.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import * as UserUtils from '@libs/UserUtils';
@@ -9,38 +8,33 @@ import * as Expensicons from './Icon/Expensicons';
 import Indicator from './Indicator';
 import Tooltip from './Tooltip';
 
-const propTypes = {
+type AvatarWithIndicatorProps = {
     /** URL for the avatar */
-    source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
+    source: UserUtils.AvatarSource;
 
     /** To show a tooltip on hover */
-    tooltipText: PropTypes.string,
+    tooltipText?: string;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
-    fallbackIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    fallbackIcon?: UserUtils.AvatarSource;
 
     /** Indicates whether the avatar is loaded or not  */
-    isLoading: PropTypes.bool,
+    isLoading?: boolean;
 };
 
-const defaultProps = {
-    tooltipText: '',
-    fallbackIcon: Expensicons.FallbackAvatar,
-    isLoading: true,
-};
-
-function AvatarWithIndicator(props) {
+function AvatarWithIndicator({source, tooltipText = '', fallbackIcon = Expensicons.FallbackAvatar, isLoading = true}: AvatarWithIndicatorProps) {
     const styles = useThemeStyles();
+
     return (
-        <Tooltip text={props.tooltipText}>
+        <Tooltip text={tooltipText}>
             <View style={[styles.sidebarAvatar]}>
-                {props.isLoading ? (
+                {isLoading ? (
                     <AvatarSkeleton />
                 ) : (
                     <>
                         <Avatar
-                            source={UserUtils.getSmallSizeAvatar(props.source)}
-                            fallbackIcon={props.fallbackIcon}
+                            source={UserUtils.getSmallSizeAvatar(source)}
+                            fallbackIcon={fallbackIcon}
                         />
                         <Indicator />
                     </>
@@ -50,8 +44,6 @@ function AvatarWithIndicator(props) {
     );
 }
 
-AvatarWithIndicator.defaultProps = defaultProps;
-AvatarWithIndicator.propTypes = propTypes;
 AvatarWithIndicator.displayName = 'AvatarWithIndicator';
 
 export default AvatarWithIndicator;
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 575646f7dd9c..ff963589d80f 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -38,8 +38,8 @@ function Badge({success = false, error = false, pressable = false, text, environ
     const Wrapper = pressable ? PressableWithoutFeedback : View;
 
     const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
-        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
-        [styles.badge, styles.ml2, success, error, environment, badgeStyles],
+        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(styles, success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
+        [success, error, environment, badgeStyles, styles],
     );
 
     return (
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 1c92208a7aa2..e97d73d28c8c 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -3,6 +3,7 @@ import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Hoverable from './Hoverable';
@@ -41,6 +42,7 @@ type BannerProps = {
 
 function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRenderHTML = false, shouldShowIcon = false, shouldShowCloseButton = false}: BannerProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
 
     return (
@@ -65,7 +67,7 @@ function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRend
                                 <View style={[styles.mr3]}>
                                     <Icon
                                         src={Expensicons.Exclamation}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(shouldHighlight))}
+                                        fill={StyleUtils.getIconFillColor(theme, getButtonState(shouldHighlight))}
                                     />
                                 </View>
                             )}
diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js
index 04a569ba7f36..035d8bf4b981 100644
--- a/src/components/BaseMiniContextMenuItem.js
+++ b/src/components/BaseMiniContextMenuItem.js
@@ -6,6 +6,7 @@ import DomUtils from '@libs/DomUtils';
 import getButtonState from '@libs/getButtonState';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
@@ -51,6 +52,7 @@ const defaultProps = {
  */
 function BaseMiniContextMenuItem(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     return (
         <Tooltip text={props.tooltipText}>
             <PressableWithoutFeedback
@@ -73,7 +75,7 @@ function BaseMiniContextMenuItem(props) {
                 accessibilityLabel={props.tooltipText}
                 style={({hovered, pressed}) => [
                     styles.reportActionContextMenuMiniButton,
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
+                    StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed, props.isDelayButtonStateComplete)),
                     props.isDelayButtonStateComplete && styles.cursorDefault,
                 ]}
             >
diff --git a/src/components/Button/index.js b/src/components/Button/index.tsx
similarity index 62%
rename from src/components/Button/index.js
rename to src/components/Button/index.tsx
index b9aaf8868924..8d5833a121ca 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.tsx
@@ -1,212 +1,166 @@
 import {useIsFocused} from '@react-navigation/native';
-import PropTypes from 'prop-types';
-import React, {useCallback} from 'react';
-import {ActivityIndicator, View} from 'react-native';
+import React, {ForwardedRef, useCallback} from 'react';
+import {ActivityIndicator, GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import refPropTypes from '@components/refPropTypes';
 import Text from '@components/Text';
 import withNavigationFallback from '@components/withNavigationFallback';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import HapticFeedback from '@libs/HapticFeedback';
-import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
-const propTypes = {
-    /** Should the press event bubble across multiple instances when Enter key triggers it. */
-    allowBubble: PropTypes.bool,
-
+type ButtonWithText = {
     /** The text for the button label */
-    text: PropTypes.string,
+    text: string;
 
     /** Boolean whether to display the right icon */
-    shouldShowRightIcon: PropTypes.bool,
+    shouldShowRightIcon?: boolean;
 
     /** The icon asset to display to the left of the text */
-    icon: PropTypes.func,
+    icon?: React.FC<SvgProps> | null;
+};
+
+type ButtonProps = (ButtonWithText | ChildrenProps) & {
+    /** Should the press event bubble across multiple instances when Enter key triggers it. */
+    allowBubble?: boolean;
 
     /** The icon asset to display to the right of the text */
-    iconRight: PropTypes.func,
+    iconRight?: React.FC<SvgProps>;
 
     /** The fill color to pass into the icon. */
-    iconFill: PropTypes.string,
+    iconFill?: string;
 
     /** Any additional styles to pass to the left icon container. */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconStyles: PropTypes.arrayOf(PropTypes.object),
+    iconStyles?: StyleProp<ViewStyle>;
 
     /** Any additional styles to pass to the right icon container. */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconRightStyles: PropTypes.arrayOf(PropTypes.object),
+    iconRightStyles?: StyleProp<ViewStyle>;
 
     /** Small sized button */
-    small: PropTypes.bool,
+    small?: boolean;
 
     /** Large sized button */
-    large: PropTypes.bool,
+    large?: boolean;
 
-    /** medium sized button */
-    medium: PropTypes.bool,
+    /** Medium sized button */
+    medium?: boolean;
 
     /** Indicates whether the button should be disabled and in the loading state */
-    isLoading: PropTypes.bool,
+    isLoading?: boolean;
 
     /** Indicates whether the button should be disabled */
-    isDisabled: PropTypes.bool,
+    isDisabled?: boolean;
 
     /** A function that is called when the button is clicked on */
-    onPress: PropTypes.func,
+    onPress?: (event?: GestureResponderEvent | KeyboardEvent) => void;
 
     /** A function that is called when the button is long pressed */
-    onLongPress: PropTypes.func,
+    onLongPress?: (event?: GestureResponderEvent) => void;
 
     /** A function that is called when the button is pressed */
-    onPressIn: PropTypes.func,
+    onPressIn?: () => void;
 
     /** A function that is called when the button is released */
-    onPressOut: PropTypes.func,
+    onPressOut?: () => void;
 
     /** Callback that is called when mousedown is triggered. */
-    onMouseDown: PropTypes.func,
+    onMouseDown?: () => void;
 
     /** Call the onPress function when Enter key is pressed */
-    pressOnEnter: PropTypes.bool,
+    pressOnEnter?: boolean;
 
     /** The priority to assign the enter key event listener. 0 is the highest priority. */
-    enterKeyEventListenerPriority: PropTypes.number,
+    enterKeyEventListenerPriority?: number;
 
     /** Additional styles to add after local styles. Applied to Pressable portion of button */
-    style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+    style?: StyleProp<ViewStyle>;
 
-    /** Additional button styles. Specific to the OpacityView of button */
-    // eslint-disable-next-line react/forbid-prop-types
-    innerStyles: PropTypes.arrayOf(PropTypes.object),
+    /** Additional button styles. Specific to the OpacityView of the button */
+    innerStyles?: StyleProp<ViewStyle>;
 
     /** Additional text styles */
-    // eslint-disable-next-line react/forbid-prop-types
-    textStyles: PropTypes.arrayOf(PropTypes.object),
+    textStyles?: StyleProp<TextStyle>;
 
     /** Whether we should use the default hover style */
-    shouldUseDefaultHover: PropTypes.bool,
+    shouldUseDefaultHover?: boolean;
 
     /** Whether we should use the success theme color */
-    success: PropTypes.bool,
+    success?: boolean;
 
     /** Whether we should use the danger theme color */
-    danger: PropTypes.bool,
-
-    /** Children to replace all inner contents of button */
-    children: PropTypes.node,
+    danger?: boolean;
 
     /** Should we remove the right border radius top + bottom? */
-    shouldRemoveRightBorderRadius: PropTypes.bool,
+    shouldRemoveRightBorderRadius?: boolean;
 
     /** Should we remove the left border radius top + bottom? */
-    shouldRemoveLeftBorderRadius: PropTypes.bool,
+    shouldRemoveLeftBorderRadius?: boolean;
 
     /** Should enable the haptic feedback? */
-    shouldEnableHapticFeedback: PropTypes.bool,
+    shouldEnableHapticFeedback?: boolean;
 
     /** Id to use for this button */
-    id: PropTypes.string,
+    id?: string;
 
     /** Accessibility label for the component */
-    accessibilityLabel: PropTypes.string,
-
-    /** A ref to forward the button */
-    forwardedRef: refPropTypes,
-};
-
-const defaultProps = {
-    allowBubble: false,
-    text: '',
-    shouldShowRightIcon: false,
-    icon: null,
-    iconRight: Expensicons.ArrowRight,
-    iconFill: undefined,
-    iconStyles: [],
-    iconRightStyles: [],
-    isLoading: false,
-    isDisabled: false,
-    small: false,
-    large: false,
-    medium: false,
-    onPress: () => {},
-    onLongPress: () => {},
-    onPressIn: () => {},
-    onPressOut: () => {},
-    onMouseDown: undefined,
-    pressOnEnter: false,
-    enterKeyEventListenerPriority: 0,
-    style: [],
-    innerStyles: [],
-    textStyles: [],
-    shouldUseDefaultHover: true,
-    success: false,
-    danger: false,
-    children: null,
-    shouldRemoveRightBorderRadius: false,
-    shouldRemoveLeftBorderRadius: false,
-    shouldEnableHapticFeedback: false,
-    id: '',
-    accessibilityLabel: '',
-    forwardedRef: undefined,
+    accessibilityLabel?: string;
 };
 
-function Button({
-    allowBubble,
-    text,
-    shouldShowRightIcon,
-
-    icon,
-    iconRight,
-    iconFill,
-    iconStyles,
-    iconRightStyles,
-
-    small,
-    large,
-    medium,
-
-    isLoading,
-    isDisabled,
-
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-    onMouseDown,
-
-    pressOnEnter,
-    enterKeyEventListenerPriority,
-
-    style,
-    innerStyles,
-    textStyles,
-
-    shouldUseDefaultHover,
-    success,
-    danger,
-    children,
-
-    shouldRemoveRightBorderRadius,
-    shouldRemoveLeftBorderRadius,
-    shouldEnableHapticFeedback,
-
-    id,
-    accessibilityLabel,
-    forwardedRef,
-}) {
+function Button(
+    {
+        allowBubble = false,
+
+        iconRight = Expensicons.ArrowRight,
+        iconFill,
+        iconStyles = [],
+        iconRightStyles = [],
+
+        small = false,
+        large = false,
+        medium = false,
+
+        isLoading = false,
+        isDisabled = false,
+
+        onPress = () => {},
+        onLongPress = () => {},
+        onPressIn = () => {},
+        onPressOut = () => {},
+        onMouseDown = undefined,
+
+        pressOnEnter = false,
+        enterKeyEventListenerPriority = 0,
+
+        style = [],
+        innerStyles = [],
+        textStyles = [],
+
+        shouldUseDefaultHover = true,
+        success = false,
+        danger = false,
+
+        shouldRemoveRightBorderRadius = false,
+        shouldRemoveLeftBorderRadius = false,
+        shouldEnableHapticFeedback = false,
+
+        id = '',
+        accessibilityLabel = '',
+        ...rest
+    }: ButtonProps,
+    ref: ForwardedRef<View>,
+) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
 
     const keyboardShortcutCallback = useCallback(
-        (event) => {
+        (event?: GestureResponderEvent | KeyboardEvent) => {
             if (!validateSubmitShortcut(isFocused, isDisabled, isLoading, event)) {
                 return;
             }
@@ -223,10 +177,12 @@ function Button({
     });
 
     const renderContent = () => {
-        if (children) {
-            return children;
+        if ('children' in rest) {
+            return rest.children;
         }
 
+        const {text = '', icon = null, shouldShowRightIcon = false} = rest;
+
         const textComponent = (
             <Text
                 numberOfLines={1}
@@ -240,7 +196,7 @@ function Button({
                     success && styles.buttonSuccessText,
                     danger && styles.buttonDangerText,
                     icon && styles.textAlignLeft,
-                    ...textStyles,
+                    textStyles,
                 ]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
@@ -248,15 +204,16 @@ function Button({
             </Text>
         );
 
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if (icon || shouldShowRightIcon) {
             return (
                 <View style={[styles.justifyContentBetween, styles.flexRow]}>
                     <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                         {icon && (
-                            <View style={[styles.mr1, ...iconStyles]}>
+                            <View style={[styles.mr1, iconStyles]}>
                                 <Icon
                                     src={icon}
-                                    fill={iconFill || theme.textLight}
+                                    fill={iconFill ?? theme.textLight}
                                     small={small}
                                 />
                             </View>
@@ -264,10 +221,10 @@ function Button({
                         {textComponent}
                     </View>
                     {shouldShowRightIcon && (
-                        <View style={[styles.justifyContentCenter, styles.ml1, ...iconRightStyles]}>
+                        <View style={[styles.justifyContentCenter, styles.ml1, iconRightStyles]}>
                             <Icon
                                 src={iconRight}
-                                fill={iconFill || theme.textLight}
+                                fill={iconFill ?? theme.textLight}
                                 small={small}
                             />
                         </View>
@@ -281,10 +238,11 @@ function Button({
 
     return (
         <PressableWithFeedback
-            ref={forwardedRef}
+            ref={ref}
             onPress={(event) => {
-                if (event && event.type === 'click') {
-                    event.currentTarget.blur();
+                if (event?.type === 'click') {
+                    const currentTarget = event?.currentTarget as HTMLElement;
+                    currentTarget?.blur();
                 }
 
                 if (shouldEnableHapticFeedback) {
@@ -307,7 +265,7 @@ function Button({
                 styles.buttonContainer,
                 shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                 shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
-                ...StyleUtils.parseStyleAsArray(style),
+                style,
             ]}
             style={[
                 styles.button,
@@ -320,8 +278,9 @@ function Button({
                 isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
                 shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                 shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
-                icon || shouldShowRightIcon ? styles.alignItemsStretch : undefined,
-                ...innerStyles,
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                'text' in rest && (rest?.icon || rest?.shouldShowRightIcon) ? styles.alignItemsStretch : undefined,
+                innerStyles,
             ]}
             hoverStyle={[
                 shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
@@ -344,18 +303,6 @@ function Button({
     );
 }
 
-Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
 Button.displayName = 'Button';
 
-const ButtonWithRef = React.forwardRef((props, ref) => (
-    <Button
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-ButtonWithRef.displayName = 'ButtonWithRef';
-
-export default withNavigationFallback(ButtonWithRef);
+export default withNavigationFallback(React.forwardRef(Button));
diff --git a/src/components/Button/validateSubmitShortcut/index.js b/src/components/Button/validateSubmitShortcut/index.js
deleted file mode 100644
index bfe5c79483fa..000000000000
--- a/src/components/Button/validateSubmitShortcut/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Validate if the submit shortcut should be triggered depending on the button state
- *
- * @param {boolean} isFocused Whether Button is on active screen
- * @param {boolean} isDisabled Indicates whether the button should be disabled
- * @param {boolean} isLoading Indicates whether the button should be disabled and in the loading state
- * @param {Object} event Focused input event
- * @returns {boolean} Returns `true` if the shortcut should be triggered
- */
-function validateSubmitShortcut(isFocused, isDisabled, isLoading, event) {
-    if (!isFocused || isDisabled || isLoading || (event && event.target.nodeName === 'TEXTAREA')) {
-        return false;
-    }
-
-    event.preventDefault();
-    return true;
-}
-
-export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/index.native.js b/src/components/Button/validateSubmitShortcut/index.native.js
deleted file mode 100644
index 2822fa56d590..000000000000
--- a/src/components/Button/validateSubmitShortcut/index.native.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Validate if the submit shortcut should be triggered depending on the button state
- *
- * @param {boolean} isFocused Whether Button is on active screen
- * @param {boolean} isDisabled Indicates whether the button should be disabled
- * @param {boolean} isLoading Indicates whether the button should be disabled and in the loading state
- * @returns {boolean} Returns `true` if the shortcut should be triggered
- */
-function validateSubmitShortcut(isFocused, isDisabled, isLoading) {
-    if (!isFocused || isDisabled || isLoading) {
-        return false;
-    }
-
-    return true;
-}
-
-export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/index.native.ts b/src/components/Button/validateSubmitShortcut/index.native.ts
new file mode 100644
index 000000000000..7687855f109b
--- /dev/null
+++ b/src/components/Button/validateSubmitShortcut/index.native.ts
@@ -0,0 +1,20 @@
+import ValidateSubmitShortcut from './types';
+
+/**
+ * Validate if the submit shortcut should be triggered depending on the button state
+ *
+ * @param isFocused Whether Button is on active screen
+ * @param isDisabled Indicates whether the button should be disabled
+ * @param isLoading Indicates whether the button should be disabled and in the loading state
+ * @return Returns `true` if the shortcut should be triggered
+ */
+
+const validateSubmitShortcut: ValidateSubmitShortcut = (isFocused, isDisabled, isLoading) => {
+    if (!isFocused || isDisabled || isLoading) {
+        return false;
+    }
+
+    return true;
+};
+
+export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/index.ts b/src/components/Button/validateSubmitShortcut/index.ts
new file mode 100644
index 000000000000..55b3e44192e4
--- /dev/null
+++ b/src/components/Button/validateSubmitShortcut/index.ts
@@ -0,0 +1,23 @@
+import ValidateSubmitShortcut from './types';
+
+/**
+ * Validate if the submit shortcut should be triggered depending on the button state
+ *
+ * @param isFocused Whether Button is on active screen
+ * @param isDisabled Indicates whether the button should be disabled
+ * @param isLoading Indicates whether the button should be disabled and in the loading state
+ * @param event Focused input event
+ * @returns Returns `true` if the shortcut should be triggered
+ */
+
+const validateSubmitShortcut: ValidateSubmitShortcut = (isFocused, isDisabled, isLoading, event) => {
+    const eventTarget = event?.target as HTMLElement;
+    if (!isFocused || isDisabled || isLoading || eventTarget.nodeName === 'TEXTAREA') {
+        return false;
+    }
+
+    event?.preventDefault();
+    return true;
+};
+
+export default validateSubmitShortcut;
diff --git a/src/components/Button/validateSubmitShortcut/types.ts b/src/components/Button/validateSubmitShortcut/types.ts
new file mode 100644
index 000000000000..9970e1478a4c
--- /dev/null
+++ b/src/components/Button/validateSubmitShortcut/types.ts
@@ -0,0 +1,5 @@
+import {GestureResponderEvent} from 'react-native';
+
+type ValidateSubmitShortcut = (isFocused: boolean, isDisabled: boolean, isLoading: boolean, event?: GestureResponderEvent | KeyboardEvent) => boolean;
+
+export default ValidateSubmitShortcut;
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 6ee5ed1c558f..22577ec2b7f9 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -98,7 +98,7 @@ function Checkbox(
             {children ?? (
                 <View
                     style={[
-                        StyleUtils.getCheckboxContainerStyle(containerSize, containerBorderRadius),
+                        StyleUtils.getCheckboxContainerStyle(theme, containerSize, containerBorderRadius),
                         containerStyle,
                         isChecked && styles.checkedContainer,
                         hasError && styles.borderColorDanger,
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 146e37ceb730..92cd7ea38eea 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -34,7 +34,7 @@ const propTypes = {
     isChecked: PropTypes.bool,
 
     /** Called when the checkbox or label is pressed */
-    onInputChange: PropTypes.func.isRequired,
+    onInputChange: PropTypes.func,
 
     /** Container styles */
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
@@ -77,10 +77,11 @@ const defaultProps = {
     errorText: '',
     shouldSaveDraft: false,
     isChecked: false,
-    value: false,
+    value: undefined,
     defaultValue: false,
     forwardedRef: () => {},
     accessibilityLabel: undefined,
+    onInputChange: () => {},
 };
 
 function CheckboxWithLabel(props) {
@@ -106,7 +107,7 @@ function CheckboxWithLabel(props) {
                     label={props.label}
                     style={[styles.checkboxWithLabelCheckboxStyle]}
                     hasError={Boolean(props.errorText)}
-                    forwardedRef={props.forwardedRef}
+                    ref={props.forwardedRef}
                     accessibilityLabel={props.accessibilityLabel || props.label}
                 />
                 <PressableWithFeedback
diff --git a/src/components/CollapsibleSection/index.tsx b/src/components/CollapsibleSection/index.tsx
index 434017f2a547..570d00559af8 100644
--- a/src/components/CollapsibleSection/index.tsx
+++ b/src/components/CollapsibleSection/index.tsx
@@ -4,7 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Text from '@components/Text';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ChildrenProps from '@src/types/utils/ChildrenProps';
 import Collapsible from './Collapsible';
@@ -15,6 +15,7 @@ type CollapsibleSectionProps = ChildrenProps & {
 };
 
 function CollapsibleSection({title, children}: CollapsibleSectionProps) {
+    const styles = useThemeStyles();
     const [isExpanded, setIsExpanded] = useState(false);
 
     /**
diff --git a/src/components/ColorSchemeWrapper/index.native.tsx b/src/components/ColorSchemeWrapper/index.native.tsx
new file mode 100644
index 000000000000..9f68ee97d330
--- /dev/null
+++ b/src/components/ColorSchemeWrapper/index.native.tsx
@@ -0,0 +1,5 @@
+function ColorSchemeWrapper({children}: React.PropsWithChildren) {
+    return children;
+}
+
+export default ColorSchemeWrapper;
diff --git a/src/components/ColorSchemeWrapper/index.tsx b/src/components/ColorSchemeWrapper/index.tsx
new file mode 100644
index 000000000000..577ccf9f3794
--- /dev/null
+++ b/src/components/ColorSchemeWrapper/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import {View} from 'react-native';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+
+function ColorSchemeWrapper({children}: React.PropsWithChildren): React.ReactElement {
+    const theme = useTheme();
+    const themeStyles = useThemeStyles();
+
+    return <View style={[themeStyles.flex1, themeStyles.colorSchemeStyle(theme.colorScheme)]}>{children}</View>;
+}
+
+export default ColorSchemeWrapper;
diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js
index 278965cbc81a..698c68cc78e9 100644
--- a/src/components/Composer/index.android.js
+++ b/src/components/Composer/index.android.js
@@ -4,7 +4,8 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -65,6 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
+    const theme = useTheme();
+    const styles = useThemeStyles();
 
     /**
      * Set the TextInput Ref
@@ -110,9 +113,9 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
     return (
         <RNTextInput
             autoComplete="off"
-            placeholderTextColor={themeColors.placeholderText}
+            placeholderTextColor={theme.placeholderText}
             ref={setTextInputRef}
-            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e)}
+            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)}
             rejectResponderTermination={false}
             // Setting a really high number here fixes an issue with the `maxNumberOfLines` prop on TextInput, where on Android the text input would collapse to only one line,
             // when it should actually expand to the container (https://github.com/Expensify/App/issues/11694#issuecomment-1560520670)
diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js
index a1b8c1a4ffe6..eb227de36a54 100644
--- a/src/components/Composer/index.ios.js
+++ b/src/components/Composer/index.ios.js
@@ -4,8 +4,8 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
@@ -66,6 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
+    const styles = useThemeStyles();
+    const theme = useTheme();
 
     /**
      * Set the TextInput Ref
@@ -115,9 +117,9 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
     return (
         <RNTextInput
             autoComplete="off"
-            placeholderTextColor={themeColors.placeholderText}
+            placeholderTextColor={theme.placeholderText}
             ref={setTextInputRef}
-            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e)}
+            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)}
             rejectResponderTermination={false}
             smartInsertDelete={false}
             maxNumberOfLines={maxNumberOfLines}
diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js
index cbf8a6e40abd..48eb89bb0296 100755
--- a/src/components/Composer/index.js
+++ b/src/components/Composer/index.js
@@ -171,11 +171,10 @@ function Composer({
     const {windowWidth} = useWindowDimensions();
     const textRef = useRef(null);
     const textInput = useRef(null);
-    const initialValue = defaultValue ? `${defaultValue}` : `${value || ''}`;
     const [numberOfLines, setNumberOfLines] = useState(numberOfLinesProp);
     const [selection, setSelection] = useState({
-        start: initialValue.length,
-        end: initialValue.length,
+        start: selectionProp.start,
+        end: selectionProp.end,
     });
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
index 656e419449b3..4c4c34851afb 100644
--- a/src/components/ConfirmedRoute.js
+++ b/src/components/ConfirmedRoute.js
@@ -1,13 +1,13 @@
 import lodashGet from 'lodash/get';
 import lodashIsNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import styles from '@styles/styles';
-import theme from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as MapboxToken from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -37,46 +37,53 @@ const defaultProps = {
     },
 };
 
-const getWaypointMarkers = (waypoints) => {
-    const numberOfWaypoints = _.size(waypoints);
-    const lastWaypointIndex = numberOfWaypoints - 1;
-    return _.filter(
-        _.map(waypoints, (waypoint, key) => {
-            if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
-                return;
-            }
-
-            const index = TransactionUtils.getWaypointIndex(key);
-            let MarkerComponent;
-            if (index === 0) {
-                MarkerComponent = Expensicons.DotIndicatorUnfilled;
-            } else if (index === lastWaypointIndex) {
-                MarkerComponent = Expensicons.Location;
-            } else {
-                MarkerComponent = Expensicons.DotIndicator;
-            }
-
-            return {
-                id: `${waypoint.lng},${waypoint.lat},${index}`,
-                coordinate: [waypoint.lng, waypoint.lat],
-                markerComponent: () => (
-                    <MarkerComponent
-                        width={CONST.MAP_MARKER_SIZE}
-                        height={CONST.MAP_MARKER_SIZE}
-                        fill={theme.icon}
-                    />
-                ),
-            };
-        }),
-        (waypoint) => waypoint,
-    );
-};
-
 function ConfirmedRoute({mapboxAccessToken, transaction}) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction.routes || {};
     const waypoints = lodashGet(transaction, 'comment.waypoints', {});
     const coordinates = lodashGet(route, 'geometry.coordinates', []);
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const getWaypointMarkers = useCallback(
+        (waypointsData) => {
+            const numberOfWaypoints = _.size(waypointsData);
+            const lastWaypointIndex = numberOfWaypoints - 1;
+
+            return _.filter(
+                _.map(waypointsData, (waypoint, key) => {
+                    if (!waypoint || lodashIsNil(waypoint.lat) || lodashIsNil(waypoint.lng)) {
+                        return;
+                    }
+
+                    const index = TransactionUtils.getWaypointIndex(key);
+                    let MarkerComponent;
+                    if (index === 0) {
+                        MarkerComponent = Expensicons.DotIndicatorUnfilled;
+                    } else if (index === lastWaypointIndex) {
+                        MarkerComponent = Expensicons.Location;
+                    } else {
+                        MarkerComponent = Expensicons.DotIndicator;
+                    }
+
+                    return {
+                        id: `${waypoint.lng},${waypoint.lat},${index}`,
+                        coordinate: [waypoint.lng, waypoint.lat],
+                        markerComponent: () => (
+                            <MarkerComponent
+                                width={CONST.MAP_MARKER_SIZE}
+                                height={CONST.MAP_MARKER_SIZE}
+                                fill={theme.icon}
+                            />
+                        ),
+                    };
+                }),
+                (waypoint) => waypoint,
+            );
+        },
+        [theme],
+    );
+
     const waypointMarkers = getWaypointMarkers(waypoints);
 
     useEffect(() => {
diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
index d0a43badc5e3..7059e0161001 100644
--- a/src/components/ContextMenuItem.js
+++ b/src/components/ContextMenuItem.js
@@ -5,6 +5,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
 import getContextMenuItemStyles from '@styles/getContextMenuItemStyles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
@@ -54,6 +55,7 @@ const defaultProps = {
 
 function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {windowWidth} = useWindowDimensions();
     const [isThrottledButtonActive, setThrottledButtonInactive] = useThrottledButtonState();
 
@@ -85,7 +87,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
                 <Icon
                     small
                     src={itemIcon}
-                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isThrottledButtonActive))}
+                    fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, !isThrottledButtonActive))}
                 />
             )}
         </BaseMiniContextMenuItem>
@@ -98,7 +100,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
             success={!isThrottledButtonActive}
             description={description}
             descriptionTextStyle={styles.breakAll}
-            style={getContextMenuItemStyles(windowWidth)}
+            style={getContextMenuItemStyles(styles, windowWidth)}
             isAnonymousAction={isAnonymousAction}
             focused={isFocused}
             interactive={isThrottledButtonActive}
diff --git a/src/components/CustomDevMenu/index.js b/src/components/CustomDevMenu/index.js
deleted file mode 100644
index b8944c185d13..000000000000
--- a/src/components/CustomDevMenu/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const CustomDevMenu = () => {};
-
-CustomDevMenu.displayName = 'CustomDevMenu';
-
-export default CustomDevMenu;
diff --git a/src/components/CustomDevMenu/index.native.js b/src/components/CustomDevMenu/index.native.js
deleted file mode 100644
index c8d0e1e099d4..000000000000
--- a/src/components/CustomDevMenu/index.native.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import {useEffect} from 'react';
-import DevMenu from 'react-native-dev-menu';
-import toggleTestToolsModal from '@userActions/TestTool';
-
-function CustomDevMenu() {
-    useEffect(() => {
-        DevMenu.addItem('Open Test Preferences', toggleTestToolsModal);
-    }, []);
-
-    return null;
-}
-
-CustomDevMenu.displayName = 'CustomDevMenu';
-
-export default CustomDevMenu;
diff --git a/src/components/CustomDevMenu/index.native.tsx b/src/components/CustomDevMenu/index.native.tsx
new file mode 100644
index 000000000000..d8a0ea987171
--- /dev/null
+++ b/src/components/CustomDevMenu/index.native.tsx
@@ -0,0 +1,18 @@
+import {useEffect} from 'react';
+import DevMenu from 'react-native-dev-menu';
+import toggleTestToolsModal from '@userActions/TestTool';
+import CustomDevMenuElement from './types';
+
+const CustomDevMenu: CustomDevMenuElement = Object.assign(
+    () => {
+        useEffect(() => {
+            DevMenu.addItem('Open Test Preferences', toggleTestToolsModal);
+        }, []);
+        return <></>;
+    },
+    {
+        displayName: 'CustomDevMenu',
+    },
+);
+
+export default CustomDevMenu;
diff --git a/src/components/CustomDevMenu/index.tsx b/src/components/CustomDevMenu/index.tsx
new file mode 100644
index 000000000000..c8eae861b676
--- /dev/null
+++ b/src/components/CustomDevMenu/index.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import CustomDevMenuElement from './types';
+
+const CustomDevMenu: CustomDevMenuElement = Object.assign(() => <></>, {displayName: 'CustomDevMenu'});
+
+export default CustomDevMenu;
diff --git a/src/components/CustomDevMenu/types.ts b/src/components/CustomDevMenu/types.ts
new file mode 100644
index 000000000000..bdfc800a17f0
--- /dev/null
+++ b/src/components/CustomDevMenu/types.ts
@@ -0,0 +1,8 @@
+import {ReactElement} from 'react';
+
+type CustomDevMenuElement = {
+    (): ReactElement;
+    displayName: string;
+};
+
+export default CustomDevMenuElement;
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.js b/src/components/CustomStatusBar/index.android.js
deleted file mode 100644
index a7bf509114e6..000000000000
--- a/src/components/CustomStatusBar/index.android.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * On Android we setup the status bar in native code.
- */
-
-export default function CustomStatusBar() {
-    // 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.
-    return null;
-}
diff --git a/src/components/CustomStatusBar/index.js b/src/components/CustomStatusBar/index.js
deleted file mode 100644
index a724c71059ef..000000000000
--- a/src/components/CustomStatusBar/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, {useEffect} from 'react';
-import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
-import StatusBar from '@libs/StatusBar';
-import useTheme from '@styles/themes/useTheme';
-
-function CustomStatusBar() {
-    const theme = useTheme();
-    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];
-            }
-            StatusBar.setBarStyle('light-content', true);
-            StatusBar.setBackgroundColor(currentScreenBackgroundColor);
-        });
-    }, [theme.PAGE_BACKGROUND_COLORS, theme.appBG]);
-    return <StatusBar />;
-}
-
-CustomStatusBar.displayName = 'CustomStatusBar';
-
-export default CustomStatusBar;
diff --git a/src/components/CustomStatusBar/index.tsx b/src/components/CustomStatusBar/index.tsx
new file mode 100644
index 000000000000..2e4994378264
--- /dev/null
+++ b/src/components/CustomStatusBar/index.tsx
@@ -0,0 +1,91 @@
+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 CustomStatusBarContext from './CustomStatusBarContext';
+
+type CustomStatusBarProps = {
+    isNested: boolean;
+};
+
+const propTypes = {
+    /** Whether the CustomStatusBar is nested within another CustomStatusBar.
+     *  A nested CustomStatusBar will disable the "root" CustomStatusBar. */
+    isNested: PropTypes.bool,
+};
+
+type CustomStatusBarType = {
+    (props: CustomStatusBarProps): React.ReactNode;
+    displayName: string;
+    propTypes: typeof propTypes;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
+    const {isRootStatusBarDisabled, disableRootStatusBar} = useContext(CustomStatusBarContext);
+    const theme = useTheme();
+
+    const isDisabled = !isNested && isRootStatusBarDisabled;
+
+    useEffect(() => {
+        if (isNested) {
+            disableRootStatusBar(true);
+        }
+
+        return () => {
+            if (!isNested) {
+                return;
+            }
+            disableRootStatusBar(false);
+        };
+    }, [disableRootStatusBar, isNested]);
+
+    const updateStatusBarStyle = useCallback<EventListenerCallback<NavigationContainerEventMap, 'state'>>(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        // Set the status bar colour depending on the current route.
+        // If we don't have any colour defined for a route, fall back to
+        // appBG color.
+        const currentRoute = navigationRef.getCurrentRoute();
+
+        let currentScreenBackgroundColor = theme.appBG;
+        let statusBarStyle = theme.statusBarStyle;
+        if (currentRoute && 'name' in currentRoute && currentRoute.name in theme.PAGE_THEMES) {
+            const screenTheme = theme.PAGE_THEMES[currentRoute.name];
+            currentScreenBackgroundColor = screenTheme.backgroundColor;
+            statusBarStyle = screenTheme.statusBarStyle;
+        }
+
+        StatusBar.setBackgroundColor(currentScreenBackgroundColor, true);
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
+
+    useEffect(() => {
+        navigationRef.addListener('state', updateStatusBarStyle);
+
+        return () => navigationRef.removeListener('state', updateStatusBarStyle);
+    }, [updateStatusBarStyle]);
+
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+
+        StatusBar.setBarStyle(theme.statusBarStyle, true);
+    }, [isDisabled, theme.statusBarStyle]);
+
+    if (isDisabled) {
+        return null;
+    }
+
+    return <StatusBar />;
+};
+
+CustomStatusBar.displayName = 'CustomStatusBar';
+CustomStatusBar.propTypes = propTypes;
+
+export default CustomStatusBar;
diff --git a/src/components/DatePicker/datepickerPropTypes.js b/src/components/DatePicker/datepickerPropTypes.js
deleted file mode 100644
index 02d11806b8af..000000000000
--- a/src/components/DatePicker/datepickerPropTypes.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import {defaultProps as defaultFieldPropTypes, propTypes as fieldPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes';
-import CONST from '@src/CONST';
-
-const propTypes = {
-    ...fieldPropTypes,
-
-    /**
-     * The datepicker supports any value that `new Date()` can parse.
-     * `onInputChange` would always be called with a Date (or null)
-     */
-    value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-
-    /**
-     * The datepicker supports any defaultValue that `new Date()` can parse.
-     * `onInputChange` would always be called with a Date (or null)
-     */
-    defaultValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
-
-    /** The earliest date allowed to select */
-    minDate: PropTypes.instanceOf(Date),
-
-    /** The latest date allowed to select */
-    maxDate: PropTypes.instanceOf(Date),
-};
-
-const defaultProps = {
-    ...defaultFieldPropTypes,
-    value: undefined,
-    minDate: new Date(CONST.DATE.MIN_DATE),
-    maxDate: new Date(CONST.DATE.MAX_DATE),
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/DatePicker/index.android.js b/src/components/DatePicker/index.android.js
deleted file mode 100644
index 5e7086fb78ad..000000000000
--- a/src/components/DatePicker/index.android.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import RNDatePicker from '@react-native-community/datetimepicker';
-import {format, parseISO} from 'date-fns';
-import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
-import {Keyboard} from 'react-native';
-import TextInput from '@components/TextInput';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './datepickerPropTypes';
-
-const DatePicker = forwardRef(({value, defaultValue, label, placeholder, errorText, containerStyles, disabled, onBlur, onInputChange, maxDate, minDate}, outerRef) => {
-    const styles = useThemeStyles();
-    const ref = useRef();
-
-    const [isPickerVisible, setIsPickerVisible] = useState(false);
-
-    /**
-     * @param {Event} event
-     * @param {Date} selectedDate
-     */
-    const setDate = (event, selectedDate) => {
-        setIsPickerVisible(false);
-
-        if (event.type === 'set') {
-            onInputChange(format(selectedDate, CONST.DATE.FNS_FORMAT_STRING));
-        }
-    };
-
-    const showPicker = useCallback(() => {
-        Keyboard.dismiss();
-        setIsPickerVisible(true);
-    }, []);
-
-    useImperativeHandle(
-        outerRef,
-        () => ({
-            ...ref.current,
-            focus: showPicker,
-        }),
-        [showPicker],
-    );
-
-    const date = value || defaultValue;
-    const dateAsText = date ? format(parseISO(date), CONST.DATE.FNS_FORMAT_STRING) : '';
-
-    return (
-        <>
-            <TextInput
-                label={label}
-                accessibilityLabel={label}
-                role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                value={dateAsText}
-                forceActiveLabel
-                placeholder={placeholder}
-                errorText={errorText}
-                containerStyles={containerStyles}
-                textInputContainerStyles={isPickerVisible ? [styles.borderColorFocus] : []}
-                onPress={showPicker}
-                readOnly
-                disabled={disabled}
-                onBlur={onBlur}
-                ref={ref}
-            />
-            {isPickerVisible && (
-                <RNDatePicker
-                    value={date ? parseISO(date) : new Date()}
-                    mode="date"
-                    onChange={setDate}
-                    maximumDate={maxDate}
-                    minimumDate={minDate}
-                />
-            )}
-        </>
-    );
-});
-
-DatePicker.propTypes = propTypes;
-DatePicker.defaultProps = defaultProps;
-DatePicker.displayName = 'DatePicker';
-
-export default DatePicker;
diff --git a/src/components/DatePicker/index.ios.js b/src/components/DatePicker/index.ios.js
deleted file mode 100644
index 44a825aa8183..000000000000
--- a/src/components/DatePicker/index.ios.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import RNDatePicker from '@react-native-community/datetimepicker';
-import {format, parseISO} from 'date-fns';
-import isFunction from 'lodash/isFunction';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Button, Keyboard, View} from 'react-native';
-import Popover from '@components/Popover';
-import TextInput from '@components/TextInput';
-import useKeyboardState from '@hooks/useKeyboardState';
-import useLocalize from '@hooks/useLocalize';
-import useTheme from '@styles/themes/useTheme';
-import useThemeStyles from '@styles/useThemeStyles';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './datepickerPropTypes';
-
-function DatePicker({value, defaultValue, innerRef, onInputChange, preferredLocale, minDate, maxDate, label, disabled, onBlur, placeholder, containerStyles, errorText}) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const dateValue = value || defaultValue;
-    const [isPickerVisible, setIsPickerVisible] = useState(false);
-    const [selectedDate, setSelectedDate] = useState(dateValue ? new Date(dateValue) : new Date());
-    const {isKeyboardShown} = useKeyboardState();
-    const {translate} = useLocalize();
-    const initialValue = useRef(null);
-    const inputRef = useRef(null);
-
-    const showPicker = useCallback(() => {
-        initialValue.current = selectedDate;
-
-        // Opens the popover only after the keyboard is hidden to avoid a "blinking" effect where the keyboard was on iOS
-        // See https://github.com/Expensify/App/issues/14084 for more context
-        if (!isKeyboardShown) {
-            setIsPickerVisible(true);
-            return;
-        }
-
-        const listener = Keyboard.addListener('keyboardDidHide', () => {
-            setIsPickerVisible(true);
-            listener.remove();
-        });
-        Keyboard.dismiss();
-    }, [isKeyboardShown, selectedDate]);
-
-    useEffect(() => {
-        if (!isFunction(innerRef)) {
-            return;
-        }
-
-        const input = inputRef.current;
-
-        if (input && input.focus && isFunction(input.focus)) {
-            innerRef({...input, focus: showPicker});
-            return;
-        }
-
-        innerRef(input);
-    }, [innerRef, showPicker]);
-
-    /**
-     * Reset the date spinner to the initial value
-     */
-    const reset = () => {
-        setSelectedDate(initialValue.current);
-    };
-
-    /**
-     * Accept the current spinner changes, close the spinner and propagate the change
-     * to the parent component (onInputChange)
-     */
-    const selectDate = () => {
-        setIsPickerVisible(false);
-        onInputChange(format(selectedDate, CONST.DATE.FNS_FORMAT_STRING));
-    };
-
-    /**
-     * @param {Event} event
-     * @param {Date} date
-     */
-    const updateLocalDate = (event, date) => {
-        setSelectedDate(date);
-    };
-
-    const dateAsText = dateValue ? format(parseISO(dateValue), CONST.DATE.FNS_FORMAT_STRING) : '';
-
-    return (
-        <>
-            <TextInput
-                forceActiveLabel
-                label={label}
-                accessibilityLabel={label}
-                role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                value={dateAsText}
-                placeholder={placeholder}
-                errorText={errorText}
-                containerStyles={containerStyles}
-                textInputContainerStyles={[isPickerVisible && styles.borderColorFocus]}
-                onPress={showPicker}
-                readOnly
-                disabled={disabled}
-                onBlur={onBlur}
-                ref={inputRef}
-            />
-            <Popover
-                isVisible={isPickerVisible}
-                onClose={selectDate}
-            >
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.borderBottom, styles.pb1, styles.ph4]}>
-                    <Button
-                        title={translate('common.reset')}
-                        color={theme.textError}
-                        onPress={reset}
-                    />
-
-                    <Button
-                        title={translate('common.done')}
-                        color={theme.link}
-                        onPress={selectDate}
-                    />
-                </View>
-                <RNDatePicker
-                    value={selectedDate}
-                    mode="date"
-                    display="spinner"
-                    themeVariant="dark"
-                    onChange={updateLocalDate}
-                    locale={preferredLocale}
-                    maximumDate={maxDate}
-                    minimumDate={minDate}
-                />
-            </Popover>
-        </>
-    );
-}
-
-DatePicker.propTypes = propTypes;
-DatePicker.defaultProps = defaultProps;
-DatePicker.displayName = 'DatePicker';
-
-/**
- * We're applying localization here because we present a modal (with buttons) ourselves
- * Furthermore we're passing the locale down so that the modal and the date spinner are in the same
- * locale. Otherwise the spinner would be present in the system locale and it would be weird if it happens
- * that the modal buttons are in one locale (app) while the (spinner) month names are another (system)
- */
-const DatePickerWithRef = React.forwardRef((props, ref) => (
-    <DatePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        innerRef={ref}
-    />
-));
-
-DatePickerWithRef.displayName = 'DatePickerWithRef';
-
-export default DatePickerWithRef;
diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js
deleted file mode 100644
index 16d2eb2668a3..000000000000
--- a/src/components/DatePicker/index.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import {format, isValid, parseISO} from 'date-fns';
-import React, {useEffect, useRef} from 'react';
-import _ from 'underscore';
-import TextInput from '@components/TextInput';
-import * as Browser from '@libs/Browser';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './datepickerPropTypes';
-import './styles.css';
-
-function DatePicker({maxDate, minDate, onInputChange, innerRef, label, value, placeholder, errorText, containerStyles, disabled, onBlur}) {
-    const inputRef = useRef(null);
-
-    useEffect(() => {
-        // Adds nice native datepicker on web/desktop. Not possible to set this through props
-        inputRef.current.setAttribute('type', 'date');
-        inputRef.current.setAttribute('max', format(new Date(maxDate), CONST.DATE.FNS_FORMAT_STRING));
-        inputRef.current.setAttribute('min', format(new Date(minDate), CONST.DATE.FNS_FORMAT_STRING));
-        inputRef.current.classList.add('expensify-datepicker');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    /**
-     * Trigger the `onChange` handler when the user input has a complete date or is cleared
-     * @param {String} text
-     */
-    const setDate = (text) => {
-        if (!text) {
-            onInputChange('');
-            return;
-        }
-
-        const date = parseISO(text);
-        if (isValid(date)) {
-            onInputChange(format(date, CONST.DATE.FNS_FORMAT_STRING));
-        }
-    };
-
-    /**
-     * Pops the datepicker up when we focus this field. This only works on mWeb chrome
-     * On mWeb chrome the user needs to tap on the field again in order to bring the datepicker. But our current styles
-     * don't make this very obvious. To avoid confusion we open the datepicker when the user focuses the field
-     */
-    const showDatepicker = () => {
-        if (!inputRef.current || !Browser.isMobileChrome()) {
-            return;
-        }
-
-        inputRef.current.click();
-    };
-
-    return (
-        <TextInput
-            forceActiveLabel
-            ref={(el) => {
-                inputRef.current = el;
-
-                if (_.isFunction(innerRef)) {
-                    innerRef(el);
-                }
-            }}
-            onFocus={showDatepicker}
-            label={label}
-            accessibilityLabel={label}
-            role={CONST.ACCESSIBILITY_ROLE.TEXT}
-            onInputChange={setDate}
-            value={value}
-            placeholder={placeholder}
-            errorText={errorText}
-            containerStyles={containerStyles}
-            disabled={disabled}
-            onBlur={onBlur}
-        />
-    );
-}
-
-DatePicker.displayName = 'DatePicker';
-DatePicker.propTypes = propTypes;
-DatePicker.defaultProps = defaultProps;
-
-const DatePickerWithRef = React.forwardRef((props, ref) => (
-    <DatePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        innerRef={ref}
-    />
-));
-
-DatePickerWithRef.displayName = 'DatePickerWithRef';
-
-export default DatePickerWithRef;
diff --git a/src/components/DatePicker/styles.css b/src/components/DatePicker/styles.css
deleted file mode 100644
index c9883835531a..000000000000
--- a/src/components/DatePicker/styles.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Using a .css file is a special case here, because it's impossible to target
- * pseudo-elements from js code (e.g. ::-webkit)
- * It also helps in cases like using the Datepicker in Storybook - the styles are imported
- * with the component
- */
-
-.expensify-datepicker::-webkit-calendar-picker-indicator {
-    color-scheme: dark;
-    cursor: pointer;
-    padding: 18px 13px;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-}
-.expensify-datepicker::-webkit-date-and-time-value {
-    text-align: left;
-}
diff --git a/src/components/DisplayNames/index.native.tsx b/src/components/DisplayNames/index.native.tsx
index 8d1d3d2866ed..8f1fef37a6ba 100644
--- a/src/components/DisplayNames/index.native.tsx
+++ b/src/components/DisplayNames/index.native.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
 import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
 import DisplayNamesProps from './types';
 
 // As we don't have to show tooltips of the Native platform so we simply render the full display names list.
 function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1}: DisplayNamesProps) {
+    const {translate} = useLocalize();
     return (
         <Text
             accessibilityLabel={accessibilityLabel}
             style={textStyles}
             numberOfLines={numberOfLines}
         >
-            {fullTitle}
+            {fullTitle || translate('common.hidden')}
         </Text>
     );
 }
diff --git a/src/components/DisplayNames/index.tsx b/src/components/DisplayNames/index.tsx
index f5714fcbfb8b..7ff1081937d5 100644
--- a/src/components/DisplayNames/index.tsx
+++ b/src/components/DisplayNames/index.tsx
@@ -1,15 +1,19 @@
 import React from 'react';
+import useLocalize from '@hooks/useLocalize';
 import DisplayNamesWithoutTooltip from './DisplayNamesWithoutTooltip';
 import DisplayNamesWithToolTip from './DisplayNamesWithTooltip';
 import DisplayNamesProps from './types';
 
 function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, shouldUseFullTitle, displayNamesWithTooltips}: DisplayNamesProps) {
+    const {translate} = useLocalize();
+    const title = fullTitle || translate('common.hidden');
+
     if (!tooltipEnabled) {
         return (
             <DisplayNamesWithoutTooltip
                 textStyles={textStyles}
                 numberOfLines={numberOfLines}
-                fullTitle={fullTitle}
+                fullTitle={title}
             />
         );
     }
@@ -17,7 +21,7 @@ function DisplayNames({fullTitle, tooltipEnabled, textStyles, numberOfLines, sho
     return (
         <DisplayNamesWithToolTip
             shouldUseFullTitle={shouldUseFullTitle}
-            fullTitle={fullTitle}
+            fullTitle={title}
             displayNamesWithTooltips={displayNamesWithTooltips}
             textStyles={textStyles}
             numberOfLines={numberOfLines}
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.js b/src/components/DistanceRequest/DistanceRequestFooter.js
index f53fadb8ab87..b212dae615e4 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.js
+++ b/src/components/DistanceRequest/DistanceRequestFooter.js
@@ -8,10 +8,8 @@ import _ from 'underscore';
 import Button from '@components/Button';
 import DistanceMapView from '@components/DistanceMapView';
 import * as Expensicons from '@components/Icon/Expensicons';
-import PendingMapView from '@components/MapView/PendingMapView';
 import transactionPropTypes from '@components/transactionPropTypes';
 import useLocalize from '@hooks/useLocalize';
-import useNetwork from '@hooks/useNetwork';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -57,7 +55,6 @@ const defaultProps = {
 function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navigateToWaypointEditPage}) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {isOffline} = useNetwork();
     const {translate} = useLocalize();
 
     const numberOfWaypoints = _.size(waypoints);
@@ -114,28 +111,20 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
                 </View>
             )}
             <View style={styles.mapViewContainer}>
-                {!isOffline && Boolean(mapboxAccessToken.token) ? (
-                    <DistanceMapView
-                        accessToken={mapboxAccessToken.token}
-                        mapPadding={CONST.MAPBOX.PADDING}
-                        pitchEnabled={false}
-                        initialState={{
-                            zoom: CONST.MAPBOX.DEFAULT_ZOOM,
-                            location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
-                        }}
-                        directionCoordinates={lodashGet(transaction, 'routes.route0.geometry.coordinates', [])}
-                        style={[styles.mapView, styles.mapEditView]}
-                        waypoints={waypointMarkers}
-                        styleURL={CONST.MAPBOX.STYLE_URL}
-                        overlayStyle={styles.mapEditView}
-                    />
-                ) : (
-                    <PendingMapView
-                        title={translate('distance.mapPending.title')}
-                        subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
-                        style={styles.mapEditView}
-                    />
-                )}
+                <DistanceMapView
+                    accessToken={mapboxAccessToken.token}
+                    mapPadding={CONST.MAPBOX.PADDING}
+                    pitchEnabled={false}
+                    initialState={{
+                        zoom: CONST.MAPBOX.DEFAULT_ZOOM,
+                        location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
+                    }}
+                    directionCoordinates={lodashGet(transaction, 'routes.route0.geometry.coordinates', [])}
+                    style={[styles.mapView, styles.mapEditView]}
+                    waypoints={waypointMarkers}
+                    styleURL={CONST.MAPBOX.STYLE_URL}
+                    overlayStyle={styles.mapEditView}
+                />
             </View>
         </>
     );
diff --git a/src/components/DotIndicatorMessage.js b/src/components/DotIndicatorMessage.tsx
similarity index 53%
rename from src/components/DotIndicatorMessage.js
rename to src/components/DotIndicatorMessage.tsx
index 735d9e3e6924..b90093e20fc3 100644
--- a/src/components/DotIndicatorMessage.js
+++ b/src/components/DotIndicatorMessage.tsx
@@ -1,20 +1,20 @@
-import PropTypes from 'prop-types';
+/* eslint-disable react/no-array-index-key */
 import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import fileDownload from '@libs/fileDownload';
 import * as Localize from '@libs/Localize';
-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 PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
+import {PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
 
-const propTypes = {
+type ReceiptError = {error?: string; source: string; filename: string};
+
+type DotIndicatorMessageProps = {
     /**
      * In most cases this should just be errors from onxyData
      * if you are not passing that data then this needs to be in a similar shape like
@@ -22,66 +22,46 @@ const propTypes = {
      *      timestamp: 'message',
      *  }
      */
-    messages: PropTypes.objectOf(
-        PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.object]), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]),
-    ),
-
-    // The type of message, 'error' shows a red dot, 'success' shows a green dot
-    type: PropTypes.oneOf(['error', 'success']).isRequired,
+    messages: Record<string, Localize.MaybePhraseKey>;
 
-    // Additional styles to apply to the container */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.arrayOf(PropTypes.object),
+    /** The type of message, 'error' shows a red dot, 'success' shows a green dot */
+    type: 'error' | 'success';
 
-    // Additional styles to apply to the text
-    textStyles: stylePropTypes,
-};
+    /** Additional styles to apply to the container */
+    style?: StyleProp<ViewStyle>;
 
-const defaultProps = {
-    messages: {},
-    style: [],
-    textStyles: [],
+    /** Additional styles to apply to the text */
+    textStyles?: StyleProp<TextStyle>;
 };
 
-/**
- * Check if the error includes a receipt.
- *
- * @param {String} message
- * @returns {Boolean}
- */
-const isReceiptError = (message) => {
-    if (_.isString(message)) {
+/** Check if the error includes a receipt. */
+function isReceiptError(message: string | ReceiptError): message is ReceiptError {
+    if (typeof message === 'string') {
         return false;
     }
-    return _.get(message, 'error', '') === CONST.IOU.RECEIPT_ERROR;
-};
+    return (message?.error ?? '') === CONST.IOU.RECEIPT_ERROR;
+}
 
-function DotIndicatorMessage(props) {
+function DotIndicatorMessage({messages = {}, style, type, textStyles}: DotIndicatorMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    if (_.isEmpty(props.messages)) {
+
+    if (Object.keys(messages).length === 0) {
         return null;
     }
 
-    // To ensure messages are presented in order we are sort of destroying the data we are given
-    // and rebuilding as an array so we can render the messages in order. We don't really care about
-    // the microtime timestamps anyways so isn't the end of the world that we sort of lose them here.
-    // BEWARE: if you decide to refactor this and keep the microtime keys it could cause performance issues
-    const sortedMessages = _.chain(props.messages)
-        .keys()
-        .sortBy()
-        .map((key) => props.messages[key])
+    // Fetch the keys, sort them, and map through each key to get the corresponding message
+    const sortedMessages = Object.keys(messages)
+        .sort()
+        .map((key) => messages[key]);
 
-        // Using uniq here since some fields are wrapped by the same OfflineWithFeedback component (e.g. WorkspaceReimburseView)
-        // and can potentially pass the same error.
-        .uniq()
-        .map((message) => Localize.translateIfPhraseKey(message))
-        .value();
+    // Removing duplicates using Set and transforming the result into an array
+    const uniqueMessages = [...new Set(sortedMessages)].map((message) => Localize.translateIfPhraseKey(message));
 
-    const isErrorMessage = props.type === 'error';
+    const isErrorMessage = type === 'error';
 
     return (
-        <View style={[styles.dotIndicatorMessage, ...props.style]}>
+        <View style={[styles.dotIndicatorMessage, style]}>
             <View style={styles.offlineFeedback.errorDot}>
                 <Icon
                     src={Expensicons.DotIndicator}
@@ -89,9 +69,10 @@ function DotIndicatorMessage(props) {
                 />
             </View>
             <View style={styles.offlineFeedback.textContainer}>
-                {_.map(sortedMessages, (message, i) =>
+                {uniqueMessages.map((message, i) =>
                     isReceiptError(message) ? (
                         <PressableWithoutFeedback
+                            accessibilityLabel={Localize.translateLocal('iou.error.saveFileMessage')}
                             key={i}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
                             onPress={() => {
@@ -109,8 +90,9 @@ function DotIndicatorMessage(props) {
                         </PressableWithoutFeedback>
                     ) : (
                         <Text
+                            // eslint-disable-next-line react/no-array-index-key
                             key={i}
-                            style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), ...props.textStyles]}
+                            style={[StyleUtils.getDotIndicatorTextStyles(styles, isErrorMessage), textStyles]}
                         >
                             {message}
                         </Text>
@@ -121,8 +103,6 @@ function DotIndicatorMessage(props) {
     );
 }
 
-DotIndicatorMessage.propTypes = propTypes;
-DotIndicatorMessage.defaultProps = defaultProps;
 DotIndicatorMessage.displayName = 'DotIndicatorMessage';
 
 export default DotIndicatorMessage;
diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index 6ced702b316c..aeb31dd87397 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -38,7 +38,11 @@ function CategoryShortcutButton(props) {
                 onPress={props.onPress}
                 onHoverIn={() => setIsHighlighted(true)}
                 onHoverOut={() => setIsHighlighted(false)}
-                style={({pressed}) => [StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.categoryShortcutButton, isHighlighted && styles.emojiItemHighlighted]}
+                style={({pressed}) => [
+                    StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(false, pressed)),
+                    styles.categoryShortcutButton,
+                    isHighlighted && styles.emojiItemHighlighted,
+                ]}
                 accessibilityLabel={`emojiPicker.headers.${props.code}`}
                 role={CONST.ACCESSIBILITY_ROLE.BUTTON}
             >
diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
index db1834296a52..f61c4624db32 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -7,6 +7,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 
@@ -31,6 +32,7 @@ const defaultProps = {
 
 function EmojiPickerButton(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const emojiPopoverAnchor = useRef(null);
 
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
@@ -39,7 +41,7 @@ function EmojiPickerButton(props) {
         <Tooltip text={props.translate('reportActionCompose.emoji')}>
             <PressableWithoutFeedback
                 ref={emojiPopoverAnchor}
-                style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]}
+                style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed))]}
                 disabled={props.isDisabled}
                 onPress={() => {
                     if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) {
@@ -54,7 +56,7 @@ function EmojiPickerButton(props) {
                 {({hovered, pressed}) => (
                     <Icon
                         src={Expensicons.Emoji}
-                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                        fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed))}
                     />
                 )}
             </PressableWithoutFeedback>
diff --git a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
index 7b4f4066593c..fe659612c846 100644
--- a/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
+++ b/src/components/EmojiPicker/EmojiPickerButtonDropdown.js
@@ -9,6 +9,7 @@ import Tooltip from '@components/Tooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import CONST from '@src/CONST';
@@ -26,6 +27,7 @@ const defaultProps = {
 
 function EmojiPickerButtonDropdown(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const emojiPopoverAnchor = useRef(null);
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
 
@@ -64,7 +66,7 @@ function EmojiPickerButtonDropdown(props) {
                         <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled, styles.rotate90]}>
                             <Icon
                                 src={Expensicons.ArrowRight}
-                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                                fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed))}
                             />
                         </View>
                     </View>
diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js
index 0ee12579733d..25a534b94758 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js
@@ -18,8 +18,8 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,6 +51,8 @@ const throttleTime = Browser.isMobile() ? 200 : 50;
 function EmojiPickerMenu(props) {
     const {forwardedRef, frequentlyUsedEmojis, preferredSkinTone, onEmojiSelected, preferredLocale, translate} = props;
 
+    const styles = useThemeStyles();
+
     const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
 
     // Ref for the emoji search input
@@ -462,7 +464,7 @@ function EmojiPickerMenu(props) {
                 />
             );
         },
-        [isUsingKeyboardMovement, highlightedIndex, onEmojiSelected, preferredSkinTone, translate, highlightFirstEmoji],
+        [preferredSkinTone, highlightedIndex, isUsingKeyboardMovement, highlightFirstEmoji, styles, translate, onEmojiSelected],
     );
 
     const isFiltered = emojis.current.length !== filteredEmojis.length;
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
index 24f876841ff7..f674d3c4fa0e 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import * as Browser from '@libs/Browser';
 import getButtonState from '@libs/getButtonState';
@@ -32,7 +33,9 @@ const propTypes = {
 
     /** Whether the menu item should be highlighted or not */
     isHighlighted: PropTypes.bool,
+
     ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 class EmojiPickerMenuItem extends PureComponent {
@@ -97,7 +100,7 @@ class EmojiPickerMenuItem extends PureComponent {
                 style={({pressed}) => [
                     this.props.isFocused ? this.props.themeStyles.emojiItemKeyboardHighlighted : {},
                     this.state.isHovered || this.props.isHighlighted ? this.props.themeStyles.emojiItemHighlighted : {},
-                    Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                    Browser.isMobile() && StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(false, pressed)),
                     this.props.themeStyles.emojiItem,
                 ]}
                 accessibilityLabel={this.props.emoji}
@@ -121,9 +124,11 @@ EmojiPickerMenuItem.defaultProps = {
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
 // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action.
-export default withThemeStyles(
-    React.memo(
-        EmojiPickerMenuItem,
-        (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji,
+export default withTheme(
+    withThemeStyles(
+        React.memo(
+            EmojiPickerMenuItem,
+            (prevProps, nextProps) => prevProps.isFocused === nextProps.isFocused && prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji,
+        ),
     ),
 );
diff --git a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
index 151fabf85be3..ca24dde6b861 100644
--- a/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
+++ b/src/components/EmojiPicker/EmojiPickerMenuItem/index.native.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -34,7 +35,9 @@ const propTypes = {
 
     /** Whether the emoji is highlighted by the keyboard/mouse */
     isUsingKeyboardMovement: PropTypes.bool,
+
     ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 class EmojiPickerMenuItem extends PureComponent {
@@ -72,7 +75,7 @@ class EmojiPickerMenuItem extends PureComponent {
                 onBlur={this.props.onBlur}
                 ref={(ref) => (this.ref = ref)}
                 style={({pressed}) => [
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                    StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(false, pressed)),
                     this.props.isHighlighted && this.props.isUsingKeyboardMovement ? this.props.themeStyles.emojiItemKeyboardHighlighted : {},
                     this.props.isHighlighted && !this.props.isUsingKeyboardMovement ? this.props.themeStyles.emojiItemHighlighted : {},
                     this.props.themeStyles.emojiItem,
@@ -99,10 +102,12 @@ EmojiPickerMenuItem.defaultProps = {
 
 // Significantly speeds up re-renders of the EmojiPickerMenu's FlatList
 // by only re-rendering at most two EmojiPickerMenuItems that are highlighted/un-highlighted per user action.
-export default withThemeStyles(
-    React.memo(
-        EmojiPickerMenuItem,
-        (prevProps, nextProps) =>
-            prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement,
+export default withTheme(
+    withThemeStyles(
+        React.memo(
+            EmojiPickerMenuItem,
+            (prevProps, nextProps) =>
+                prevProps.isHighlighted === nextProps.isHighlighted && prevProps.emoji === nextProps.emoji && prevProps.isUsingKeyboardMovement === nextProps.isUsingKeyboardMovement,
+        ),
     ),
 );
diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx
index bb983a680af8..1f14a63462bd 100644
--- a/src/components/EmojiSuggestions.tsx
+++ b/src/components/EmojiSuggestions.tsx
@@ -4,6 +4,7 @@ import type {SimpleEmoji} from '@libs/EmojiTrie';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getStyledTextArray from '@libs/GetStyledTextArray';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import Text from './Text';
@@ -43,6 +44,7 @@ const keyExtractor = (item: SimpleEmoji, index: number): string => `${item.name}
 
 function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferredSkinToneIndex, highlightedEmojiIndex = 0, measureParentContainer = () => {}}: EmojiSuggestionsProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     /**
      * Render an emoji suggestion menu item component.
      */
@@ -60,7 +62,7 @@ function EmojiSuggestions({emojis, onSelect, prefix, isEmojiPickerLarge, preferr
                     {styledTextArray.map(({text, isColored}) => (
                         <Text
                             key={`${text}+${isColored}`}
-                            style={StyleUtils.getColoredBackgroundStyle(isColored)}
+                            style={StyleUtils.getColoredBackgroundStyle(theme, isColored)}
                         >
                             {text}
                         </Text>
diff --git a/src/components/EnvironmentBadge.tsx b/src/components/EnvironmentBadge.tsx
index c31677a8f5c3..a3f321072988 100644
--- a/src/components/EnvironmentBadge.tsx
+++ b/src/components/EnvironmentBadge.tsx
@@ -15,10 +15,10 @@ const ENVIRONMENT_SHORT_FORM = {
 
 function EnvironmentBadge() {
     const styles = useThemeStyles();
-    const {environment} = useEnvironment();
+    const {environment, isProduction} = useEnvironment();
 
     // If we are on production, don't show any badge
-    if (environment === CONST.ENVIRONMENT.PRODUCTION || environment === undefined) {
+    if (isProduction) {
         return null;
     }
 
diff --git a/src/components/ExpensifyWordmark.tsx b/src/components/ExpensifyWordmark.tsx
index 45c0c9bcef1e..1402b48df0d9 100644
--- a/src/components/ExpensifyWordmark.tsx
+++ b/src/components/ExpensifyWordmark.tsx
@@ -30,7 +30,7 @@ function ExpensifyWordmark({isSmallScreenWidth, style}: ExpensifyWordmarkProps)
     const styles = useThemeStyles();
     const {environment} = useEnvironment();
     // PascalCase is required for React components, so capitalize the const here
-    const LogoComponent = environment ? logoComponents[environment] : AdHocLogo;
+    const LogoComponent = logoComponents[environment];
 
     return (
         <>
diff --git a/src/components/FeatureList.js b/src/components/FeatureList.js
index 85195864cdc3..7b0c70372579 100644
--- a/src/components/FeatureList.js
+++ b/src/components/FeatureList.js
@@ -42,6 +42,7 @@ function FeatureList({menuItems, headline, description}) {
                     iconHeight={60}
                     iconStyles={[styles.mr3, styles.ml3]}
                     interactive={false}
+                    wrapperStyle={[styles.cursorAuto]}
                 />
             ))}
         </>
diff --git a/src/components/FixedFooter.tsx b/src/components/FixedFooter.tsx
index 34bce2133a89..475de82fac35 100644
--- a/src/components/FixedFooter.tsx
+++ b/src/components/FixedFooter.tsx
@@ -7,12 +7,12 @@ type FixedFooterProps = {
     children: ReactNode;
 
     /** Styles to be assigned to Container */
-    style: Array<StyleProp<ViewStyle>>;
+    style?: StyleProp<ViewStyle>;
 };
 
 function FixedFooter({style = [], children}: FixedFooterProps) {
     const styles = useThemeStyles();
-    return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, ...style]}>{children}</View>;
+    return <View style={[styles.ph5, styles.pb5, styles.flexShrink0, style]}>{children}</View>;
 }
 
 FixedFooter.displayName = 'FixedFooter';
diff --git a/src/components/FlatList/index.android.js b/src/components/FlatList/index.android.js
index fdb3a24667aa..f7c3da39ed84 100644
--- a/src/components/FlatList/index.android.js
+++ b/src/components/FlatList/index.android.js
@@ -1,7 +1,8 @@
 import {useFocusEffect} from '@react-navigation/native';
 import PropTypes from 'prop-types';
-import React, {forwardRef, useCallback, useState} from 'react';
+import React, {forwardRef, useCallback, useContext} from 'react';
 import {FlatList} from 'react-native';
+import {ActionListContext} from '@pages/home/ReportScreenContext';
 
 const propTypes = {
     /** Same as for FlatList */
@@ -32,7 +33,7 @@ const defaultProps = {
 // FlatList wrapped with the freeze component will lose its scroll state when frozen (only for Android).
 // CustomFlatList saves the offset and use it for scrollToOffset() when unfrozen.
 function CustomFlatList(props) {
-    const [scrollPosition, setScrollPosition] = useState({});
+    const {scrollPosition, setScrollPosition} = useContext(ActionListContext);
 
     const onScreenFocus = useCallback(() => {
         if (!props.innerRef.current || !scrollPosition.offset) {
diff --git a/src/components/Form/FormProvider.js b/src/components/Form/FormProvider.js
index 776aaae688ed..6908faaf3a01 100644
--- a/src/components/Form/FormProvider.js
+++ b/src/components/Form/FormProvider.js
@@ -56,9 +56,7 @@ const propTypes = {
     /** Whether the form submit action is dangerous */
     isSubmitActionDangerous: PropTypes.bool,
 
-    /** Whether ScrollWithContext should be used instead of regular ScrollView.
-     *  Set to true when there's a nested Picker component in Form.
-     */
+    /** Whether ScrollWithContext should be used instead of regular ScrollView. Set to true when there's a nested Picker component in Form. */
     scrollContextEnabled: PropTypes.bool,
 
     /** Container styles */
@@ -70,11 +68,18 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** Should validate function be called when input loose focus */
     shouldValidateOnBlur: PropTypes.bool,
 
+    /** Should validate function be called when the value of the input is changed */
     shouldValidateOnChange: PropTypes.bool,
 };
 
+// In order to prevent Checkbox focus loss when the user are focusing a TextInput and proceeds to toggle a CheckBox in web and mobile web.
+// 200ms delay was chosen as a result of empirical testing.
+// More details: https://github.com/Expensify/App/pull/16444#issuecomment-1482983426
+const VALIDATE_DELAY = 200;
+
 const defaultProps = {
     isSubmitButtonVisible: true,
     formState: {
@@ -232,6 +237,8 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     .first()
                     .value() || '';
 
+            const value = !_.isUndefined(inputValues[`${inputID}ToDisplay`]) ? inputValues[`${inputID}ToDisplay`] : inputValues[inputID];
+
             return {
                 ...propsToParse,
                 ref:
@@ -244,24 +251,39 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                 inputID,
                 key: propsToParse.key || inputID,
                 errorText: errors[inputID] || fieldErrorMessage,
-                value: inputValues[inputID],
+                value,
                 // As the text input is controlled, we never set the defaultValue prop
                 // as this is already happening by the value prop.
                 defaultValue: undefined,
                 onTouched: (event) => {
-                    setTouchedInput(inputID);
+                    if (!propsToParse.shouldSetTouchedOnBlurOnly) {
+                        setTimeout(() => {
+                            setTouchedInput(inputID);
+                        }, VALIDATE_DELAY);
+                    }
                     if (_.isFunction(propsToParse.onTouched)) {
                         propsToParse.onTouched(event);
                     }
                 },
                 onPress: (event) => {
-                    setTouchedInput(inputID);
+                    if (!propsToParse.shouldSetTouchedOnBlurOnly) {
+                        setTimeout(() => {
+                            setTouchedInput(inputID);
+                        }, VALIDATE_DELAY);
+                    }
                     if (_.isFunction(propsToParse.onPress)) {
                         propsToParse.onPress(event);
                     }
                 },
-                onPressIn: (event) => {
-                    setTouchedInput(inputID);
+                onPressOut: (event) => {
+                    // To prevent validating just pressed inputs, we need to set the touched input right after
+                    // onValidate and to do so, we need to delays setTouchedInput of the same amount of time
+                    // as the onValidate is delayed
+                    if (!propsToParse.shouldSetTouchedOnBlurOnly) {
+                        setTimeout(() => {
+                            setTouchedInput(inputID);
+                        }, VALIDATE_DELAY);
+                    }
                     if (_.isFunction(propsToParse.onPressIn)) {
                         propsToParse.onPressIn(event);
                     }
@@ -282,20 +304,26 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                             if (shouldValidateOnBlur) {
                                 onValidate(inputValues, !hasServerError);
                             }
-                        }, 200);
+                        }, VALIDATE_DELAY);
                     }
 
                     if (_.isFunction(propsToParse.onBlur)) {
                         propsToParse.onBlur(event);
                     }
                 },
-                onInputChange: (value, key) => {
+                onInputChange: (inputValue, key) => {
                     const inputKey = key || inputID;
                     setInputValues((prevState) => {
-                        const newState = {
-                            ...prevState,
-                            [inputKey]: value,
-                        };
+                        const newState = _.isFunction(propsToParse.valueParser)
+                            ? {
+                                  ...prevState,
+                                  [inputKey]: propsToParse.valueParser(inputValue),
+                                  [`${inputKey}ToDisplay`]: _.isFunction(propsToParse.displayParser) ? propsToParse.displayParser(inputValue) : inputValue,
+                              }
+                            : {
+                                  ...prevState,
+                                  [inputKey]: inputValue,
+                              };
 
                         if (shouldValidateOnChange) {
                             onValidate(newState);
@@ -308,7 +336,7 @@ function FormProvider({validate, formID, shouldValidateOnBlur, shouldValidateOnC
                     }
 
                     if (_.isFunction(propsToParse.onValueChange)) {
-                        propsToParse.onValueChange(value, inputKey);
+                        propsToParse.onValueChange(inputValue, inputKey);
                     }
                 },
             };
diff --git a/src/components/Form/FormWrapper.js b/src/components/Form/FormWrapper.js
index 4f7346a94a2d..638b6e5f8d19 100644
--- a/src/components/Form/FormWrapper.js
+++ b/src/components/Form/FormWrapper.js
@@ -5,6 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import FormSubmit from '@components/FormSubmit';
+import refPropTypes from '@components/refPropTypes';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import * as ErrorUtils from '@libs/ErrorUtils';
@@ -64,7 +65,7 @@ const propTypes = {
 
     errors: errorsPropType.isRequired,
 
-    inputRefs: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])).isRequired,
+    inputRefs: PropTypes.objectOf(refPropTypes).isRequired,
 };
 
 const defaultProps = {
diff --git a/src/components/Form/InputWrapper.js b/src/components/Form/InputWrapper.js
index 99237fd8db43..11e74d2759b1 100644
--- a/src/components/Form/InputWrapper.js
+++ b/src/components/Form/InputWrapper.js
@@ -1,24 +1,35 @@
 import PropTypes from 'prop-types';
 import React, {forwardRef, useContext} from 'react';
+import refPropTypes from '@components/refPropTypes';
+import TextInput from '@components/TextInput';
 import FormContext from './FormContext';
 
 const propTypes = {
     InputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]).isRequired,
     inputID: PropTypes.string.isRequired,
     valueType: PropTypes.string,
-    forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+    forwardedRef: refPropTypes,
+    valueParser: PropTypes.func,
+    displayParser: PropTypes.func,
 };
 
 const defaultProps = {
     forwardedRef: undefined,
     valueType: 'string',
+    valueParser: undefined,
+    displayParser: undefined,
 };
 
 function InputWrapper(props) {
     const {InputComponent, inputID, forwardedRef, ...rest} = props;
     const {registerInput} = useContext(FormContext);
+    // There are inputs that dont have onBlur methods, to simulate the behavior of onBlur in e.g. checkbox, we had to
+    // use different methods like onPress. This introduced a problem that inputs that have the onBlur method were
+    // calling some methods too early or twice, so we had to add this check to prevent that side effect.
+    // For now this side effect happened only in `TextInput` components.
+    const shouldSetTouchedOnBlurOnly = InputComponent === TextInput;
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <InputComponent {...registerInput(inputID, {ref: forwardedRef, ...rest})} />;
+    return <InputComponent {...registerInput(inputID, {ref: forwardedRef, shouldSetTouchedOnBlurOnly, ...rest})} />;
 }
 
 InputWrapper.propTypes = propTypes;
diff --git a/src/components/GrowlNotification/index.js b/src/components/GrowlNotification/index.js
index 5fdbe205f87b..86850a8af96d 100644
--- a/src/components/GrowlNotification/index.js
+++ b/src/components/GrowlNotification/index.js
@@ -7,26 +7,11 @@ import * as Pressables from '@components/Pressable';
 import Text from '@components/Text';
 import * as Growl from '@libs/Growl';
 import useNativeDriver from '@libs/useNativeDriver';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import GrowlNotificationContainer from './GrowlNotificationContainer';
 
-const types = {
-    [CONST.GROWL.SUCCESS]: {
-        icon: Expensicons.Checkmark,
-        iconColor: themeColors.success,
-    },
-    [CONST.GROWL.ERROR]: {
-        icon: Expensicons.Exclamation,
-        iconColor: themeColors.danger,
-    },
-    [CONST.GROWL.WARNING]: {
-        icon: Expensicons.Exclamation,
-        iconColor: themeColors.warning,
-    },
-};
-
 const INACTIVE_POSITION_Y = -255;
 
 const PressableWithoutFeedback = Pressables.PressableWithoutFeedback;
@@ -36,6 +21,23 @@ function GrowlNotification(_, ref) {
     const [bodyText, setBodyText] = useState('');
     const [type, setType] = useState('success');
     const [duration, setDuration] = useState();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    const types = {
+        [CONST.GROWL.SUCCESS]: {
+            icon: Expensicons.Checkmark,
+            iconColor: theme.success,
+        },
+        [CONST.GROWL.ERROR]: {
+            icon: Expensicons.Exclamation,
+            iconColor: theme.danger,
+        },
+        [CONST.GROWL.WARNING]: {
+            icon: Expensicons.Exclamation,
+            iconColor: theme.warning,
+        },
+    };
 
     /**
      * Show the growl notification
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index c4eed0134008..8cddd3c017de 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -4,7 +4,7 @@ import {defaultHTMLElementModels, RenderHTMLConfigProvider, TRenderEngineProvide
 import _ from 'underscore';
 import convertToLTR from '@libs/convertToLTR';
 import singleFontFamily from '@styles/fontFamily/singleFontFamily';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as HTMLEngineUtils from './htmlEngineUtils';
 import htmlRenderers from './HTMLRenderers';
 
@@ -24,45 +24,49 @@ const defaultProps = {
     enableExperimentalBRCollapsing: false,
 };
 
-// Declare nonstandard tags and their content model here
-const customHTMLElementModels = {
-    edited: defaultHTMLElementModels.span.extend({
-        tagName: 'edited',
-    }),
-    'alert-text': defaultHTMLElementModels.div.extend({
-        tagName: 'alert-text',
-        mixedUAStyles: {...styles.formError, ...styles.mb0},
-    }),
-    'muted-text': defaultHTMLElementModels.div.extend({
-        tagName: 'muted-text',
-        mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
-    }),
-    comment: defaultHTMLElementModels.div.extend({
-        tagName: 'comment',
-        mixedUAStyles: {whiteSpace: 'pre'},
-    }),
-    'email-comment': defaultHTMLElementModels.div.extend({
-        tagName: 'email-comment',
-        mixedUAStyles: {whiteSpace: 'normal'},
-    }),
-    strong: defaultHTMLElementModels.span.extend({
-        tagName: 'strong',
-        mixedUAStyles: {whiteSpace: 'pre'},
-    }),
-    'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
-    'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
-};
-
-const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
-
 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing
 // context to RenderHTMLSource components. See https://git.io/JRcZb
 // Beware that each prop should be referentialy stable between renders to avoid
 // costly invalidations and commits.
 function BaseHTMLEngineProvider(props) {
+    const styles = useThemeStyles();
+
+    // Declare nonstandard tags and their content model here
+    const customHTMLElementModels = useMemo(
+        () => ({
+            edited: defaultHTMLElementModels.span.extend({
+                tagName: 'edited',
+            }),
+            'alert-text': defaultHTMLElementModels.div.extend({
+                tagName: 'alert-text',
+                mixedUAStyles: {...styles.formError, ...styles.mb0},
+            }),
+            'muted-text': defaultHTMLElementModels.div.extend({
+                tagName: 'muted-text',
+                mixedUAStyles: {...styles.colorMuted, ...styles.mb0},
+            }),
+            comment: defaultHTMLElementModels.div.extend({
+                tagName: 'comment',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
+            'email-comment': defaultHTMLElementModels.div.extend({
+                tagName: 'email-comment',
+                mixedUAStyles: {whiteSpace: 'normal'},
+            }),
+            strong: defaultHTMLElementModels.span.extend({
+                tagName: 'strong',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
+            'mention-user': defaultHTMLElementModels.span.extend({tagName: 'mention-user'}),
+            'mention-here': defaultHTMLElementModels.span.extend({tagName: 'mention-here'}),
+        }),
+        [styles.colorMuted, styles.formError, styles.mb0],
+    );
+
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
+    const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
 
     return (
         <TRenderEngineProvider
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
index eb238ec0dd7d..65c287b8e86b 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionHereRenderer.js
@@ -3,15 +3,17 @@ import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
 import Text from '@components/Text';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
 function MentionHereRenderer(props) {
+    const theme = useTheme();
     return (
         <Text>
             <Text
                 // Passing the true value to the function as here mention is always for the current user
-                color={StyleUtils.getMentionTextColor(true)}
-                style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(true)]}
+                color={StyleUtils.getMentionTextColor(theme, true)}
+                style={[_.omit(props.style, 'color'), StyleUtils.getMentionStyle(theme, true)]}
             >
                 <TNodeChildrenRenderer tnode={props.tnode} />
             </Text>
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
index a60be614d9bc..fc53c8c51611 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.js
@@ -1,23 +1,22 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
 import {TNodeChildrenRenderer} from 'react-native-render-html';
 import _ from 'underscore';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import {ShowContextMenuContext, showContextMenuForReport} from '@components/ShowContextMenuContext';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
-import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import htmlRendererPropTypes from './htmlRendererPropTypes';
 
@@ -26,23 +25,22 @@ const propTypes = {
 
     /** Current user personal details */
     currentUserPersonalDetails: personalDetailsPropType.isRequired,
-
-    /** Personal details of all users */
-    personalDetails: personalDetailsPropType.isRequired,
 };
 
 function MentionUserRenderer(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style']);
     const htmlAttribAccountID = lodashGet(props.tnode.attributes, 'accountid');
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     let accountID;
     let displayNameOrLogin;
     let navigationRoute;
 
     if (!_.isEmpty(htmlAttribAccountID)) {
-        const user = lodashGet(props.personalDetails, htmlAttribAccountID);
+        const user = lodashGet(personalDetails, htmlAttribAccountID);
         accountID = parseInt(htmlAttribAccountID, 10);
         displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(lodashGet(user, 'login', '')) || lodashGet(user, 'displayName', '') || translate('common.hidden');
         navigationRoute = ROUTES.PROFILE.getRoute(htmlAttribAccountID);
@@ -79,7 +77,7 @@ function MentionUserRenderer(props) {
                         }}
                     >
                         <Text
-                            style={[styles.link, _.omit(props.style, 'color'), StyleUtils.getMentionStyle(isOurMention), {color: StyleUtils.getMentionTextColor(isOurMention)}]}
+                            style={[styles.link, _.omit(props.style, 'color'), StyleUtils.getMentionStyle(theme, isOurMention), {color: StyleUtils.getMentionTextColor(theme, isOurMention)}]}
                             accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
                             testID="span"
                             href={`/${navigationRoute}`}
@@ -98,11 +96,4 @@ function MentionUserRenderer(props) {
 MentionUserRenderer.propTypes = propTypes;
 MentionUserRenderer.displayName = 'MentionUserRenderer';
 
-export default compose(
-    withCurrentUserPersonalDetails,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-    }),
-)(MentionUserRenderer);
+export default withCurrentUserPersonalDetails(MentionUserRenderer);
diff --git a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js
index 1ad1f0961e38..109e60adf672 100644
--- a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js
+++ b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js
@@ -93,6 +93,9 @@ const propTypes = {
 
     /** Single execution function to prevent concurrent navigation actions */
     singleExecution: PropTypes.func,
+
+    /** Whether we should navigate to report page when the route have a topMostReport  */
+    shouldNavigateToTopMostReport: PropTypes.bool,
 };
 
 export default propTypes;
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
index edb3b8d26831..0434bd1f9bdd 100755
--- a/src/components/HeaderWithBackButton/index.js
+++ b/src/components/HeaderWithBackButton/index.js
@@ -15,6 +15,7 @@ import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -53,8 +54,10 @@ function HeaderWithBackButton({
     children = null,
     shouldOverlay = false,
     singleExecution = (func) => func,
+    shouldNavigateToTopMostReport = false,
 }) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const [isDownloadButtonActive, temporarilyDisableDownloadButton] = useThrottledButtonState();
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
@@ -74,7 +77,12 @@ function HeaderWithBackButton({
                                 if (isKeyboardShown) {
                                     Keyboard.dismiss();
                                 }
-                                onBackButtonPress();
+                                const topmostReportId = Navigation.getTopmostReportId();
+                                if (shouldNavigateToTopMostReport && topmostReportId) {
+                                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(topmostReportId));
+                                } else {
+                                    onBackButtonPress();
+                                }
                             }}
                             style={[styles.touchableButtonImage]}
                             role="button"
@@ -125,7 +133,7 @@ function HeaderWithBackButton({
                             >
                                 <Icon
                                     src={Expensicons.Download}
-                                    fill={iconFill || StyleUtils.getIconFillColor(getButtonState(false, false, !isDownloadButtonActive))}
+                                    fill={iconFill || StyleUtils.getIconFillColor(theme, getButtonState(false, false, !isDownloadButtonActive))}
                                 />
                             </PressableWithoutFeedback>
                         </Tooltip>
diff --git a/src/components/Hoverable/ActiveHoverable.tsx b/src/components/Hoverable/ActiveHoverable.tsx
new file mode 100644
index 000000000000..28ae36e8a556
--- /dev/null
+++ b/src/components/Hoverable/ActiveHoverable.tsx
@@ -0,0 +1,137 @@
+import {cloneElement, forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {DeviceEventEmitter} from 'react-native';
+import assignRef from '@libs/assignRef';
+import CONST from '@src/CONST';
+import HoverableProps from './types';
+
+type ActiveHoverableProps = Omit<HoverableProps, 'disabled'>;
+
+function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, children}: ActiveHoverableProps, outerRef: Ref<HTMLElement>) {
+    const [isHovered, setIsHovered] = useState(false);
+
+    const elementRef = useRef<HTMLElement | null>(null);
+    const isScrollingRef = useRef(false);
+    const isHoveredRef = useRef(false);
+
+    const updateIsHovered = useCallback(
+        (hovered: boolean) => {
+            isHoveredRef.current = hovered;
+            if (shouldHandleScroll && isScrollingRef.current) {
+                return;
+            }
+            setIsHovered(hovered);
+        },
+        [shouldHandleScroll],
+    );
+
+    // Expose inner ref to parent through outerRef. This enable us to use ref both in parent and child.
+    useImperativeHandle<HTMLElement | null, HTMLElement | null>(outerRef, () => elementRef.current, []);
+
+    useEffect(() => {
+        if (isHovered) {
+            onHoverIn?.();
+        } else {
+            onHoverOut?.();
+        }
+    }, [isHovered, onHoverIn, onHoverOut]);
+
+    useEffect(() => {
+        if (!shouldHandleScroll) {
+            return;
+        }
+
+        const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => {
+            isScrollingRef.current = scrolling;
+            if (!isScrollingRef.current) {
+                setIsHovered(isHoveredRef.current);
+            }
+        });
+
+        return () => scrollingListener.remove();
+    }, [shouldHandleScroll]);
+
+    useEffect(() => {
+        // Do not mount a listener if the component is not hovered
+        if (!isHovered) {
+            return;
+        }
+
+        /**
+         * Checks the hover state of a component and updates it based on the event target.
+         * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger,
+         * such as when an element is removed before the mouseleave event is triggered.
+         * @param event The hover event object.
+         */
+        const unsetHoveredIfOutside = (event: MouseEvent) => {
+            if (!elementRef.current || elementRef.current.contains(event.target as Node)) {
+                return;
+            }
+
+            setIsHovered(false);
+        };
+
+        document.addEventListener('mouseover', unsetHoveredIfOutside);
+
+        return () => document.removeEventListener('mouseover', unsetHoveredIfOutside);
+    }, [isHovered, elementRef]);
+
+    useEffect(() => {
+        const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false);
+
+        document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
+
+        return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
+    }, []);
+
+    const child = useMemo(() => (typeof children === 'function' ? children(!isScrollingRef.current && isHovered) : children), [children, isHovered]);
+
+    const childOnMouseEnter = child.props.onMouseEnter;
+    const childOnMouseLeave = child.props.onMouseLeave;
+
+    const hoverAndForwardOnMouseEnter = useCallback(
+        (e: MouseEvent) => {
+            updateIsHovered(true);
+            childOnMouseEnter?.(e);
+        },
+        [updateIsHovered, childOnMouseEnter],
+    );
+
+    const unhoverAndForwardOnMouseLeave = useCallback(
+        (e: MouseEvent) => {
+            updateIsHovered(false);
+            childOnMouseLeave?.(e);
+        },
+        [updateIsHovered, childOnMouseLeave],
+    );
+
+    const unhoverAndForwardOnBlur = useCallback(
+        (event: MouseEvent) => {
+            // Check if the blur event occurred due to clicking outside the element
+            // and the wrapperView contains the element that caused the blur and reset isHovered
+            if (!elementRef.current?.contains(event.target as Node) && !elementRef.current?.contains(event.relatedTarget as Node)) {
+                setIsHovered(false);
+            }
+
+            child.props.onBlur?.(event);
+        },
+        [child.props],
+    );
+
+    // We need to access the ref of a children from both parent and current component
+    // So we pass it to current ref and assign it once again to the child ref prop
+    const hijackRef = (el: HTMLElement) => {
+        elementRef.current = el;
+        if (child.ref) {
+            assignRef(child.ref, el);
+        }
+    };
+
+    return cloneElement(child, {
+        ref: hijackRef,
+        onMouseEnter: hoverAndForwardOnMouseEnter,
+        onMouseLeave: unhoverAndForwardOnMouseLeave,
+        onBlur: unhoverAndForwardOnBlur,
+    });
+}
+
+export default forwardRef(ActiveHoverable);
diff --git a/src/components/Hoverable/index.tsx b/src/components/Hoverable/index.tsx
index 9c641cfc19be..1dee5a943e35 100644
--- a/src/components/Hoverable/index.tsx
+++ b/src/components/Hoverable/index.tsx
@@ -1,212 +1,27 @@
-import React, {ForwardedRef, forwardRef, MutableRefObject, ReactElement, RefAttributes, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import {DeviceEventEmitter} from 'react-native';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import CONST from '@src/CONST';
+import React, {cloneElement, forwardRef, Ref} from 'react';
+import {hasHoverSupport} from '@libs/DeviceCapabilities';
+import ActiveHoverable from './ActiveHoverable';
 import HoverableProps from './types';
 
-/**
- * Maps the children of a Hoverable component to
- * - a function that is called with the parameter
- * - the child itself if it is the only child
- * @param children The children to map.
- * @param callbackParam The parameter to pass to the children function.
- * @returns The mapped children.
- */
-function mapChildren(children: ((isHovered: boolean) => ReactElement) | ReactElement | ReactElement[], callbackParam: boolean): ReactElement & RefAttributes<HTMLElement> {
-    if (Array.isArray(children)) {
-        return children[0];
-    }
-
-    if (typeof children === 'function') {
-        return children(callbackParam);
-    }
-
-    return children;
-}
-
-/**
- * Assigns a ref to an element, either by setting the current property of the ref object or by calling the ref function
- * @param ref The ref object or function.
- * @param element The element to assign the ref to.
- */
-function assignRef(ref: ((instance: HTMLElement | null) => void) | MutableRefObject<HTMLElement | null>, element: HTMLElement) {
-    if (!ref) {
-        return;
-    }
-    if (typeof ref === 'function') {
-        ref(element);
-    } else if ('current' in ref) {
-        // eslint-disable-next-line no-param-reassign
-        ref.current = element;
-    }
-}
-
 /**
  * It is necessary to create a Hoverable component instead of relying solely on Pressable support for hover state,
  * because nesting Pressables causes issues where the hovered state of the child cannot be easily propagated to the
  * parent. https://github.com/necolas/react-native-web/issues/1875
  */
-function Hoverable(
-    {disabled = false, onHoverIn = () => {}, onHoverOut = () => {}, onMouseEnter = () => {}, onMouseLeave = () => {}, children, shouldHandleScroll = false}: HoverableProps,
-    outerRef: ForwardedRef<HTMLElement>,
-) {
-    const [isHovered, setIsHovered] = useState(false);
-
-    const isScrolling = useRef(false);
-    const isHoveredRef = useRef(false);
-    const ref = useRef<HTMLElement | null>(null);
-
-    const updateIsHoveredOnScrolling = useCallback(
-        (hovered: boolean) => {
-            if (disabled) {
-                return;
-            }
-
-            isHoveredRef.current = hovered;
-
-            if (shouldHandleScroll && isScrolling.current) {
-                return;
-            }
-            setIsHovered(hovered);
-        },
-        [disabled, shouldHandleScroll],
-    );
-
-    useEffect(() => {
-        const unsetHoveredWhenDocumentIsHidden = () => document.visibilityState === 'hidden' && setIsHovered(false);
-
-        document.addEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
-
-        return () => document.removeEventListener('visibilitychange', unsetHoveredWhenDocumentIsHidden);
-    }, []);
-
-    useEffect(() => {
-        if (!shouldHandleScroll) {
-            return;
-        }
-
-        const scrollingListener = DeviceEventEmitter.addListener(CONST.EVENTS.SCROLLING, (scrolling) => {
-            isScrolling.current = scrolling;
-            if (!scrolling) {
-                setIsHovered(isHoveredRef.current);
-            }
-        });
-
-        return () => scrollingListener.remove();
-    }, [shouldHandleScroll]);
-
-    useEffect(() => {
-        if (!DeviceCapabilities.hasHoverSupport()) {
-            return;
-        }
-
-        /**
-         * Checks the hover state of a component and updates it based on the event target.
-         * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger,
-         * such as when an element is removed before the mouseleave event is triggered.
-         * @param event The hover event object.
-         */
-        const unsetHoveredIfOutside = (event: MouseEvent) => {
-            if (!ref.current || !isHovered) {
-                return;
-            }
-
-            if (ref.current.contains(event.target as Node)) {
-                return;
-            }
-
-            setIsHovered(false);
-        };
-
-        document.addEventListener('mouseover', unsetHoveredIfOutside);
-
-        return () => document.removeEventListener('mouseover', unsetHoveredIfOutside);
-    }, [isHovered]);
-
-    useEffect(() => {
-        if (!disabled || !isHovered) {
-            return;
-        }
-        setIsHovered(false);
-    }, [disabled, isHovered]);
-
-    useEffect(() => {
-        if (disabled) {
-            return;
-        }
-        if (onHoverIn && isHovered) {
-            return onHoverIn();
-        }
-        if (onHoverOut && !isHovered) {
-            return onHoverOut();
-        }
-    }, [disabled, isHovered, onHoverIn, onHoverOut]);
-
-    // Expose inner ref to parent through outerRef. This enable us to use ref both in parent and child.
-    useImperativeHandle<HTMLElement | null, HTMLElement | null>(outerRef, () => ref.current, []);
-
-    const child = useMemo(() => React.Children.only(mapChildren(children, isHovered)), [children, isHovered]);
-
-    const enableHoveredOnMouseEnter = useCallback(
-        (event: MouseEvent) => {
-            updateIsHoveredOnScrolling(true);
-            onMouseEnter(event);
-
-            if (typeof child.props.onMouseEnter === 'function') {
-                child.props.onMouseEnter(event);
-            }
-        },
-        [child.props, onMouseEnter, updateIsHoveredOnScrolling],
-    );
-
-    const disableHoveredOnMouseLeave = useCallback(
-        (event: MouseEvent) => {
-            updateIsHoveredOnScrolling(false);
-            onMouseLeave(event);
-
-            if (typeof child.props.onMouseLeave === 'function') {
-                child.props.onMouseLeave(event);
-            }
-        },
-        [child.props, onMouseLeave, updateIsHoveredOnScrolling],
-    );
-
-    const disableHoveredOnBlur = useCallback(
-        (event: MouseEvent) => {
-            // Check if the blur event occurred due to clicking outside the element
-            // and the wrapperView contains the element that caused the blur and reset isHovered
-            if (!ref.current?.contains(event.target as Node) && !ref.current?.contains(event.relatedTarget as Node)) {
-                setIsHovered(false);
-            }
-
-            if (typeof child.props.onBlur === 'function') {
-                child.props.onBlur(event);
-            }
-        },
-        [child.props],
-    );
-
-    // We need to access the ref of a children from both parent and current component
-    // So we pass it to current ref and assign it once again to the child ref prop
-    const hijackRef = (el: HTMLElement) => {
-        ref.current = el;
-        if (child.ref) {
-            assignRef(child.ref, el);
-        }
-    };
-
-    if (!DeviceCapabilities.hasHoverSupport()) {
-        return React.cloneElement(child, {
-            ref: hijackRef,
-        });
+function Hoverable({isDisabled, ...props}: HoverableProps, ref: Ref<HTMLElement>) {
+    // If Hoverable is disabled, just render the child without additional logic or event listeners.
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    if (isDisabled || !hasHoverSupport()) {
+        return cloneElement(typeof props.children === 'function' ? props.children(false) : props.children, {ref});
     }
 
-    return React.cloneElement(child, {
-        ref: hijackRef,
-        onMouseEnter: enableHoveredOnMouseEnter,
-        onMouseLeave: disableHoveredOnMouseLeave,
-        onBlur: disableHoveredOnBlur,
-    });
+    return (
+        <ActiveHoverable
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+        />
+    );
 }
 
 export default forwardRef(Hoverable);
diff --git a/src/components/Hoverable/types.ts b/src/components/Hoverable/types.ts
index 430b865f50c5..bea066bdb3bb 100644
--- a/src/components/Hoverable/types.ts
+++ b/src/components/Hoverable/types.ts
@@ -1,11 +1,11 @@
-import {ReactElement} from 'react';
+import {ReactElement, RefAttributes} from 'react';
 
 type HoverableProps = {
     /** Children to wrap with Hoverable. */
-    children: ((isHovered: boolean) => ReactElement) | ReactElement;
+    children: ((isHovered: boolean) => ReactElement & RefAttributes<HTMLElement>) | (ReactElement & RefAttributes<HTMLElement>);
 
     /** Whether to disable the hover action */
-    disabled?: boolean;
+    isDisabled?: boolean;
 
     /** Function that executes when the mouse moves over the children. */
     onHoverIn?: () => void;
@@ -13,12 +13,6 @@ type HoverableProps = {
     /** Function that executes when the mouse leaves the children. */
     onHoverOut?: () => void;
 
-    /** Direct pass-through of React's onMouseEnter event. */
-    onMouseEnter?: (event: MouseEvent) => void;
-
-    /** Direct pass-through of React's onMouseLeave event. */
-    onMouseLeave?: (event: MouseEvent) => void;
-
     /** Decides whether to handle the scroll behaviour to show hover once the scroll ends */
     shouldHandleScroll?: boolean;
 };
diff --git a/src/components/Icon/BankIcons.ts b/src/components/Icon/BankIcons.ts
index 5d17e7f0c991..81e9075091c6 100644
--- a/src/components/Icon/BankIcons.ts
+++ b/src/components/Icon/BankIcons.ts
@@ -1,163 +1,130 @@
-import {CSSProperties} from 'react';
-import {ViewStyle} from 'react-native';
 import {SvgProps} from 'react-native-svg';
-import AmericanExpress from '@assets/images/bankicons/american-express.svg';
-import BankOfAmerica from '@assets/images/bankicons/bank-of-america.svg';
-import BB_T from '@assets/images/bankicons/bb-t.svg';
-import CapitalOne from '@assets/images/bankicons/capital-one.svg';
-import CharlesSchwab from '@assets/images/bankicons/charles-schwab.svg';
-import Chase from '@assets/images/bankicons/chase.svg';
-import CitiBank from '@assets/images/bankicons/citibank.svg';
-import CitizensBank from '@assets/images/bankicons/citizens-bank.svg';
-import Discover from '@assets/images/bankicons/discover.svg';
-import Fidelity from '@assets/images/bankicons/fidelity.svg';
 import GenericBank from '@assets/images/bankicons/generic-bank-account.svg';
-import HuntingtonBank from '@assets/images/bankicons/huntington-bank.svg';
-import NavyFederalCreditUnion from '@assets/images/bankicons/navy-federal-credit-union.svg';
-import PNC from '@assets/images/bankicons/pnc.svg';
-import RegionsBank from '@assets/images/bankicons/regions-bank.svg';
-import SunTrust from '@assets/images/bankicons/suntrust.svg';
-import TdBank from '@assets/images/bankicons/td-bank.svg';
-import USBank from '@assets/images/bankicons/us-bank.svg';
-import USAA from '@assets/images/bankicons/usaa.svg';
-// Card Icons
-import AmericanExpressCard from '@assets/images/cardicons/american-express.svg';
-import BankOfAmericaCard from '@assets/images/cardicons/bank-of-america.svg';
-import BB_TCard from '@assets/images/cardicons/bb-t.svg';
-import CapitalOneCard from '@assets/images/cardicons/capital-one.svg';
-import CharlesSchwabCard from '@assets/images/cardicons/charles-schwab.svg';
-import ChaseCard from '@assets/images/cardicons/chase.svg';
-import CitiBankCard from '@assets/images/cardicons/citibank.svg';
-import CitizensBankCard from '@assets/images/cardicons/citizens.svg';
-import DiscoverCard from '@assets/images/cardicons/discover.svg';
-import ExpensifyCardImage from '@assets/images/cardicons/expensify-card-dark.svg';
-import FidelityCard from '@assets/images/cardicons/fidelity.svg';
 import GenericBankCard from '@assets/images/cardicons/generic-bank-card.svg';
-import HuntingtonBankCard from '@assets/images/cardicons/huntington-bank.svg';
-import NavyFederalCreditUnionCard from '@assets/images/cardicons/navy-federal-credit-union.svg';
-import PNCCard from '@assets/images/cardicons/pnc.svg';
-import RegionsBankCard from '@assets/images/cardicons/regions-bank.svg';
-import SunTrustCard from '@assets/images/cardicons/suntrust.svg';
-import TdBankCard from '@assets/images/cardicons/td-bank.svg';
-import USBankCard from '@assets/images/cardicons/us-bank.svg';
-import USAACard from '@assets/images/cardicons/usaa.svg';
-import styles from '@styles/styles';
+import {ThemeStyles} from '@styles/styles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import {BankIcon, BankName, BankNameKey} from '@src/types/onyx/Bank';
 
-type BankIcon = {
-    icon: React.FC<SvgProps>;
-    iconSize?: number;
-    iconHeight?: number;
-    iconWidth?: number;
-    iconStyles?: Array<ViewStyle | CSSProperties>;
+type BankIconParams = {
+    themeStyles: ThemeStyles;
+    bankName?: BankName;
+    isCard?: boolean;
 };
 
 /**
  * Returns matching asset icon for bankName
  */
 
-function getAssetIcon(bankName: string, isCard: boolean): React.FC<SvgProps> {
-    if (bankName.includes('expensify')) {
-        return ExpensifyCardImage;
-    }
-
-    if (bankName.includes('americanexpress')) {
-        return isCard ? AmericanExpressCard : AmericanExpress;
-    }
-
-    if (bankName.includes('bank of america') || bankName.includes('bankofamerica')) {
-        return isCard ? BankOfAmericaCard : BankOfAmerica;
-    }
-
-    if (bankName.startsWith('bbt')) {
-        return isCard ? BB_TCard : BB_T;
-    }
-
-    if (bankName.startsWith('capital one') || bankName.includes('capitalone')) {
-        return isCard ? CapitalOneCard : CapitalOne;
-    }
-
-    if (bankName.startsWith('chase') || bankName.includes('chase')) {
-        return isCard ? ChaseCard : Chase;
-    }
-
-    if (bankName.includes('charles schwab') || bankName.includes('charlesschwab')) {
-        return isCard ? CharlesSchwabCard : CharlesSchwab;
-    }
-
-    if (bankName.startsWith('citibank') || bankName.includes('citibank')) {
-        return isCard ? CitiBankCard : CitiBank;
-    }
-
-    if (bankName.startsWith('citizens bank') || bankName.includes('citizensbank')) {
-        return isCard ? CitizensBankCard : CitizensBank;
-    }
-
-    if (bankName.startsWith('discover ') || bankName.includes('discover.') || bankName === 'discover') {
-        return isCard ? DiscoverCard : Discover;
-    }
-
-    if (bankName.startsWith('fidelity')) {
-        return isCard ? FidelityCard : Fidelity;
-    }
-
-    if (bankName.startsWith('huntington bank') || bankName.includes('huntingtonnational') || bankName.includes('huntington national')) {
-        return isCard ? HuntingtonBankCard : HuntingtonBank;
-    }
-
-    if (bankName.startsWith('navy federal credit union') || bankName.includes('navy federal credit union')) {
-        return isCard ? NavyFederalCreditUnionCard : NavyFederalCreditUnion;
-    }
-
-    if (bankName.startsWith('pnc') || bankName.includes('pnc')) {
-        return isCard ? PNCCard : PNC;
-    }
-
-    if (bankName.startsWith('regions bank') || bankName.includes('regionsbank')) {
-        return isCard ? RegionsBankCard : RegionsBank;
-    }
-
-    if (bankName.startsWith('suntrust') || bankName.includes('suntrust')) {
-        return isCard ? SunTrustCard : SunTrust;
-    }
-
-    if (bankName.startsWith('td bank') || bankName.startsWith('tdbank') || bankName.includes('tdbank')) {
-        return isCard ? TdBankCard : TdBank;
-    }
-
-    if (bankName.startsWith('us bank') || bankName.startsWith('usbank')) {
-        return isCard ? USBankCard : USBank;
-    }
-
-    if (bankName.includes('usaa')) {
-        return isCard ? USAACard : USAA;
-    }
+function getAssetIcon(bankNameKey: BankNameKey, isCard: boolean): React.FC<SvgProps> {
+    const bankValue = CONST.BANK_NAMES[bankNameKey];
+
+    // This maps bank names to their respective icon paths.
+    // The purpose is to avoid importing these at the app startup stage.
+    // Depending on whether 'isCard' is true, it selects either a card icon or a bank icon.
+    const iconMappings = {
+        [CONST.BANK_NAMES.EXPENSIFY]: isCard
+            ? (require('@assets/images/cardicons/expensify-card-dark.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/expensify.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.AMERICAN_EXPRESS]: isCard
+            ? (require('@assets/images/cardicons/american-express.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/american-express.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.BANK_OF_AMERICA]: isCard
+            ? (require('@assets/images/cardicons/bank-of-america.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/bank-of-america.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.BB_T]: isCard
+            ? (require('@assets/images/cardicons/bb-t.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/bb-t.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CAPITAL_ONE]: isCard
+            ? (require('@assets/images/cardicons/capital-one.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/capital-one.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CHASE]: isCard
+            ? (require('@assets/images/cardicons/chase.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/chase.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CHARLES_SCHWAB]: isCard
+            ? (require('@assets/images/cardicons/charles-schwab.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/charles-schwab.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CITIBANK]: isCard
+            ? (require('@assets/images/cardicons/citibank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/citibank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.CITIZENS_BANK]: isCard
+            ? (require('@assets/images/cardicons/citizens.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/citizens-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.DISCOVER]: isCard
+            ? (require('@assets/images/cardicons/discover.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/discover.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.FIDELITY]: isCard
+            ? (require('@assets/images/cardicons/fidelity.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/fidelity.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.GENERIC_BANK]: isCard
+            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.HUNTINGTON_BANK]: isCard
+            ? (require('@assets/images/cardicons/huntington-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/huntington-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: isCard
+            ? (require('@assets/images/cardicons/navy-federal-credit-union.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/navy-federal-credit-union.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.PNC]: isCard
+            ? (require('@assets/images/cardicons/pnc.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/pnc.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.REGIONS_BANK]: isCard
+            ? (require('@assets/images/cardicons/regions-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/regions-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.SUNTRUST]: isCard
+            ? (require('@assets/images/cardicons/suntrust.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/suntrust.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.TD_BANK]: isCard
+            ? (require('@assets/images/cardicons/td-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/td-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.US_BANK]: isCard
+            ? (require('@assets/images/cardicons/us-bank.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/us-bank.svg').default as React.FC<SvgProps>),
+        [CONST.BANK_NAMES.USAA]: isCard
+            ? (require('@assets/images/cardicons/usaa.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/usaa.svg').default as React.FC<SvgProps>),
+    } as const;
+
+    // Fallback to generic bank/card icon
+    const iconModule =
+        iconMappings[bankValue] ||
+        (isCard
+            ? (require('@assets/images/cardicons/generic-bank-card.svg').default as React.FC<SvgProps>)
+            : (require('@assets/images/bankicons/generic-bank-account.svg').default as React.FC<SvgProps>));
+    return iconModule;
+}
 
-    return isCard ? GenericBankCard : GenericBank;
+function getBankNameKey(bankName: string): BankNameKey {
+    const bank = Object.entries(CONST.BANK_NAMES).find(([, value]) => value?.toLowerCase() === bankName);
+    return (bank?.[0] as BankNameKey) ?? '';
 }
 
 /**
  * Returns Bank Icon Object that matches to existing bank icons or default icons
  */
-
-export default function getBankIcon(bankName: string, isCard = false): BankIcon {
+export default function getBankIcon({themeStyles, bankName, isCard = false}: BankIconParams): BankIcon {
     const bankIcon: BankIcon = {
         icon: isCard ? GenericBankCard : GenericBank,
     };
-
     if (bankName) {
-        bankIcon.icon = getAssetIcon(bankName.toLowerCase(), isCard);
+        const bankNameKey = getBankNameKey(bankName.toLowerCase());
+
+        if (bankNameKey && Object.keys(CONST.BANK_NAMES).includes(bankNameKey)) {
+            bankIcon.icon = getAssetIcon(bankNameKey, isCard);
+        }
     }
 
     // For default Credit Card icon the icon size should not be set.
     if (!isCard) {
         bankIcon.iconSize = variables.iconSizeExtraLarge;
-        bankIcon.iconStyles = [styles.bankIconContainer];
+        bankIcon.iconStyles = [themeStyles.bankIconContainer];
     } else {
         bankIcon.iconHeight = variables.bankCardHeight;
         bankIcon.iconWidth = variables.bankCardWidth;
-        bankIcon.iconStyles = [styles.assignedCardsIconContainer];
+        bankIcon.iconStyles = [themeStyles.assignedCardsIconContainer];
     }
 
     return bankIcon;
 }
+
+export type {BankName};
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 022c740907ea..98449c838b67 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,8 +1,8 @@
 import React, {PureComponent} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import withTheme, {ThemeProps} from '@components/withTheme';
+import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
 import IconWrapperStyles from './IconWrapperStyles';
 
@@ -41,7 +41,8 @@ type IconProps = {
 
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
-};
+} & ThemeStylesProps &
+    ThemeProps;
 
 // We must use a class component to create an animatable component with the Animated API
 // eslint-disable-next-line react/prefer-stateless-function
@@ -50,7 +51,7 @@ class Icon extends PureComponent<IconProps> {
     public static defaultProps = {
         width: variables.iconSizeNormal,
         height: variables.iconSizeNormal,
-        fill: themeColors.icon,
+        fill: undefined,
         small: false,
         inline: false,
         additionalStyles: [],
@@ -61,19 +62,20 @@ class Icon extends PureComponent<IconProps> {
     render() {
         const width = this.props.small ? variables.iconSizeSmall : this.props.width;
         const height = this.props.small ? variables.iconSizeSmall : this.props.height;
-        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, this.props.additionalStyles];
+        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
+        const fill = this.props.fill ?? this.props.theme.icon;
 
         if (this.props.inline) {
             return (
                 <View
                     testID={`${this.props.src.name} Icon`}
-                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
+                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), this.props.themeStyles.bgTransparent, this.props.themeStyles.overflowVisible]}
                 >
                     <View style={iconStyles}>
                         <this.props.src
                             width={width}
                             height={height}
-                            fill={this.props.fill}
+                            fill={fill}
                             hovered={this.props.hovered?.toString()}
                             pressed={this.props.pressed?.toString()}
                         />
@@ -90,7 +92,7 @@ class Icon extends PureComponent<IconProps> {
                 <this.props.src
                     width={width}
                     height={height}
-                    fill={this.props.fill}
+                    fill={fill}
                     hovered={this.props.hovered?.toString()}
                     pressed={this.props.pressed?.toString()}
                 />
@@ -99,4 +101,4 @@ class Icon extends PureComponent<IconProps> {
     }
 }
 
-export default Icon;
+export default withTheme(withThemeStyles(Icon));
diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
index 61243eb90969..fd607a0e81a9 100644
--- a/src/components/ImageView/index.js
+++ b/src/components/ImageView/index.js
@@ -257,7 +257,7 @@ function ImageView({isAuthTokenRequired, url, fileName, onError}) {
             <PressableWithoutFeedback
                 style={{
                     ...StyleUtils.getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight, containerWidth, isLoading),
-                    ...StyleUtils.getZoomCursorStyle(isZoomed, isDragging),
+                    ...StyleUtils.getZoomCursorStyle(styles, isZoomed, isDragging),
                     ...(isZoomed && zoomScale >= 1 ? styles.pRelative : styles.pAbsolute),
                     ...styles.flex1,
                 }}
diff --git a/src/components/InlineSystemMessage.tsx b/src/components/InlineSystemMessage.tsx
index e9de0111cd23..6e6423a19a35 100644
--- a/src/components/InlineSystemMessage.tsx
+++ b/src/components/InlineSystemMessage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
-import theme from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import Text from './Text';
@@ -12,6 +12,9 @@ type InlineSystemMessageProps = {
 };
 
 function InlineSystemMessage({message = ''}: InlineSystemMessageProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     if (!message) {
         return null;
     }
diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js
index 0d300c5e2179..86de188f9db8 100644
--- a/src/components/LHNOptionsList/LHNOptionsList.js
+++ b/src/components/LHNOptionsList/LHNOptionsList.js
@@ -10,6 +10,7 @@ import transactionPropTypes from '@components/transactionPropTypes';
 import withCurrentReportID, {withCurrentReportIDDefaultProps, withCurrentReportIDPropTypes} from '@components/withCurrentReportID';
 import compose from '@libs/compose';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
@@ -117,7 +118,9 @@ function LHNOptionsList({
             const transactionID = lodashGet(itemParentReportAction, ['originalMessage', 'IOUTransactionID'], '');
             const itemTransaction = transactionID ? transactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] : {};
             const itemComment = draftComments[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] || '';
-            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(itemFullReport.participantAccountIDs, personalDetails);
+            const participants = [ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport.ownerAccountID];
+
+            const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails);
 
             return (
                 <OptionRowLHNData
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 8420f3db7a1e..3b2de574ba17 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -20,7 +20,6 @@ import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
 import {getGroupChatName} from '@libs/GroupChatUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import Permissions from '@libs/Permissions';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
@@ -36,9 +35,6 @@ const propTypes = {
     // eslint-disable-next-line react/forbid-prop-types
     hoverStyle: PropTypes.object,
 
-    /** List of betas available to current user */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** The ID of the report that the option is for */
     reportID: PropTypes.string.isRequired,
 
@@ -65,7 +61,6 @@ const defaultProps = {
     style: null,
     optionItem: null,
     isFocused: false,
-    betas: [],
 };
 
 function OptionRowLHN(props) {
@@ -108,7 +103,7 @@ function OptionRowLHN(props) {
         props.style,
     );
     const contentContainerStyles =
-        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] : [styles.flex1];
+        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles(styles)] : [styles.flex1];
     const sidebarInnerRowStyle = StyleSheet.flatten(
         props.viewMode === CONST.OPTION_MODE.COMPACT
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
@@ -157,7 +152,7 @@ function OptionRowLHN(props) {
     const statusClearAfterDate = lodashGet(optionItem, 'status.clearAfter', '');
     const formattedDate = DateUtils.getStatusUntilDate(statusClearAfterDate);
     const statusContent = formattedDate ? `${statusText} (${formattedDate})` : statusText;
-    const isStatusVisible = Permissions.canUseCustomStatus(props.betas) && !!emojiCode && ReportUtils.isOneOnOneChat(ReportUtils.getReport(optionItem.reportID));
+    const isStatusVisible = !!emojiCode && ReportUtils.isOneOnOneChat(ReportUtils.getReport(optionItem.reportID));
 
     const isGroupChat =
         optionItem.type === CONST.REPORT.TYPE.CHAT && _.isEmpty(optionItem.chatType) && !optionItem.isThread && lodashGet(optionItem, 'displayNamesWithTooltips.length', 0) > 2;
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 677fe1c38827..c40962c8e631 100644
--- a/src/components/MagicCodeInput.js
+++ b/src/components/MagicCodeInput.js
@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
+import {TapGestureHandler} from 'react-native-gesture-handler';
 import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
+import * as Browser from '@libs/Browser';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -13,6 +15,8 @@ import {withNetwork} from './OnyxProvider';
 import Text from './Text';
 import TextInput from './TextInput';
 
+const TEXT_INPUT_EMPTY_STATE = '';
+
 const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
@@ -104,23 +108,53 @@ const getInputPlaceholderSlots = (length) => Array.from(Array(length).keys());
 
 function MagicCodeInput(props) {
     const styles = useThemeStyles();
-    const inputRefs = useRef([]);
-    const [input, setInput] = useState('');
+    const inputRefs = useRef();
+    const [input, setInput] = useState(TEXT_INPUT_EMPTY_STATE);
     const [focusedIndex, setFocusedIndex] = useState(0);
     const [editIndex, setEditIndex] = useState(0);
     const [wasSubmitted, setWasSubmitted] = useState(false);
+    const shouldFocusLast = useRef(false);
+    const inputWidth = useRef(0);
+    const lastFocusedIndex = useRef(0);
+    const lastValue = useRef(TEXT_INPUT_EMPTY_STATE);
+
+    useEffect(() => {
+        lastValue.current = input.length;
+    }, [input]);
 
     const blurMagicCodeInput = () => {
-        inputRefs.current[editIndex].blur();
+        inputRefs.current.blur();
         setFocusedIndex(undefined);
     };
 
+    const focusMagicCodeInput = () => {
+        setFocusedIndex(0);
+        lastFocusedIndex.current = 0;
+        setEditIndex(0);
+        inputRefs.current.focus();
+    };
+
+    const setInputAndIndex = (index) => {
+        setInput(TEXT_INPUT_EMPTY_STATE);
+        setFocusedIndex(index);
+        setEditIndex(index);
+    };
+
     useImperativeHandle(props.innerRef, () => ({
         focus() {
-            inputRefs.current[0].focus();
+            focusMagicCodeInput();
+        },
+        focusLastSelected() {
+            inputRefs.current.focus();
+        },
+        resetFocus() {
+            setInput(TEXT_INPUT_EMPTY_STATE);
+            focusMagicCodeInput();
         },
         clear() {
-            inputRefs.current[0].focus();
+            lastFocusedIndex.current = 0;
+            setInputAndIndex(0);
+            inputRefs.current.focus();
             props.onChangeText('');
         },
         blur() {
@@ -140,6 +174,7 @@ function MagicCodeInput(props) {
         // on complete, it will call the onFulfill callback.
         blurMagicCodeInput();
         props.onFulfill(props.value);
+        lastValue.current = '';
     };
 
     useNetwork({onReconnect: validateAndSubmit});
@@ -154,17 +189,34 @@ function MagicCodeInput(props) {
     }, [props.value, props.shouldSubmitOnComplete]);
 
     /**
-     * Callback for the onFocus event, updates the indexes
-     * of the currently focused input.
+     * Focuses on the input when it is pressed.
      *
      * @param {Object} event
      * @param {Number} index
      */
-    const onFocus = (event, index) => {
+    const onFocus = (event) => {
+        if (shouldFocusLast.current) {
+            lastValue.current = TEXT_INPUT_EMPTY_STATE;
+            setInputAndIndex(lastFocusedIndex.current);
+        }
         event.preventDefault();
-        setInput('');
-        setFocusedIndex(index);
-        setEditIndex(index);
+    };
+
+    /**
+     * Callback for the onPress event, updates the indexes
+     * of the currently focused input.
+     *
+     * @param {Number} index
+     */
+    const onPress = (index) => {
+        shouldFocusLast.current = false;
+        // TapGestureHandler works differently on mobile web and native app
+        // On web gesture handler doesn't block interactions with textInput below so there is no need to run `focus()` manually
+        if (!Browser.isMobileChrome() && !Browser.isMobileSafari()) {
+            inputRefs.current.focus();
+        }
+        setInputAndIndex(index);
+        lastFocusedIndex.current = index;
     };
 
     /**
@@ -181,9 +233,16 @@ function MagicCodeInput(props) {
             return;
         }
 
+        // Checks if one new character was added, or if the content was replaced
+        const hasToSlice = value.length - 1 === lastValue.current.length && value.slice(0, value.length - 1) === lastValue.current;
+
+        // Gets the new value added by the user
+        const addedValue = hasToSlice ? value.slice(lastValue.current.length, value.length) : value;
+
+        lastValue.current = value;
         // Updates the focused input taking into consideration the last input
         // edited and the number of digits added by the user.
-        const numbersArr = value
+        const numbersArr = addedValue
             .trim()
             .split('')
             .slice(0, props.maxLength - editIndex);
@@ -192,7 +251,7 @@ function MagicCodeInput(props) {
         let numbers = decomposeString(props.value, props.maxLength);
         numbers = [...numbers.slice(0, editIndex), ...numbersArr, ...numbers.slice(numbersArr.length + editIndex, props.maxLength)];
 
-        inputRefs.current[updatedFocusedIndex].focus();
+        setInputAndIndex(updatedFocusedIndex);
 
         const finalInput = composeToString(numbers);
         props.onChangeText(finalInput);
@@ -225,7 +284,7 @@ function MagicCodeInput(props) {
             // If the currently focused index already has a value, it will delete
             // that value but maintain the focus on the same input.
             if (numbers[focusedIndex] !== CONST.MAGIC_CODE_EMPTY_CHAR) {
-                setInput('');
+                setInput(TEXT_INPUT_EMPTY_STATE);
                 numbers = [...numbers.slice(0, focusedIndex), CONST.MAGIC_CODE_EMPTY_CHAR, ...numbers.slice(focusedIndex + 1, props.maxLength)];
                 setEditIndex(focusedIndex);
                 props.onChangeText(composeToString(numbers));
@@ -244,24 +303,31 @@ function MagicCodeInput(props) {
             }
 
             const newFocusedIndex = Math.max(0, focusedIndex - 1);
+
+            // Saves the input string so that it can compare to the change text
+            // event that will be triggered, this is a workaround for mobile that
+            // triggers the change text on the event after the key press.
+            setInputAndIndex(newFocusedIndex);
             props.onChangeText(composeToString(numbers));
 
             if (!_.isUndefined(newFocusedIndex)) {
-                inputRefs.current[newFocusedIndex].focus();
+                inputRefs.current.focus();
             }
         }
         if (keyValue === 'ArrowLeft' && !_.isUndefined(focusedIndex)) {
             const newFocusedIndex = Math.max(0, focusedIndex - 1);
-            inputRefs.current[newFocusedIndex].focus();
+            setInputAndIndex(newFocusedIndex);
+            inputRefs.current.focus();
         } else if (keyValue === 'ArrowRight' && !_.isUndefined(focusedIndex)) {
             const newFocusedIndex = Math.min(focusedIndex + 1, props.maxLength - 1);
-            inputRefs.current[newFocusedIndex].focus();
+            setInputAndIndex(newFocusedIndex);
+            inputRefs.current.focus();
         } else if (keyValue === 'Enter') {
             // We should prevent users from submitting when it's offline.
             if (props.network.isOffline) {
                 return;
             }
-            setInput('');
+            setInput(TEXT_INPUT_EMPTY_STATE);
             props.onFulfill(props.value);
         }
     };
@@ -290,6 +356,49 @@ function MagicCodeInput(props) {
     return (
         <>
             <View style={[styles.magicCodeInputContainer]}>
+                <TapGestureHandler
+                    onBegan={(e) => {
+                        onPress(Math.floor(e.nativeEvent.x / (inputWidth.current / props.maxLength)));
+                    }}
+                >
+                    {/* Android does not handle touch on invisible Views so I created a wrapper around invisible TextInput just to handle taps */}
+                    <View
+                        style={[StyleSheet.absoluteFillObject, styles.w100, styles.h100, styles.invisibleOverlay]}
+                        collapsable={false}
+                    >
+                        <TextInput
+                            onLayout={(e) => {
+                                inputWidth.current = e.nativeEvent.layout.width;
+                            }}
+                            ref={(ref) => (inputRefs.current = ref)}
+                            autoFocus={props.autoFocus}
+                            inputMode="numeric"
+                            textContentType="oneTimeCode"
+                            name={props.name}
+                            maxLength={props.maxLength}
+                            value={input}
+                            hideFocusedState
+                            autoComplete={input.length === 0 && props.autoComplete}
+                            shouldDelayFocus={input.length === 0 && props.shouldDelayFocus}
+                            keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
+                            onChangeText={(value) => {
+                                onChangeText(value);
+                            }}
+                            onKeyPress={onKeyPress}
+                            onFocus={onFocus}
+                            onBlur={() => {
+                                shouldFocusLast.current = true;
+                                lastFocusedIndex.current = focusedIndex;
+                                setFocusedIndex(undefined);
+                            }}
+                            selectionColor="transparent"
+                            inputStyle={[styles.inputTransparent]}
+                            role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                            style={[styles.inputTransparent]}
+                            textInputContainerStyles={[styles.borderNone]}
+                        />
+                    </View>
+                </TapGestureHandler>
                 {_.map(getInputPlaceholderSlots(props.maxLength), (index) => (
                     <View
                         key={index}
@@ -298,53 +407,13 @@ function MagicCodeInput(props) {
                         <View
                             style={[
                                 styles.textInputContainer,
-                                StyleUtils.getHeightOfMagicCodeInput(),
+                                StyleUtils.getHeightOfMagicCodeInput(styles),
                                 props.hasError || props.errorText ? styles.borderColorDanger : {},
                                 focusedIndex === index ? styles.borderColorFocus : {},
                             ]}
                         >
                             <Text style={[styles.magicCodeInput, styles.textAlignCenter]}>{decomposeString(props.value, props.maxLength)[index] || ''}</Text>
                         </View>
-                        {/* Hide the input above the text. Cannot set opacity to 0 as it would break pasting on iOS Safari. */}
-                        <View style={[StyleSheet.absoluteFillObject, styles.w100, styles.bgTransparent]}>
-                            <TextInput
-                                ref={(ref) => {
-                                    inputRefs.current[index] = ref;
-                                    // Setting attribute type to "search" to prevent Password Manager from appearing in Mobile Chrome
-                                    if (ref && ref.setAttribute) {
-                                        ref.setAttribute('type', 'search');
-                                    }
-                                }}
-                                disableKeyboard={props.isDisableKeyboard}
-                                autoFocus={index === 0 && props.autoFocus}
-                                shouldDelayFocus={index === 0 && props.shouldDelayFocus}
-                                inputMode={props.isDisableKeyboard ? 'none' : 'numeric'}
-                                textContentType="oneTimeCode"
-                                name={props.name}
-                                maxLength={props.maxLength}
-                                value={input}
-                                hideFocusedState
-                                autoComplete={index === 0 ? props.autoComplete : 'off'}
-                                onChangeText={(value) => {
-                                    // Do not run when the event comes from an input that is
-                                    // not currently being responsible for the input, this is
-                                    // necessary to avoid calls when the input changes due to
-                                    // deleted characters. Only happens in mobile.
-                                    if (index !== editIndex || _.isUndefined(focusedIndex)) {
-                                        return;
-                                    }
-                                    onChangeText(value);
-                                }}
-                                onKeyPress={onKeyPress}
-                                onFocus={(event) => onFocus(event, index)}
-                                // Manually set selectionColor to make caret transparent.
-                                // We cannot use caretHidden as it breaks the pasting function on Android.
-                                selectionColor="transparent"
-                                textInputContainerStyles={[styles.borderNone]}
-                                inputStyle={[styles.inputTransparent]}
-                                role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            />
-                        </View>
                     </View>
                 ))}
             </View>
diff --git a/src/components/MapView/MapView.tsx b/src/components/MapView/MapView.tsx
index c91dc63a3bd1..91f9d9930079 100644
--- a/src/components/MapView/MapView.tsx
+++ b/src/components/MapView/MapView.tsx
@@ -2,36 +2,100 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import Mapbox, {MapState, MarkerView, setAccessToken} from '@rnmapbox/maps';
 import {forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
+import {withOnyx} from 'react-native-onyx';
+import setUserLocation from '@libs/actions/UserLocation';
+import compose from '@libs/compose';
+import getCurrentPosition from '@libs/getCurrentPosition';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import useLocalize from '@src/hooks/useLocalize';
+import useNetwork from '@src/hooks/useNetwork';
+import ONYXKEYS from '@src/ONYXKEYS';
 import Direction from './Direction';
-import {MapViewHandle, MapViewProps} from './MapViewTypes';
+import {MapViewHandle} from './MapViewTypes';
+import PendingMapView from './PendingMapView';
 import responder from './responder';
+import {ComponentProps, MapViewOnyxProps} from './types';
 import utils from './utils';
 
-const MapView = forwardRef<MapViewHandle, MapViewProps>(({accessToken, style, mapPadding, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => {
-    const cameraRef = useRef<Mapbox.Camera>(null);
-    const [isIdle, setIsIdle] = useState(false);
-    const navigation = useNavigation();
-
-    useImperativeHandle(
-        ref,
-        () => ({
-            flyTo: (location: [number, number], zoomLevel: number = CONST.MAPBOX.DEFAULT_ZOOM, animationDuration?: number) =>
-                cameraRef.current?.setCamera({zoomLevel, centerCoordinate: location, animationDuration}),
-            fitBounds: (northEast: [number, number], southWest: [number, number], paddingConfig?: number | number[] | undefined, animationDuration?: number | undefined) =>
-                cameraRef.current?.fitBounds(northEast, southWest, paddingConfig, animationDuration),
-        }),
-        [],
-    );
-
-    // When the page loses focus, we temporarily set the "idled" state to false.
-    // When the page regains focus, the onIdled method of the map will set the actual "idled" state,
-    // which in turn triggers the callback.
-    useFocusEffect(
-        // eslint-disable-next-line rulesdir/prefer-early-return
-        useCallback(() => {
-            if (waypoints?.length && isIdle) {
+const MapView = forwardRef<MapViewHandle, ComponentProps>(
+    ({accessToken, style, mapPadding, userLocation: cachedUserLocation, styleURL, pitchEnabled, initialState, waypoints, directionCoordinates, onMapReady}, ref) => {
+        const navigation = useNavigation();
+        const {isOffline} = useNetwork();
+        const {translate} = useLocalize();
+        const styles = useThemeStyles();
+
+        const cameraRef = useRef<Mapbox.Camera>(null);
+        const [isIdle, setIsIdle] = useState(false);
+        const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
+        const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
+
+        useFocusEffect(
+            useCallback(() => {
+                if (isOffline) {
+                    return;
+                }
+
+                getCurrentPosition(
+                    (params) => {
+                        const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
+                        setCurrentPosition(currentCoords);
+                        setUserLocation(currentCoords);
+                    },
+                    () => {
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        if (cachedUserLocation || !initialState) {
+                            return;
+                        }
+
+                        setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+                    },
+                );
+            }, [cachedUserLocation, initialState, isOffline]),
+        );
+
+        // Determines if map can be panned to user's detected
+        // location without bothering the user. It will return
+        // false if user has already started dragging the map or
+        // if there are one or more waypoints present.
+        const shouldPanMapToCurrentPosition = useCallback(() => !userInteractedWithMap && (!waypoints || waypoints.length === 0), [userInteractedWithMap, waypoints]);
+
+        useEffect(() => {
+            if (!currentPosition || !cameraRef.current) {
+                return;
+            }
+
+            if (!shouldPanMapToCurrentPosition()) {
+                return;
+            }
+
+            cameraRef.current.setCamera({
+                zoomLevel: CONST.MAPBOX.DEFAULT_ZOOM,
+                animationDuration: 1500,
+                centerCoordinate: [currentPosition.longitude, currentPosition.latitude],
+            });
+        }, [currentPosition, shouldPanMapToCurrentPosition]);
+
+        useImperativeHandle(
+            ref,
+            () => ({
+                flyTo: (location: [number, number], zoomLevel: number = CONST.MAPBOX.DEFAULT_ZOOM, animationDuration?: number) =>
+                    cameraRef.current?.setCamera({zoomLevel, centerCoordinate: location, animationDuration}),
+                fitBounds: (northEast: [number, number], southWest: [number, number], paddingConfig?: number | number[] | undefined, animationDuration?: number | undefined) =>
+                    cameraRef.current?.fitBounds(northEast, southWest, paddingConfig, animationDuration),
+            }),
+            [],
+        );
+
+        // When the page loses focus, we temporarily set the "idled" state to false.
+        // When the page regains focus, the onIdled method of the map will set the actual "idled" state,
+        // which in turn triggers the callback.
+        useFocusEffect(
+            useCallback(() => {
+                if (!waypoints || waypoints.length === 0 || !isIdle) {
+                    return;
+                }
+
                 if (waypoints.length === 1) {
                     cameraRef.current?.setCamera({
                         zoomLevel: 15,
@@ -45,69 +109,87 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(({accessToken, style, ma
                     );
                     cameraRef.current?.fitBounds(northEast, southWest, mapPadding, 1000);
                 }
+            }, [mapPadding, waypoints, isIdle, directionCoordinates]),
+        );
+
+        useEffect(() => {
+            const unsubscribe = navigation.addListener('blur', () => {
+                setIsIdle(false);
+            });
+            return unsubscribe;
+        }, [navigation]);
+
+        useEffect(() => {
+            setAccessToken(accessToken);
+        }, [accessToken]);
+
+        const setMapIdle = (e: MapState) => {
+            if (e.gestures.isGestureActive) {
+                return;
+            }
+            setIsIdle(true);
+            if (onMapReady) {
+                onMapReady();
             }
-        }, [mapPadding, waypoints, isIdle, directionCoordinates]),
-    );
-
-    useEffect(() => {
-        const unsubscribe = navigation.addListener('blur', () => {
-            setIsIdle(false);
-        });
-        return unsubscribe;
-    }, [navigation]);
-
-    useEffect(() => {
-        setAccessToken(accessToken);
-    }, [accessToken]);
-
-    const setMapIdle = (e: MapState) => {
-        if (e.gestures.isGestureActive) {
-            return;
-        }
-        setIsIdle(true);
-        if (onMapReady) {
-            onMapReady();
-        }
-    };
-
-    return (
-        <View style={style}>
-            <Mapbox.MapView
-                style={{flex: 1}}
-                styleURL={styleURL}
-                onMapIdle={setMapIdle}
-                pitchEnabled={pitchEnabled}
-                attributionPosition={{...styles.r2, ...styles.b2}}
-                scaleBarEnabled={false}
-                logoPosition={{...styles.l2, ...styles.b2}}
-                // eslint-disable-next-line
-                {...responder.panHandlers}
-            >
-                <Mapbox.Camera
-                    ref={cameraRef}
-                    defaultSettings={{
-                        centerCoordinate: initialState?.location,
-                        zoomLevel: initialState?.zoom,
-                    }}
-                />
-
-                {waypoints?.map(({coordinate, markerComponent, id}) => {
-                    const MarkerComponent = markerComponent;
-                    return (
-                        <MarkerView
-                            id={id}
-                            key={id}
-                            coordinate={coordinate}
+        };
+
+        return (
+            <>
+                {!isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
+                    <View style={style}>
+                        <Mapbox.MapView
+                            style={{flex: 1}}
+                            styleURL={styleURL}
+                            onMapIdle={setMapIdle}
+                            onTouchStart={() => setUserInteractedWithMap(true)}
+                            pitchEnabled={pitchEnabled}
+                            attributionPosition={{...styles.r2, ...styles.b2}}
+                            scaleBarEnabled={false}
+                            logoPosition={{...styles.l2, ...styles.b2}}
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...responder.panHandlers}
                         >
-                            <MarkerComponent />
-                        </MarkerView>
-                    );
-                })}
+                            <Mapbox.Camera
+                                ref={cameraRef}
+                                defaultSettings={{
+                                    centerCoordinate: currentPosition ? [currentPosition.longitude, currentPosition.latitude] : initialState?.location,
+                                    zoomLevel: initialState?.zoom,
+                                }}
+                            />
+
+                            {waypoints?.map(({coordinate, markerComponent, id}) => {
+                                const MarkerComponent = markerComponent;
+                                return (
+                                    <MarkerView
+                                        id={id}
+                                        key={id}
+                                        coordinate={coordinate}
+                                    >
+                                        <MarkerComponent />
+                                    </MarkerView>
+                                );
+                            })}
 
-                {directionCoordinates && <Direction coordinates={directionCoordinates} />}
-            </Mapbox.MapView>
-        </View>
-    );
-});
+                            {directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                        </Mapbox.MapView>
+                    </View>
+                ) : (
+                    <PendingMapView
+                        title={translate('distance.mapPending.title')}
+                        subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
+                        style={styles.mapEditView}
+                    />
+                )}
+            </>
+        );
+    },
+);
 
-export default memo(MapView);
+export default compose(
+    withOnyx<ComponentProps, MapViewOnyxProps>({
+        userLocation: {
+            key: ONYXKEYS.USER_LOCATION,
+        },
+    }),
+    memo,
+)(MapView);
diff --git a/src/components/MapView/MapView.web.tsx b/src/components/MapView/MapView.web.tsx
index 110d24f0c087..f32413cbc15d 100644
--- a/src/components/MapView/MapView.web.tsx
+++ b/src/components/MapView/MapView.web.tsx
@@ -2,26 +2,100 @@
 // This is why we have separate components for web and native to handle the specific implementations.
 // For the web version, we use the Mapbox Web library called react-map-gl, while for the native mobile version,
 // we utilize a different Mapbox library @rnmapbox/maps tailored for mobile development.
+import {useFocusEffect} from '@react-navigation/native';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
 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 Direction from './Direction';
 import './mapbox.css';
-import {MapViewHandle, MapViewProps} from './MapViewTypes';
+import {MapViewHandle} from './MapViewTypes';
+import PendingMapView from './PendingMapView';
 import responder from './responder';
+import {ComponentProps, MapViewOnyxProps} from './types';
 import utils from './utils';
 
-const MapView = forwardRef<MapViewHandle, MapViewProps>(
-    ({style, styleURL, waypoints, mapPadding, accessToken, directionCoordinates, initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM}}, ref) => {
+const MapView = forwardRef<MapViewHandle, ComponentProps>(
+    (
+        {
+            style,
+            styleURL,
+            waypoints,
+            mapPadding,
+            accessToken,
+            userLocation: cachedUserLocation,
+            directionCoordinates,
+            initialState = {location: CONST.MAPBOX.DEFAULT_COORDINATE, zoom: CONST.MAPBOX.DEFAULT_ZOOM},
+        },
+        ref,
+    ) => {
+        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);
         const [shouldResetBoundaries, setShouldResetBoundaries] = useState<boolean>(false);
         const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
 
+        useFocusEffect(
+            useCallback(() => {
+                if (isOffline) {
+                    return;
+                }
+
+                getCurrentPosition(
+                    (params) => {
+                        const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
+                        setCurrentPosition(currentCoords);
+                        setUserLocation(currentCoords);
+                    },
+                    () => {
+                        if (cachedUserLocation) {
+                            return;
+                        }
+
+                        setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
+                    },
+                );
+            }, [cachedUserLocation, isOffline, initialState.location]),
+        );
+
+        // Determines if map can be panned to user's detected
+        // location without bothering the user. It will return
+        // false if user has already started dragging the map or
+        // if there are one or more waypoints present.
+        const shouldPanMapToCurrentPosition = useCallback(() => !userInteractedWithMap && (!waypoints || waypoints.length === 0), [userInteractedWithMap, waypoints]);
+
+        useEffect(() => {
+            if (!currentPosition || !mapRef) {
+                return;
+            }
+
+            if (!shouldPanMapToCurrentPosition()) {
+                return;
+            }
+
+            mapRef.flyTo({
+                center: [currentPosition.longitude, currentPosition.latitude],
+                zoom: CONST.MAPBOX.DEFAULT_ZOOM,
+            });
+        }, [currentPosition, userInteractedWithMap, mapRef, shouldPanMapToCurrentPosition]);
+
         const resetBoundaries = useCallback(() => {
             if (!waypoints || waypoints.length === 0) {
                 return;
@@ -34,7 +108,7 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(
             if (waypoints.length === 1) {
                 mapRef.flyTo({
                     center: waypoints[0].coordinate,
-                    zoom: 15,
+                    zoom: CONST.MAPBOX.DEFAULT_ZOOM,
                 });
                 return;
             }
@@ -91,40 +165,55 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(
         );
 
         return (
-            <View
-                style={style}
-                // eslint-disable-next-line
-                {...responder.panHandlers}
-            >
-                <Map
-                    ref={setRef}
-                    mapLib={mapboxgl}
-                    mapboxAccessToken={accessToken}
-                    initialViewState={{
-                        longitude: initialState.location[0],
-                        latitude: initialState.location[1],
-                        zoom: initialState.zoom,
-                    }}
-                    style={StyleUtils.getTextColorStyle(themeColors.mapAttributionText) as React.CSSProperties}
-                    mapStyle={styleURL}
-                >
-                    {waypoints?.map(({coordinate, markerComponent, id}) => {
-                        const MarkerComponent = markerComponent;
-                        return (
-                            <Marker
-                                key={id}
-                                longitude={coordinate[0]}
-                                latitude={coordinate[1]}
-                            >
-                                <MarkerComponent />
-                            </Marker>
-                        );
-                    })}
-                    {directionCoordinates && <Direction coordinates={directionCoordinates} />}
-                </Map>
-            </View>
+            <>
+                {!isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (
+                    <View
+                        style={style}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...responder.panHandlers}
+                    >
+                        <Map
+                            onDrag={() => setUserInteractedWithMap(true)}
+                            ref={setRef}
+                            mapLib={mapboxgl}
+                            mapboxAccessToken={accessToken}
+                            initialViewState={{
+                                longitude: currentPosition?.longitude,
+                                latitude: currentPosition?.latitude,
+                                zoom: initialState.zoom,
+                            }}
+                            style={StyleUtils.getTextColorStyle(theme.mapAttributionText) as React.CSSProperties}
+                            mapStyle={styleURL}
+                        >
+                            {waypoints?.map(({coordinate, markerComponent, id}) => {
+                                const MarkerComponent = markerComponent;
+                                return (
+                                    <Marker
+                                        key={id}
+                                        longitude={coordinate[0]}
+                                        latitude={coordinate[1]}
+                                    >
+                                        <MarkerComponent />
+                                    </Marker>
+                                );
+                            })}
+                            {directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                        </Map>
+                    </View>
+                ) : (
+                    <PendingMapView
+                        title={translate('distance.mapPending.title')}
+                        subtitle={isOffline ? translate('distance.mapPending.subtitle') : translate('distance.mapPending.onlineSubtitle')}
+                        style={styles.mapEditView}
+                    />
+                )}
+            </>
         );
     },
 );
 
-export default MapView;
+export default withOnyx<ComponentProps, MapViewOnyxProps>({
+    userLocation: {
+        key: ONYXKEYS.USER_LOCATION,
+    },
+})(MapView);
diff --git a/src/components/MapView/PendingMapView.tsx b/src/components/MapView/PendingMapView.tsx
index eed879596888..2acdb59d3782 100644
--- a/src/components/MapView/PendingMapView.tsx
+++ b/src/components/MapView/PendingMapView.tsx
@@ -4,13 +4,13 @@ import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import {PendingMapViewProps} from './MapViewTypes';
 
 function PendingMapView({title = '', subtitle = '', style}: PendingMapViewProps) {
     const hasTextContent = !_.isEmpty(title) || !_.isEmpty(subtitle);
-
+    const styles = useThemeStyles();
     return (
         <View style={[styles.mapPendingView, style]}>
             {hasTextContent ? (
diff --git a/src/components/MapView/types.ts b/src/components/MapView/types.ts
new file mode 100644
index 000000000000..2c8b9240c445
--- /dev/null
+++ b/src/components/MapView/types.ts
@@ -0,0 +1,11 @@
+import {OnyxEntry} from 'react-native-onyx';
+import * as OnyxTypes from '@src/types/onyx';
+import {MapViewProps} from './MapViewTypes';
+
+type MapViewOnyxProps = {
+    userLocation: OnyxEntry<OnyxTypes.UserLocation>;
+};
+
+type ComponentProps = MapViewProps & MapViewOnyxProps;
+
+export type {MapViewOnyxProps, ComponentProps};
diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx
index f1ac13f58d16..6692e7c3e4dd 100644
--- a/src/components/MentionSuggestions.tsx
+++ b/src/components/MentionSuggestions.tsx
@@ -14,9 +14,12 @@ type Mention = {
     /** Display name of the user */
     text: string;
 
-    /** Email/phone number of the user */
+    /** The formatted email/phone number of the user */
     alternateText: string;
 
+    /** Email/phone number of the user */
+    login: string;
+
     /** Array of icons of the user. We use the first element of this array */
     icons: Icon[];
 };
@@ -79,7 +82,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                         <Text
                             // eslint-disable-next-line react/no-array-index-key
                             key={`${text}${i}`}
-                            style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsDisplayName]}
+                            style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsDisplayName]}
                         >
                             {text}
                         </Text>
@@ -95,7 +98,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe
                                 <Text
                                     // eslint-disable-next-line react/no-array-index-key
                                     key={`${text}${i}`}
-                                    style={[StyleUtils.getColoredBackgroundStyle(isColored), styles.mentionSuggestionsHandle]}
+                                    style={[StyleUtils.getColoredBackgroundStyle(theme, isColored), styles.mentionSuggestionsHandle]}
                                 >
                                     {text}
                                 </Text>
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
index 9883672976e8..a551d4a9205a 100644
--- a/src/components/MenuItem.js
+++ b/src/components/MenuItem.js
@@ -7,9 +7,9 @@ import ControlSelection from '@libs/ControlSelection';
 import convertToLTR from '@libs/convertToLTR';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
@@ -38,11 +38,11 @@ const defaultProps = {
     shouldShowHeaderTitle: false,
     shouldParseTitle: false,
     wrapperStyle: [],
-    style: styles.popoverMenuItem,
+    style: undefined,
     titleStyle: {},
     shouldShowTitleIcon: false,
     titleIcon: () => {},
-    descriptionTextStyle: styles.breakWord,
+    descriptionTextStyle: undefined,
     success: false,
     icon: undefined,
     secondaryIcon: undefined,
@@ -86,10 +86,13 @@ const defaultProps = {
 };
 
 const MenuItem = React.forwardRef((props, ref) => {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const style = StyleUtils.combineStyles(props.style, styles.popoverMenuItem);
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = React.useState('');
 
-    const isDeleted = _.contains(props.style, styles.offlineFeedback.deleted);
+    const isDeleted = _.contains(style, styles.offlineFeedback.deleted);
     const descriptionVerticalMargin = props.shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
     const titleTextStyle = StyleUtils.combineStyles(
         [
@@ -109,7 +112,7 @@ const MenuItem = React.forwardRef((props, ref) => {
         styles.textLabelSupporting,
         props.icon && !_.isArray(props.icon) ? styles.ml3 : undefined,
         props.title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal),
-        props.descriptionTextStyle,
+        props.descriptionTextStyle || styles.breakWord,
         isDeleted ? styles.offlineFeedback.deleted : undefined,
     ]);
 
@@ -176,9 +179,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                     onPressOut={ControlSelection.unblock}
                     onSecondaryInteraction={props.onSecondaryInteraction}
                     style={({pressed}) => [
-                        props.style,
+                        style,
                         !props.interactive && styles.cursorDefault,
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
+                        StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true),
                         (isHovered || pressed) && props.hoverAndPressStyle,
                         ...(_.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle]),
                         props.shouldGreyOutWhenDisabled && props.disabled && styles.buttonOpacityDisabled,
@@ -206,9 +209,9 @@ const MenuItem = React.forwardRef((props, ref) => {
                                             icons={props.icon}
                                             size={props.avatarSize}
                                             secondAvatarStyle={[
-                                                StyleUtils.getBackgroundAndBorderStyle(themeColors.sidebar),
-                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.buttonPressedBG) : undefined,
-                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(themeColors.border) : undefined,
+                                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                                pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.buttonPressedBG) : undefined,
+                                                isHovered && !pressed && props.interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.border) : undefined,
                                             ]}
                                         />
                                     )}
@@ -224,6 +227,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                     fill={
                                                         props.iconFill ||
                                                         StyleUtils.getIconFillColor(
+                                                            theme,
                                                             getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
                                                             true,
                                                         )
@@ -258,7 +262,11 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                 height={props.iconHeight}
                                                 fill={
                                                     props.secondaryIconFill ||
-                                                    StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive), true)
+                                                    StyleUtils.getIconFillColor(
+                                                        theme,
+                                                        getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive),
+                                                        true,
+                                                    )
                                                 }
                                             />
                                         </View>
@@ -291,7 +299,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                                 <View style={[styles.ml2]}>
                                                     <Icon
                                                         src={props.titleIcon}
-                                                        fill={themeColors.iconSuccessFill}
+                                                        fill={theme.iconSuccessFill}
                                                     />
                                                 </View>
                                             )}
@@ -342,7 +350,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}
                                 {(props.subtitle || props.subtitle === 0) && (
                                     <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[styles.textLabelSupporting, props.style]}>{props.subtitle}</Text>
+                                        <Text style={[styles.textLabelSupporting, style]}>{props.subtitle}</Text>
                                     </View>
                                 )}
                                 {!_.isEmpty(props.floatRightAvatars) && (
@@ -361,7 +369,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                     <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1]}>
                                         <Icon
                                             src={Expensicons.DotIndicator}
-                                            fill={props.brickRoadIndicator === 'error' ? themeColors.danger : themeColors.success}
+                                            fill={props.brickRoadIndicator === 'error' ? theme.danger : theme.success}
                                         />
                                     </View>
                                 )}
@@ -374,7 +382,7 @@ const MenuItem = React.forwardRef((props, ref) => {
                                     <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, props.disabled && styles.cursorDisabled]}>
                                         <Icon
                                             src={props.iconRight}
-                                            fill={StyleUtils.getIconFillColor(getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
+                                            fill={StyleUtils.getIconFillColor(theme, getButtonState(props.focused || isHovered, pressed, props.success, props.disabled, props.interactive))}
                                         />
                                     </View>
                                 )}
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 54a178db1cdd..7aeef4d97e31 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -56,6 +56,7 @@ function BaseModal(
      */
     const hideModal = useCallback(
         (callHideCallback = true) => {
+            Modal.willAlertModalBecomeVisible(false);
             if (shouldSetModalVisibility) {
                 Modal.setModalVisibility(false);
             }
@@ -77,8 +78,6 @@ function BaseModal(
             Modal.willAlertModalBecomeVisible(true);
             // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu
             removeOnCloseListener = Modal.setCloseModal(onClose);
-        } else if (wasVisible && !isVisible) {
-            Modal.willAlertModalBecomeVisible(false);
         }
 
         return () => {
@@ -96,7 +95,6 @@ function BaseModal(
                 return;
             }
             hideModal(true);
-            Modal.willAlertModalBecomeVisible(false);
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [],
@@ -141,11 +139,13 @@ function BaseModal(
                     windowHeight,
                     isSmallScreenWidth,
                 },
+                theme,
+                styles,
                 popoverAnchorPosition,
                 innerContainerStyle,
                 outerStyle,
             ),
-        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, type, windowHeight, windowWidth],
+        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth, styles],
     );
 
     const {
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index f760d3c0244e..bc683b6f6311 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -25,14 +25,14 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
     };
 
     const showModal = () => {
-        const statusBarColor = StatusBar.getBackgroundColor();
+        const statusBarColor = StatusBar.getBackgroundColor() ?? theme.appBG;
 
         const isFullScreenModal = type === CONST.MODAL.MODAL_TYPE.CENTERED || type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
 
         if (statusBarColor) {
             setPreviousStatusBarColor(statusBarColor);
             // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color
-            setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
+            setStatusBarColor(isFullScreenModal ? theme.appBG : StyleUtils.getThemeBackgroundColor(theme, statusBarColor));
         }
 
         onModalShow?.();
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index 3fa60e6ac765..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;
 
@@ -64,3 +64,4 @@ type BaseModalProps = WindowDimensionsProps &
     };
 
 export default BaseModalProps;
+export type {PopoverAnchorPosition};
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
index bf8bc7719316..880e46b2592a 100644
--- a/src/components/MoneyReportHeader.js
+++ b/src/components/MoneyReportHeader.js
@@ -77,7 +77,7 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
     const isPolicyAdmin = policyType !== CONST.POLICY.TYPE.PERSONAL && lodashGet(policy, 'role') === CONST.POLICY.ROLE.ADMIN;
     const isManager = ReportUtils.isMoneyRequestReport(moneyRequestReport) && lodashGet(session, 'accountID', null) === moneyRequestReport.managerID;
     const isPayer = policyType === CONST.POLICY.TYPE.CORPORATE ? isPolicyAdmin && isApproved : isPolicyAdmin || (ReportUtils.isMoneyRequestReport(moneyRequestReport) && isManager);
-    const isDraft = ReportUtils.isReportDraft(moneyRequestReport);
+    const isDraft = ReportUtils.isDraftExpenseReport(moneyRequestReport);
     const shouldShowSettlementButton = useMemo(
         () => isPayer && !isDraft && !isSettled && !moneyRequestReport.isWaitingOnBankAccount && reimbursableTotal !== 0 && !ReportUtils.isArchivedRoom(chatReport),
         [isPayer, isDraft, isSettled, moneyRequestReport, reimbursableTotal, chatReport],
@@ -89,7 +89,8 @@ function MoneyReportHeader({session, personalDetails, policy, chatReport, nextSt
         return isManager && !isDraft && !isApproved && !isSettled;
     }, [policyType, isManager, isDraft, isApproved, isSettled]);
     const shouldShowSubmitButton = isDraft && reimbursableTotal !== 0;
-    const shouldShowNextSteps = isDraft && nextStep && (!_.isEmpty(nextStep.message) || !_.isEmpty(nextStep.expenseMessage));
+    const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
+    const shouldShowNextSteps = isFromPaidPolicy && nextStep && !_.isEmpty(nextStep.message);
     const shouldShowAnyButton = shouldShowSettlementButton || shouldShowApproveButton || shouldShowSubmitButton || shouldShowNextSteps;
     const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
     const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableTotal, moneyRequestReport.currency);
diff --git a/src/components/MoneyReportHeaderStatusBar.js b/src/components/MoneyReportHeaderStatusBar.js
index 362a2dc22b9f..3f2c06be78cf 100644
--- a/src/components/MoneyReportHeaderStatusBar.js
+++ b/src/components/MoneyReportHeaderStatusBar.js
@@ -1,6 +1,5 @@
 import React, {useMemo} from 'react';
 import {Text, View} from 'react-native';
-import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import * as NextStepUtils from '@libs/NextStepUtils';
 import nextStepPropTypes from '@pages/nextStepPropTypes';
@@ -21,9 +20,9 @@ function MoneyReportHeaderStatusBar({nextStep}) {
     const {translate} = useLocalize();
 
     const messageContent = useMemo(() => {
-        const messageArray = _.isEmpty(nextStep.expenseMessage) ? nextStep.message : nextStep.expenseMessage;
+        const messageArray = nextStep.message;
         return NextStepUtils.parseMessage(messageArray);
-    }, [nextStep.expenseMessage, nextStep.message]);
+    }, [nextStep.message]);
 
     return (
         <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.overflowHidden, styles.w100]}>
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index efa9c5a49cec..f203154ab3db 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -28,17 +28,16 @@ import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import Button from './Button';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import categoryPropTypes from './categoryPropTypes';
 import ConfirmedRoute from './ConfirmedRoute';
 import FormHelpMessage from './FormHelpMessage';
-import * as Expensicons from './Icon/Expensicons';
 import Image from './Image';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
 import optionPropTypes from './optionPropTypes';
 import OptionsSelector from './OptionsSelector';
 import SettlementButton from './SettlementButton';
+import ShowMoreButton from './ShowMoreButton';
 import Switch from './Switch';
 import tagPropTypes from './tagPropTypes';
 import Text from './Text';
@@ -635,20 +634,10 @@ function MoneyRequestConfirmationList(props) {
                 numberOfLinesTitle={2}
             />
             {!shouldShowAllFields && (
-                <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter, styles.mb2, styles.mt1]}>
-                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
-                    <Button
-                        small
-                        onPress={toggleShouldExpandFields}
-                        text={translate('common.showMore')}
-                        shouldShowRightIcon
-                        iconRight={Expensicons.DownArrow}
-                        iconFill={theme.icon}
-                        style={styles.mh0}
-                    />
-
-                    <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
-                </View>
+                <ShowMoreButton
+                    containerStyle={styles.mt1}
+                    onPress={toggleShouldExpandFields}
+                />
             )}
             {shouldShowAllFields && (
                 <>
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index febe18f30c7d..179b9bc0f5a1 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import {AvatarSource} from '@libs/UserUtils';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
@@ -63,26 +63,11 @@ type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_S
 
 type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
 
-const avatarSizeToStylesMap: AvatarSizeToStylesMap = {
-    [CONST.AVATAR_SIZE.SMALL]: {
-        singleAvatarStyle: styles.singleAvatarSmall,
-        secondAvatarStyles: styles.secondAvatarSmall,
-    },
-    [CONST.AVATAR_SIZE.LARGE]: {
-        singleAvatarStyle: styles.singleAvatarMedium,
-        secondAvatarStyles: styles.secondAvatarMedium,
-    },
-    [CONST.AVATAR_SIZE.DEFAULT]: {
-        singleAvatarStyle: styles.singleAvatar,
-        secondAvatarStyles: styles.secondAvatar,
-    },
-};
-
 function MultipleAvatars({
     fallbackIcon,
     icons = [],
     size = CONST.AVATAR_SIZE.DEFAULT,
-    secondAvatarStyle = [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
+    secondAvatarStyle: secondAvatarStyleProp,
     shouldStackHorizontally = false,
     shouldDisplayAvatarsInRows = false,
     isHovered = false,
@@ -93,8 +78,31 @@ function MultipleAvatars({
     shouldUseCardBackground = false,
     maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
 }: MultipleAvatarsProps) {
-    let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
-    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
+        () => ({
+            [CONST.AVATAR_SIZE.SMALL]: {
+                singleAvatarStyle: styles.singleAvatarSmall,
+                secondAvatarStyles: styles.secondAvatarSmall,
+            },
+            [CONST.AVATAR_SIZE.LARGE]: {
+                singleAvatarStyle: styles.singleAvatarMedium,
+                secondAvatarStyles: styles.secondAvatarMedium,
+            },
+            [CONST.AVATAR_SIZE.DEFAULT]: {
+                singleAvatarStyle: styles.singleAvatar,
+                secondAvatarStyles: styles.secondAvatar,
+            },
+        }),
+        [styles],
+    );
+
+    const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
+
+    let avatarContainerStyles = StyleUtils.getContainerStyles(styles, size, isInReportAction);
+    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
 
     const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
     const avatarSize = useMemo(() => {
@@ -143,7 +151,7 @@ function MultipleAvatars({
                     <Avatar
                         source={icons[0].source}
                         size={size}
-                        fill={themeColors.iconSuccessFill}
+                        fill={theme.iconSuccessFill}
                         name={icons[0].name}
                         type={icons[0].type}
                         fallbackIcon={icons[0].fallbackIcon}
@@ -153,7 +161,7 @@ function MultipleAvatars({
         );
     }
 
-    const oneAvatarSize = StyleUtils.getAvatarStyle(size);
+    const oneAvatarSize = StyleUtils.getAvatarStyle(theme, size);
     const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0;
     const overlapSize = oneAvatarSize.width / 3;
 
@@ -189,11 +197,12 @@ function MultipleAvatars({
                                                 isPressed,
                                                 isInReportAction,
                                                 shouldUseCardBackground,
+                                                theme,
                                             }),
                                             StyleUtils.getAvatarBorderWidth(size),
                                         ]}
                                         source={icon.source ?? fallbackIcon}
-                                        fill={themeColors.iconSuccessFill}
+                                        fill={theme.iconSuccessFill}
                                         size={size}
                                         name={icon.name}
                                         type={icon.type}
@@ -216,10 +225,11 @@ function MultipleAvatars({
                                             isPressed,
                                             isInReportAction,
                                             shouldUseCardBackground,
+                                            theme,
                                         }),
 
                                         // Set overlay background color with RGBA value so that the text will not inherit opacity
-                                        StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
+                                        StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
                                         StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
                                         icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[3].type) : {},
                                     ]}
@@ -256,7 +266,7 @@ function MultipleAvatars({
                             <View>
                                 <Avatar
                                     source={icons[0].source ?? fallbackIcon}
-                                    fill={themeColors.iconSuccessFill}
+                                    fill={theme.iconSuccessFill}
                                     size={avatarSize}
                                     imageStyles={[singleAvatarStyle]}
                                     name={icons[0].name}
@@ -277,7 +287,7 @@ function MultipleAvatars({
                                     <View>
                                         <Avatar
                                             source={icons[1].source ?? fallbackIcon}
-                                            fill={themeColors.iconSuccessFill}
+                                            fill={theme.iconSuccessFill}
                                             size={avatarSize}
                                             imageStyles={[singleAvatarStyle]}
                                             name={icons[1].name}
diff --git a/src/components/NewDatePicker/CalendarPicker/index.js b/src/components/NewDatePicker/CalendarPicker/index.js
index f2aa687c43e4..82204e095f4a 100644
--- a/src/components/NewDatePicker/CalendarPicker/index.js
+++ b/src/components/NewDatePicker/CalendarPicker/index.js
@@ -1,4 +1,5 @@
-import {addMonths, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, subMonths} from 'date-fns';
+import {withTheme} from '@storybook/theming';
+import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,6 +9,7 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import {withThemePropTypes} from '@components/withTheme';
 import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
 import DateUtils from '@libs/DateUtils';
@@ -33,6 +35,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
     ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 const defaultProps = {
@@ -127,8 +130,8 @@ class CalendarPicker extends React.PureComponent {
         const currentMonthView = this.state.currentDateView.getMonth();
         const currentYearView = this.state.currentDateView.getFullYear();
         const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
-        const hasAvailableDatesNextMonth = startOfDay(endOfMonth(new Date(this.props.maxDate))) > addMonths(new Date(this.state.currentDateView), 1);
-        const hasAvailableDatesPrevMonth = startOfDay(new Date(this.props.minDate)) < endOfMonth(subMonths(new Date(this.state.currentDateView), 1));
+        const hasAvailableDatesNextMonth = startOfDay(new Date(this.props.maxDate)) > endOfMonth(new Date(this.state.currentDateView));
+        const hasAvailableDatesPrevMonth = endOfDay(new Date(this.props.minDate)) < startOfMonth(new Date(this.state.currentDateView));
 
         return (
             <View>
@@ -219,7 +222,7 @@ class CalendarPicker extends React.PureComponent {
                             const isBeforeMinDate = currentDate < startOfDay(new Date(this.props.minDate));
                             const isAfterMaxDate = currentDate > startOfDay(new Date(this.props.maxDate));
                             const isDisabled = !day || isBeforeMinDate || isAfterMaxDate;
-                            const isSelected = isSameDay(parseISO(this.props.value), new Date(currentYearView, currentMonthView, day));
+                            const isSelected = !!day && isSameDay(parseISO(this.props.value), new Date(currentYearView, currentMonthView, day));
                             return (
                                 <PressableWithoutFeedback
                                     key={`${index}_day-${day}`}
@@ -236,7 +239,7 @@ class CalendarPicker extends React.PureComponent {
                                             style={[
                                                 this.props.themeStyles.calendarDayContainer,
                                                 isSelected ? this.props.themeStyles.calendarDayContainerSelected : {},
-                                                !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
+                                                !isDisabled ? StyleUtils.getButtonBackgroundColorStyle(this.props.theme, getButtonState(hovered, pressed)) : {},
                                             ]}
                                         >
                                             <Text style={isDisabled ? this.props.themeStyles.buttonOpacityDisabled : this.props.themeStyles.dayText}>{day}</Text>
@@ -262,4 +265,4 @@ class CalendarPicker extends React.PureComponent {
 CalendarPicker.propTypes = propTypes;
 CalendarPicker.defaultProps = defaultProps;
 
-export default compose(withLocalize, withThemeStyles)(CalendarPicker);
+export default compose(withLocalize, withThemeStyles, withTheme)(CalendarPicker);
diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index 9cacc3621790..01f207b7ba97 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import compose from '@libs/compose';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
@@ -36,20 +36,22 @@ const defaultProps = {
     style: [],
 };
 
-const setStyles = (containerStyles, isSmallScreenWidth) => {
-    if (containerStyles.length) {
-        return containerStyles;
-    }
-    return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
-};
-
 function OfflineIndicator(props) {
+    const styles = useThemeStyles();
+
+    const computedStyles = useMemo(() => {
+        if (props.containerStyles.length) {
+            return props.containerStyles;
+        }
+        return props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
+    }, [props.containerStyles, props.isSmallScreenWidth, styles.offlineIndicatorMobile, styles.offlineIndicator]);
+
     if (!props.network.isOffline) {
         return null;
     }
 
     return (
-        <View style={[setStyles(props.containerStyles, props.isSmallScreenWidth), styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
+        <View style={[computedStyles, styles.flexRow, styles.alignItemsCenter, ...StyleUtils.parseStyleAsArray(props.style)]}>
             <Icon
                 src={Expensicons.OfflineCloud}
                 width={variables.iconSizeSmall}
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index ba893aeb2fe4..7a2dfbd2b6da 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -5,8 +5,8 @@ import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import MessagesRow from './MessagesRow';
 
@@ -76,22 +76,24 @@ const defaultProps = {
 /**
  * This method applies the strikethrough to all the children passed recursively
  * @param {Array} children
+ * @param {Object} styles
  * @return {Array}
  */
-function applyStrikeThrough(children) {
+function applyStrikeThrough(children, styles) {
     return React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
             return child;
         }
         const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
         if (child.props.children) {
-            props.children = applyStrikeThrough(child.props.children);
+            props.children = applyStrikeThrough(child.props.children, styles);
         }
         return React.cloneElement(child, props);
     });
 }
 
 function OfflineWithFeedback(props) {
+    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
     const hasErrors = !_.isEmpty(props.errors);
@@ -109,7 +111,7 @@ function OfflineWithFeedback(props) {
 
     // Apply strikethrough to children if needed, but skip it if we are not going to render them
     if (needsStrikeThrough && !hideChildren) {
-        children = applyStrikeThrough(children);
+        children = applyStrikeThrough(children, styles);
     }
     return (
         <View style={props.style}>
diff --git a/src/components/Onfido/BaseOnfidoWeb.js b/src/components/Onfido/BaseOnfidoWeb.js
index 5c0f83902e55..7a3b90945a5c 100644
--- a/src/components/Onfido/BaseOnfidoWeb.js
+++ b/src/components/Onfido/BaseOnfidoWeb.js
@@ -6,13 +6,13 @@ import useLocalize from '@hooks/useLocalize';
 import Log from '@libs/Log';
 import fontFamily from '@styles/fontFamily';
 import fontWeightBold from '@styles/fontWeight/bold';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import './index.css';
 import onfidoPropTypes from './onfidoPropTypes';
 
-function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate}) {
+function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate, theme}) {
     OnfidoSDK.init({
         token: sdkToken,
         containerId: CONST.ONFIDO.CONTAINER_ID,
@@ -25,35 +25,35 @@ function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLo
             fontWeightTitle: fontWeightBold,
             fontWeightSubtitle: 400,
             fontSizeSubtitle: `${variables.fontSizeNormal}px`,
-            colorContentTitle: themeColors.text,
-            colorContentSubtitle: themeColors.text,
-            colorContentBody: themeColors.text,
+            colorContentTitle: theme.text,
+            colorContentSubtitle: theme.text,
+            colorContentBody: theme.text,
             borderRadiusButton: `${variables.buttonBorderRadius}px`,
-            colorBackgroundSurfaceModal: themeColors.appBG,
-            colorBorderDocTypeButton: themeColors.border,
-            colorBorderDocTypeButtonHover: themeColors.transparent,
-            colorBorderButtonPrimaryHover: themeColors.transparent,
-            colorBackgroundButtonPrimary: themeColors.success,
-            colorBackgroundButtonPrimaryHover: themeColors.successHover,
-            colorBackgroundButtonPrimaryActive: themeColors.successHover,
-            colorBorderButtonPrimary: themeColors.success,
-            colorContentButtonSecondaryText: themeColors.text,
-            colorBackgroundButtonSecondary: themeColors.border,
-            colorBackgroundButtonSecondaryHover: themeColors.icon,
-            colorBackgroundButtonSecondaryActive: themeColors.icon,
-            colorBorderButtonSecondary: themeColors.border,
-            colorBackgroundIcon: themeColors.transparent,
-            colorContentLinkTextHover: themeColors.appBG,
-            colorBorderLinkUnderline: themeColors.link,
-            colorBackgroundLinkHover: themeColors.link,
-            colorBackgroundLinkActive: themeColors.link,
-            authAccentColor: themeColors.link,
-            colorBackgroundInfoPill: themeColors.link,
-            colorBackgroundSelector: themeColors.appBG,
-            colorBackgroundDocTypeButton: themeColors.success,
-            colorBackgroundDocTypeButtonHover: themeColors.successHover,
-            colorBackgroundButtonIconHover: themeColors.transparent,
-            colorBackgroundButtonIconActive: themeColors.transparent,
+            colorBackgroundSurfaceModal: theme.appBG,
+            colorBorderDocTypeButton: theme.border,
+            colorBorderDocTypeButtonHover: theme.transparent,
+            colorBorderButtonPrimaryHover: theme.transparent,
+            colorBackgroundButtonPrimary: theme.success,
+            colorBackgroundButtonPrimaryHover: theme.successHover,
+            colorBackgroundButtonPrimaryActive: theme.successHover,
+            colorBorderButtonPrimary: theme.success,
+            colorContentButtonSecondaryText: theme.text,
+            colorBackgroundButtonSecondary: theme.border,
+            colorBackgroundButtonSecondaryHover: theme.icon,
+            colorBackgroundButtonSecondaryActive: theme.icon,
+            colorBorderButtonSecondary: theme.border,
+            colorBackgroundIcon: theme.transparent,
+            colorContentLinkTextHover: theme.appBG,
+            colorBorderLinkUnderline: theme.link,
+            colorBackgroundLinkHover: theme.link,
+            colorBackgroundLinkActive: theme.link,
+            authAccentColor: theme.link,
+            colorBackgroundInfoPill: theme.link,
+            colorBackgroundSelector: theme.appBG,
+            colorBackgroundDocTypeButton: theme.success,
+            colorBackgroundDocTypeButtonHover: theme.successHover,
+            colorBackgroundButtonIconHover: theme.transparent,
+            colorBackgroundButtonIconActive: theme.transparent,
         },
         steps: [
             {
@@ -120,6 +120,7 @@ function logOnFidoEvent(event) {
 
 const Onfido = forwardRef((props, ref) => {
     const {preferredLocale, translate} = useLocalize();
+    const theme = useTheme();
 
     useEffect(() => {
         initializeOnfido({
@@ -129,6 +130,7 @@ const Onfido = forwardRef((props, ref) => {
             onUserExit: props.onUserExit,
             preferredLocale,
             translate,
+            theme,
         });
 
         window.addEventListener('userAnalyticsEvent', logOnFidoEvent);
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
index 8afda6c375bb..cb670f3cf6ce 100644
--- a/src/components/OptionRow.js
+++ b/src/components/OptionRow.js
@@ -186,6 +186,7 @@ function OptionRow(props) {
                             styles.alignItemsCenter,
                             styles.justifyContentBetween,
                             styles.sidebarLink,
+                            !props.isDisabled && styles.cursorPointer,
                             props.shouldDisableRowInnerPadding ? null : styles.sidebarLinkInner,
                             props.optionIsFocused ? styles.sidebarLinkActive : null,
                             props.shouldHaveOptionSeparator && styles.borderTop,
diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
index 2f81e6d80e7d..b2bc4b182a60 100644
--- a/src/components/OptionsList/BaseOptionsList.js
+++ b/src/components/OptionsList/BaseOptionsList.js
@@ -9,6 +9,7 @@ import Text from '@components/Text';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import {defaultProps as optionsListDefaultProps, propTypes as optionsListPropTypes} from './optionsListPropTypes';
 
 const propTypes = {
@@ -70,6 +71,7 @@ function BaseOptionsList({
     isLoadingNewOptions,
     nestedScrollEnabled,
     bounces,
+    renderFooterContent,
 }) {
     const styles = useThemeStyles();
     const flattenedData = useRef();
@@ -281,11 +283,12 @@ function BaseOptionsList({
                         renderSectionHeader={renderSectionHeader}
                         extraData={focusedIndex}
                         initialNumToRender={12}
-                        maxToRenderPerBatch={5}
+                        maxToRenderPerBatch={CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT}
                         windowSize={5}
                         viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                         onViewableItemsChanged={onViewableItemsChanged}
                         bounces={bounces}
+                        ListFooterComponent={renderFooterContent}
                     />
                 </>
             )}
diff --git a/src/components/OptionsList/optionsListPropTypes.js b/src/components/OptionsList/optionsListPropTypes.js
index b841943f2402..19bb43fbcc78 100644
--- a/src/components/OptionsList/optionsListPropTypes.js
+++ b/src/components/OptionsList/optionsListPropTypes.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import SectionList from '@components/SectionList';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 
 const propTypes = {
     /** option flexStyle for the options list container */
@@ -100,13 +99,16 @@ const propTypes = {
 
     /** Whether the list should have a bounce effect on iOS */
     bounces: PropTypes.bool,
+
+    /** Custom content to display in the floating footer */
+    renderFooterContent: PropTypes.func,
 };
 
 const defaultProps = {
     optionHoveredStyle: undefined,
     contentContainerStyles: [],
     sectionHeaderStyle: undefined,
-    listContainerStyles: [styles.flex1],
+    listContainerStyles: [{flex: 1}],
     sections: [],
     focusedIndex: 0,
     selectedOptions: [],
@@ -130,6 +132,7 @@ const defaultProps = {
     isLoadingNewOptions: false,
     nestedScrollEnabled: true,
     bounces: true,
+    renderFooterContent: undefined,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 1702f66605f7..9c8b76515fe8 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -11,17 +11,18 @@ import Icon from '@components/Icon';
 import {Info} from '@components/Icon/Expensicons';
 import OptionsList from '@components/OptionsList';
 import {PressableWithoutFeedback} from '@components/Pressable';
+import ShowMoreButton from '@components/ShowMoreButton';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigationFocus from '@components/withNavigationFocus';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
+import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
 import getPlatform from '@libs/getPlatform';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
 import setSelection from '@libs/setSelection';
-import colors from '@styles/colors';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import {defaultProps as optionsSelectorDefaultProps, propTypes as optionsSelectorPropTypes} from './optionsSelectorPropTypes';
@@ -50,6 +51,8 @@ const propTypes = {
 
     ...optionsSelectorPropTypes,
     ...withLocalizePropTypes,
+    ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 const defaultProps = {
@@ -58,7 +61,7 @@ const defaultProps = {
     referralContentType: CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND,
     safeAreaPaddingBottomStyle: {},
     contentContainerStyles: [],
-    listContainerStyles: [styles.flex1],
+    listContainerStyles: undefined,
     listStyles: [],
     ...optionsSelectorDefaultProps,
 };
@@ -74,17 +77,23 @@ class BaseOptionsSelector extends Component {
         this.selectFocusedOption = this.selectFocusedOption.bind(this);
         this.addToSelection = this.addToSelection.bind(this);
         this.updateSearchValue = this.updateSearchValue.bind(this);
+        this.incrementPage = this.incrementPage.bind(this);
+        this.sliceSections = this.sliceSections.bind(this);
+        this.calculateAllVisibleOptionsCount = this.calculateAllVisibleOptionsCount.bind(this);
         this.relatedTarget = null;
 
         const allOptions = this.flattenSections();
+        const sections = this.sliceSections();
         const focusedIndex = this.getInitiallyFocusedIndex(allOptions);
 
         this.state = {
+            sections,
             allOptions,
             focusedIndex,
             shouldDisableRowSelection: false,
             shouldShowReferralModal: false,
             errorMessage: '',
+            paginationPage: 1,
         };
     }
 
@@ -100,7 +109,7 @@ class BaseOptionsSelector extends Component {
         this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false);
     }
 
-    componentDidUpdate(prevProps) {
+    componentDidUpdate(prevProps, prevState) {
         if (prevProps.isFocused !== this.props.isFocused) {
             if (this.props.isFocused) {
                 this.subscribeToKeyboardShortcut();
@@ -118,14 +127,24 @@ class BaseOptionsSelector extends Component {
             }, CONST.ANIMATED_TRANSITION);
         }
 
+        if (prevState.paginationPage !== this.state.paginationPage) {
+            const newSections = this.sliceSections();
+
+            this.setState({
+                sections: newSections,
+            });
+        }
+
         if (_.isEqual(this.props.sections, prevProps.sections)) {
             return;
         }
 
+        const newSections = this.sliceSections();
         const newOptions = this.flattenSections();
 
         if (prevProps.preferredLocale !== this.props.preferredLocale) {
             this.setState({
+                sections: newSections,
                 allOptions: newOptions,
             });
             return;
@@ -136,6 +155,7 @@ class BaseOptionsSelector extends Component {
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState(
             {
+                sections: newSections,
                 allOptions: newOptions,
                 focusedIndex: _.isNumber(this.props.focusedIndex) ? this.props.focusedIndex : newFocusedIndex,
             },
@@ -189,8 +209,43 @@ class BaseOptionsSelector extends Component {
         return defaultIndex;
     }
 
+    /**
+     * Maps sections to render only allowed count of them per section.
+     *
+     * @returns {Objects[]}
+     */
+    sliceSections() {
+        return _.map(this.props.sections, (section) => {
+            if (_.isEmpty(section.data)) {
+                return section;
+            }
+
+            return {
+                ...section,
+                data: section.data.slice(0, CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * lodashGet(this.state, 'paginationPage', 1)),
+            };
+        });
+    }
+
+    /**
+     * Calculates all currently visible options based on the sections that are currently being shown
+     * and the number of items of those sections.
+     *
+     * @returns {Number}
+     */
+    calculateAllVisibleOptionsCount() {
+        let count = 0;
+
+        _.forEach(this.state.sections, (section) => {
+            count += lodashGet(section, 'data.length', 0);
+        });
+
+        return count;
+    }
+
     updateSearchValue(value) {
         this.setState({
+            paginationPage: 1,
             errorMessage: value.length > this.props.maxLength ? this.props.translate('common.error.characterLimitExceedCounter', {length: value.length, limit: this.props.maxLength}) : '',
         });
 
@@ -328,12 +383,16 @@ class BaseOptionsSelector extends Component {
         const itemIndex = option.index;
         const sectionIndex = option.sectionIndex;
 
+        if (!lodashGet(this.state.sections, `[${sectionIndex}].data[${itemIndex}]`, null)) {
+            return;
+        }
+
         // Note: react-native's SectionList automatically strips out any empty sections.
         // So we need to reduce the sectionIndex to remove any empty sections in front of the one we're trying to scroll to.
         // Otherwise, it will cause an index-out-of-bounds error and crash the app.
         let adjustedSectionIndex = sectionIndex;
         for (let i = 0; i < sectionIndex; i++) {
-            if (_.isEmpty(lodashGet(this.props.sections, `[${i}].data`))) {
+            if (_.isEmpty(lodashGet(this.state.sections, `[${i}].data`))) {
                 adjustedSectionIndex--;
             }
         }
@@ -387,12 +446,24 @@ class BaseOptionsSelector extends Component {
         this.props.onAddToSelection(option);
     }
 
+    /**
+     * Increments a pagination page to show more items
+     */
+    incrementPage() {
+        this.setState((prev) => ({
+            paginationPage: prev.paginationPage + 1,
+        }));
+    }
+
     render() {
+        const shouldShowShowMoreButton = this.state.allOptions.length > CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage;
         const shouldShowFooter =
             !this.props.isReadOnly && (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions));
         const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText;
         const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
         const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle;
+        const listContainerStyles = this.props.listContainerStyles || [this.props.themeStyles.flex1];
+
         const textInput = (
             <TextInput
                 ref={(el) => (this.textInput = el)}
@@ -422,9 +493,9 @@ class BaseOptionsSelector extends Component {
         const optionsList = (
             <OptionsList
                 ref={(el) => (this.list = el)}
-                optionHoveredStyle={this.props.optionHoveredStyle}
+                optionHoveredStyle={this.props.optionHoveredStyle || this.props.themeStyles.hoveredComponentBG}
                 onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
-                sections={this.props.sections}
+                sections={this.state.sections}
                 focusedIndex={this.state.focusedIndex}
                 selectedOptions={this.props.selectedOptions}
                 canSelectMultipleOptions={this.props.canSelectMultipleOptions}
@@ -449,7 +520,7 @@ class BaseOptionsSelector extends Component {
                 }}
                 contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]}
                 sectionHeaderStyle={this.props.sectionHeaderStyle}
-                listContainerStyles={this.props.listContainerStyles}
+                listContainerStyles={listContainerStyles}
                 listStyles={this.props.listStyles}
                 isLoading={!this.props.shouldShowOptions}
                 showScrollIndicator={this.props.showScrollIndicator}
@@ -458,13 +529,39 @@ class BaseOptionsSelector extends Component {
                 shouldPreventDefaultFocusOnSelectRow={this.props.shouldPreventDefaultFocusOnSelectRow}
                 nestedScrollEnabled={this.props.nestedScrollEnabled}
                 bounces={!this.props.shouldTextInputAppearBelowOptions || !this.props.shouldAllowScrollingChildren}
+                renderFooterContent={() =>
+                    shouldShowShowMoreButton && (
+                        <ShowMoreButton
+                            containerStyle={{...this.props.themeStyles.mt2, ...this.props.themeStyles.mb5}}
+                            currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage}
+                            totalCount={this.state.allOptions.length}
+                            onPress={this.incrementPage}
+                        />
+                    )
+                }
             />
         );
 
         const optionsAndInputsBelowThem = (
             <>
-                <View style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100, styles.flexRow]}>{optionsList}</View>
-                <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0] : []}>
+                <View
+                    style={[
+                        this.props.themeStyles.flexGrow0,
+                        this.props.themeStyles.flexShrink1,
+                        this.props.themeStyles.flexBasisAuto,
+                        this.props.themeStyles.w100,
+                        this.props.themeStyles.flexRow,
+                    ]}
+                >
+                    {optionsList}
+                </View>
+                <View
+                    style={
+                        this.props.shouldUseStyleForChildren
+                            ? [this.props.themeStyles.ph5, this.props.themeStyles.pv5, this.props.themeStyles.flexGrow1, this.props.themeStyles.flexShrink0]
+                            : []
+                    }
+                >
                     {this.props.children}
                     {this.props.shouldShowTextInput && textInput}
                 </View>
@@ -475,22 +572,22 @@ class BaseOptionsSelector extends Component {
             <ArrowKeyFocusManager
                 disabledIndexes={this.disabledOptionsIndexes}
                 focusedIndex={this.state.focusedIndex}
-                maxIndex={this.state.allOptions.length - 1}
+                maxIndex={this.calculateAllVisibleOptionsCount() - 1}
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
                 shouldResetIndexOnEndReached={false}
             >
-                <View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto]}>
+                <View style={[this.props.themeStyles.flexGrow1, this.props.themeStyles.flexShrink1, this.props.themeStyles.flexBasisAuto]}>
                     {/*
                      * The OptionsList component uses a SectionList which uses a VirtualizedList internally.
                      * VirtualizedList cannot be directly nested within ScrollViews of the same orientation.
                      * To work around this, we wrap the OptionsList component with a horizontal ScrollView.
                      */}
                     {this.props.shouldTextInputAppearBelowOptions && this.props.shouldAllowScrollingChildren && (
-                        <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+                        <ScrollView contentContainerStyle={[this.props.themeStyles.flexGrow1]}>
                             <ScrollView
                                 horizontal
                                 bounces={false}
-                                contentContainerStyle={[styles.flex1, styles.flexColumn]}
+                                contentContainerStyle={[this.props.themeStyles.flex1, this.props.themeStyles.flexColumn]}
                             >
                                 {optionsAndInputsBelowThem}
                             </ScrollView>
@@ -501,13 +598,13 @@ class BaseOptionsSelector extends Component {
 
                     {!this.props.shouldTextInputAppearBelowOptions && (
                         <>
-                            <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pb3] : []}>
+                            <View style={this.props.shouldUseStyleForChildren ? [this.props.themeStyles.ph5, this.props.themeStyles.pb3] : []}>
                                 {this.props.children}
                                 {this.props.shouldShowTextInput && textInput}
                                 {Boolean(this.props.textInputAlert) && (
                                     <FormHelpMessage
                                         message={this.props.textInputAlert}
-                                        style={[styles.mb3]}
+                                        style={[this.props.themeStyles.mb3]}
                                         isError={false}
                                     />
                                 )}
@@ -517,20 +614,29 @@ class BaseOptionsSelector extends Component {
                     )}
                 </View>
                 {this.props.shouldShowReferralCTA && (
-                    <View style={[styles.ph5, styles.pb5, styles.flexShrink0]}>
+                    <View style={[this.props.themeStyles.ph5, this.props.themeStyles.pb5, this.props.themeStyles.flexShrink0]}>
                         <PressableWithoutFeedback
                             onPress={() => {
                                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(this.props.referralContentType));
                             }}
-                            style={[styles.p5, styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10}]}
+                            style={[
+                                this.props.themeStyles.p5,
+                                this.props.themeStyles.w100,
+                                this.props.themeStyles.br2,
+                                this.props.themeStyles.highlightBG,
+                                this.props.themeStyles.flexRow,
+                                this.props.themeStyles.justifyContentBetween,
+                                this.props.themeStyles.alignItemsCenter,
+                                {gap: 10},
+                            ]}
                             accessibilityLabel="referral"
                             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         >
                             <Text>
                                 {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText1`)}
                                 <Text
-                                    color={colors.green400}
-                                    style={styles.textStrong}
+                                    color={this.props.theme.success}
+                                    style={this.props.themeStyles.textStrong}
                                 >
                                     {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText2`)}
                                 </Text>
@@ -549,7 +655,7 @@ class BaseOptionsSelector extends Component {
                         {shouldShowDefaultConfirmButton && (
                             <Button
                                 success
-                                style={[styles.w100]}
+                                style={[this.props.themeStyles.w100]}
                                 text={defaultConfirmButtonText}
                                 onPress={this.props.onConfirmSelection}
                                 pressOnEnter
@@ -567,4 +673,4 @@ class BaseOptionsSelector extends Component {
 BaseOptionsSelector.defaultProps = defaultProps;
 BaseOptionsSelector.propTypes = propTypes;
 
-export default compose(withLocalize, withNavigationFocus)(BaseOptionsSelector);
+export default compose(withLocalize, withNavigationFocus, withThemeStyles, withTheme)(BaseOptionsSelector);
diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
index ba4f5beb55cd..8593569dfafd 100644
--- a/src/components/OptionsSelector/optionsSelectorPropTypes.js
+++ b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import optionPropTypes from '@components/optionPropTypes';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
 
 const propTypes = {
@@ -162,7 +161,7 @@ const defaultProps = {
     onConfirmSelection: () => {},
     shouldTextInputAppearBelowOptions: false,
     footerContent: undefined,
-    optionHoveredStyle: styles.hoveredComponentBG,
+    optionHoveredStyle: undefined,
     sectionHeaderStyle: undefined,
     shouldShowOptions: true,
     disableArrowKeysActions: false,
diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
index fd01176d9fb2..50e737ba54d3 100644
--- a/src/components/PDFView/index.js
+++ b/src/components/PDFView/index.js
@@ -10,10 +10,10 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Text from '@components/Text';
 import withLocalize from '@components/withLocalize';
+import withThemeStyles from '@components/withThemeStyles';
 import withWindowDimensions from '@components/withWindowDimensions';
 import compose from '@libs/compose';
 import Log from '@libs/Log';
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import * as CanvasSize from '@userActions/CanvasSize';
 import CONST from '@src/CONST';
@@ -262,6 +262,7 @@ class PDFView extends Component {
     }
 
     renderPDFView() {
+        const styles = this.props.themeStyles;
         const pageWidth = this.calculatePageWidth();
         const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter];
 
@@ -323,6 +324,7 @@ class PDFView extends Component {
     }
 
     render() {
+        const styles = this.props.themeStyles;
         return this.props.onPress ? (
             <PressableWithoutFeedback
                 onPress={this.props.onPress}
@@ -344,6 +346,7 @@ PDFView.defaultProps = pdfViewPropTypes.defaultProps;
 export default compose(
     withLocalize,
     withWindowDimensions,
+    withThemeStyles,
     withOnyx({
         maxCanvasArea: {
             key: ONYXKEYS.MAX_CANVAS_AREA,
diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js
index 61ebcc001854..546f9b1a8933 100644
--- a/src/components/PDFView/pdfViewPropTypes.js
+++ b/src/components/PDFView/pdfViewPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import stylePropTypes from '@styles/stylePropTypes';
 
@@ -31,6 +32,8 @@ const propTypes = {
     errorLabelStyles: stylePropTypes,
 
     ...windowDimensionsPropTypes,
+
+    ...withThemeStylesPropTypes,
 };
 
 const defaultProps = {
diff --git a/src/components/Picker/BasePicker.js b/src/components/Picker/BasePicker.js
index 1cd3fe89112a..084cabc02234 100644
--- a/src/components/Picker/BasePicker.js
+++ b/src/components/Picker/BasePicker.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useContext, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import RNPickerSelect from 'react-native-picker-select';
 import _ from 'underscore';
@@ -9,8 +9,8 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import refPropTypes from '@components/refPropTypes';
 import {ScrollContext} from '@components/ScrollViewWithContext';
 import Text from '@components/Text';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** A forwarded ref */
@@ -97,19 +97,16 @@ const defaultProps = {
     value: undefined,
     placeholder: {},
     size: 'normal',
-    icon: (size) => (
-        <Icon
-            src={Expensicons.DownArrow}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...(size === 'small' ? {width: styles.pickerSmall().icon.width, height: styles.pickerSmall().icon.height} : {})}
-        />
-    ),
+    icon: undefined,
     shouldFocusPicker: false,
     onBlur: () => {},
     additionalPickerEvents: () => {},
 };
 
 function BasePicker(props) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
     const [isHighlighted, setIsHighlighted] = useState(false);
 
     // reference to the root View
@@ -124,7 +121,7 @@ function BasePicker(props) {
         ? {}
         : {
               ...props.placeholder,
-              color: themeColors.pickerOptionsTextColor,
+              color: theme.pickerOptionsTextColor,
           };
 
     useEffect(() => {
@@ -164,6 +161,28 @@ function BasePicker(props) {
         setIsHighlighted(false);
     };
 
+    const {icon, size} = props;
+
+    const iconToRender = useMemo(() => {
+        if (icon) {
+            return () => icon(size);
+        }
+
+        // eslint-disable-next-line react/display-name
+        return () => (
+            <Icon
+                src={Expensicons.DownArrow}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(size === 'small'
+                    ? {
+                          width: styles.pickerSmall().icon.width,
+                          height: styles.pickerSmall().icon.height,
+                      }
+                    : {})}
+            />
+        );
+    }, [icon, size, styles]);
+
     useImperativeHandle(props.forwardedRef, () => ({
         /**
          * Focuses the picker (if configured to do so)
@@ -236,12 +255,12 @@ function BasePicker(props) {
                 <RNPickerSelect
                     onValueChange={onInputChange}
                     // We add a text color to prevent white text on white background dropdown items on Windows
-                    items={_.map(props.items, (item) => ({...item, color: themeColors.pickerOptionsTextColor}))}
-                    style={props.size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)}
+                    items={_.map(props.items, (item) => ({...item, color: theme.pickerOptionsTextColor}))}
+                    style={size === 'normal' ? styles.picker(props.isDisabled, props.backgroundColor) : styles.pickerSmall(props.backgroundColor)}
                     useNativeAndroidPickerStyle={false}
                     placeholder={placeholder}
                     value={props.value}
-                    Icon={() => props.icon(props.size)}
+                    Icon={iconToRender}
                     disabled={props.isDisabled}
                     fixAndroidTouchableBug
                     onOpen={enableHighlight}
diff --git a/src/components/PlaidLink/index.native.js b/src/components/PlaidLink/index.native.js
deleted file mode 100644
index 7d995d03926b..000000000000
--- a/src/components/PlaidLink/index.native.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import {useEffect} from 'react';
-import {dismissLink, openLink, useDeepLinkRedirector, usePlaidEmitter} from 'react-native-plaid-link-sdk';
-import Log from '@libs/Log';
-import CONST from '@src/CONST';
-import {plaidLinkDefaultProps, plaidLinkPropTypes} from './plaidLinkPropTypes';
-
-function PlaidLink(props) {
-    useDeepLinkRedirector();
-    usePlaidEmitter((event) => {
-        Log.info('[PlaidLink] Handled Plaid Event: ', false, event);
-        props.onEvent(event.eventName, event.metadata);
-    });
-    useEffect(() => {
-        props.onEvent(CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.OPEN, {});
-        openLink({
-            tokenConfig: {
-                token: props.token,
-            },
-            onSuccess: ({publicToken, metadata}) => {
-                props.onSuccess({publicToken, metadata});
-            },
-            onExit: (exitError, metadata) => {
-                Log.info('[PlaidLink] Exit: ', false, {exitError, metadata});
-                props.onExit();
-            },
-        });
-
-        return () => {
-            dismissLink();
-        };
-
-        // We generally do not need to include the token as a dependency here as it is only provided once via props and should not change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return null;
-}
-
-PlaidLink.propTypes = plaidLinkPropTypes;
-PlaidLink.defaultProps = plaidLinkDefaultProps;
-PlaidLink.displayName = 'PlaidLink';
-
-export default PlaidLink;
diff --git a/src/components/PlaidLink/index.native.tsx b/src/components/PlaidLink/index.native.tsx
new file mode 100644
index 000000000000..c46a9df2076e
--- /dev/null
+++ b/src/components/PlaidLink/index.native.tsx
@@ -0,0 +1,40 @@
+import {useEffect} from 'react';
+import {dismissLink, LinkEvent, openLink, usePlaidEmitter} from 'react-native-plaid-link-sdk';
+import Log from '@libs/Log';
+import CONST from '@src/CONST';
+import PlaidLinkProps from './types';
+
+function PlaidLink({token, onSuccess = () => {}, onExit = () => {}, onEvent}: PlaidLinkProps) {
+    usePlaidEmitter((event: LinkEvent) => {
+        Log.info('[PlaidLink] Handled Plaid Event: ', false, {...event});
+        onEvent(event.eventName, event.metadata);
+    });
+    useEffect(() => {
+        onEvent(CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.OPEN);
+        openLink({
+            tokenConfig: {
+                token,
+                noLoadingState: false,
+            },
+            onSuccess: ({publicToken, metadata}) => {
+                onSuccess({publicToken, metadata});
+            },
+            onExit: ({error, metadata}) => {
+                Log.info('[PlaidLink] Exit: ', false, {error, metadata});
+                onExit();
+            },
+        });
+
+        return () => {
+            dismissLink();
+        };
+
+        // We generally do not need to include the token as a dependency here as it is only provided once via props and should not change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return null;
+}
+
+PlaidLink.displayName = 'PlaidLink';
+
+export default PlaidLink;
diff --git a/src/components/PlaidLink/index.js b/src/components/PlaidLink/index.tsx
similarity index 70%
rename from src/components/PlaidLink/index.js
rename to src/components/PlaidLink/index.tsx
index 790206f34ce7..2109771473aa 100644
--- a/src/components/PlaidLink/index.js
+++ b/src/components/PlaidLink/index.tsx
@@ -1,35 +1,33 @@
 import {useCallback, useEffect, useState} from 'react';
-import {usePlaidLink} from 'react-plaid-link';
+import {PlaidLinkOnSuccessMetadata, usePlaidLink} from 'react-plaid-link';
 import Log from '@libs/Log';
-import {plaidLinkDefaultProps, plaidLinkPropTypes} from './plaidLinkPropTypes';
+import PlaidLinkProps from './types';
 
-function PlaidLink(props) {
+function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () => {}, onEvent, receivedRedirectURI}: PlaidLinkProps) {
     const [isPlaidLoaded, setIsPlaidLoaded] = useState(false);
-    const onSuccess = props.onSuccess;
-    const onError = props.onError;
     const successCallback = useCallback(
-        (publicToken, metadata) => {
+        (publicToken: string, metadata: PlaidLinkOnSuccessMetadata) => {
             onSuccess({publicToken, metadata});
         },
         [onSuccess],
     );
 
     const {open, ready, error} = usePlaidLink({
-        token: props.token,
+        token,
         onSuccess: successCallback,
         onExit: (exitError, metadata) => {
             Log.info('[PlaidLink] Exit: ', false, {exitError, metadata});
-            props.onExit();
+            onExit();
         },
         onEvent: (event, metadata) => {
             Log.info('[PlaidLink] Event: ', false, {event, metadata});
-            props.onEvent(event, metadata);
+            onEvent(event, metadata);
         },
         onLoad: () => setIsPlaidLoaded(true),
 
         // The redirect URI with an OAuth state ID. Needed to re-initialize the PlaidLink after directing the
         // user to their respective bank platform
-        receivedRedirectUri: props.receivedRedirectURI,
+        receivedRedirectUri: receivedRedirectURI,
     });
 
     useEffect(() => {
@@ -52,7 +50,5 @@ function PlaidLink(props) {
     return null;
 }
 
-PlaidLink.propTypes = plaidLinkPropTypes;
-PlaidLink.defaultProps = plaidLinkDefaultProps;
 PlaidLink.displayName = 'PlaidLink';
 export default PlaidLink;
diff --git a/src/components/PlaidLink/nativeModule/index.android.js b/src/components/PlaidLink/nativeModule/index.android.js
deleted file mode 100644
index d4280feddb8e..000000000000
--- a/src/components/PlaidLink/nativeModule/index.android.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import {NativeModules} from 'react-native';
-
-export default NativeModules.PlaidAndroid;
diff --git a/src/components/PlaidLink/nativeModule/index.ios.js b/src/components/PlaidLink/nativeModule/index.ios.js
deleted file mode 100644
index 78d4315eac2d..000000000000
--- a/src/components/PlaidLink/nativeModule/index.ios.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import {NativeModules} from 'react-native';
-
-export default NativeModules.RNLinksdk;
diff --git a/src/components/PlaidLink/plaidLinkPropTypes.js b/src/components/PlaidLink/types.ts
similarity index 50%
rename from src/components/PlaidLink/plaidLinkPropTypes.js
rename to src/components/PlaidLink/types.ts
index 6d647d26f17e..1034eb935f74 100644
--- a/src/components/PlaidLink/plaidLinkPropTypes.js
+++ b/src/components/PlaidLink/types.ts
@@ -1,31 +1,25 @@
-import PropTypes from 'prop-types';
+import {LinkEventMetadata, LinkSuccessMetadata} from 'react-native-plaid-link-sdk';
+import {PlaidLinkOnEventMetadata, PlaidLinkOnSuccessMetadata} from 'react-plaid-link';
 
-const plaidLinkPropTypes = {
+type PlaidLinkProps = {
     // Plaid Link SDK public token used to initialize the Plaid SDK
-    token: PropTypes.string.isRequired,
+    token: string;
 
     // Callback to execute once the user taps continue after successfully entering their account information
-    onSuccess: PropTypes.func,
+    onSuccess?: (args: {publicToken: string; metadata: PlaidLinkOnSuccessMetadata | LinkSuccessMetadata}) => void;
 
     // Callback to execute when there is an error event emitted by the Plaid SDK
-    onError: PropTypes.func,
+    onError?: (error: ErrorEvent | null) => void;
 
     // Callback to execute when the user leaves the Plaid widget flow without entering any information
-    onExit: PropTypes.func,
+    onExit?: () => void;
 
     // Callback to execute whenever a Plaid event occurs
-    onEvent: PropTypes.func,
+    onEvent: (eventName: string, metadata?: PlaidLinkOnEventMetadata | LinkEventMetadata) => void;
 
     // The redirect URI with an OAuth state ID. Needed to re-initialize the PlaidLink after directing the
     // user to their respective bank platform
-    receivedRedirectURI: PropTypes.string,
+    receivedRedirectURI?: string;
 };
 
-const plaidLinkDefaultProps = {
-    onSuccess: () => {},
-    onError: () => {},
-    onExit: () => {},
-    receivedRedirectURI: null,
-};
-
-export {plaidLinkPropTypes, plaidLinkDefaultProps};
+export default PlaidLinkProps;
diff --git a/src/components/Popover/index.native.js b/src/components/Popover/index.native.js
deleted file mode 100644
index c8d37c2ad61c..000000000000
--- a/src/components/Popover/index.native.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import _ from 'underscore';
-import Modal from '@components/Modal';
-import {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import CONST from '@src/CONST';
-import {defaultProps, propTypes as popoverPropTypes} from './popoverPropTypes';
-
-const propTypes = {
-    ..._.omit(popoverPropTypes, _.keys(windowDimensionsPropTypes)),
-};
-
-/*
- * This is a convenience wrapper around the Modal component for a responsive Popover.
- * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
- */
-function Popover(props) {
-    const propsWithoutAnimation = _.omit(props, ['animationIn', 'animationOut', 'popoverAnchorPosition', 'disableAnimation']);
-    return (
-        <Modal
-            type={props.fromSidebarMediumScreen ? CONST.MODAL.MODAL_TYPE.POPOVER : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
-            popoverAnchorPosition={props.fromSidebarMediumScreen ? props.anchorPosition : undefined}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...propsWithoutAnimation}
-            // Mobile will always has fullscreen menu
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            fullscreen
-        />
-    );
-}
-
-Popover.propTypes = propTypes;
-Popover.defaultProps = defaultProps;
-Popover.displayName = 'Popover';
-
-export default Popover;
diff --git a/src/components/Popover/index.native.tsx b/src/components/Popover/index.native.tsx
new file mode 100644
index 000000000000..3fff04d00d2f
--- /dev/null
+++ b/src/components/Popover/index.native.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Modal from '@components/Modal';
+import CONST from '@src/CONST';
+import {PopoverProps} from './types';
+
+/*
+ * This is a convenience wrapper around the Modal component for a responsive Popover.
+ * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
+ */
+function Popover({animationIn, animationOut, popoverAnchorPosition, disableAnimation, anchorPosition = {}, fromSidebarMediumScreen, ...propsWithoutAnimation}: PopoverProps) {
+    return (
+        <Modal
+            type={fromSidebarMediumScreen ? CONST.MODAL.MODAL_TYPE.POPOVER : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
+            popoverAnchorPosition={fromSidebarMediumScreen ? anchorPosition : undefined}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...propsWithoutAnimation}
+            // Mobile will always has fullscreen menu
+            fullscreen
+            animationIn="slideInUp"
+            animationOut="slideOutDown"
+        />
+    );
+}
+
+Popover.displayName = 'Popover';
+
+export default Popover;
diff --git a/src/components/Popover/index.js b/src/components/Popover/index.tsx
similarity index 78%
rename from src/components/Popover/index.js
rename to src/components/Popover/index.tsx
index b8889e806629..bf79415d4794 100644
--- a/src/components/Popover/index.js
+++ b/src/components/Popover/index.tsx
@@ -5,14 +5,30 @@ import {PopoverContext} from '@components/PopoverProvider';
 import PopoverWithoutOverlay from '@components/PopoverWithoutOverlay';
 import withWindowDimensions from '@components/withWindowDimensions';
 import CONST from '@src/CONST';
-import {defaultProps, propTypes} from './popoverPropTypes';
+import {PopoverWithWindowDimensionsProps} from './types';
 
 /*
  * This is a convenience wrapper around the Modal component for a responsive Popover.
  * On small screen widths, it uses BottomDocked modal type, and a Popover type on wide screen widths.
  */
-function Popover(props) {
-    const {isVisible, onClose, isSmallScreenWidth, fullscreen, animationInTiming, onLayout, animationOutTiming, disableAnimation, withoutOverlay, anchorPosition, anchorRef} = props;
+
+function Popover(props: PopoverWithWindowDimensionsProps) {
+    const {
+        isVisible,
+        onClose,
+        isSmallScreenWidth,
+        fullscreen,
+        animationInTiming = CONST.ANIMATED_TRANSITION,
+        onLayout,
+        animationOutTiming,
+        disableAnimation = true,
+        withoutOverlay,
+        anchorPosition = {},
+        anchorRef = () => {},
+        animationIn = 'fadeIn',
+        animationOut = 'fadeOut',
+    } = props;
+
     const withoutOverlayRef = useRef(null);
     const {close, popover} = React.useContext(PopoverContext);
 
@@ -33,7 +49,7 @@ function Popover(props) {
     }, [onClose, isVisible]);
 
     const onCloseWithPopoverContext = () => {
-        if (popover) {
+        if (popover && 'current' in anchorRef) {
             close(anchorRef);
         }
         onClose();
@@ -51,6 +67,8 @@ function Popover(props) {
                 animationOutTiming={disableAnimation ? 1 : animationOutTiming}
                 shouldCloseOnOutsideClick
                 onLayout={onLayout}
+                animationIn={animationIn}
+                animationOut={animationOut}
             />,
             document.body,
         );
@@ -62,6 +80,8 @@ function Popover(props) {
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
                 withoutOverlayRef={withoutOverlayRef}
+                animationIn={animationIn}
+                animationOut={animationOut}
             />,
             document.body,
         );
@@ -78,12 +98,12 @@ function Popover(props) {
             animationInTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationInTiming}
             animationOutTiming={disableAnimation && !isSmallScreenWidth ? 1 : animationOutTiming}
             onLayout={onLayout}
+            animationIn={animationIn}
+            animationOut={animationOut}
         />
     );
 }
 
-Popover.propTypes = propTypes;
-Popover.defaultProps = defaultProps;
 Popover.displayName = 'Popover';
 
 export default withWindowDimensions(Popover);
diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts
new file mode 100644
index 000000000000..7f7e2829770c
--- /dev/null
+++ b/src/components/Popover/types.ts
@@ -0,0 +1,42 @@
+import BaseModalProps, {PopoverAnchorPosition} from '@components/Modal/types';
+import {WindowDimensionsProps} from '@components/withWindowDimensions/types';
+
+type AnchorAlignment = {horizontal: string; vertical: string};
+
+type PopoverDimensions = {
+    width: number;
+    height: number;
+};
+
+type PopoverProps = BaseModalProps & {
+    /** The anchor position of the popover */
+    anchorPosition?: PopoverAnchorPosition;
+
+    /** The anchor alignment of the popover */
+    anchorAlignment: AnchorAlignment;
+
+    /** The anchor ref of the popover */
+    anchorRef: React.RefObject<HTMLElement>;
+
+    /** Whether disable the animations */
+    disableAnimation: boolean;
+
+    /** Whether we don't want to show overlay */
+    withoutOverlay: boolean;
+
+    /** The dimensions of the popover */
+    popoverDimensions?: PopoverDimensions;
+
+    /** The ref of the popover */
+    withoutOverlayRef?: React.RefObject<HTMLElement>;
+
+    /** Whether we want to show the popover on the right side of the screen */
+    fromSidebarMediumScreen?: boolean;
+
+    /** The popover children */
+    children: React.ReactNode;
+};
+
+type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;
+
+export type {PopoverProps, PopoverWithWindowDimensionsProps};
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 8b9dd4ac7a61..fd162c78fe2c 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -6,10 +6,12 @@ import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import getModalStyles from '@styles/getModalStyles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
 function Popover(props) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {onOpen, close} = React.useContext(PopoverContext);
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
@@ -19,6 +21,8 @@ function Popover(props) {
             windowHeight: props.windowHeight,
             isSmallScreenWidth: false,
         },
+        theme,
+        styles,
         props.anchorPosition,
         props.innerContainerStyle,
         props.outerStyle,
diff --git a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
index 1576fe18da54..692733a7fe0c 100644
--- a/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
+++ b/src/components/Pressable/GenericPressable/BaseGenericPressable.tsx
@@ -1,30 +1,15 @@
 import React, {ForwardedRef, forwardRef, useCallback, useEffect, useMemo} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import {GestureResponderEvent, Pressable, View, ViewStyle} from 'react-native';
+import {GestureResponderEvent, Pressable, View} from 'react-native';
 import useSingleExecution from '@hooks/useSingleExecution';
 import Accessibility from '@libs/Accessibility';
 import HapticFeedback from '@libs/HapticFeedback';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import PressableProps from './types';
 
-/**
- * Returns the cursor style based on the state of Pressable
- */
-function getCursorStyle(isDisabled: boolean, isText: boolean): Pick<ViewStyle, 'cursor'> {
-    if (isDisabled) {
-        return styles.cursorDisabled;
-    }
-
-    if (isText) {
-        return styles.cursorText;
-    }
-
-    return styles.cursorPointer;
-}
-
 function GenericPressable(
     {
         children,
@@ -51,6 +36,7 @@ function GenericPressable(
     }: PressableProps,
     ref: ForwardedRef<View>,
 ) {
+    const styles = useThemeStyles();
     const {isExecuting, singleExecution} = useSingleExecution();
     const isScreenReaderActive = Accessibility.useScreenReaderStatus();
     const [hitSlop, onLayout] = Accessibility.useAutoHitSlop();
@@ -71,6 +57,19 @@ function GenericPressable(
 
     const shouldUseDisabledCursor = useMemo(() => isDisabled && !isExecuting, [isDisabled, isExecuting]);
 
+    /**
+     * Returns the cursor style based on the state of Pressable
+     */
+    const cursorStyle = useMemo(() => {
+        if (shouldUseDisabledCursor) {
+            return styles.cursorDisabled;
+        }
+        if ([rest.accessibilityRole, rest.role].includes('text')) {
+            return styles.cursorText;
+        }
+        return styles.cursorPointer;
+    }, [styles, shouldUseDisabledCursor, rest.accessibilityRole, rest.role]);
+
     const onLongPressHandler = useCallback(
         (event: GestureResponderEvent) => {
             if (isDisabled) {
@@ -132,7 +131,7 @@ function GenericPressable(
             onPressIn={!isDisabled ? onPressIn : undefined}
             onPressOut={!isDisabled ? onPressOut : undefined}
             style={(state) => [
-                getCursorStyle(shouldUseDisabledCursor, [rest.accessibilityRole, rest.role].includes('text')),
+                cursorStyle,
                 StyleUtils.parseStyleFromFunction(style, state),
                 isScreenReaderActive && StyleUtils.parseStyleFromFunction(screenReaderActiveStyle, state),
                 state.focused && StyleUtils.parseStyleFromFunction(focusStyle, state),
diff --git a/src/components/Pressable/GenericPressable/index.tsx b/src/components/Pressable/GenericPressable/index.tsx
index e0436c26c8fe..e050e23c8e9a 100644
--- a/src/components/Pressable/GenericPressable/index.tsx
+++ b/src/components/Pressable/GenericPressable/index.tsx
@@ -13,7 +13,7 @@ function WebGenericPressable({focusable = true, ...props}: PressableProps, ref:
             ref={ref}
             // change native accessibility props to web accessibility props
             focusable={focusable}
-            tabIndex={!accessible || !focusable ? -1 : 0}
+            tabIndex={props.tabIndex ?? (!accessible || !focusable) ? -1 : 0}
             role={props.accessibilityRole as Role}
             id={props.nativeID}
             aria-label={props.accessibilityLabel}
diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx
index 7ded9320b802..914b9dc674c3 100644
--- a/src/components/Pressable/PressableWithDelayToggle.tsx
+++ b/src/components/Pressable/PressableWithDelayToggle.tsx
@@ -8,8 +8,9 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import getButtonState from '@libs/getButtonState';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import PressableProps from './GenericPressable/types';
 import PressableWithoutFeedback from './PressableWithoutFeedback';
@@ -66,6 +67,8 @@ function PressableWithDelayToggle(
     }: PressableWithDelayToggleProps,
     ref: ForwardedRef<RNText | View>,
 ) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const [isActive, temporarilyDisableInteractions] = useThrottledButtonState();
 
     const updatePressState = () => {
@@ -119,7 +122,7 @@ function PressableWithDelayToggle(
                                 {icon && (
                                     <Icon
                                         src={!isActive ? iconChecked : icon}
-                                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, !isActive))}
+                                        fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, !isActive))}
                                         additionalStyles={iconStyles}
                                         width={variables.iconSizeSmall}
                                         height={variables.iconSizeSmall}
diff --git a/src/components/RadioButton.js b/src/components/RadioButton.tsx
similarity index 62%
rename from src/components/RadioButton.js
rename to src/components/RadioButton.tsx
index 9a7b6d38095a..b5e0467d3f00 100644
--- a/src/components/RadioButton.js
+++ b/src/components/RadioButton.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import useTheme from '@styles/themes/useTheme';
@@ -8,42 +7,38 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
-const propTypes = {
+type RadioButtonProps = {
     /** Whether radioButton is checked */
-    isChecked: PropTypes.bool.isRequired,
+    isChecked: boolean;
 
     /** A function that is called when the box/label is pressed */
-    onPress: PropTypes.func.isRequired,
+    onPress: () => void;
 
     /** Specifies the accessibility label for the radio button */
-    accessibilityLabel: PropTypes.string.isRequired,
+    accessibilityLabel: string;
 
     /** Should the input be styled for errors  */
-    hasError: PropTypes.bool,
+    hasError?: boolean;
 
     /** Should the input be disabled  */
-    disabled: PropTypes.bool,
+    disabled?: boolean;
 };
 
-const defaultProps = {
-    hasError: false,
-    disabled: false,
-};
-
-function RadioButton(props) {
+function RadioButton({isChecked, onPress, accessibilityLabel, hasError = false, disabled = false}: RadioButtonProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+
     return (
         <PressableWithFeedback
-            disabled={props.disabled}
-            onPress={props.onPress}
+            disabled={disabled}
+            onPress={onPress}
             hoverDimmingValue={1}
             pressDimmingValue={1}
-            accessibilityLabel={props.accessibilityLabel}
+            accessibilityLabel={accessibilityLabel}
             role={CONST.ACCESSIBILITY_ROLE.RADIO}
         >
-            <View style={[styles.radioButtonContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled]}>
-                {props.isChecked && (
+            <View style={[styles.radioButtonContainer, hasError && styles.borderColorDanger, disabled && styles.cursorDisabled]}>
+                {isChecked && (
                     <Icon
                         src={Expensicons.Checkmark}
                         fill={theme.checkBox}
@@ -56,8 +51,6 @@ function RadioButton(props) {
     );
 }
 
-RadioButton.propTypes = propTypes;
-RadioButton.defaultProps = defaultProps;
 RadioButton.displayName = 'RadioButton';
 
 export default RadioButton;
diff --git a/src/components/RadioButtons.tsx b/src/components/RadioButtons.tsx
index f8f9b345f855..b83710bd85bf 100644
--- a/src/components/RadioButtons.tsx
+++ b/src/components/RadioButtons.tsx
@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import {View} from 'react-native';
 import useThemeStyles from '@styles/useThemeStyles';
 import RadioButtonWithLabel from './RadioButtonWithLabel';
 
@@ -21,7 +20,7 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
     const [checkedValue, setCheckedValue] = useState('');
 
     return (
-        <View>
+        <>
             {items.map((item) => (
                 <RadioButtonWithLabel
                     key={item.value}
@@ -34,10 +33,11 @@ function RadioButtons({items, onPress}: RadioButtonsProps) {
                     label={item.label}
                 />
             ))}
-        </View>
+        </>
     );
 }
 
 RadioButtons.displayName = 'RadioButtons';
 
+export type {Choice};
 export default RadioButtons;
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
index 2fc03b466bbf..55c2c5bb04e0 100644
--- a/src/components/Reactions/AddReactionBubble.js
+++ b/src/components/Reactions/AddReactionBubble.js
@@ -9,6 +9,7 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
@@ -55,6 +56,7 @@ const defaultProps = {
 
 function AddReactionBubble(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const ref = useRef();
     useEffect(() => EmojiPickerAction.resetEmojiPopoverAnchor, []);
 
@@ -87,7 +89,11 @@ function AddReactionBubble(props) {
         <Tooltip text={props.translate('emojiReactions.addReactionTooltip')}>
             <PressableWithFeedback
                 ref={ref}
-                style={({hovered, pressed}) => [styles.emojiReactionBubble, styles.userSelectNone, StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, false, props.isContextMenu)]}
+                style={({hovered, pressed}) => [
+                    styles.emojiReactionBubble,
+                    styles.userSelectNone,
+                    StyleUtils.getEmojiReactionBubbleStyle(theme, hovered || pressed, false, props.isContextMenu),
+                ]}
                 onPress={Session.checkIfActionIsAllowed(onPress)}
                 onMouseDown={(e) => {
                     // Allow text input blur when Add reaction is right clicked
@@ -115,7 +121,7 @@ function AddReactionBubble(props) {
                                 src={Expensicons.AddReaction}
                                 width={props.isContextMenu ? variables.iconSizeNormal : variables.iconSizeSmall}
                                 height={props.isContextMenu ? variables.iconSizeNormal : variables.iconSizeSmall}
-                                fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
+                                fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed))}
                             />
                         </View>
                     </>
diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
index 58b66ee64719..2487f9d0c73c 100644
--- a/src/components/Reactions/EmojiReactionBubble.js
+++ b/src/components/Reactions/EmojiReactionBubble.js
@@ -5,6 +5,7 @@ import Text from '@components/Text';
 import {withCurrentUserPersonalDetailsDefaultProps} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
@@ -55,11 +56,12 @@ const defaultProps = {
 
 function EmojiReactionBubble(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     return (
         <PressableWithSecondaryInteraction
             style={({hovered, pressed}) => [
                 styles.emojiReactionBubble,
-                StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, props.hasUserReacted, props.isContextMenu),
+                StyleUtils.getEmojiReactionBubbleStyle(theme, hovered || pressed, props.hasUserReacted, props.isContextMenu),
                 props.shouldBlockReactions && styles.cursorDisabled,
                 styles.userSelectNone,
             ]}
@@ -88,7 +90,7 @@ function EmojiReactionBubble(props) {
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
         >
             <Text style={[styles.emojiReactionBubbleText, StyleUtils.getEmojiReactionBubbleTextStyle(props.isContextMenu)]}>{props.emojiCodes.join('')}</Text>
-            {props.count > 0 && <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.count}</Text>}
+            {props.count > 0 && <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(theme, props.hasUserReacted)]}>{props.count}</Text>}
         </PressableWithSecondaryInteraction>
     );
 }
diff --git a/src/components/Reactions/MiniQuickEmojiReactions.js b/src/components/Reactions/MiniQuickEmojiReactions.js
index 8ddf41f4a89a..2226573a196e 100644
--- a/src/components/Reactions/MiniQuickEmojiReactions.js
+++ b/src/components/Reactions/MiniQuickEmojiReactions.js
@@ -12,6 +12,7 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getButtonState from '@libs/getButtonState';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
@@ -56,6 +57,7 @@ const defaultProps = {
  */
 function MiniQuickEmojiReactions(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const ref = useRef();
 
     const openEmojiPicker = () => {
@@ -105,7 +107,7 @@ function MiniQuickEmojiReactions(props) {
                     <Icon
                         small
                         src={Expensicons.AddReaction}
-                        fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false))}
+                        fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, false))}
                     />
                 )}
             </BaseMiniContextMenuItem>
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
index 07aba132be0e..1855152ef640 100644
--- a/src/components/ReportActionItem/MoneyRequestPreview.js
+++ b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -220,6 +220,8 @@ function MoneyRequestPreview(props) {
             message += ` • ${props.translate('iou.approved')}`;
         } else if (props.iouReport.isWaitingOnBankAccount) {
             message += ` • ${props.translate('iou.pending')}`;
+        } else if (props.iouReport.isCancelledIOU) {
+            message += ` • ${props.translate('iou.canceled')}`;
         }
         return message;
     };
@@ -280,7 +282,7 @@ 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 && (
                                     <Icon
@@ -358,15 +360,17 @@ function MoneyRequestPreview(props) {
         return childContainer;
     }
 
+    const shouldDisableOnPress = props.isBillSplit && _.isEmpty(props.transaction);
+
     return (
         <PressableWithFeedback
-            onPress={props.onPreviewPressed}
+            onPress={shouldDisableOnPress ? undefined : props.onPreviewPressed}
             onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
             onPressOut={() => ControlSelection.unblock()}
             onLongPress={showContextMenu}
             accessibilityLabel={props.isBillSplit ? props.translate('iou.split') : props.translate('iou.cash')}
             accessibilityHint={CurrencyUtils.convertToDisplayString(requestAmount, requestCurrency)}
-            style={[styles.moneyRequestPreviewBox, ...props.containerStyles]}
+            style={[styles.moneyRequestPreviewBox, ...props.containerStyles, shouldDisableOnPress && styles.cursorDefault]}
         >
             {childContainer}
         </PressableWithFeedback>
diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
index 33ad99f32326..0249a9f5bb11 100644
--- a/src/components/ReportActionItem/MoneyRequestView.js
+++ b/src/components/ReportActionItem/MoneyRequestView.js
@@ -104,12 +104,14 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
         formattedTransactionAmount = translate('common.tbd');
     }
     const formattedOriginalAmount = transactionOriginalAmount && transactionOriginalCurrency && CurrencyUtils.convertToDisplayString(transactionOriginalAmount, transactionOriginalCurrency);
-    const isExpensifyCardTransaction = TransactionUtils.isExpensifyCardTransaction(transaction);
-    const cardProgramName = isExpensifyCardTransaction ? CardUtils.getCardDescription(transactionCardID) : '';
+    const isCardTransaction = TransactionUtils.isCardTransaction(transaction);
+    const cardProgramName = isCardTransaction ? CardUtils.getCardDescription(transactionCardID) : '';
 
     // Flags for allowing or disallowing editing a money request
     const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
-    const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction) && !isExpensifyCardTransaction;
+    const isCancelled = moneyRequestReport && moneyRequestReport.isCancelledIOU;
+    const canEdit = ReportUtils.canEditMoneyRequest(parentReportAction);
+    const canEditAmount = canEdit && !isSettled && !isCardTransaction;
 
     // A flag for verifying that the current report is a sub-report of a workspace chat
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(report)), [report]);
@@ -125,18 +127,23 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
 
     let amountDescription = `${translate('iou.amount')}`;
 
-    if (isExpensifyCardTransaction) {
+    if (isCardTransaction) {
         if (formattedOriginalAmount) {
             amountDescription += ` • ${translate('iou.original')} ${formattedOriginalAmount}`;
         }
         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')}`;
@@ -190,8 +197,8 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
                         titleIcon={Expensicons.Checkmark}
                         description={amountDescription}
                         titleStyle={styles.newKansasLarge}
-                        interactive={canEdit && !isSettled}
-                        shouldShowRightIcon={canEdit && !isSettled}
+                        interactive={canEditAmount}
+                        shouldShowRightIcon={canEditAmount}
                         onPress={() => Navigation.navigate(ROUTES.EDIT_REQUEST.getRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
                         brickRoadIndicator={hasErrors && transactionAmount === 0 ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''}
                         error={hasErrors && transactionAmount === 0 ? translate('common.error.enterAmount') : ''}
@@ -271,13 +278,12 @@ function MoneyRequestView({report, parentReport, policyCategories, shouldShowHor
                         />
                     </OfflineWithFeedback>
                 )}
-                {isExpensifyCardTransaction && (
+                {isCardTransaction && (
                     <OfflineWithFeedback pendingAction={getPendingFieldAction('pendingFields.cardID')}>
                         <MenuItemWithTopDescription
                             description={translate('iou.card')}
                             title={cardProgramName}
                             titleStyle={styles.flex1}
-                            interactive={canEdit}
                         />
                     </OfflineWithFeedback>
                 )}
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index f04029182d45..8cb8406e8a0d 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -120,7 +120,7 @@ function ReportPreview(props) {
     const numberOfRequests = ReportActionUtils.getNumberOfMoneyRequests(props.action);
     const moneyRequestComment = lodashGet(props.action, 'childLastMoneyRequestComment', '');
     const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.chatReport);
-    const isReportDraft = isPolicyExpenseChat && ReportUtils.isReportDraft(props.iouReport);
+    const isDraftExpenseReport = isPolicyExpenseChat && ReportUtils.isDraftExpenseReport(props.iouReport);
 
     const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(props.iouReportID);
     const numberOfScanningReceipts = _.filter(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction)).length;
@@ -143,7 +143,7 @@ function ReportPreview(props) {
             scanningReceipts: numberOfScanningReceipts,
         });
 
-    const shouldShowSubmitButton = isReportDraft && reimbursableSpend !== 0;
+    const shouldShowSubmitButton = isDraftExpenseReport && reimbursableSpend !== 0;
 
     const getDisplayAmount = () => {
         if (hasPendingWaypoints) {
@@ -189,7 +189,7 @@ function ReportPreview(props) {
     const bankAccountRoute = ReportUtils.getBankAccountRoute(props.chatReport);
     const shouldShowSettlementButton = ReportUtils.isControlPolicyExpenseChat(props.chatReport)
         ? props.policy.role === CONST.POLICY.ROLE.ADMIN && ReportUtils.isReportApproved(props.iouReport) && !iouSettled && !iouCanceled
-        : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isReportDraft && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0;
+        : !_.isEmpty(props.iouReport) && isCurrentUserManager && !isDraftExpenseReport && !iouSettled && !iouCanceled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0;
 
     return (
         <View style={[styles.chatItemMessage, ...props.containerStyles]}>
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
index 4e405098a2ea..5790d04845be 100644
--- a/src/components/ReportActionItem/TaskPreview.js
+++ b/src/components/ReportActionItem/TaskPreview.js
@@ -23,6 +23,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
@@ -76,6 +77,7 @@ const defaultProps = {
 
 function TaskPreview(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     // The reportAction might not contain details regarding the taskReport
     // Only the direct parent reportAction will contain details about the taskReport
@@ -128,7 +130,7 @@ function TaskPreview(props) {
                 </View>
                 <Icon
                     src={Expensicons.ArrowRight}
-                    fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))}
+                    fill={StyleUtils.getIconFillColor(theme, getButtonState(props.isHovered))}
                 />
             </PressableWithoutFeedback>
         </View>
diff --git a/src/components/ReportActionItem/TaskView.js b/src/components/ReportActionItem/TaskView.js
index ac82f310f3f8..de0c1774b74f 100644
--- a/src/components/ReportActionItem/TaskView.js
+++ b/src/components/ReportActionItem/TaskView.js
@@ -2,6 +2,7 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import Checkbox from '@components/Checkbox';
 import Hoverable from '@components/Hoverable';
 import Icon from '@components/Icon';
@@ -9,6 +10,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
@@ -23,10 +25,12 @@ import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
@@ -43,6 +47,7 @@ const propTypes = {
 
 function TaskView(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     useEffect(() => {
         Task.setTaskReport({...props.report});
     }, [props.report]);
@@ -54,6 +59,7 @@ function TaskView(props) {
     const canModifyTask = Task.canModifyTask(props.report, props.currentUserPersonalDetails.accountID);
     const disableState = !canModifyTask;
     const isDisableInteractive = !canModifyTask || !isOpen;
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     return (
         <View>
@@ -79,7 +85,7 @@ function TaskView(props) {
                             style={({pressed}) => [
                                 styles.ph5,
                                 styles.pv2,
-                                StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true),
+                                StyleUtils.getButtonBackgroundColorStyle(theme, getButtonState(hovered, pressed, false, disableState, !isDisableInteractive), true),
                                 isDisableInteractive && !disableState && styles.cursorDefault,
                             ]}
                             ref={props.forwardedRef}
@@ -119,7 +125,7 @@ function TaskView(props) {
                                                 <Icon
                                                     additionalStyles={[styles.alignItemsCenter]}
                                                     src={Expensicons.ArrowRight}
-                                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, false, disableState))}
+                                                    fill={StyleUtils.getIconFillColor(theme, getButtonState(hovered, pressed, false, disableState))}
                                                 />
                                             </View>
                                         )}
@@ -148,7 +154,7 @@ function TaskView(props) {
                         <MenuItem
                             label={props.translate('task.assignee')}
                             title={ReportUtils.getDisplayNameForParticipant(props.report.managerID)}
-                            icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], props.personalDetails)}
+                            icon={OptionsListUtils.getAvatarsForAccountIDs([props.report.managerID], personalDetails)}
                             iconType={CONST.ICON_TYPE_AVATAR}
                             avatarSize={CONST.AVATAR_SIZE.SMALLER}
                             titleStyle={styles.assigneeTextStyle}
@@ -185,4 +191,13 @@ function TaskView(props) {
 TaskView.propTypes = propTypes;
 TaskView.displayName = 'TaskView';
 
-export default compose(withWindowDimensions, withLocalize, withCurrentUserPersonalDetails)(TaskView);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+    }),
+)(TaskView);
diff --git a/src/components/RoomHeaderAvatars.js b/src/components/RoomHeaderAvatars.js
index 0bb0f11d747c..bd7a24d15f1f 100644
--- a/src/components/RoomHeaderAvatars.js
+++ b/src/components/RoomHeaderAvatars.js
@@ -65,7 +65,7 @@ function RoomHeaderAvatars(props) {
         styles.roomHeaderAvatar,
 
         // Due to border-box box-sizing, the Avatars have to be larger when bordered to visually match size with non-bordered Avatars
-        StyleUtils.getAvatarStyle(CONST.AVATAR_SIZE.LARGE_BORDERED),
+        StyleUtils.getAvatarStyle(theme, CONST.AVATAR_SIZE.LARGE_BORDERED),
     ];
     return (
         <View style={styles.pointerEventsBoxNone}>
diff --git a/src/components/RoomNameInput/index.js b/src/components/RoomNameInput/index.js
index 14529d7b594a..e32c264a57cc 100644
--- a/src/components/RoomNameInput/index.js
+++ b/src/components/RoomNameInput/index.js
@@ -1,49 +1,24 @@
-import React, {useState} from 'react';
-import _ from 'underscore';
+import React from 'react';
+import InputWrapper from '@components/Form/InputWrapper';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import getOperatingSystem from '@libs/getOperatingSystem';
 import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
 import CONST from '@src/CONST';
 import * as roomNameInputPropTypes from './roomNameInputPropTypes';
 
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
+function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, onBlur, shouldDelayFocus, inputID, roomName}) {
     const {translate} = useLocalize();
 
-    const [selection, setSelection] = useState();
+    const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
 
-    /**
-     * Calls the onChangeText callback with a modified room name
-     * @param {Event} event
-     */
-    const setModifiedRoomName = (event) => {
-        const roomName = event.nativeEvent.text;
-        const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
-        onChangeText(modifiedRoomName);
-
-        // if custom component has onInputChange, use it to trigger changes (Form input)
-        if (_.isFunction(onInputChange)) {
-            onInputChange(modifiedRoomName);
-        }
-
-        // Prevent cursor jump behaviour:
-        // Check if newRoomNameWithHash is the same as modifiedRoomName
-        // If it is then the room name is valid (does not contain unallowed characters); no action required
-        // If not then the room name contains unvalid characters and we must adjust the cursor position manually
-        // Read more: https://github.com/Expensify/App/issues/12741
-        const oldRoomNameWithHash = value || '';
-        const newRoomNameWithHash = `${CONST.POLICY.ROOM_PREFIX}${roomName}`;
-        if (modifiedRoomName !== newRoomNameWithHash) {
-            const offset = modifiedRoomName.length - oldRoomNameWithHash.length;
-            const newSelection = {
-                start: selection.start + offset,
-                end: selection.end + offset,
-            };
-            setSelection(newSelection);
-        }
-    };
+    const valueParser = (innerRoomName) => RoomNameInputUtils.modifyRoomName(innerRoomName);
+    const displayParser = (innerRoomName) => RoomNameInputUtils.modifyRoomName(innerRoomName, true);
 
     return (
-        <TextInput
+        <InputWrapper
+            InputComponent={TextInput}
+            inputID={inputID}
             ref={forwardedRef}
             disabled={disabled}
             label={translate('newRoomPage.roomName')}
@@ -51,18 +26,18 @@ function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef,
             role={CONST.ACCESSIBILITY_ROLE.TEXT}
             prefixCharacter={CONST.POLICY.ROOM_PREFIX}
             placeholder={translate('newRoomPage.social')}
-            onChange={setModifiedRoomName}
-            value={value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
-            selection={selection}
-            onSelectionChange={(event) => setSelection(event.nativeEvent.selection)}
             errorText={errorText}
+            valueParser={valueParser}
+            displayParser={displayParser}
             autoCapitalize="none"
             onBlur={(event) => isFocused && onBlur(event)}
             shouldDelayFocus={shouldDelayFocus}
             autoFocus={isFocused && autoFocus}
             maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
+            defaultValue={roomName}
             spellCheck={false}
             shouldInterceptSwipe
+            keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
         />
     );
 }
diff --git a/src/components/RoomNameInput/index.native.js b/src/components/RoomNameInput/index.native.js
deleted file mode 100644
index a2c09996ad34..000000000000
--- a/src/components/RoomNameInput/index.native.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import _ from 'underscore';
-import TextInput from '@components/TextInput';
-import useLocalize from '@hooks/useLocalize';
-import getOperatingSystem from '@libs/getOperatingSystem';
-import * as RoomNameInputUtils from '@libs/RoomNameInputUtils';
-import CONST from '@src/CONST';
-import * as roomNameInputPropTypes from './roomNameInputPropTypes';
-
-function RoomNameInput({isFocused, autoFocus, disabled, errorText, forwardedRef, value, onBlur, onChangeText, onInputChange, shouldDelayFocus}) {
-    const {translate} = useLocalize();
-
-    /**
-     * Calls the onChangeText callback with a modified room name
-     * @param {Event} event
-     */
-    const setModifiedRoomName = (event) => {
-        const roomName = event.nativeEvent.text;
-        const modifiedRoomName = RoomNameInputUtils.modifyRoomName(roomName);
-        onChangeText(modifiedRoomName);
-
-        // if custom component has onInputChange, use it to trigger changes (Form input)
-        if (_.isFunction(onInputChange)) {
-            onInputChange(modifiedRoomName);
-        }
-    };
-
-    const keyboardType = getOperatingSystem() === CONST.OS.IOS ? CONST.KEYBOARD_TYPE.ASCII_CAPABLE : CONST.KEYBOARD_TYPE.VISIBLE_PASSWORD;
-
-    return (
-        <TextInput
-            ref={forwardedRef}
-            disabled={disabled}
-            label={translate('newRoomPage.roomName')}
-            accessibilityLabel={translate('newRoomPage.roomName')}
-            role={CONST.ACCESSIBILITY_ROLE.TEXT}
-            prefixCharacter={CONST.POLICY.ROOM_PREFIX}
-            placeholder={translate('newRoomPage.social')}
-            onChange={setModifiedRoomName}
-            value={value.substring(1)} // Since the room name always starts with a prefix, we omit the first character to avoid displaying it twice.
-            errorText={errorText}
-            maxLength={CONST.REPORT.MAX_ROOM_NAME_LENGTH}
-            keyboardType={keyboardType} // this is a bit hacky solution to a RN issue https://github.com/facebook/react-native/issues/27449
-            onBlur={(event) => isFocused && onBlur(event)}
-            autoFocus={isFocused && autoFocus}
-            autoCapitalize="none"
-            shouldDelayFocus={shouldDelayFocus}
-        />
-    );
-}
-
-RoomNameInput.propTypes = roomNameInputPropTypes.propTypes;
-RoomNameInput.defaultProps = roomNameInputPropTypes.defaultProps;
-RoomNameInput.displayName = 'RoomNameInput';
-
-const RoomNameInputWithRef = React.forwardRef((props, ref) => (
-    <RoomNameInput
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-RoomNameInputWithRef.displayName = 'RoomNameInputWithRef';
-
-export default RoomNameInputWithRef;
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index 7f8292f0123e..f457e4e2a494 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import refPropTypes from '@components/refPropTypes';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -14,10 +15,10 @@ const propTypes = {
     errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))]),
 
     /** A ref forwarded to the TextInput */
-    forwardedRef: PropTypes.func,
+    forwardedRef: refPropTypes,
 
     /** The ID used to uniquely identify the input in a Form */
-    inputID: PropTypes.string,
+    inputID: PropTypes.string.isRequired,
 
     /** Callback that is called when the text input is blurred */
     onBlur: PropTypes.func,
@@ -30,6 +31,8 @@ const propTypes = {
 
     /** Whether navigation is focused */
     isFocused: PropTypes.bool.isRequired,
+
+    roomName: PropTypes.string,
 };
 
 const defaultProps = {
@@ -39,10 +42,10 @@ const defaultProps = {
     errorText: '',
     forwardedRef: () => {},
 
-    inputID: undefined,
     onBlur: () => {},
     autoFocus: false,
     shouldDelayFocus: false,
+    roomName: '',
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/ScreenWrapper/index.js b/src/components/ScreenWrapper/index.js
index f9173c15da7d..16bf9ba0761c 100644
--- a/src/components/ScreenWrapper/index.js
+++ b/src/components/ScreenWrapper/index.js
@@ -16,7 +16,7 @@ import useKeyboardState from '@hooks/useKeyboardState';
 import useNetwork from '@hooks/useNetwork';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import {defaultProps, propTypes} from './propTypes';
@@ -44,6 +44,7 @@ const ScreenWrapper = React.forwardRef(
     ) => {
         const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
         const {initialHeight} = useInitialDimensions();
+        const styles = useThemeStyles();
         const keyboardState = useKeyboardState();
         const {isDevelopment} = useEnvironment();
         const {isOffline} = useNetwork();
@@ -59,14 +60,14 @@ const ScreenWrapper = React.forwardRef(
 
         const panResponder = useRef(
             PanResponder.create({
-                onStartShouldSetPanResponderCapture: (e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS,
+                onStartShouldSetPanResponderCapture: (_e, gestureState) => gestureState.numberActiveTouches === CONST.TEST_TOOL.NUMBER_OF_TAPS,
                 onPanResponderRelease: toggleTestToolsModal,
             }),
         ).current;
 
         const keyboardDissmissPanResponder = useRef(
             PanResponder.create({
-                onMoveShouldSetPanResponderCapture: (e, gestureState) => {
+                onMoveShouldSetPanResponderCapture: (_e, gestureState) => {
                     const isHorizontalSwipe = Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
                     const shouldDismissKeyboard = shouldDismissKeyboardBeforeClose && isKeyboardShown && Browser.isMobile();
 
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
index cf8ee6af975d..7a7e23388722 100644
--- a/src/components/SelectCircle.tsx
+++ b/src/components/SelectCircle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import globalStyles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 
@@ -10,16 +10,19 @@ type SelectCircleProps = {
     isChecked: boolean;
 
     /** Additional styles to pass to SelectCircle */
-    styles?: StyleProp<ViewStyle>;
+    selectCircleStyles?: StyleProp<ViewStyle>;
 };
 
-function SelectCircle({isChecked = false, styles}: SelectCircleProps) {
+function SelectCircle({isChecked = false, selectCircleStyles}: SelectCircleProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     return (
-        <View style={[globalStyles.selectCircle, globalStyles.alignSelfCenter, styles]}>
+        <View style={[styles.selectCircle, styles.alignSelfCenter, selectCircleStyles]}>
             {isChecked && (
                 <Icon
                     src={Expensicons.Checkmark}
-                    fill={themeColors.iconSuccessFill}
+                    fill={theme.iconSuccessFill}
                 />
             )}
         </View>
diff --git a/src/components/SelectionList/BaseListItem.js b/src/components/SelectionList/BaseListItem.js
index a37f2fe4ddc0..3a58b63954bd 100644
--- a/src/components/SelectionList/BaseListItem.js
+++ b/src/components/SelectionList/BaseListItem.js
@@ -62,7 +62,7 @@ function BaseListItem({
                         <View style={StyleUtils.getCheckboxPressableStyle()}>
                             <View
                                 style={[
-                                    StyleUtils.getCheckboxContainerStyle(20),
+                                    StyleUtils.getCheckboxContainerStyle(theme, 20),
                                     styles.mr3,
                                     item.isSelected && styles.checkedContainer,
                                     item.isSelected && styles.borderColorFocus,
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 90ed7c707fe9..6f53679f28d3 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -59,6 +59,7 @@ function BaseSelectionList({
     disableKeyboardShortcuts = false,
     children,
     shouldStopPropagation = false,
+    shouldUseDynamicMaxToRenderPerBatch = false,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -71,6 +72,8 @@ function BaseSelectionList({
     const shouldShowSelectAll = Boolean(onSelectAll);
     const activeElement = useActiveElement();
     const isFocused = useIsFocused();
+    const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
+
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
      * - `allOptions`: Contains all the items in the list, flattened, regardless of section
@@ -301,6 +304,7 @@ function BaseSelectionList({
                 item={item}
                 isFocused={isItemFocused}
                 isDisabled={isDisabled}
+                isHide={!maxToRenderPerBatch}
                 showTooltip={showTooltip}
                 canSelectMultiple={canSelectMultiple}
                 onSelectRow={() => selectRow(item, true)}
@@ -310,13 +314,23 @@ function BaseSelectionList({
         );
     };
 
-    const scrollToFocusedIndexOnFirstRender = useCallback(() => {
-        if (!firstLayoutRef.current) {
-            return;
-        }
-        scrollToIndex(focusedIndex, false);
-        firstLayoutRef.current = false;
-    }, [focusedIndex, scrollToIndex]);
+    const scrollToFocusedIndexOnFirstRender = useCallback(
+        ({nativeEvent}) => {
+            if (shouldUseDynamicMaxToRenderPerBatch) {
+                const listHeight = lodashGet(nativeEvent, 'layout.height', 0);
+                const itemHeight = lodashGet(nativeEvent, 'layout.y', 0);
+
+                setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
+            }
+
+            if (!firstLayoutRef.current) {
+                return;
+            }
+            scrollToIndex(focusedIndex, false);
+            firstLayoutRef.current = false;
+        },
+        [focusedIndex, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
+    );
 
     const updateAndScrollToFocusedIndex = useCallback(
         (newFocusedIndex) => {
@@ -451,11 +465,12 @@ function BaseSelectionList({
                                     keyboardShouldPersistTaps="always"
                                     showsVerticalScrollIndicator={showScrollIndicator}
                                     initialNumToRender={12}
-                                    maxToRenderPerBatch={5}
+                                    maxToRenderPerBatch={maxToRenderPerBatch}
                                     windowSize={5}
                                     viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                                     testID="selection-list"
                                     onLayout={scrollToFocusedIndexOnFirstRender}
+                                    style={!maxToRenderPerBatch && styles.opacity0}
                                 />
                                 {children}
                             </>
diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
index 5b95f7dd0cbf..0c2fe83d025f 100644
--- a/src/components/SelectionList/selectionListPropTypes.js
+++ b/src/components/SelectionList/selectionListPropTypes.js
@@ -182,6 +182,9 @@ const propTypes = {
 
     /** Custom content to display in the footer */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+    /** Whether to use dynamic maxToRenderPerBatch depending on the visible number of elements */
+    shouldUseDynamicMaxToRenderPerBatch: PropTypes.bool,
 };
 
 export {propTypes, baseListItemPropTypes, radioListItemPropTypes, userListItemPropTypes};
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 27ba3d08a16f..c7342b0d36ac 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -5,7 +5,6 @@ import _ from 'underscore';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import compose from '@libs/compose';
-import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
 import iouReportPropTypes from '@pages/iouReportPropTypes';
 import * as BankAccounts from '@userActions/BankAccounts';
@@ -34,9 +33,6 @@ const propTypes = {
     /** The IOU/Expense report we are paying */
     iouReport: iouReportPropTypes,
 
-    /** List of betas available to current user */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** The route to redirect if user does not have a payment method setup */
     enablePaymentsRoute: PropTypes.string.isRequired,
 
@@ -89,9 +85,8 @@ const defaultProps = {
     currency: CONST.CURRENCY.USD,
     chatReportID: '',
 
-    // The "betas" array, "iouReport" and "nvp_lastPaymentMethod" objects needs to be stable to prevent the "useMemo"
+    // The "iouReport" and "nvp_lastPaymentMethod" objects needs to be stable to prevent the "useMemo"
     // hook from being recreated unnecessarily, hence the use of CONST.EMPTY_ARRAY and CONST.EMPTY_OBJECT
-    betas: CONST.EMPTY_ARRAY,
     iouReport: CONST.EMPTY_OBJECT,
     nvp_lastPaymentMethod: CONST.EMPTY_OBJECT,
     style: [],
@@ -113,7 +108,6 @@ function SettlementButton({
     addBankAccountRoute,
     kycWallAnchorAlignment,
     paymentMethodDropdownAnchorAlignment,
-    betas,
     buttonSize,
     chatReportID,
     currency,
@@ -155,7 +149,7 @@ function SettlementButton({
                 value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
             },
         };
-        const canUseWallet = !isExpenseReport && currency === CONST.CURRENCY.USD && Permissions.canUsePayWithExpensify(betas) && Permissions.canUseWallet(betas);
+        const canUseWallet = !isExpenseReport && currency === CONST.CURRENCY.USD;
 
         // To achieve the one tap pay experience we need to choose the correct payment type as default,
         // if user already paid for some request or expense, let's use the last payment method or use default.
@@ -163,7 +157,9 @@ function SettlementButton({
         if (canUseWallet) {
             buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
         }
-        buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.VBBA]);
+        if (isExpenseReport) {
+            buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.VBBA]);
+        }
         buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]);
 
         // Put the preferred payment method to the front of the array so its shown as default
@@ -171,7 +167,7 @@ function SettlementButton({
             return _.sortBy(buttonOptions, (method) => (method.value === paymentMethod ? 0 : 1));
         }
         return buttonOptions;
-    }, [betas, currency, formattedAmount, iouReport, nvp_lastPaymentMethod, policyID, translate]);
+    }, [currency, formattedAmount, iouReport, nvp_lastPaymentMethod, policyID, translate]);
 
     const selectPaymentType = (event, iouPaymentType, triggerKYCFlow) => {
         if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) {
@@ -219,9 +215,6 @@ SettlementButton.displayName = 'SettlementButton';
 export default compose(
     withNavigation,
     withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         nvp_lastPaymentMethod: {
             key: ONYXKEYS.NVP_LAST_PAYMENT_METHOD,
         },
diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton/index.js
new file mode 100644
index 000000000000..5f1620ac7c88
--- /dev/null
+++ b/src/components/ShowMoreButton/index.js
@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {Text, View} from 'react-native';
+import _ from 'underscore';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import useLocalize from '@hooks/useLocalize';
+import * as NumberFormatUtils from '@libs/NumberFormatUtils';
+import stylePropTypes from '@styles/stylePropTypes';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
+
+const propTypes = {
+    /** Additional styles for container */
+    containerStyle: stylePropTypes,
+
+    /** The number of currently shown items */
+    currentCount: PropTypes.number,
+
+    /** The total number of items that could be shown */
+    totalCount: PropTypes.number,
+
+    /** A handler that fires when button has been pressed */
+    onPress: PropTypes.func.isRequired,
+};
+
+const defaultProps = {
+    containerStyle: {},
+    currentCount: undefined,
+    totalCount: undefined,
+};
+
+function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) {
+    const {translate, preferredLocale} = useLocalize();
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount);
+
+    return (
+        <View style={[styles.alignItemsCenter, containerStyle]}>
+            {shouldShowCounter && (
+                <Text style={[styles.mb2, styles.textLabelSupporting]}>
+                    {`${translate('common.showing')} `}
+                    <Text style={styles.textStrong}>{currentCount}</Text>
+                    {` ${translate('common.of')} `}
+                    <Text style={styles.textStrong}>{NumberFormatUtils.format(preferredLocale, totalCount)}</Text>
+                </Text>
+            )}
+            <View style={[styles.w100, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.mr0]} />
+                <Button
+                    style={styles.mh0}
+                    small
+                    shouldShowRightIcon
+                    iconFill={theme.icon}
+                    iconRight={Expensicons.DownArrow}
+                    text={translate('common.showMore')}
+                    accessibilityLabel={translate('common.showMore')}
+                    onPress={onPress}
+                />
+                <View style={[styles.shortTermsHorizontalRule, styles.flex1, styles.ml0]} />
+            </View>
+        </View>
+    );
+}
+
+ShowMoreButton.displayName = 'ShowMoreButton';
+ShowMoreButton.propTypes = propTypes;
+ShowMoreButton.defaultProps = defaultProps;
+
+export default ShowMoreButton;
diff --git a/src/components/SingleChoiceQuestion.tsx b/src/components/SingleChoiceQuestion.tsx
new file mode 100644
index 000000000000..07d4dfe817dd
--- /dev/null
+++ b/src/components/SingleChoiceQuestion.tsx
@@ -0,0 +1,39 @@
+import React, {ForwardedRef, forwardRef} from 'react';
+import {Text as RNText} from 'react-native';
+import useThemeStyles from '@styles/useThemeStyles';
+import FormHelpMessage from './FormHelpMessage';
+import RadioButtons, {Choice} from './RadioButtons';
+import Text from './Text';
+
+type SingleChoiceQuestionProps = {
+    prompt: string;
+    errorText?: string | string[];
+    possibleAnswers: Choice[];
+    currentQuestionIndex: number;
+    onInputChange: (value: string) => void;
+};
+
+function SingleChoiceQuestion({prompt, errorText, possibleAnswers, currentQuestionIndex, onInputChange}: SingleChoiceQuestionProps, ref: ForwardedRef<RNText>) {
+    const styles = useThemeStyles();
+
+    return (
+        <>
+            <Text
+                ref={ref}
+                style={[styles.textStrong, styles.mb5]}
+            >
+                {prompt}
+            </Text>
+            <RadioButtons
+                items={possibleAnswers}
+                key={currentQuestionIndex}
+                onPress={onInputChange}
+            />
+            <FormHelpMessage message={errorText} />
+        </>
+    );
+}
+
+SingleChoiceQuestion.displayName = 'SingleChoiceQuestion';
+
+export default forwardRef(SingleChoiceQuestion);
diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js
index 967ae5443a81..9567ad2331ef 100644
--- a/src/components/SingleOptionSelector.js
+++ b/src/components/SingleOptionSelector.js
@@ -51,7 +51,7 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption, trans
                     >
                         <SelectCircle
                             isChecked={selectedOptionKey ? selectedOptionKey === option.key : false}
-                            styles={[styles.ml0, styles.singleOptionSelectorCircle]}
+                            selectCircleStyles={[styles.ml0, styles.singleOptionSelectorCircle]}
                         />
                         <Text>{translate(option.label)}</Text>
                     </PressableWithoutFeedback>
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index be899adec0a2..908bb5eb5b2a 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -101,6 +101,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                     onChangeText={setSearchValue}
                     initiallyFocusedOptionKey={currentState}
                     shouldStopPropagation
+                    shouldUseDynamicMaxToRenderPerBatch
                 />
             </ScreenWrapper>
         </Modal>
diff --git a/src/components/SubscriptAvatar.tsx b/src/components/SubscriptAvatar.tsx
index c6bba8168ee3..52ecf6633d9b 100644
--- a/src/components/SubscriptAvatar.tsx
+++ b/src/components/SubscriptAvatar.tsx
@@ -52,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/TabSelector/TabSelector.js b/src/components/TabSelector/TabSelector.js
index b6ee359dc4ca..83601dbc27d8 100644
--- a/src/components/TabSelector/TabSelector.js
+++ b/src/components/TabSelector/TabSelector.js
@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import React, {useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import * as Expensicons from '@components/Icon/Expensicons';
 import useLocalize from '@hooks/useLocalize';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import TabSelectorItem from './TabSelectorItem';
 
@@ -68,24 +68,28 @@ const getOpacity = (position, routesLength, tabIndex, active, affectedTabs) => {
     return activeValue;
 };
 
-const getBackgroundColor = (position, routesLength, tabIndex, affectedTabs) => {
-    if (routesLength > 1) {
-        const inputRange = Array.from({length: routesLength}, (v, i) => i);
-
-        return position.interpolate({
-            inputRange,
-            outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? themeColors.border : themeColors.appBG)),
-        });
-    }
-    return themeColors.border;
-};
-
 function TabSelector({state, navigation, onTabPress, position}) {
     const {translate} = useLocalize();
-
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const defaultAffectedAnimatedTabs = useMemo(() => Array.from({length: state.routes.length}, (v, i) => i), [state.routes.length]);
     const [affectedAnimatedTabs, setAffectedAnimatedTabs] = useState(defaultAffectedAnimatedTabs);
 
+    const getBackgroundColor = useCallback(
+        (routesLength, tabIndex, affectedTabs) => {
+            if (routesLength > 1) {
+                const inputRange = Array.from({length: routesLength}, (v, i) => i);
+
+                return position.interpolate({
+                    inputRange,
+                    outputRange: _.map(inputRange, (i) => (affectedTabs.includes(tabIndex) && i === tabIndex ? theme.border : theme.appBG)),
+                });
+            }
+            return theme.border;
+        },
+        [theme, position],
+    );
+
     React.useEffect(() => {
         // It is required to wait transition end to reset affectedAnimatedTabs because tabs style is still animating during transition.
         setTimeout(() => {
@@ -98,7 +102,7 @@ function TabSelector({state, navigation, onTabPress, position}) {
             {_.map(state.routes, (route, index) => {
                 const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs);
                 const inactiveOpacity = getOpacity(position, state.routes.length, index, false, affectedAnimatedTabs);
-                const backgroundColor = getBackgroundColor(position, state.routes.length, index, affectedAnimatedTabs);
+                const backgroundColor = getBackgroundColor(state.routes.length, index, affectedAnimatedTabs);
                 const isFocused = index === state.index;
                 const {icon, title} = getIconAndTitle(route.name, translate);
 
diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js
index f9071aa5267d..78724718b2af 100644
--- a/src/components/TagPicker/index.js
+++ b/src/components/TagPicker/index.js
@@ -6,12 +6,13 @@ import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {defaultProps, propTypes} from './tagPickerPropTypes';
 
-function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit, shouldShowDisabledAndSelectedOption}) {
+function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption, insets, onSubmit}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
@@ -57,6 +58,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
 
     return (
         <OptionsSelector
+            contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
             optionHoveredStyle={styles.hoveredComponentBG}
             sectionHeaderStyle={styles.mt5}
             sections={sections}
diff --git a/src/components/TagPicker/tagPickerPropTypes.js b/src/components/TagPicker/tagPickerPropTypes.js
index 1221c939b940..b98f7f6ef8e9 100644
--- a/src/components/TagPicker/tagPickerPropTypes.js
+++ b/src/components/TagPicker/tagPickerPropTypes.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import tagPropTypes from '@components/tagPropTypes';
+import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
 
 const propTypes = {
     /** The policyID we are getting tags for */
@@ -14,6 +15,12 @@ const propTypes = {
     /** Callback to submit the selected tag */
     onSubmit: PropTypes.func.isRequired,
 
+    /**
+     * Safe area insets required for reflecting the portion of the view,
+     * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
+     */
+    insets: safeAreaInsetPropTypes.isRequired,
+
     /* Onyx Props */
     /** Collection of tags attached to a policy */
     policyTags: tagPropTypes,
diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.tsx
similarity index 71%
rename from src/components/TestToolMenu.js
rename to src/components/TestToolMenu.tsx
index fd71b6cee75b..53953b861d7d 100644
--- a/src/components/TestToolMenu.js
+++ b/src/components/TestToolMenu.tsx
@@ -1,7 +1,5 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -10,34 +8,30 @@ import * as Session from '@userActions/Session';
 import * as User from '@userActions/User';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
+import NetworkOnyx from '@src/types/onyx/Network';
+import UserOnyx from '@src/types/onyx/User';
 import Button from './Button';
-import networkPropTypes from './networkPropTypes';
 import {withNetwork} from './OnyxProvider';
 import Switch from './Switch';
 import TestToolRow from './TestToolRow';
 import Text from './Text';
 
-const propTypes = {
+type TestToolMenuOnyxProps = {
     /** User object in Onyx */
-    user: PropTypes.shape({
-        /** Whether we should use the staging version of the secure API server */
-        shouldUseStagingServer: PropTypes.bool,
-    }),
+    user: OnyxEntry<UserOnyx>;
+};
 
+type TestToolMenuProps = TestToolMenuOnyxProps & {
     /** Network object in Onyx */
-    network: networkPropTypes.isRequired,
+    network: OnyxEntry<NetworkOnyx>;
 };
 
-const defaultProps = {
-    user: {
-        // The default value is environment specific and can't be set with `defaultProps` (ENV is not resolved yet)
-        // When undefined (during render) STAGING defaults to `true`, other envs default to `false`
-        shouldUseStagingServer: undefined,
-    },
-};
+const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false};
 
-function TestToolMenu(props) {
+function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
+    const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi();
     const styles = useThemeStyles();
+
     return (
         <>
             <Text
@@ -54,8 +48,8 @@ function TestToolMenu(props) {
                 <TestToolRow title="Use Staging Server">
                     <Switch
                         accessibilityLabel="Use Staging Server"
-                        isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
-                        onToggle={() => User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
+                        isOn={shouldUseStagingServer}
+                        onToggle={() => User.setShouldUseStagingServer(!shouldUseStagingServer)}
                     />
                 </TestToolRow>
             )}
@@ -64,8 +58,8 @@ function TestToolMenu(props) {
             <TestToolRow title="Force offline">
                 <Switch
                     accessibilityLabel="Force offline"
-                    isOn={Boolean(props.network.shouldForceOffline)}
-                    onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
+                    isOn={!!network?.shouldForceOffline}
+                    onToggle={() => Network.setShouldForceOffline(!network?.shouldForceOffline)}
                 />
             </TestToolRow>
 
@@ -73,8 +67,8 @@ function TestToolMenu(props) {
             <TestToolRow title="Simulate failing network requests">
                 <Switch
                     accessibilityLabel="Simulate failing network requests"
-                    isOn={Boolean(props.network.shouldFailAllRequests)}
-                    onToggle={() => Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
+                    isOn={!!network?.shouldFailAllRequests}
+                    onToggle={() => Network.setShouldFailAllRequests(!network?.shouldFailAllRequests)}
                 />
             </TestToolRow>
 
@@ -99,15 +93,13 @@ function TestToolMenu(props) {
     );
 }
 
-TestToolMenu.propTypes = propTypes;
-TestToolMenu.defaultProps = defaultProps;
 TestToolMenu.displayName = 'TestToolMenu';
 
 export default compose(
-    withNetwork(),
-    withOnyx({
+    withOnyx<TestToolMenuProps, TestToolMenuOnyxProps>({
         user: {
             key: ONYXKEYS.USER,
         },
     }),
+    withNetwork(),
 )(TestToolMenu);
diff --git a/src/components/TestToolsModal.js b/src/components/TestToolsModal.tsx
similarity index 56%
rename from src/components/TestToolsModal.js
rename to src/components/TestToolsModal.tsx
index 334090d98334..f555c2b0b4fe 100644
--- a/src/components/TestToolsModal.js
+++ b/src/components/TestToolsModal.tsx
@@ -1,7 +1,6 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
 import useThemeStyles from '@styles/useThemeStyles';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
@@ -9,27 +8,19 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import Modal from './Modal';
 import TestToolMenu from './TestToolMenu';
 
-const propTypes = {
-    /** Details about modal */
-    modal: PropTypes.shape({
-        /** Indicates when an Alert modal is about to be visible */
-        willAlertModalBecomeVisible: PropTypes.bool,
-    }),
-
+type TestToolsModalOnyxProps = {
     /** Whether the test tools modal is open */
-    isTestToolsModalOpen: PropTypes.bool,
+    isTestToolsModalOpen: OnyxEntry<boolean>;
 };
 
-const defaultProps = {
-    modal: {},
-    isTestToolsModalOpen: false,
-};
+type TestToolsModalProps = TestToolsModalOnyxProps;
 
-function TestToolsModal(props) {
+function TestToolsModal({isTestToolsModalOpen = false}: TestToolsModalProps) {
     const styles = useThemeStyles();
+
     return (
         <Modal
-            isVisible={props.isTestToolsModalOpen}
+            isVisible={!!isTestToolsModalOpen}
             type={CONST.MODAL.MODAL_TYPE.CENTERED_SMALL}
             onClose={toggleTestToolsModal}
         >
@@ -40,14 +31,9 @@ function TestToolsModal(props) {
     );
 }
 
-TestToolsModal.propTypes = propTypes;
-TestToolsModal.defaultProps = defaultProps;
 TestToolsModal.displayName = 'TestToolsModal';
 
-export default withOnyx({
-    modal: {
-        key: ONYXKEYS.MODAL,
-    },
+export default withOnyx<TestToolsModalProps, TestToolsModalOnyxProps>({
     isTestToolsModalOpen: {
         key: ONYXKEYS.IS_TEST_TOOLS_MODAL_OPEN,
     },
diff --git a/src/components/TextInput/BaseTextInput/index.js b/src/components/TextInput/BaseTextInput/index.js
index a28365480c7a..9a51bf5baa68 100644
--- a/src/components/TextInput/BaseTextInput/index.js
+++ b/src/components/TextInput/BaseTextInput/index.js
@@ -333,7 +333,7 @@ function BaseTextInput(props) {
                                     !isMultiline && Browser.isMobileChrome() && {boxSizing: 'content-box', height: undefined},
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
-                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
+                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight),
                                     // Add disabled color theme when field is not editable.
                                     props.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
diff --git a/src/components/TextInput/BaseTextInput/index.native.js b/src/components/TextInput/BaseTextInput/index.native.js
index 60863cfb5771..347a1b0dce4d 100644
--- a/src/components/TextInput/BaseTextInput/index.native.js
+++ b/src/components/TextInput/BaseTextInput/index.native.js
@@ -28,6 +28,7 @@ function BaseTextInput(props) {
     const styles = useThemeStyles();
     const initialValue = props.value || props.defaultValue || '';
     const initialActiveLabel = props.forceActiveLabel || initialValue.length > 0 || Boolean(props.prefixCharacter);
+    const isMultiline = props.multiline || props.autoGrowHeight;
 
     const [isFocused, setIsFocused] = useState(false);
     const [passwordHidden, setPasswordHidden] = useState(props.secureTextEntry);
@@ -172,10 +173,12 @@ function BaseTextInput(props) {
     /**
      * Set Value & activateLabel
      *
-     * @param {String} value
+     * @param {String} val
      * @memberof BaseTextInput
      */
-    const setValue = (value) => {
+    const setValue = (val) => {
+        const value = isMultiline ? val : val.replace(/\n/g, ' ');
+
         if (props.onInputChange) {
             props.onInputChange(value);
         }
@@ -184,7 +187,7 @@ function BaseTextInput(props) {
 
         if (value && value.length > 0) {
             hasValueRef.current = true;
-            // When the componment is uncontrolled, we need to manually activate the label:
+            // When the component is uncontrolled, we need to manually activate the label
             if (props.value === undefined) {
                 activateLabel();
             }
@@ -227,7 +230,6 @@ function BaseTextInput(props) {
         (props.hasError || props.errorText) && styles.borderColorDanger,
         props.autoGrowHeight && {scrollPaddingTop: 2 * maxHeight},
     ]);
-    const isMultiline = props.multiline || props.autoGrowHeight;
 
     return (
         <>
@@ -310,7 +312,7 @@ function BaseTextInput(props) {
                                     !isMultiline && {height, lineHeight: undefined},
 
                                     // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
-                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),
+                                    props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight),
                                     // Add disabled color theme when field is not editable.
                                     props.disabled && styles.textInputDisabled,
                                     styles.pointerEventsAuto,
diff --git a/src/components/Tooltip/BaseTooltip.js b/src/components/Tooltip/BaseTooltip.js
index 3eb905e7a3e5..1aa5fa81e0a4 100644
--- a/src/components/Tooltip/BaseTooltip.js
+++ b/src/components/Tooltip/BaseTooltip.js
@@ -167,6 +167,16 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent,
         setIsVisible(false);
     }, []);
 
+    const updateTargetPositionOnMouseEnter = useCallback(
+        (e) => {
+            updateTargetAndMousePosition(e);
+            if (children.props.onMouseEnter) {
+                children.props.onMouseEnter(e);
+            }
+        },
+        [children.props, updateTargetAndMousePosition],
+    );
+
     // Skip the tooltip and return the children if the text is empty,
     // we don't have a render function or the device does not support hovering
     if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport) {
@@ -205,7 +215,9 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent,
                     onHoverOut={hideTooltip}
                     shouldHandleScroll={shouldHandleScroll}
                 >
-                    {children}
+                    {React.cloneElement(children, {
+                        onMouseEnter: updateTargetPositionOnMouseEnter,
+                    })}
                 </Hoverable>
             </BoundsObserver>
         </>
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index 69d06775ae2a..c3898a4fe983 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -5,6 +5,8 @@ import {Animated, View} from 'react-native';
 import Text from '@components/Text';
 import Log from '@libs/Log';
 import getTooltipStyles from '@styles/getTooltipStyles';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Window width */
@@ -59,7 +61,20 @@ const defaultProps = {
 // We also update the state on layout changes which will be triggered often.
 // There will be n number of tooltip components in the page.
 // It's good to memoize this one.
-function TooltipRenderedOnPageBody(props) {
+function TooltipRenderedOnPageBody({
+    animation,
+    windowWidth,
+    xOffset,
+    yOffset,
+    targetWidth,
+    targetHeight,
+    maxWidth,
+    shiftHorizontal,
+    shiftVertical,
+    text,
+    numberOfLines,
+    renderTooltipContent,
+}) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
     // which prevents us from measuring it correctly.
@@ -69,12 +84,15 @@ function TooltipRenderedOnPageBody(props) {
     const contentRef = useRef();
     const rootWrapper = useRef();
 
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     useEffect(() => {
-        if (!props.renderTooltipContent || !props.text) {
+        if (!renderTooltipContent || !text) {
             return;
         }
         Log.warn('Developer error: Cannot use both text and renderTooltipContent props at the same time in <TooltipRenderedOnPageBody />!');
-    }, [props.text, props.renderTooltipContent]);
+    }, [text, renderTooltipContent]);
 
     useLayoutEffect(() => {
         // Calculate the tooltip width and height before the browser repaints the screen to prevent flicker
@@ -85,49 +103,39 @@ function TooltipRenderedOnPageBody(props) {
 
     const {animationStyle, rootWrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo(
         () =>
-            getTooltipStyles(
-                rootWrapper.current,
-                props.animation,
-                props.windowWidth,
-                props.xOffset,
-                props.yOffset,
-                props.targetWidth,
-                props.targetHeight,
-                props.maxWidth,
-                contentMeasuredWidth,
-                wrapperMeasuredHeight,
-                props.shiftHorizontal,
-                props.shiftVertical,
-            ),
-        [
-            props.animation,
-            props.windowWidth,
-            props.xOffset,
-            props.yOffset,
-            props.targetWidth,
-            props.targetHeight,
-            props.maxWidth,
-            contentMeasuredWidth,
-            wrapperMeasuredHeight,
-            props.shiftHorizontal,
-            props.shiftVertical,
-        ],
+            getTooltipStyles({
+                tooltip: rootWrapper.current,
+                currentSize: animation,
+                windowWidth,
+                xOffset,
+                yOffset,
+                tooltipTargetWidth: targetWidth,
+                tooltipTargetHeight: targetHeight,
+                maxWidth,
+                tooltipContentWidth: contentMeasuredWidth,
+                tooltipWrapperHeight: wrapperMeasuredHeight,
+                theme,
+                themeStyles: styles,
+                shiftHorizontal,
+                shiftVertical,
+            }),
+        [animation, windowWidth, xOffset, yOffset, targetWidth, targetHeight, maxWidth, contentMeasuredWidth, wrapperMeasuredHeight, shiftHorizontal, shiftVertical, theme, styles],
     );
 
     let content;
-    if (props.renderTooltipContent) {
-        content = <View ref={contentRef}>{props.renderTooltipContent()}</View>;
+    if (renderTooltipContent) {
+        content = <View ref={contentRef}>{renderTooltipContent()}</View>;
     } else {
         content = (
             <Text
-                numberOfLines={props.numberOfLines}
+                numberOfLines={numberOfLines}
                 style={textStyle}
             >
                 <Text
                     style={textStyle}
                     ref={contentRef}
                 >
-                    {props.text}
+                    {text}
                 </Text>
             </Text>
         );
diff --git a/src/components/UnorderedList.js b/src/components/UnorderedList.js
deleted file mode 100644
index c3300c11aae0..000000000000
--- a/src/components/UnorderedList.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
-import useThemeStyles from '@styles/useThemeStyles';
-import Text from './Text';
-
-const propTypes = {
-    /** An array of strings to display as an unordered list */
-    items: PropTypes.arrayOf(PropTypes.string),
-};
-const defaultProps = {
-    items: [],
-};
-
-function UnorderedList(props) {
-    const styles = useThemeStyles();
-    return (
-        <>
-            {_.map(props.items, (itemText) => (
-                <View
-                    key={itemText}
-                    style={[styles.flexRow, styles.alignItemsStart, styles.ml2]}
-                >
-                    <Text style={[styles.mr2]}>{'\u2022'}</Text>
-                    <Text>{itemText}</Text>
-                </View>
-            ))}
-        </>
-    );
-}
-
-UnorderedList.displayName = 'UnorderedList';
-UnorderedList.propTypes = propTypes;
-UnorderedList.defaultProps = defaultProps;
-
-export default UnorderedList;
diff --git a/src/components/UnorderedList.tsx b/src/components/UnorderedList.tsx
new file mode 100644
index 000000000000..a51cefce9ce6
--- /dev/null
+++ b/src/components/UnorderedList.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {View} from 'react-native';
+import useThemeStyles from '@styles/useThemeStyles';
+import Text from './Text';
+
+type UnorderedListProps = {
+    /** An array of strings to display as an unordered list */
+    items?: string[];
+};
+
+function UnorderedList({items = []}: UnorderedListProps) {
+    const styles = useThemeStyles();
+
+    return items.map((itemText) => (
+        <View
+            key={itemText}
+            style={[styles.flexRow, styles.alignItemsStart, styles.ml2]}
+        >
+            <Text style={[styles.mr2]}>{'\u2022'}</Text>
+            <Text>{itemText}</Text>
+        </View>
+    ));
+}
+
+UnorderedList.displayName = 'UnorderedList';
+export default UnorderedList;
diff --git a/src/components/WalletStatementModal/WalletStatementModalPropTypes.js b/src/components/WalletStatementModal/WalletStatementModalPropTypes.js
deleted file mode 100644
index 06a2248151f6..000000000000
--- a/src/components/WalletStatementModal/WalletStatementModalPropTypes.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-
-const walletStatementPropTypes = {
-    /* Onyx Props */
-    /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user authToken */
-        authToken: PropTypes.string,
-    }),
-
-    /** URL for oldDot (expensify.com) statements page to display */
-    statementPageURL: PropTypes.string,
-};
-
-const walletStatementDefaultProps = {
-    session: {
-        authToken: null,
-    },
-};
-
-export {walletStatementPropTypes, walletStatementDefaultProps};
diff --git a/src/components/WalletStatementModal/index.native.js b/src/components/WalletStatementModal/index.native.tsx
similarity index 73%
rename from src/components/WalletStatementModal/index.native.js
rename to src/components/WalletStatementModal/index.native.tsx
index 9c2aea8e8ec4..f54d7c68fe95 100644
--- a/src/components/WalletStatementModal/index.native.js
+++ b/src/components/WalletStatementModal/index.native.tsx
@@ -1,31 +1,31 @@
-import lodashGet from 'lodash/get';
 import React, {useCallback, useRef} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import {WebView} from 'react-native-webview';
-import _ from 'underscore';
+import {WebView, WebViewNavigation} from 'react-native-webview';
+import {ValueOf} from 'type-fest';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
+import type {WalletStatementOnyxProps, WalletStatementProps} from './types';
+
+type WebViewMessageType = ValueOf<typeof CONST.WALLET.WEB_MESSAGE_TYPE>;
+
+type WebViewNavigationEvent = WebViewNavigation & {type?: WebViewMessageType};
 
 const IOU_ROUTES = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
 const renderLoading = () => <FullScreenLoadingIndicator />;
 
-function WalletStatementModal({statementPageURL, session}) {
-    const webViewRef = useRef();
-    const authToken = lodashGet(session, 'authToken', null);
+function WalletStatementModal({statementPageURL, session}: WalletStatementProps) {
+    const webViewRef = useRef<WebView>(null);
+    const authToken = session?.authToken ?? null;
 
     /**
      * Handles in-app navigation for webview links
-     *
-     * @param {String} params.type
-     * @param {String} params.url
      */
     const handleNavigationStateChange = useCallback(
-        ({type, url}) => {
+        ({type, url}: WebViewNavigationEvent) => {
             if (!webViewRef.current || (type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
                 return;
             }
@@ -36,7 +36,7 @@ function WalletStatementModal({statementPageURL, session}) {
             }
 
             if (type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && url) {
-                const iouRoute = _.find(IOU_ROUTES, (item) => url.includes(item));
+                const iouRoute = IOU_ROUTES.find((item) => url.includes(item));
 
                 if (iouRoute) {
                     webViewRef.current.stopLoading();
@@ -66,10 +66,8 @@ function WalletStatementModal({statementPageURL, session}) {
 }
 
 WalletStatementModal.displayName = 'WalletStatementModal';
-WalletStatementModal.propTypes = walletStatementPropTypes;
-WalletStatementModal.defaultProps = walletStatementDefaultProps;
 
-export default withOnyx({
+export default withOnyx<WalletStatementProps, WalletStatementOnyxProps>({
     session: {
         key: ONYXKEYS.SESSION,
     },
diff --git a/src/components/WalletStatementModal/index.js b/src/components/WalletStatementModal/index.tsx
similarity index 64%
rename from src/components/WalletStatementModal/index.js
rename to src/components/WalletStatementModal/index.tsx
index 8ce4ee01ed30..0f1d1804df60 100644
--- a/src/components/WalletStatementModal/index.js
+++ b/src/components/WalletStatementModal/index.tsx
@@ -1,31 +1,25 @@
-import lodashGet from 'lodash/get';
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import withLocalize from '@components/withLocalize';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {walletStatementDefaultProps, walletStatementPropTypes} from './WalletStatementModalPropTypes';
+import type {WalletStatementOnyxProps, WalletStatementProps} from './types';
 
-function WalletStatementModal({statementPageURL, session}) {
+function WalletStatementModal({statementPageURL, session}: WalletStatementProps) {
     const styles = useThemeStyles();
     const [isLoading, setIsLoading] = useState(true);
-    const authToken = lodashGet(session, 'authToken', null);
+    const authToken = session?.authToken ?? null;
 
     /**
      * Handles in-app navigation for iframe links
-     *
-     * @param {MessageEvent} event
      */
-    const navigate = (event) => {
-        if (!event.data || !event.data.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
+    const navigate = (event: MessageEvent) => {
+        if (!event.data?.type || (event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.type !== CONST.WALLET.WEB_MESSAGE_TYPE.CONCIERGE)) {
             return;
         }
 
@@ -35,7 +29,7 @@ function WalletStatementModal({statementPageURL, session}) {
 
         if (event.data.type === CONST.WALLET.WEB_MESSAGE_TYPE.STATEMENT && event.data.url) {
             const iouRoutes = [ROUTES.IOU_REQUEST, ROUTES.IOU_SEND];
-            const navigateToIOURoute = _.find(iouRoutes, (iouRoute) => event.data.url.includes(iouRoute));
+            const navigateToIOURoute = iouRoutes.find((iouRoute) => event.data.url.includes(iouRoute));
             if (navigateToIOURoute) {
                 Navigation.navigate(navigateToIOURoute);
             }
@@ -51,7 +45,7 @@ function WalletStatementModal({statementPageURL, session}) {
                     title="Statements"
                     height="100%"
                     width="100%"
-                    seamless="seamless"
+                    seamless
                     frameBorder="0"
                     onLoad={() => {
                         setIsLoading(false);
@@ -66,15 +60,10 @@ function WalletStatementModal({statementPageURL, session}) {
     );
 }
 
-WalletStatementModal.propTypes = walletStatementPropTypes;
-WalletStatementModal.defaultProps = walletStatementDefaultProps;
 WalletStatementModal.displayName = 'WalletStatementModal';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-    }),
-)(WalletStatementModal);
+export default withOnyx<WalletStatementProps, WalletStatementOnyxProps>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+})(WalletStatementModal);
diff --git a/src/components/WalletStatementModal/types.ts b/src/components/WalletStatementModal/types.ts
new file mode 100644
index 000000000000..bb926b8250ae
--- /dev/null
+++ b/src/components/WalletStatementModal/types.ts
@@ -0,0 +1,14 @@
+import {OnyxEntry} from 'react-native-onyx/lib/types';
+import type {Session} from '@src/types/onyx';
+
+type WalletStatementOnyxProps = {
+    /** Session info for the currently logged in user. */
+    session: OnyxEntry<Session>;
+};
+
+type WalletStatementProps = WalletStatementOnyxProps & {
+    /** URL for oldDot (expensify.com) statements page to display */
+    statementPageURL: string;
+};
+
+export type {WalletStatementProps, WalletStatementOnyxProps};
diff --git a/src/components/transactionPropTypes.js b/src/components/transactionPropTypes.js
index 049fe60630e5..a26cf9a76cf5 100644
--- a/src/components/transactionPropTypes.js
+++ b/src/components/transactionPropTypes.js
@@ -31,25 +31,28 @@ export default PropTypes.shape({
     modifiedMerchant: PropTypes.string,
 
     /** The comment object on the transaction */
-    comment: PropTypes.shape({
-        /** The text of the comment */
-        comment: PropTypes.string,
+    comment: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            /** The text of the comment */
+            comment: PropTypes.string,
 
-        /** The waypoints defining the distance request */
-        waypoints: PropTypes.shape({
-            /** The latitude of the waypoint */
-            lat: PropTypes.number,
+            /** The waypoints defining the distance request */
+            waypoints: PropTypes.shape({
+                /** The latitude of the waypoint */
+                lat: PropTypes.number,
 
-            /** The longitude of the waypoint */
-            lng: PropTypes.number,
+                /** The longitude of the waypoint */
+                lng: PropTypes.number,
 
-            /** The address of the waypoint */
-            address: PropTypes.string,
+                /** The address of the waypoint */
+                address: PropTypes.string,
 
-            /** The name of the waypoint */
-            name: PropTypes.string,
+                /** The name of the waypoint */
+                name: PropTypes.string,
+            }),
         }),
-    }),
+    ]),
 
     /** The type of transaction */
     type: PropTypes.oneOf(_.values(CONST.TRANSACTION.TYPE)),
diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx
index 22da02159073..3ce9eeae37b5 100644
--- a/src/components/withCurrentReportID.tsx
+++ b/src/components/withCurrentReportID.tsx
@@ -8,6 +8,7 @@ type CurrentReportIDContextValue = {
     updateCurrentReportID: (state: NavigationState) => void;
     currentReportID: string;
 };
+
 type CurrentReportIDContextProviderProps = {
     /** Actual content wrapped by this component */
     children: React.ReactNode;
diff --git a/src/components/withEnvironment.tsx b/src/components/withEnvironment.tsx
index 1bfc147f0db3..6054b43f97f5 100644
--- a/src/components/withEnvironment.tsx
+++ b/src/components/withEnvironment.tsx
@@ -19,7 +19,10 @@ type EnvironmentContextValue = {
     environmentURL: string;
 };
 
-const EnvironmentContext = createContext<EnvironmentContextValue | null>(null);
+const EnvironmentContext = createContext<EnvironmentContextValue>({
+    environment: CONST.ENVIRONMENT.PRODUCTION,
+    environmentURL: CONST.NEW_EXPENSIFY_URL,
+});
 
 function EnvironmentProvider({children}: EnvironmentProviderProps): ReactElement {
     const [environment, setEnvironment] = useState<EnvironmentValue>(CONST.ENVIRONMENT.PRODUCTION);
@@ -47,7 +50,7 @@ export default function withEnvironment<TProps extends EnvironmentContextValue,
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): (props: Omit<TProps, keyof EnvironmentContextValue> & React.RefAttributes<TRef>) => ReactElement | null {
     function WithEnvironment(props: Omit<TProps, keyof EnvironmentContextValue>, ref: ForwardedRef<TRef>): ReactElement {
-        const {environment, environmentURL} = useContext(EnvironmentContext) ?? {};
+        const {environment, environmentURL} = useContext(EnvironmentContext);
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx
index 0834eabc2adb..88788edafb79 100644
--- a/src/components/withNavigation.tsx
+++ b/src/components/withNavigation.tsx
@@ -1,9 +1,10 @@
 import {NavigationProp, useNavigation} from '@react-navigation/native';
 import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
+import {RootStackParamList} from '@libs/Navigation/types';
 
 type WithNavigationProps = {
-    navigation: NavigationProp<ReactNavigation.RootParamList>;
+    navigation: NavigationProp<RootStackParamList>;
 };
 
 export default function withNavigation<TProps extends WithNavigationProps, TRef>(
diff --git a/src/components/withTheme.tsx b/src/components/withTheme.tsx
index d78742b7036b..451292f1a66f 100644
--- a/src/components/withTheme.tsx
+++ b/src/components/withTheme.tsx
@@ -29,4 +29,4 @@ export default function withTheme<TProps extends ThemeProps, TRef>(
     return forwardRef(WithTheme);
 }
 
-export {withThemePropTypes};
+export {withThemePropTypes, type ThemeProps};
diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx
index d95122c3e2ba..8ea55c5fbef8 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -29,4 +29,4 @@ export default function withThemeStyles<TProps extends ThemeStylesProps, TRef>(
     return forwardRef(WithThemeStyles);
 }
 
-export {withThemeStylesPropTypes};
+export {withThemeStylesPropTypes, type ThemeStylesProps};
diff --git a/src/hooks/useEnvironment.ts b/src/hooks/useEnvironment.ts
index 60e0b4a12394..b8584d0f0a48 100644
--- a/src/hooks/useEnvironment.ts
+++ b/src/hooks/useEnvironment.ts
@@ -3,13 +3,13 @@ import {EnvironmentContext} from '@components/withEnvironment';
 import type {EnvironmentContextValue} from '@components/withEnvironment';
 import CONST from '@src/CONST';
 
-type UseEnvironment = Partial<EnvironmentContextValue> & {
+type UseEnvironment = EnvironmentContextValue & {
     isProduction: boolean;
     isDevelopment: boolean;
 };
 
 export default function useEnvironment(): UseEnvironment {
-    const {environment, environmentURL} = useContext(EnvironmentContext) ?? {};
+    const {environment, environmentURL} = useContext(EnvironmentContext);
     return {
         environment,
         environmentURL,
diff --git a/src/hooks/useFlipper/index.js b/src/hooks/useFlipper/index.js
deleted file mode 100644
index 2d1ec238274a..000000000000
--- a/src/hooks/useFlipper/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default () => {};
diff --git a/src/hooks/useFlipper/index.native.js b/src/hooks/useFlipper/index.native.js
deleted file mode 100644
index 90779d5b8a14..000000000000
--- a/src/hooks/useFlipper/index.native.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import {useFlipper} from '@react-navigation/devtools';
-
-export default useFlipper;
diff --git a/src/hooks/useFlipper/index.native.ts b/src/hooks/useFlipper/index.native.ts
new file mode 100644
index 000000000000..df1aa3bf513b
--- /dev/null
+++ b/src/hooks/useFlipper/index.native.ts
@@ -0,0 +1,6 @@
+import {useFlipper as useFlipperRN} from '@react-navigation/devtools';
+import UseFlipper from './types';
+
+const useFlipper: UseFlipper = useFlipperRN;
+
+export default useFlipper;
diff --git a/src/hooks/useFlipper/index.ts b/src/hooks/useFlipper/index.ts
new file mode 100644
index 000000000000..26d4c9659ad8
--- /dev/null
+++ b/src/hooks/useFlipper/index.ts
@@ -0,0 +1,5 @@
+import UseFlipper from './types';
+
+const useFlipper: UseFlipper = () => {};
+
+export default useFlipper;
diff --git a/src/hooks/useFlipper/types.ts b/src/hooks/useFlipper/types.ts
new file mode 100644
index 000000000000..a995414e5dd1
--- /dev/null
+++ b/src/hooks/useFlipper/types.ts
@@ -0,0 +1,6 @@
+import {NavigationContainerRefWithCurrent} from '@react-navigation/core';
+import {RootStackParamList} from '@libs/Navigation/types';
+
+type UseFlipper = (ref: NavigationContainerRefWithCurrent<RootStackParamList>) => void;
+
+export default UseFlipper;
diff --git a/src/hooks/useKeyboardShortcut.ts b/src/hooks/useKeyboardShortcut.ts
index e4a7a16f4cfc..461f01a74837 100644
--- a/src/hooks/useKeyboardShortcut.ts
+++ b/src/hooks/useKeyboardShortcut.ts
@@ -1,4 +1,5 @@
 import {useEffect} from 'react';
+import {GestureResponderEvent} from 'react-native';
 import {ValueOf} from 'type-fest';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import CONST from '@src/CONST';
@@ -17,13 +18,15 @@ type KeyboardShortcutConfig = {
     excludedNodes?: string[];
     /* Is keyboard shortcut is already active */
     isActive?: boolean;
+    /* Shuld stop propagation? */
+    shouldStopPropagation?: boolean;
 };
 
 /**
  * Register a keyboard shortcut handler.
  * Recommendation: To ensure stability, wrap the `callback` function with the useCallback hook before using it with this hook.
  */
-export default function useKeyboardShortcut(shortcut: Shortcut, callback: () => void, config: KeyboardShortcutConfig | Record<string, never> = {}) {
+export default function useKeyboardShortcut(shortcut: Shortcut, callback: (e?: GestureResponderEvent | KeyboardEvent) => void, config: KeyboardShortcutConfig | Record<string, never> = {}) {
     const {
         captureOnInputs = true,
         shouldBubble = false,
@@ -34,6 +37,9 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: () =>
         // 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(() => {
@@ -51,6 +57,7 @@ export default function useKeyboardShortcut(shortcut: Shortcut, callback: () =>
             priority,
             shouldPreventDefault,
             excludedNodes as string[],
+            shouldStopPropagation,
         );
 
         return () => {
diff --git a/src/hooks/useReportScrollManager/index.native.ts b/src/hooks/useReportScrollManager/index.native.ts
index 0d4c956b7bd8..24de5d8da63a 100644
--- a/src/hooks/useReportScrollManager/index.native.ts
+++ b/src/hooks/useReportScrollManager/index.native.ts
@@ -3,7 +3,7 @@ import {ActionListContext} from '@pages/home/ReportScreenContext';
 import ReportScrollManagerData from './types';
 
 function useReportScrollManager(): ReportScrollManagerData {
-    const flatListRef = useContext(ActionListContext);
+    const {flatListRef, setScrollPosition} = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index.
@@ -24,8 +24,10 @@ function useReportScrollManager(): ReportScrollManagerData {
             return;
         }
 
-        flatListRef.current.scrollToOffset({animated: false, offset: 0});
-    }, [flatListRef]);
+        setScrollPosition({offset: 0});
+
+        flatListRef.current?.scrollToOffset({animated: false, offset: 0});
+    }, [flatListRef, setScrollPosition]);
 
     return {ref: flatListRef, scrollToIndex, scrollToBottom};
 }
diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts
index 081844fc8c79..032417ed9fde 100644
--- a/src/hooks/useReportScrollManager/index.ts
+++ b/src/hooks/useReportScrollManager/index.ts
@@ -3,7 +3,7 @@ import {ActionListContext} from '@pages/home/ReportScreenContext';
 import ReportScrollManagerData from './types';
 
 function useReportScrollManager(): ReportScrollManagerData {
-    const flatListRef = useContext(ActionListContext);
+    const {flatListRef} = useContext(ActionListContext);
 
     /**
      * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
diff --git a/src/hooks/useReportScrollManager/types.ts b/src/hooks/useReportScrollManager/types.ts
index a10238d51f74..a0d7f14f7b84 100644
--- a/src/hooks/useReportScrollManager/types.ts
+++ b/src/hooks/useReportScrollManager/types.ts
@@ -1,7 +1,7 @@
-import {ActionListContextType} from '@pages/home/ReportScreenContext';
+import {FlatListRefType} from '@pages/home/ReportScreenContext';
 
 type ReportScrollManagerData = {
-    ref: ActionListContextType;
+    ref: FlatListRefType;
     scrollToIndex: (index: number, isEditing?: boolean) => void;
     scrollToBottom: () => void;
 };
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 96e2e99824cd..8f772f1260bb 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -9,6 +9,7 @@ import type {
     BeginningOfChatHistoryAnnounceRoomPartOneParams,
     BeginningOfChatHistoryAnnounceRoomPartTwo,
     BeginningOfChatHistoryDomainRoomPartOneParams,
+    CanceledRequestParams,
     CharacterLimitParams,
     ConfirmThatParams,
     DateShouldBeAfterParams,
@@ -270,6 +271,8 @@ export default {
         selectCurrency: 'Select a currency',
         card: 'Card',
         required: 'Required',
+        showing: 'Showing',
+        of: 'of',
     },
     location: {
         useCurrent: 'Use current location',
@@ -540,6 +543,7 @@ export default {
         pay: 'Pay',
         viewDetails: 'View details',
         pending: 'Pending',
+        canceled: 'Canceled',
         posted: 'Posted',
         deleteReceipt: 'Delete receipt',
         receiptScanning: 'Receipt scan in progress…',
@@ -570,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`,
@@ -586,8 +592,8 @@ export default {
             `changed the distance to ${newDistanceToDisplay} (previously ${oldDistanceToDisplay}), which updated the amount to ${newAmountToDisplay} (previously ${oldAmountToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `${formattedAmount} request${comment ? ` for ${comment}` : ''}`,
         threadSentMoneyReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} sent${comment ? ` for ${comment}` : ''}`,
-        tagSelection: ({tagName}: TagSelectionParams) => `Select a ${tagName} to add additional organization to your money`,
-        categorySelection: 'Select a category to add additional organization to your money',
+        tagSelection: ({tagName}: TagSelectionParams) => `Select a ${tagName} to add additional organization to your money.`,
+        categorySelection: 'Select a category to add additional organization to your money.',
         error: {
             invalidAmount: 'Please enter a valid amount before continuing.',
             invalidSplit: 'Split amounts do not equal total amount',
@@ -1189,7 +1195,7 @@ export default {
             noBankAccountAvailable: 'Sorry, no bank account is available',
             noBankAccountSelected: 'Please choose an account',
             taxID: 'Please enter a valid tax ID number',
-            website: 'Please enter a valid website',
+            website: 'Please enter a valid website. The website should be in lowercase.',
             zipCode: `Incorrect zip code format. Acceptable format: ${CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}`,
             phoneNumber: 'Please enter a valid phone number',
             companyName: 'Please enter a valid legal business name',
@@ -1671,6 +1677,7 @@ export default {
         genericCreateTaskFailureMessage: 'Unexpected error create task, please try again later.',
     },
     statementPage: {
+        title: (year, monthName) => `${monthName} ${year} statement`,
         generatingPDF: "We're generating your PDF right now. Please come back later!",
     },
     keyboardShortcutsPage: {
@@ -1944,25 +1951,31 @@ export default {
             buttonText1: 'Start a chat, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Start a chat, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body: `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}`,
-            body: `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}`,
-            body: `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, ',
             buttonText2: `get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
             header: `Refer a friend, get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body: `Send your Expensify referral link to a friend or anyone else you know who spends too much time on expenses. When they start an annual subscription, you'll get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
+            body1: `Send your Expensify referral link to a friend or anyone else you know who spends too much time on expenses. When they start an annual subscription, you'll get $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
+        },
+        [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE]: {
+            buttonText1: `Get $${CONST.REFERRAL_PROGRAM.REVENUE}`,
+            header: `Get $${CONST.REFERRAL_PROGRAM.REVENUE} for every referral`,
+            body1: 'If you know anyone who’s spending too much time on expenses (literally anyone – your neighbor, your boss, your friend in accounting), send them your Expensify referral link:',
+            body2: `When they start an annual subscription, you’ll get $${CONST.REFERRAL_PROGRAM.REVENUE}. Easy as that.`,
         },
         copyReferralLink: 'Copy referral link',
     },
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 3f8f68977549..3887891299df 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -8,6 +8,7 @@ import type {
     BeginningOfChatHistoryAnnounceRoomPartOneParams,
     BeginningOfChatHistoryAnnounceRoomPartTwo,
     BeginningOfChatHistoryDomainRoomPartOneParams,
+    CanceledRequestParams,
     CharacterLimitParams,
     ConfirmThatParams,
     DateShouldBeAfterParams,
@@ -260,6 +261,8 @@ export default {
         selectCurrency: 'Selecciona una moneda',
         card: 'Tarjeta',
         required: 'Obligatorio',
+        showing: 'Mostrando',
+        of: 'de',
     },
     location: {
         useCurrent: 'Usar ubicación actual',
@@ -532,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…',
@@ -562,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`,
@@ -580,8 +586,8 @@ export default {
             `cambió la distancia a ${newDistanceToDisplay} (previamente ${oldDistanceToDisplay}), lo que cambió el importe a ${newAmountToDisplay} (previamente ${oldAmountToDisplay})`,
         threadRequestReportName: ({formattedAmount, comment}: ThreadRequestReportNameParams) => `Solicitud de ${formattedAmount}${comment ? ` para ${comment}` : ''}`,
         threadSentMoneyReportName: ({formattedAmount, comment}: ThreadSentMoneyReportNameParams) => `${formattedAmount} enviado${comment ? ` para ${comment}` : ''}`,
-        tagSelection: ({tagName}: TagSelectionParams) => `Seleccione una ${tagName} para organizar mejor tu dinero`,
-        categorySelection: 'Seleccione una categoría para organizar mejor tu dinero',
+        tagSelection: ({tagName}: TagSelectionParams) => `Seleccione una ${tagName} para organizar mejor tu dinero.`,
+        categorySelection: 'Seleccione una categoría para organizar mejor tu dinero.',
         error: {
             invalidAmount: 'Por favor ingresa un monto válido antes de continuar.',
             invalidSplit: 'La suma de las partes no equivale al monto total',
@@ -1206,7 +1212,7 @@ export default {
             noBankAccountAvailable: 'Lo sentimos, no hay ninguna cuenta bancaria disponible',
             noBankAccountSelected: 'Por favor, elige una cuenta bancaria',
             taxID: 'Por favor, introduce un número de identificación fiscal válido',
-            website: 'Por favor, introduce un sitio web válido',
+            website: 'Por favor, introduce un sitio web válido. El sitio web debe estar en minúsculas.',
             zipCode: `Formato de código postal incorrecto. Formato aceptable: ${CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}`,
             phoneNumber: 'Por favor, introduce un teléfono válido',
             companyName: 'Por favor, introduce un nombre comercial legal válido',
@@ -1695,6 +1701,7 @@ export default {
         genericCreateTaskFailureMessage: 'Error inesperado al crear el tarea, por favor, inténtalo más tarde.',
     },
     statementPage: {
+        title: (year, monthName) => `Estado de cuenta de ${monthName} ${year}`,
         generatingPDF: 'Estamos generando tu PDF ahora mismo. ¡Por favor, vuelve más tarde!',
     },
     keyboardShortcutsPage: {
@@ -2429,25 +2436,31 @@ export default {
             buttonText1: 'Inicia un chat y ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Inicia un chat y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body: `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}`,
-            body: `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}`,
-            body: `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 ',
             buttonText2: `recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
             header: `Recomienda a un amigo y recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
-            body: `Envía tu enlace de invitación de Expensify a un amigo o a cualquier otra persona que conozcas que dedique demasiado tiempo a los gastos. Cuando comiencen una suscripción anual, obtendrás $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
+            body1: `Envía tu enlace de invitación de Expensify a un amigo o a cualquier otra persona que conozcas que dedique demasiado tiempo a los gastos. Cuando comiencen una suscripción anual, obtendrás $${CONST.REFERRAL_PROGRAM.REVENUE}.`,
+        },
+        [CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE]: {
+            buttonText1: `Recibe $${CONST.REFERRAL_PROGRAM.REVENUE}`,
+            header: `Recibe $${CONST.REFERRAL_PROGRAM.REVENUE} por cada recomendación`,
+            body1: 'Si conoces a alguien que dedique demasiado tiempo a los gastos (literalmente cualquiera: tu vecino, tu jefe, tu amigo de contabilidad), envíale tu enlace de invitación de Expensify:',
+            body2: `Cuando comiencen una suscripción anual, obtendrás $${CONST.REFERRAL_PROGRAM.REVENUE}. Así de fácil.`,
         },
         copyReferralLink: 'Copiar enlace de invitación',
     },
diff --git a/src/languages/types.ts b/src/languages/types.ts
index e2af3222a98f..96dd85dfb627 100644
--- a/src/languages/types.ts
+++ b/src/languages/types.ts
@@ -111,20 +111,22 @@ type DidSplitAmountMessageParams = {formattedAmount: string; comment: string};
 
 type AmountEachParams = {amount: number};
 
-type PayerOwesAmountParams = {payer: string; amount: number};
+type PayerOwesAmountParams = {payer: string; amount: number | string};
 
 type PayerOwesParams = {payer: string};
 
-type PayerPaidAmountParams = {payer: string; amount: number};
+type PayerPaidAmountParams = {payer: string; amount: number | string};
 
 type ManagerApprovedParams = {manager: string};
 
 type PayerPaidParams = {payer: string};
 
-type PayerSettledParams = {amount: number};
+type PayerSettledParams = {amount: number | string};
 
 type WaitingOnBankAccountParams = {submitterDisplayName: string};
 
+type CanceledRequestParams = {amount: string; submitterDisplayName: string};
+
 type SettledAfterAddedBankAccountParams = {submitterDisplayName: string; amount: string};
 
 type PaidElsewhereWithAmountParams = {payer: string; amount: string};
@@ -282,6 +284,7 @@ export type {
     ManagerApprovedParams,
     PayerSettledParams,
     WaitingOnBankAccountParams,
+    CanceledRequestParams,
     SettledAfterAddedBankAccountParams,
     PaidElsewhereWithAmountParams,
     PaidWithExpensifyWithAmountParams,
diff --git a/src/libs/CardUtils.ts b/src/libs/CardUtils.ts
index 0dc483aff50e..b0d426c9774a 100644
--- a/src/libs/CardUtils.ts
+++ b/src/libs/CardUtils.ts
@@ -37,6 +37,14 @@ function isExpensifyCard(cardID: number) {
     return card.bank === CONST.EXPENSIFY_CARD.BANK;
 }
 
+/**
+ * @param cardID
+ * @returns boolean if the cardID is in the cardList from ONYX. Includes Expensify Cards.
+ */
+function isCorporateCard(cardID: number) {
+    return !!allCards[cardID];
+}
+
 /**
  * @param cardID
  * @returns string in format %<bank> - <lastFourPAN || Not Activated>%.
@@ -99,4 +107,4 @@ function findPhysicalCard(cards: Card[]) {
     return cards.find((card) => !card.isVirtual);
 }
 
-export {isExpensifyCard, getDomainCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getCardDescription, findPhysicalCard};
+export {isExpensifyCard, isCorporateCard, getDomainCards, getMonthFromExpirationDateString, getYearFromExpirationDateString, maskCard, getCardDescription, findPhysicalCard};
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
index df9292ecd690..6f87edaf2475 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts
@@ -1,13 +1,12 @@
 import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
-import styles from '@styles/styles';
 import UpdateNumberOfLines from './types';
 
 /**
  * Check the current scrollHeight of the textarea (minus any padding) and
  * divide by line height to get the total number of rows for the textarea.
  */
-const updateNumberOfLines: UpdateNumberOfLines = (props, event) => {
+const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => {
     const lineHeight = styles.textInputCompose.lineHeight ?? 0;
     const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2;
     const inputHeight = event?.nativeEvent?.contentSize?.height ?? null;
diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
index b0f9ba48ddc2..cef7d7ef6a80 100644
--- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts
+++ b/src/libs/ComposerUtils/updateNumberOfLines/types.ts
@@ -1,6 +1,7 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
 import ComposerProps from '@libs/ComposerUtils/types';
+import themeStyles from '@styles/styles';
 
-type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
+type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: typeof themeStyles) => void;
 
 export default UpdateNumberOfLines;
diff --git a/src/libs/E2E/apiMocks/beginSignin.ts b/src/libs/E2E/apiMocks/beginSignin.ts
index 298846250a12..c5002f1f3dd8 100644
--- a/src/libs/E2E/apiMocks/beginSignin.ts
+++ b/src/libs/E2E/apiMocks/beginSignin.ts
@@ -17,11 +17,6 @@ const beginSignin = ({email}: SigninParams): Response => ({
                 validated: true,
             },
         },
-        {
-            onyxMethod: 'set',
-            key: 'betas',
-            value: ['passwordless'],
-        },
     ],
     jsonCode: 200,
     requestID: '783e54ef4b38cff5-SJC',
diff --git a/src/libs/E2E/apiMocks/openApp.ts b/src/libs/E2E/apiMocks/openApp.ts
index 13fc9f1f6784..a0583d8439c0 100644
--- a/src/libs/E2E/apiMocks/openApp.ts
+++ b/src/libs/E2E/apiMocks/openApp.ts
@@ -1457,82 +1457,7 @@ const openApp = (): Response => ({
         {
             onyxMethod: 'set',
             key: 'betas',
-            value: [
-                'all',
-                'pdfMetaStore',
-                'reportActionContextMenu',
-                'submitPolicy',
-                'attendees',
-                'autoExport',
-                'autoExportIntacct',
-                'autoExportQbo',
-                'autoExportXero',
-                'autoJoinPolicy',
-                'automatedTaxExemption',
-                'billPay',
-                'categoryDefaultTax',
-                'collectableDepositAccounts',
-                'conciergeTravel',
-                'connectedCards',
-                'discrepancy',
-                'domainContactBilling',
-                'domainTwoFactorAuth',
-                'duplicateDetection',
-                'emailSuppressionBeta',
-                'expensesV2',
-                'expensifyCard',
-                'expensifyCardIntacctReconciliation',
-                'expensifyCardNetSuiteReconciliation',
-                'expensifyCardQBOReconciliation',
-                'expensifyCardRapidIncreaseFraud',
-                'expensifyCardXeroReconciliation',
-                'expensifyOrg',
-                'fixViolationPushNotification',
-                'freePlan',
-                'freePlanFullLaunch',
-                'freePlanSoftLaunch',
-                'gusto',
-                'inboxCache',
-                'inboxHiddenTasks',
-                'indirectIntegrationSetup',
-                'IOU',
-                'joinPolicy',
-                'loadPolicyAsync',
-                'mapReceipt',
-                'mergeAPI',
-                'mobileRealtimeReportComments',
-                'mobileSecureReceipts',
-                'monthlySettlement',
-                'namesAndAvatars',
-                'nativeChat',
-                'newPricing',
-                'newsletterThree',
-                'nextSteps',
-                'openFaceHamburger',
-                'pdfMetaStore',
-                'perDiem',
-                'perDiemInternational',
-                'pricingCopyChanges',
-                'qboInvoices',
-                'quickbooksDesktopV2',
-                'realtimeReportComments',
-                's2wAnnouncement',
-                'scheduledAutoReporting',
-                'secureReceipts',
-                'secureReceiptsReports',
-                'selfServiceHardLaunch',
-                'sendMoney',
-                'smartScanUserDisputes',
-                'smsSignUp',
-                'stripeConnect',
-                'submitPolicy',
-                'summaryEmail',
-                'swipeToWin',
-                'taxForMileage',
-                'twoFactorAuth',
-                'venmoIntegration',
-                'zenefitsIntegration',
-            ],
+            value: ['all'],
         },
         {
             onyxMethod: 'merge',
diff --git a/src/libs/E2E/apiMocks/signinUser.ts b/src/libs/E2E/apiMocks/signinUser.ts
index d94d2fda9016..a7d841196c48 100644
--- a/src/libs/E2E/apiMocks/signinUser.ts
+++ b/src/libs/E2E/apiMocks/signinUser.ts
@@ -36,82 +36,7 @@ const signinUser = ({email}: SigninParams): Response => ({
         {
             onyxMethod: 'set',
             key: 'betas',
-            value: [
-                'all',
-                'pdfMetaStore',
-                'reportActionContextMenu',
-                'submitPolicy',
-                'attendees',
-                'autoExport',
-                'autoExportIntacct',
-                'autoExportQbo',
-                'autoExportXero',
-                'autoJoinPolicy',
-                'automatedTaxExemption',
-                'billPay',
-                'categoryDefaultTax',
-                'collectableDepositAccounts',
-                'conciergeTravel',
-                'connectedCards',
-                'discrepancy',
-                'domainContactBilling',
-                'domainTwoFactorAuth',
-                'duplicateDetection',
-                'emailSuppressionBeta',
-                'expensesV2',
-                'expensifyCard',
-                'expensifyCardIntacctReconciliation',
-                'expensifyCardNetSuiteReconciliation',
-                'expensifyCardQBOReconciliation',
-                'expensifyCardRapidIncreaseFraud',
-                'expensifyCardXeroReconciliation',
-                'expensifyOrg',
-                'fixViolationPushNotification',
-                'freePlan',
-                'freePlanFullLaunch',
-                'freePlanSoftLaunch',
-                'gusto',
-                'inboxCache',
-                'inboxHiddenTasks',
-                'indirectIntegrationSetup',
-                'IOU',
-                'joinPolicy',
-                'loadPolicyAsync',
-                'mapReceipt',
-                'mergeAPI',
-                'mobileRealtimeReportComments',
-                'mobileSecureReceipts',
-                'monthlySettlement',
-                'namesAndAvatars',
-                'nativeChat',
-                'newPricing',
-                'newsletterThree',
-                'nextSteps',
-                'openFaceHamburger',
-                'pdfMetaStore',
-                'perDiem',
-                'perDiemInternational',
-                'pricingCopyChanges',
-                'qboInvoices',
-                'quickbooksDesktopV2',
-                'realtimeReportComments',
-                's2wAnnouncement',
-                'scheduledAutoReporting',
-                'secureReceipts',
-                'secureReceiptsReports',
-                'selfServiceHardLaunch',
-                'sendMoney',
-                'smartScanUserDisputes',
-                'smsSignUp',
-                'stripeConnect',
-                'submitPolicy',
-                'summaryEmail',
-                'swipeToWin',
-                'taxForMileage',
-                'twoFactorAuth',
-                'venmoIntegration',
-                'zenefitsIntegration',
-            ],
+            value: ['all'],
         },
         {
             onyxMethod: 'merge',
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/GroupChatUtils.ts b/src/libs/GroupChatUtils.ts
index dcb2b13f092c..db64f6574824 100644
--- a/src/libs/GroupChatUtils.ts
+++ b/src/libs/GroupChatUtils.ts
@@ -13,10 +13,11 @@ Onyx.connect({
 /**
  * Returns the report name if the report is a group chat
  */
-function getGroupChatName(report: Report): string {
+function getGroupChatName(report: Report): string | undefined {
     const participants = report.participantAccountIDs ?? [];
     const isMultipleParticipantReport = participants.length > 1;
     const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, allPersonalDetails ?? {});
+    // @ts-expect-error Error will gone when OptionsListUtils will be migrated to Typescript
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(participantPersonalDetails, isMultipleParticipantReport);
     return ReportUtils.getDisplayNamesStringFromTooltips(displayNamesWithTooltips);
 }
diff --git a/src/libs/IOUUtils.ts b/src/libs/IOUUtils.ts
index ff4f2aafc8a8..afbbcc2684a0 100644
--- a/src/libs/IOUUtils.ts
+++ b/src/libs/IOUUtils.ts
@@ -1,3 +1,4 @@
+import {OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import {Report, Transaction} from '@src/types/onyx';
 import * as CurrencyUtils from './CurrencyUtils';
@@ -35,8 +36,8 @@ function calculateAmount(numberOfParticipants: number, total: number, currency:
  *
  * @param isDeleting - whether the user is deleting the request
  */
-function updateIOUOwnerAndTotal(iouReport: Report, actorAccountID: number, amount: number, currency: string, isDeleting = false): Report {
-    if (currency !== iouReport.currency) {
+function updateIOUOwnerAndTotal(iouReport: OnyxEntry<Report>, actorAccountID: number, amount: number, currency: string, isDeleting = false): OnyxEntry<Report> {
+    if (currency !== iouReport?.currency) {
         return iouReport;
     }
 
diff --git a/src/libs/Localize/index.ts b/src/libs/Localize/index.ts
index 6910bc7e9bdb..488ff0d9b98a 100644
--- a/src/libs/Localize/index.ts
+++ b/src/libs/Localize/index.ts
@@ -96,10 +96,12 @@ function translateLocal<TKey extends TranslationPaths>(phrase: TKey, ...variable
     return translate(BaseLocaleListener.getPreferredLocale(), phrase, ...variables);
 }
 
+type MaybePhraseKey = string | [string, Record<string, unknown> & {isTranslated?: true}] | [];
+
 /**
  * Return translated string for given error.
  */
-function translateIfPhraseKey(message: string | [string, Record<string, unknown> & {isTranslated?: true}] | []): string {
+function translateIfPhraseKey(message: MaybePhraseKey): string {
     if (!message || (Array.isArray(message) && message.length === 0)) {
         return '';
     }
@@ -138,4 +140,4 @@ function getDevicePreferredLocale(): string {
 }
 
 export {translate, translateLocal, translateIfPhraseKey, arrayToString, getDevicePreferredLocale};
-export type {PhraseParameters, Phrase};
+export type {PhraseParameters, Phrase, MaybePhraseKey};
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index aedb2fa8d741..4c610bc12099 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -144,7 +144,7 @@ const defaultProps = {
 function AuthScreens({isUsingMemoryOnlyKeys, lastUpdateIDAppliedToClient, session, lastOpenedPublicRoomID, demoInfo}) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth);
+    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
index 01573cb434b4..be803e62a98b 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -1,15 +1,9 @@
 import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack';
-import React from 'react';
+import React, {useMemo} from 'react';
 import _ from 'underscore';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 
-const defaultSubRouteOptions = {
-    cardStyle: styles.navigationScreenCardStyle,
-    headerShown: false,
-    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-};
-
 /**
  * Create a modal stack navigator with an array of sub-screens.
  *
@@ -20,6 +14,17 @@ function createModalStackNavigator(screens) {
     const ModalStackNavigator = createStackNavigator();
 
     function ModalStack() {
+        const styles = useThemeStyles();
+
+        const defaultSubRouteOptions = useMemo(
+            () => ({
+                cardStyle: styles.navigationScreenCardStyle,
+                headerShown: false,
+                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+            }),
+            [styles],
+        );
+
         return (
             <ModalStackNavigator.Navigator screenOptions={defaultSubRouteOptions}>
                 {_.map(screens, (getComponent, name) => (
diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js
index a1646011e560..d23b03c8c73e 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.js
@@ -2,7 +2,7 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React from 'react';
 import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 
 const Stack = createStackNavigator();
@@ -11,6 +11,7 @@ const url = getCurrentUrl();
 const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined;
 
 function BaseCentralPaneNavigator() {
+    const styles = useThemeStyles();
     return (
         <Stack.Navigator>
             <Stack.Screen
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index b8e04a6ff9e8..c5786a0fcfe4 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -1,6 +1,6 @@
 import {createStackNavigator} from '@react-navigation/stack';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -21,12 +21,13 @@ const propTypes = {
 function RightModalNavigator(props) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]);
 
     return (
         <NoDropZone>
             {!isSmallScreenWidth && <Overlay onPress={props.navigation.goBack} />}
             <View style={styles.RHPNavigatorContainer(isSmallScreenWidth)}>
-                <Stack.Navigator screenOptions={RHPScreenOptions}>
+                <Stack.Navigator screenOptions={screenOptions}>
                     <Stack.Screen
                         name="Settings"
                         component={ModalStackNavigators.SettingsModalStackNavigator}
diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js
index b50769c7caed..09b5c0fd7734 100644
--- a/src/libs/Navigation/AppNavigator/PublicScreens.js
+++ b/src/libs/Navigation/AppNavigator/PublicScreens.js
@@ -26,27 +26,27 @@ function PublicScreens() {
                 component={LogInWithShortLivedAuthTokenPage}
             />
             <RootStack.Screen
-                name="ValidateLogin"
+                name={SCREENS.VALIDATE_LOGIN}
                 options={defaultScreenOptions}
                 component={ValidateLoginPage}
             />
             <RootStack.Screen
-                name="UnlinkLogin"
+                name={SCREENS.UNLINK_LOGIN}
                 options={defaultScreenOptions}
                 component={UnlinkLoginPage}
             />
             <RootStack.Screen
-                name="AppleSignInDesktop"
+                name={SCREENS.SIGN_IN_WITH_APPLE_DESKTOP}
                 options={defaultScreenOptions}
                 component={AppleSignInDesktopPage}
             />
             <RootStack.Screen
-                name="GoogleSignInDesktop"
+                name={SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP}
                 options={defaultScreenOptions}
                 component={GoogleSignInDesktopPage}
             />
             <RootStack.Screen
-                name="SAMLSignIn"
+                name={SCREENS.SAML_SIGN_IN}
                 options={defaultScreenOptions}
                 component={SAMLSignInPage}
             />
diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.js b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
index 6adf5bd2b507..02354b90591f 100644
--- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/RHPScreenOptions.js
@@ -1,12 +1,17 @@
 import {CardStyleInterpolators} from '@react-navigation/stack';
-import styles from '@styles/styles';
 
-const RHPScreenOptions = {
+/**
+ * RHP stack navigator screen options generator function
+ * @function
+ * @param {Object} styles - The styles object
+ * @returns {Object} - The screen options object
+ */
+const RHPScreenOptions = (styles) => ({
     headerShown: false,
     animationEnabled: true,
     gestureDirection: 'horizontal',
     cardStyle: styles.navigationScreenCardStyle,
     cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
-};
+});
 
 export default RHPScreenOptions;
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
index 70a33ee34a67..bb7acddb188c 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import usePermissions from '@hooks/usePermissions';
-import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as App from '@userActions/App';
@@ -61,12 +60,6 @@ const defaultProps = {
  * @returns {Number}
  */
 const getLastAccessedReportID = (reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom) => {
-    // If deeplink url contains reportID params, we should show the report that has this reportID.
-    const currentRoute = Navigation.getActiveRoute();
-    const {reportID} = ReportUtils.parseReportRouteParams(currentRoute);
-    if (reportID) {
-        return reportID;
-    }
     const lastReport = ReportUtils.findLastAccessedReport(reports, ignoreDefaultRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom);
     return lodashGet(lastReport, 'reportID');
 };
diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
index 04784fb9d0e1..44fa7b6c0b09 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.js
@@ -1,5 +1,4 @@
 import getNavigationModalCardStyle from '@styles/getNavigationModalCardStyles';
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import CONFIG from '@src/CONFIG';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
@@ -12,7 +11,7 @@ const commonScreenOptions = {
     animationTypeForReplace: 'push',
 };
 
-export default (isSmallScreenWidth) => ({
+export default (isSmallScreenWidth, styles) => ({
     rightModalNavigator: {
         ...commonScreenOptions,
         cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
diff --git a/src/libs/Navigation/FreezeWrapper.js b/src/libs/Navigation/FreezeWrapper.tsx
similarity index 65%
rename from src/libs/Navigation/FreezeWrapper.js
rename to src/libs/Navigation/FreezeWrapper.tsx
index 16a353ebddea..df3f117c9a2e 100644
--- a/src/libs/Navigation/FreezeWrapper.js
+++ b/src/libs/Navigation/FreezeWrapper.tsx
@@ -1,31 +1,24 @@
 import {useIsFocused, useNavigation, useRoute} from '@react-navigation/native';
-import lodashFindIndex from 'lodash/findIndex';
-import PropTypes from 'prop-types';
 import React, {useEffect, useRef, useState} from 'react';
 import {Freeze} from 'react-freeze';
 import {InteractionManager} from 'react-native';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const propTypes = {
+type FreezeWrapperProps = ChildrenProps & {
     /** Prop to disable freeze */
-    keepVisible: PropTypes.bool,
-    /** Children to wrap in FreezeWrapper. */
-    children: PropTypes.node.isRequired,
+    keepVisible?: boolean;
 };
 
-const defaultProps = {
-    keepVisible: false,
-};
-
-function FreezeWrapper(props) {
+function FreezeWrapper({keepVisible = false, children}: FreezeWrapperProps) {
     const [isScreenBlurred, setIsScreenBlurred] = useState(false);
     // we need to know the screen index to determine if the screen can be frozen
-    const screenIndexRef = useRef(null);
+    const screenIndexRef = useRef<number | null>(null);
     const isFocused = useIsFocused();
     const navigation = useNavigation();
     const currentRoute = useRoute();
 
     useEffect(() => {
-        const index = lodashFindIndex(navigation.getState().routes, (route) => route.key === currentRoute.key);
+        const index = navigation.getState().routes.findIndex((route) => route.key === currentRoute.key);
         screenIndexRef.current = index;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -35,7 +28,7 @@ function FreezeWrapper(props) {
             // if the screen is more than 1 screen away from the current screen, freeze it,
             // we don't want to freeze the screen if it's the previous screen because the freeze placeholder
             // would be visible at the beginning of the back animation then
-            if (navigation.getState().index - screenIndexRef.current > 1) {
+            if (navigation.getState().index - (screenIndexRef.current ?? 0) > 1) {
                 InteractionManager.runAfterInteractions(() => setIsScreenBlurred(true));
             } else {
                 setIsScreenBlurred(false);
@@ -44,11 +37,9 @@ function FreezeWrapper(props) {
         return () => unsubscribe();
     }, [isFocused, isScreenBlurred, navigation]);
 
-    return <Freeze freeze={!isFocused && isScreenBlurred && !props.keepVisible}>{props.children}</Freeze>;
+    return <Freeze freeze={!isFocused && isScreenBlurred && !keepVisible}>{children}</Freeze>;
 }
 
-FreezeWrapper.propTypes = propTypes;
-FreezeWrapper.defaultProps = defaultProps;
 FreezeWrapper.displayName = 'FreezeWrapper';
 
 export default FreezeWrapper;
diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.ts
similarity index 61%
rename from src/libs/Navigation/Navigation.js
rename to src/libs/Navigation/Navigation.ts
index bfc0f509373e..c2dd3e76e7ad 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.ts
@@ -1,11 +1,10 @@
 import {findFocusedRoute, getActionFromState} from '@react-navigation/core';
-import {CommonActions, getPathFromState, StackActions} from '@react-navigation/native';
-import _ from 'lodash';
-import lodashGet from 'lodash/get';
+import {CommonActions, EventMapCore, getPathFromState, NavigationState, PartialState, StackActions} from '@react-navigation/native';
+import findLastIndex from 'lodash/findLastIndex';
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
-import ROUTES from '@src/ROUTES';
+import ROUTES, {Route} from '@src/ROUTES';
 import SCREENS, {PROTECTED_SCREENS} from '@src/SCREENS';
 import getStateFromPath from './getStateFromPath';
 import originalGetTopmostReportActionId from './getTopmostReportActionID';
@@ -13,13 +12,14 @@ import originalGetTopmostReportId from './getTopmostReportId';
 import linkingConfig from './linkingConfig';
 import linkTo from './linkTo';
 import navigationRef from './navigationRef';
+import {StackNavigationAction, StateOrRoute} from './types';
 
-let resolveNavigationIsReadyPromise;
-const navigationIsReadyPromise = new Promise((resolve) => {
+let resolveNavigationIsReadyPromise: () => void;
+const navigationIsReadyPromise = new Promise<void>((resolve) => {
     resolveNavigationIsReadyPromise = resolve;
 });
 
-let pendingRoute = null;
+let pendingRoute: Route | null = null;
 
 let shouldPopAllStateOnUP = false;
 
@@ -30,12 +30,7 @@ function setShouldPopAllStateOnUP() {
     shouldPopAllStateOnUP = true;
 }
 
-/**
- * @param {String} methodName
- * @param {Object} params
- * @returns {Boolean}
- */
-function canNavigate(methodName, params = {}) {
+function canNavigate(methodName: string, params: Record<string, unknown> = {}): boolean {
     if (navigationRef.isReady()) {
         return true;
     }
@@ -49,37 +44,32 @@ const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopm
 // Re-exporting the getTopmostReportActionID here to fill in default value for state. The getTopmostReportActionID isn't defined in this file to avoid cyclic dependencies.
 const getTopmostReportActionId = (state = navigationRef.getState()) => originalGetTopmostReportActionId(state);
 
-/**
- * Method for finding on which index in stack we are.
- * @param {Object} route
- * @param {Number} index
- * @returns {Number}
- */
-const getActiveRouteIndex = function (route, index) {
-    if (route.routes) {
-        const childActiveRoute = route.routes[route.index || 0];
-        return getActiveRouteIndex(childActiveRoute, route.index || 0);
+/** Method for finding on which index in stack we are. */
+function getActiveRouteIndex(stateOrRoute: StateOrRoute, index?: number): number | undefined {
+    if ('routes' in stateOrRoute && stateOrRoute.routes) {
+        const childActiveRoute = stateOrRoute.routes[stateOrRoute.index ?? 0];
+        return getActiveRouteIndex(childActiveRoute, stateOrRoute.index ?? 0);
     }
 
-    if (route.state && route.state.routes) {
-        const childActiveRoute = route.state.routes[route.state.index || 0];
-        return getActiveRouteIndex(childActiveRoute, route.state.index || 0);
+    if ('state' in stateOrRoute && stateOrRoute.state?.routes) {
+        const childActiveRoute = stateOrRoute.state.routes[stateOrRoute.state.index ?? 0];
+        return getActiveRouteIndex(childActiveRoute, stateOrRoute.state.index ?? 0);
     }
 
-    if (route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+    if ('name' in stateOrRoute && stateOrRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
         return 0;
     }
 
     return index;
-};
+}
 
 /**
  * Gets distance from the path in root navigator. In other words how much screen you have to pop to get to the route with this path.
  * The search is limited to 5 screens from the top for performance reasons.
- * @param {String} path - Path that you are looking for.
- * @return {Number} - Returns distance to path or -1 if the path is not found in root navigator.
+ * @param path - Path that you are looking for.
+ * @return - Returns distance to path or -1 if the path is not found in root navigator.
  */
-function getDistanceFromPathInRootNavigator(path) {
+function getDistanceFromPathInRootNavigator(path: string): number {
     let currentState = navigationRef.getRootState();
 
     for (let index = 0; index < 5; index++) {
@@ -98,14 +88,10 @@ function getDistanceFromPathInRootNavigator(path) {
     return -1;
 }
 
-/**
- * Returns the current active route
- * @returns {String}
- */
-function getActiveRoute() {
+/** Returns the current active route */
+function getActiveRoute(): string {
     const currentRoute = navigationRef.current && navigationRef.current.getCurrentRoute();
-    const currentRouteHasName = lodashGet(currentRoute, 'name', false);
-    if (!currentRouteHasName) {
+    if (!currentRoute?.name) {
         return '';
     }
 
@@ -124,20 +110,19 @@ function getActiveRoute() {
  * Building path with getPathFromState since navigationRef.current.getCurrentRoute().path
  * is undefined in the first navigation.
  *
- * @param {String} routePath Path to check
- * @return {Boolean} is active
+ * @param routePath Path to check
+ * @return is active
  */
-function isActiveRoute(routePath) {
+function isActiveRoute(routePath: Route): boolean {
     // We remove First forward slash from the URL before matching
     return getActiveRoute().substring(1) === routePath;
 }
 
 /**
  * Main navigation method for redirecting to a route.
- * @param {String} route
- * @param {String} [type] - Type of action to perform. Currently UP is supported.
+ * @param [type] - Type of action to perform. Currently UP is supported.
  */
-function navigate(route = ROUTES.HOME, type) {
+function navigate(route: Route = ROUTES.HOME, type?: string) {
     if (!canNavigate('navigate', {route})) {
         // Store intended route if the navigator is not yet available,
         // we will try again after the NavigationContainer is ready
@@ -149,11 +134,11 @@ function navigate(route = ROUTES.HOME, type) {
 }
 
 /**
- * @param {String} fallbackRoute - Fallback route if pop/goBack action should, but is not possible within RHP
- * @param {Boolean} shouldEnforceFallback - Enforces navigation to fallback route
- * @param {Boolean} shouldPopToTop - Should we navigate to LHN on back press
+ * @param fallbackRoute - Fallback route if pop/goBack action should, but is not possible within RHP
+ * @param shouldEnforceFallback - Enforces navigation to fallback route
+ * @param shouldPopToTop - Should we navigate to LHN on back press
  */
-function goBack(fallbackRoute, shouldEnforceFallback = false, shouldPopToTop = false) {
+function goBack(fallbackRoute: Route, shouldEnforceFallback = false, shouldPopToTop = false) {
     if (!canNavigate('goBack')) {
         return;
     }
@@ -161,12 +146,12 @@ function goBack(fallbackRoute, shouldEnforceFallback = false, shouldPopToTop = f
     if (shouldPopToTop) {
         if (shouldPopAllStateOnUP) {
             shouldPopAllStateOnUP = false;
-            navigationRef.current.dispatch(StackActions.popToTop());
+            navigationRef.current?.dispatch(StackActions.popToTop());
             return;
         }
     }
 
-    if (!navigationRef.current.canGoBack()) {
+    if (!navigationRef.current?.canGoBack()) {
         Log.hmmm('[Navigation] Unable to go back');
         return;
     }
@@ -174,9 +159,9 @@ function goBack(fallbackRoute, shouldEnforceFallback = false, shouldPopToTop = f
     const isFirstRouteInNavigator = !getActiveRouteIndex(navigationRef.current.getState());
     if (isFirstRouteInNavigator) {
         const rootState = navigationRef.getRootState();
-        const lastRoute = _.last(rootState.routes);
+        const lastRoute = rootState.routes.at(-1);
         // If the user comes from a different flow (there is more than one route in RHP) we should go back to the previous flow on UP button press instead of using the fallbackRoute.
-        if (lastRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && lastRoute.state.index > 0) {
+        if (lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && (lastRoute.state?.index ?? 0) > 0) {
             navigationRef.current.goBack();
             return;
         }
@@ -187,7 +172,7 @@ function goBack(fallbackRoute, shouldEnforceFallback = false, shouldPopToTop = f
         return;
     }
 
-    const isCentralPaneFocused = findFocusedRoute(navigationRef.current.getState()).name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR;
+    const isCentralPaneFocused = findFocusedRoute(navigationRef.current.getState())?.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR;
     const distanceFromPathInRootNavigator = getDistanceFromPathInRootNavigator(fallbackRoute);
 
     // Allow CentralPane to use UP with fallback route if the path is not found in root navigator.
@@ -196,7 +181,7 @@ function goBack(fallbackRoute, shouldEnforceFallback = false, shouldPopToTop = f
         return;
     }
 
-    // Add posibility to go back more than one screen in root navigator if that screen is on the stack.
+    // Add possibility to go back more than one screen in root navigator if that screen is on the stack.
     if (isCentralPaneFocused && fallbackRoute && distanceFromPathInRootNavigator > 0) {
         navigationRef.current.dispatch(StackActions.pop(distanceFromPathInRootNavigator));
         return;
@@ -207,12 +192,9 @@ function goBack(fallbackRoute, shouldEnforceFallback = false, shouldPopToTop = f
 
 /**
  * Update route params for the specified route.
- *
- * @param {Object} params
- * @param {String} routeKey
  */
-function setParams(params, routeKey) {
-    navigationRef.current.dispatch({
+function setParams(params: Record<string, unknown>, routeKey: string) {
+    navigationRef.current?.dispatch({
         ...CommonActions.setParams(params),
         source: routeKey,
     });
@@ -221,15 +203,15 @@ function setParams(params, routeKey) {
 /**
  * Dismisses the last modal stack if there is any
  *
- * @param {String | undefined} targetReportID - The reportID to navigate to after dismissing the modal
+ * @param targetReportID - The reportID to navigate to after dismissing the modal
  */
-function dismissModal(targetReportID) {
+function dismissModal(targetReportID?: string) {
     if (!canNavigate('dismissModal')) {
         return;
     }
     const rootState = navigationRef.getRootState();
-    const lastRoute = _.last(rootState.routes);
-    switch (lastRoute.name) {
+    const lastRoute = rootState.routes.at(-1);
+    switch (lastRoute?.name) {
         case NAVIGATORS.RIGHT_MODAL_NAVIGATOR:
         case SCREENS.NOT_FOUND:
         case SCREENS.REPORT_ATTACHMENTS:
@@ -237,16 +219,18 @@ function dismissModal(targetReportID) {
             if (targetReportID && targetReportID !== getTopmostReportId(rootState)) {
                 const state = getStateFromPath(ROUTES.REPORT_WITH_ID.getRoute(targetReportID));
 
-                const action = getActionFromState(state, linkingConfig.config);
-                action.type = 'REPLACE';
-                navigationRef.current.dispatch(action);
+                const action: StackNavigationAction = getActionFromState(state, linkingConfig.config);
+                if (action) {
+                    action.type = 'REPLACE';
+                    navigationRef.current?.dispatch(action);
+                }
                 // If not-found page is in the route stack, we need to close it
-            } else if (targetReportID && _.some(rootState.routes, (route) => route.name === SCREENS.NOT_FOUND)) {
+            } else if (targetReportID && rootState.routes.some((route) => route.name === SCREENS.NOT_FOUND)) {
                 const lastRouteIndex = rootState.routes.length - 1;
-                const centralRouteIndex = _.findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR);
-                navigationRef.current.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key});
+                const centralRouteIndex = findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR);
+                navigationRef.current?.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key});
             } else {
-                navigationRef.current.dispatch({...StackActions.pop(), target: rootState.key});
+                navigationRef.current?.dispatch({...StackActions.pop(), target: rootState.key});
             }
             break;
         default: {
@@ -257,21 +241,17 @@ function dismissModal(targetReportID) {
 
 /**
  * Returns the current active route without the URL params
- * @returns {String}
  */
-function getActiveRouteWithoutParams() {
+function getActiveRouteWithoutParams(): string {
     return getActiveRoute().replace(/\?.*/, '');
 }
 
-/** Returns the active route name from a state event from the navigationRef
- * @param {Object} event
- * @returns {String | undefined}
- * */
-function getRouteNameFromStateEvent(event) {
+/** Returns the active route name from a state event from the navigationRef  */
+function getRouteNameFromStateEvent(event: EventMapCore<NavigationState>['state']): string | undefined {
     if (!event.data.state) {
         return;
     }
-    const currentRouteName = event.data.state.routes.slice(-1).name;
+    const currentRouteName = event.data.state.routes.at(-1)?.name;
 
     // Check to make sure we have a route name
     if (currentRouteName) {
@@ -292,10 +272,7 @@ function goToPendingRoute() {
     pendingRoute = null;
 }
 
-/**
- * @returns {Promise}
- */
-function isNavigationReady() {
+function isNavigationReady(): Promise<void> {
     return navigationIsReadyPromise;
 }
 
@@ -307,57 +284,50 @@ function setIsNavigationReady() {
 /**
  * Checks if the navigation state contains routes that are protected (over the auth wall).
  *
- * @function
- * @param {Object} state - react-navigation state object
- *
- * @returns {Boolean}
+ * @param state - react-navigation state object
  */
-function navContainsProtectedRoutes(state) {
-    if (!state || !state.routeNames || !_.isArray(state.routeNames)) {
+function navContainsProtectedRoutes(state: NavigationState | PartialState<NavigationState> | undefined): boolean {
+    if (!state?.routeNames || !Array.isArray(state.routeNames)) {
         return false;
     }
 
-    const protectedScreensName = _.values(PROTECTED_SCREENS);
-    const difference = _.difference(protectedScreensName, state.routeNames);
-
-    return !difference.length;
+    const protectedScreensName = Object.values(PROTECTED_SCREENS);
+    return !protectedScreensName.some((screen) => !state.routeNames?.includes(screen));
 }
 
 /**
- * Waits for the navitgation state to contain protected routes specified in PROTECTED_SCREENS constant.
- * If the navigation is in a state, where protected routes are avilable, the promise resolve immediately.
+ * Waits for the navigation state to contain protected routes specified in PROTECTED_SCREENS constant.
+ * If the navigation is in a state, where protected routes are available, the promise resolve immediately.
  *
  * @function
- * @returns {Promise<void>} A promise that resolves when the one of the PROTECTED_SCREENS screen is available in the nav tree.
+ * @returns A promise that resolves when the one of the PROTECTED_SCREENS screen is available in the nav tree.
  *
  * @example
  * waitForProtectedRoutes()
  *     .then(()=> console.log('Protected routes are present!'))
  */
 function waitForProtectedRoutes() {
-    return new Promise((resolve) => {
+    return new Promise<void>((resolve) => {
         isNavigationReady().then(() => {
-            const currentState = navigationRef.current.getState();
+            const currentState = navigationRef.current?.getState();
             if (navContainsProtectedRoutes(currentState)) {
                 resolve();
                 return;
             }
-            let unsubscribe;
-            const handleStateChange = ({data}) => {
-                const state = lodashGet(data, 'state');
+
+            const unsubscribe = navigationRef.current?.addListener('state', ({data}) => {
+                const state = data?.state;
                 if (navContainsProtectedRoutes(state)) {
-                    unsubscribe();
+                    unsubscribe?.();
                     resolve();
                 }
-            };
-            unsubscribe = navigationRef.current.addListener('state', handleStateChange);
+            });
         });
     });
 }
 
 export default {
     setShouldPopAllStateOnUP,
-    canNavigate,
     navigate,
     setParams,
     dismissModal,
@@ -371,7 +341,6 @@ export default {
     getRouteNameFromStateEvent,
     getTopmostReportActionId,
     waitForProtectedRoutes,
-    navContainsProtectedRoutes,
 };
 
 export {navigationRef};
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
deleted file mode 100644
index 2373066cf4bd..000000000000
--- a/src/libs/Navigation/NavigationRoot.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import {DefaultTheme, getPathFromState, NavigationContainer} from '@react-navigation/native';
-import PropTypes from 'prop-types';
-import React, {useEffect, useRef} from 'react';
-import {Easing, 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 themeColors from '@styles/themes/default';
-import AppNavigator from './AppNavigator';
-import linkingConfig from './linkingConfig';
-import Navigation, {navigationRef} from './Navigation';
-
-// https://reactnavigation.org/docs/themes
-const navigationTheme = {
-    ...DefaultTheme,
-    colors: {
-        ...DefaultTheme.colors,
-        background: themeColors.appBG,
-    },
-};
-
-const propTypes = {
-    /** Whether the current user is logged in with an authToken */
-    authenticated: PropTypes.bool.isRequired,
-
-    /** Fired when react-navigation is ready */
-    onReady: PropTypes.func.isRequired,
-};
-
-/**
- * Intercept navigation state changes and log it
- * @param {NavigationState} state
- */
-function parseAndLogRoute(state) {
-    if (!state) {
-        return;
-    }
-
-    const currentPath = getPathFromState(state, linkingConfig.config);
-
-    // Don't log the route transitions from OldDot because they contain authTokens
-    if (currentPath.includes('/transition')) {
-        Log.info('Navigating from transition link from OldDot using short lived authToken');
-    } else {
-        Log.info('Navigating to route', false, {path: currentPath});
-    }
-
-    Navigation.setIsNavigationReady();
-}
-
-function NavigationRoot(props) {
-    useFlipper(navigationRef);
-    const firstRenderRef = useRef(true);
-
-    const {updateCurrentReportID} = useCurrentReportID();
-    const {isSmallScreenWidth} = useWindowDimensions();
-
-    useEffect(() => {
-        if (firstRenderRef.current) {
-            // we don't want to make the report back button go back to LHN if the user
-            // started on the small screen so we don't set it on the first render
-            // making it only work on consecutive changes of the screen size
-            firstRenderRef.current = false;
-            return;
-        }
-        if (!isSmallScreenWidth) {
-            return;
-        }
-        Navigation.setShouldPopAllStateOnUP();
-    }, [isSmallScreenWidth]);
-
-    useEffect(() => {
-        if (!navigationRef.isReady() || !props.authenticated) {
-            return;
-        }
-        // We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary.
-        navigationRef.resetRoot(navigationRef.getRootState());
-    }, [isSmallScreenWidth, props.authenticated]);
-
-    const prevStatusBarBackgroundColor = useRef(themeColors.appBG);
-    const statusBarBackgroundColor = useRef(themeColors.appBG);
-    const statusBarAnimation = useSharedValue(0);
-
-    const updateStatusBarBackgroundColor = (color) => 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 ([current, previous].includes(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 currentScreenBackgroundColor = (currentRoute.params && currentRoute.params.backgroundColor) || themeColors.PAGE_BACKGROUND_COLORS[currentRoute.name] || themeColors.appBG;
-
-        prevStatusBarBackgroundColor.current = statusBarBackgroundColor.current;
-        statusBarBackgroundColor.current = currentScreenBackgroundColor;
-
-        if (currentScreenBackgroundColor === themeColors.appBG && prevStatusBarBackgroundColor.current === themeColors.appBG) {
-            return;
-        }
-
-        statusBarAnimation.value = 0;
-        statusBarAnimation.value = withDelay(
-            300,
-            withTiming(1, {
-                duration: 300,
-                easing: Easing.in,
-            }),
-        );
-    };
-
-    const handleStateChange = (state) => {
-        if (!state) {
-            return;
-        }
-        // Performance optimization to avoid context consumers to delay first render
-        setTimeout(() => {
-            updateCurrentReportID(state);
-        }, 0);
-        parseAndLogRoute(state);
-        animateStatusBarBackgroundColor();
-    };
-
-    return (
-        <NavigationContainer
-            onStateChange={handleStateChange}
-            onReady={props.onReady}
-            theme={navigationTheme}
-            ref={navigationRef}
-            linking={linkingConfig}
-            documentTitle={{
-                enabled: false,
-            }}
-        >
-            <AppNavigator authenticated={props.authenticated} />
-        </NavigationContainer>
-    );
-}
-
-NavigationRoot.displayName = 'NavigationRoot';
-NavigationRoot.propTypes = propTypes;
-export default NavigationRoot;
diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx
new file mode 100644
index 000000000000..7c0b9ef4fc8c
--- /dev/null
+++ b/src/libs/Navigation/NavigationRoot.tsx
@@ -0,0 +1,112 @@
+import {DefaultTheme, getPathFromState, NavigationContainer, NavigationState} from '@react-navigation/native';
+import React, {useEffect, useMemo, useRef} from 'react';
+import useCurrentReportID from '@hooks/useCurrentReportID';
+import useFlipper from '@hooks/useFlipper';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import Log from '@libs/Log';
+import useTheme from '@styles/themes/useTheme';
+import AppNavigator from './AppNavigator';
+import linkingConfig from './linkingConfig';
+import Navigation, {navigationRef} from './Navigation';
+
+type NavigationRootProps = {
+    /** Whether the current user is logged in with an authToken */
+    authenticated: boolean;
+
+    /** Fired when react-navigation is ready */
+    onReady: () => void;
+};
+
+/**
+ * Intercept navigation state changes and log it
+ */
+function parseAndLogRoute(state: NavigationState) {
+    if (!state) {
+        return;
+    }
+
+    const currentPath = getPathFromState(state, linkingConfig.config);
+
+    // Don't log the route transitions from OldDot because they contain authTokens
+    if (currentPath.includes('/transition')) {
+        Log.info('Navigating from transition link from OldDot using short lived authToken');
+    } else {
+        Log.info('Navigating to route', false, {path: currentPath});
+    }
+
+    Navigation.setIsNavigationReady();
+}
+
+function NavigationRoot({authenticated, onReady}: NavigationRootProps) {
+    useFlipper(navigationRef);
+    const firstRenderRef = useRef(true);
+    const theme = useTheme();
+
+    const currentReportIDValue = useCurrentReportID();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    // https://reactnavigation.org/docs/themes
+    const navigationTheme = useMemo(
+        () => ({
+            ...DefaultTheme,
+            colors: {
+                ...DefaultTheme.colors,
+                background: theme.appBG,
+            },
+        }),
+        [theme],
+    );
+
+    useEffect(() => {
+        if (firstRenderRef.current) {
+            // we don't want to make the report back button go back to LHN if the user
+            // started on the small screen so we don't set it on the first render
+            // making it only work on consecutive changes of the screen size
+            firstRenderRef.current = false;
+            return;
+        }
+        if (!isSmallScreenWidth) {
+            return;
+        }
+        Navigation.setShouldPopAllStateOnUP();
+    }, [isSmallScreenWidth]);
+
+    useEffect(() => {
+        if (!navigationRef.isReady() || !authenticated) {
+            return;
+        }
+        // We need to force state rehydration so the CustomRouter can add the CentralPaneNavigator route if necessary.
+        navigationRef.resetRoot(navigationRef.getRootState());
+    }, [isSmallScreenWidth, authenticated]);
+
+    const handleStateChange = (state: NavigationState | undefined) => {
+        if (!state) {
+            return;
+        }
+
+        // Performance optimization to avoid context consumers to delay first render
+        setTimeout(() => {
+            currentReportIDValue?.updateCurrentReportID(state);
+        }, 0);
+        parseAndLogRoute(state);
+    };
+
+    return (
+        <NavigationContainer
+            onStateChange={handleStateChange}
+            onReady={onReady}
+            theme={navigationTheme}
+            ref={navigationRef}
+            linking={linkingConfig}
+            documentTitle={{
+                enabled: false,
+            }}
+        >
+            <AppNavigator authenticated={authenticated} />
+        </NavigationContainer>
+    );
+}
+
+NavigationRoot.displayName = 'NavigationRoot';
+
+export default NavigationRoot;
diff --git a/src/libs/Navigation/OnyxTabNavigator.js b/src/libs/Navigation/OnyxTabNavigator.tsx
similarity index 54%
rename from src/libs/Navigation/OnyxTabNavigator.js
rename to src/libs/Navigation/OnyxTabNavigator.tsx
index eeed3e0cd270..1ea57e773323 100644
--- a/src/libs/Navigation/OnyxTabNavigator.js
+++ b/src/libs/Navigation/OnyxTabNavigator.tsx
@@ -1,31 +1,33 @@
-import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
-import PropTypes from 'prop-types';
+import {createMaterialTopTabNavigator, MaterialTopTabNavigationEventMap} from '@react-navigation/material-top-tabs';
+import {EventMapCore, NavigationState, ScreenListeners} from '@react-navigation/native';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
+import {OnyxEntry} from 'react-native-onyx/lib/types';
 import Tab from '@userActions/Tab';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-const propTypes = {
-    /** ID of the tab component to be saved in onyx */
-    id: PropTypes.string.isRequired,
+type OnyxTabNavigatorOnyxProps = {
+    selectedTab: OnyxEntry<string>;
+};
 
-    /** Name of the selected tab */
-    selectedTab: PropTypes.string,
+type OnyxTabNavigatorProps = OnyxTabNavigatorOnyxProps &
+    ChildrenProps & {
+        /** ID of the tab component to be saved in onyx */
+        id: string;
 
-    /** Children nodes */
-    children: PropTypes.node.isRequired,
-};
+        /** Name of the selected tab */
+        selectedTab?: string;
 
-const defaultProps = {
-    selectedTab: '',
-};
+        screenListeners?: ScreenListeners<NavigationState, MaterialTopTabNavigationEventMap>;
+    };
 
 // eslint-disable-next-line rulesdir/no-inline-named-export
 export const TopTab = createMaterialTopTabNavigator();
 
 // This takes all the same props as MaterialTopTabsNavigator: https://reactnavigation.org/docs/material-top-tab-navigator/#props,
 // except ID is now required, and it gets a `selectedTab` from Onyx
-function OnyxTabNavigator({id, selectedTab, children, ...rest}) {
+function OnyxTabNavigator({id, selectedTab = '', children, screenListeners, ...rest}: OnyxTabNavigatorProps) {
     return (
         <TopTab.Navigator
             /* eslint-disable-next-line react/jsx-props-no-spreading */
@@ -35,13 +37,14 @@ function OnyxTabNavigator({id, selectedTab, children, ...rest}) {
             backBehavior="initialRoute"
             keyboardDismissMode="none"
             screenListeners={{
-                state: (event) => {
+                state: (e) => {
+                    const event = e as unknown as EventMapCore<NavigationState>['state'];
                     const state = event.data.state;
                     const index = state.index;
                     const routeNames = state.routeNames;
                     Tab.setSelectedTab(id, routeNames[index]);
                 },
-                ...(rest.screenListeners || {}),
+                ...(screenListeners ?? {}),
             }}
         >
             {children}
@@ -49,11 +52,9 @@ function OnyxTabNavigator({id, selectedTab, children, ...rest}) {
     );
 }
 
-OnyxTabNavigator.defaultProps = defaultProps;
-OnyxTabNavigator.propTypes = propTypes;
 OnyxTabNavigator.displayName = 'OnyxTabNavigator';
 
-export default withOnyx({
+export default withOnyx<OnyxTabNavigatorProps, OnyxTabNavigatorOnyxProps>({
     selectedTab: {
         key: ({id}) => `${ONYXKEYS.COLLECTION.SELECTED_TAB}${id}`,
     },
diff --git a/src/libs/Navigation/getStateFromPath.js b/src/libs/Navigation/getStateFromPath.ts
similarity index 57%
rename from src/libs/Navigation/getStateFromPath.js
rename to src/libs/Navigation/getStateFromPath.ts
index f2564c9d2512..3a53b02fc3c7 100644
--- a/src/libs/Navigation/getStateFromPath.js
+++ b/src/libs/Navigation/getStateFromPath.ts
@@ -1,11 +1,12 @@
-import {getStateFromPath as RNGetStateFromPath} from '@react-navigation/native';
+import {NavigationState, PartialState, getStateFromPath as RNGetStateFromPath} from '@react-navigation/native';
+import {Route} from '@src/ROUTES';
 import linkingConfig from './linkingConfig';
 
 /**
- * @param {String} path - The path to parse
- * @returns {Object | undefined} - It's possible that there is no navigation action for the given path
+ * @param path - The path to parse
+ * @returns - It's possible that there is no navigation action for the given path
  */
-function getStateFromPath(path) {
+function getStateFromPath(path: Route): PartialState<NavigationState> {
     const normalizedPath = !path.startsWith('/') ? `/${path}` : path;
 
     const state = linkingConfig.getStateFromPath ? linkingConfig.getStateFromPath(normalizedPath, linkingConfig.config) : RNGetStateFromPath(normalizedPath, linkingConfig.config);
@@ -13,6 +14,7 @@ function getStateFromPath(path) {
     if (!state) {
         throw new Error('Failed to parse the path to a navigation state.');
     }
+
     return state;
 }
 
diff --git a/src/libs/Navigation/getTopmostReportActionID.js b/src/libs/Navigation/getTopmostReportActionID.js
deleted file mode 100644
index a4480931cda0..000000000000
--- a/src/libs/Navigation/getTopmostReportActionID.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import lodashFindLast from 'lodash/findLast';
-import lodashGet from 'lodash/get';
-
-// This function is in a separate file than Navigation.js to avoid cyclic dependency.
-
-/**
- * Find the last visited report screen in the navigation state and get the linked reportActionID of it.
- *
- * @param {Object} state - The react-navigation state
- * @returns {String | undefined} - It's possible that there is no report screen
- */
-function getTopmostReportActionID(state) {
-    if (!state) {
-        return;
-    }
-    const topmostCentralPane = lodashFindLast(state.routes, (route) => route.name === 'CentralPaneNavigator');
-
-    if (!topmostCentralPane) {
-        return;
-    }
-
-    const directReportActionIDParam = lodashGet(topmostCentralPane, 'params.params.reportActionID');
-
-    if (!topmostCentralPane.state && !directReportActionIDParam) {
-        return;
-    }
-
-    if (directReportActionIDParam) {
-        return directReportActionIDParam;
-    }
-
-    const topmostReport = lodashFindLast(topmostCentralPane.state.routes, (route) => route.name === 'Report');
-    if (!topmostReport) {
-        return;
-    }
-
-    const topmostReportActionID = lodashGet(topmostReport, 'params.reportActionID');
-
-    return topmostReportActionID;
-}
-
-export default getTopmostReportActionID;
diff --git a/src/libs/Navigation/getTopmostReportActionID.ts b/src/libs/Navigation/getTopmostReportActionID.ts
new file mode 100644
index 000000000000..15ab1efef704
--- /dev/null
+++ b/src/libs/Navigation/getTopmostReportActionID.ts
@@ -0,0 +1,48 @@
+import {NavigationState, PartialState} from '@react-navigation/native';
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
+import {RootStackParamList} from './types';
+
+// This function is in a separate file than Navigation.js to avoid cyclic dependency.
+
+/**
+ * Find the last visited report screen in the navigation state and get the linked reportActionID of it.
+ *
+ * @param state - The react-navigation state
+ * @returns - It's possible that there is no report screen
+ */
+function getTopmostReportActionID(state: NavigationState | NavigationState<RootStackParamList> | PartialState<NavigationState>): string | undefined {
+    if (!state) {
+        return;
+    }
+
+    const topmostCentralPane = state.routes.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1);
+    if (!topmostCentralPane) {
+        return;
+    }
+
+    const directReportParams = topmostCentralPane.params && 'params' in topmostCentralPane.params && topmostCentralPane?.params?.params;
+    const directReportActionIDParam = directReportParams && 'reportActionID' in directReportParams && directReportParams?.reportActionID;
+
+    if (!topmostCentralPane.state && !directReportActionIDParam) {
+        return;
+    }
+
+    if (directReportActionIDParam) {
+        return directReportActionIDParam;
+    }
+
+    const topmostReport = topmostCentralPane.state?.routes.filter((route) => route.name === SCREENS.REPORT).at(-1);
+    if (!topmostReport) {
+        return;
+    }
+
+    const topmostReportActionID = topmostReport.params && 'reportActionID' in topmostReport.params && topmostReport.params?.reportActionID;
+    if (typeof topmostReportActionID !== 'string') {
+        return;
+    }
+
+    return topmostReportActionID;
+}
+
+export default getTopmostReportActionID;
diff --git a/src/libs/Navigation/getTopmostReportId.js b/src/libs/Navigation/getTopmostReportId.js
deleted file mode 100644
index 8ca9c39baf6a..000000000000
--- a/src/libs/Navigation/getTopmostReportId.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import lodashFindLast from 'lodash/findLast';
-import lodashGet from 'lodash/get';
-
-// This function is in a separate file than Navigation.js to avoid cyclic dependency.
-
-/**
- * Find the last visited report screen in the navigation state and get the id of it.
- *
- * @param {Object} state - The react-navigation state
- * @returns {String | undefined} - It's possible that there is no report screen
- */
-function getTopmostReportId(state) {
-    if (!state) {
-        return;
-    }
-    const topmostCentralPane = lodashFindLast(state.routes, (route) => route.name === 'CentralPaneNavigator');
-
-    if (!topmostCentralPane) {
-        return;
-    }
-
-    const directReportIdParam = lodashGet(topmostCentralPane, 'params.params.reportID');
-
-    if (!topmostCentralPane.state && !directReportIdParam) {
-        return;
-    }
-
-    if (directReportIdParam) {
-        return directReportIdParam;
-    }
-
-    const topmostReport = lodashFindLast(topmostCentralPane.state.routes, (route) => route.name === 'Report');
-    if (!topmostReport) {
-        return;
-    }
-
-    const topmostReportId = lodashGet(topmostReport, 'params.reportID');
-
-    return topmostReportId;
-}
-
-export default getTopmostReportId;
diff --git a/src/libs/Navigation/getTopmostReportId.ts b/src/libs/Navigation/getTopmostReportId.ts
new file mode 100644
index 000000000000..3342761e7ccf
--- /dev/null
+++ b/src/libs/Navigation/getTopmostReportId.ts
@@ -0,0 +1,48 @@
+import {NavigationState, PartialState} from '@react-navigation/native';
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
+import {RootStackParamList} from './types';
+
+// This function is in a separate file than Navigation.js to avoid cyclic dependency.
+
+/**
+ * Find the last visited report screen in the navigation state and get the id of it.
+ *
+ * @param state - The react-navigation state
+ * @returns - It's possible that there is no report screen
+ */
+function getTopmostReportId(state: NavigationState | NavigationState<RootStackParamList> | PartialState<NavigationState>): string | undefined {
+    if (!state) {
+        return;
+    }
+
+    const topmostCentralPane = state.routes.filter((route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR).at(-1);
+    if (!topmostCentralPane) {
+        return;
+    }
+
+    const directReportParams = topmostCentralPane.params && 'params' in topmostCentralPane.params && topmostCentralPane?.params?.params;
+    const directReportIdParam = directReportParams && 'reportID' in directReportParams && directReportParams?.reportID;
+
+    if (!topmostCentralPane.state && !directReportIdParam) {
+        return;
+    }
+
+    if (directReportIdParam) {
+        return directReportIdParam;
+    }
+
+    const topmostReport = topmostCentralPane.state?.routes.filter((route) => route.name === SCREENS.REPORT).at(-1);
+    if (!topmostReport) {
+        return;
+    }
+
+    const topmostReportId = topmostReport.params && 'reportID' in topmostReport.params && topmostReport.params?.reportID;
+    if (typeof topmostReportId !== 'string') {
+        return;
+    }
+
+    return topmostReportId;
+}
+
+export default getTopmostReportId;
diff --git a/src/libs/Navigation/linkTo.js b/src/libs/Navigation/linkTo.ts
similarity index 60%
rename from src/libs/Navigation/linkTo.js
rename to src/libs/Navigation/linkTo.ts
index ca87a0d7b79c..1a4aa2d0cfb7 100644
--- a/src/libs/Navigation/linkTo.js
+++ b/src/libs/Navigation/linkTo.ts
@@ -1,39 +1,53 @@
 import {getActionFromState} from '@react-navigation/core';
-import _ from 'lodash';
+import {NavigationAction, NavigationContainerRef, NavigationState, PartialState} from '@react-navigation/native';
+import {Writable} from 'type-fest';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
+import {Route} from '@src/ROUTES';
 import getStateFromPath from './getStateFromPath';
 import getTopmostReportId from './getTopmostReportId';
 import linkingConfig from './linkingConfig';
+import {NavigationRoot, RootStackParamList, StackNavigationAction} from './types';
+
+type ActionPayloadParams = {
+    screen?: string;
+    params?: unknown;
+    path?: string;
+};
+
+type ActionPayload = {
+    params?: ActionPayloadParams;
+};
 
 /**
  * Motivation for this function is described in NAVIGATION.md
  *
- * @param {Object} action action generated by getActionFromState
- * @param {Object} state The root state
- * @returns {Object} minimalAction minimal action is the action that we should dispatch
+ * @param action action generated by getActionFromState
+ * @param state The root state
+ * @returns minimalAction minimal action is the action that we should dispatch
  */
-function getMinimalAction(action, state) {
-    let currentAction = action;
-    let currentState = state;
-    let currentTargetKey = null;
+function getMinimalAction(action: NavigationAction, state: NavigationState): Writable<NavigationAction> {
+    let currentAction: NavigationAction = action;
+    let currentState: NavigationState | PartialState<NavigationState> | undefined = state;
+    let currentTargetKey: string | undefined;
 
-    while (currentState.routes[currentState.index].name === currentAction.payload.name) {
-        if (!currentState.routes[currentState.index].state) {
+    while (currentAction.payload && 'name' in currentAction.payload && currentState?.routes[currentState.index ?? -1].name === currentAction.payload.name) {
+        if (!currentState?.routes[currentState.index ?? -1].state) {
             break;
         }
 
-        currentState = currentState.routes[currentState.index].state;
+        currentState = currentState?.routes[currentState.index ?? -1].state;
+        currentTargetKey = currentState?.key;
 
-        currentTargetKey = currentState.key;
+        const payload = currentAction.payload as ActionPayload;
 
         // Creating new smaller action
         currentAction = {
             type: currentAction.type,
             payload: {
-                name: currentAction.payload.params.screen,
-                params: currentAction.payload.params.params,
-                path: currentAction.payload.params.path,
+                name: payload?.params?.screen,
+                params: payload?.params?.params,
+                path: payload?.params?.path,
             },
             target: currentTargetKey,
         };
@@ -41,13 +55,13 @@ function getMinimalAction(action, state) {
     return currentAction;
 }
 
-export default function linkTo(navigation, path, type, isActiveRoute) {
-    if (navigation === undefined) {
+export default function linkTo(navigation: NavigationContainerRef<RootStackParamList> | null, path: Route, type?: string, isActiveRoute?: boolean) {
+    if (!navigation) {
         throw new Error("Couldn't find a navigation object. Is your component inside a screen in a navigator?");
     }
 
-    let root = navigation;
-    let current;
+    let root: NavigationRoot = navigation;
+    let current: NavigationRoot | undefined;
 
     // Traverse up to get the root navigation
     // eslint-disable-next-line no-cond-assign
@@ -55,18 +69,18 @@ export default function linkTo(navigation, path, type, isActiveRoute) {
         root = current;
     }
 
+    const rootState = root.getState();
     const state = getStateFromPath(path);
-
-    const action = getActionFromState(state, linkingConfig.config);
+    const action: StackNavigationAction = getActionFromState(state, linkingConfig.config);
 
     // If action type is different than NAVIGATE we can't change it to the PUSH safely
-    if (action.type === CONST.NAVIGATION.ACTION_TYPE.NAVIGATE) {
+    if (action?.type === CONST.NAVIGATION.ACTION_TYPE.NAVIGATE) {
         // In case if type is 'FORCED_UP' we replace current screen with the provided. This means the current screen no longer exists in the stack
         if (type === CONST.NAVIGATION.TYPE.FORCED_UP) {
             action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE;
 
             // If this action is navigating to the report screen and the top most navigator is different from the one we want to navigate - PUSH the new screen to the top of the stack
-        } else if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && getTopmostReportId(root.getState()) !== getTopmostReportId(state)) {
+        } else if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && getTopmostReportId(rootState) !== getTopmostReportId(state)) {
             action.type = CONST.NAVIGATION.ACTION_TYPE.PUSH;
 
             // If the type is UP, we deeplinked into one of the RHP flows and we want to replace the current screen with the previous one in the flow
@@ -75,12 +89,12 @@ export default function linkTo(navigation, path, type, isActiveRoute) {
             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 && _.last(root.getState().routes).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;
         }
     }
 
-    if (action.payload.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
+    if (action && 'payload' in action && action.payload && 'name' in action.payload && action.payload.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
         const minimalAction = getMinimalAction(action, navigation.getRootState());
         if (minimalAction) {
             // There are situations where a route already exists on the current navigation stack
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.ts
similarity index 97%
rename from src/libs/Navigation/linkingConfig.js
rename to src/libs/Navigation/linkingConfig.ts
index e0ac35c957a3..92a04778b9a6 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.ts
@@ -1,21 +1,24 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import {LinkingOptions} from '@react-navigation/native';
 import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import {RootStackParamList} from './types';
 
-export default {
+const linkingConfig: LinkingOptions<RootStackParamList> = {
     prefixes: ['new-expensify://', 'https://www.expensify.cash', 'https://staging.expensify.cash', 'https://dev.new.expensify.com', CONST.NEW_EXPENSIFY_URL, CONST.STAGING_NEW_EXPENSIFY_URL],
     config: {
         initialRouteName: SCREENS.HOME,
         screens: {
             // Main Routes
-            ValidateLogin: ROUTES.VALIDATE_LOGIN,
-            UnlinkLogin: ROUTES.UNLINK_LOGIN,
+            [SCREENS.VALIDATE_LOGIN]: ROUTES.VALIDATE_LOGIN,
+            [SCREENS.UNLINK_LOGIN]: ROUTES.UNLINK_LOGIN,
             [SCREENS.TRANSITION_BETWEEN_APPS]: ROUTES.TRANSITION_BETWEEN_APPS,
             [SCREENS.CONCIERGE]: ROUTES.CONCIERGE,
-            AppleSignInDesktop: ROUTES.APPLE_SIGN_IN,
-            GoogleSignInDesktop: ROUTES.GOOGLE_SIGN_IN,
-            SAMLSignIn: ROUTES.SAML_SIGN_IN,
+            [SCREENS.SIGN_IN_WITH_APPLE_DESKTOP]: ROUTES.APPLE_SIGN_IN,
+            [SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP]: ROUTES.GOOGLE_SIGN_IN,
+            [SCREENS.SAML_SIGN_IN]: ROUTES.SAML_SIGN_IN,
             [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: ROUTES.DESKTOP_SIGN_IN_REDIRECT,
             [SCREENS.REPORT_ATTACHMENTS]: ROUTES.REPORT_ATTACHMENTS.route,
 
@@ -168,7 +171,7 @@ export default {
                                 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: {
@@ -192,7 +195,7 @@ export default {
                                 exact: true,
                             },
                             Settings_TwoFactorAuth: {
-                                path: ROUTES.SETTINGS_2FA,
+                                path: ROUTES.SETTINGS_2FA.route,
                                 exact: true,
                             },
                             Settings_Share_Code: {
@@ -448,3 +451,5 @@ export default {
         },
     },
 };
+
+export default linkingConfig;
diff --git a/src/libs/Navigation/navigationRef.js b/src/libs/Navigation/navigationRef.js
deleted file mode 100644
index 00c98d178f7e..000000000000
--- a/src/libs/Navigation/navigationRef.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import {createNavigationContainerRef} from '@react-navigation/native';
-
-const navigationRef = createNavigationContainerRef();
-export default navigationRef;
diff --git a/src/libs/Navigation/navigationRef.ts b/src/libs/Navigation/navigationRef.ts
new file mode 100644
index 000000000000..032d9f9f3d9a
--- /dev/null
+++ b/src/libs/Navigation/navigationRef.ts
@@ -0,0 +1,6 @@
+import {createNavigationContainerRef} from '@react-navigation/native';
+import {NavigationRef} from './types';
+
+const navigationRef: NavigationRef = createNavigationContainerRef();
+
+export default navigationRef;
diff --git a/src/libs/Navigation/shouldPreventDeeplinkPrompt/index.js b/src/libs/Navigation/shouldPreventDeeplinkPrompt.ts
similarity index 57%
rename from src/libs/Navigation/shouldPreventDeeplinkPrompt/index.js
rename to src/libs/Navigation/shouldPreventDeeplinkPrompt.ts
index 23f46cb9808f..2b19da1f5224 100644
--- a/src/libs/Navigation/shouldPreventDeeplinkPrompt/index.js
+++ b/src/libs/Navigation/shouldPreventDeeplinkPrompt.ts
@@ -2,12 +2,9 @@ import CONST from '@src/CONST';
 
 /**
  * Determines if the deeplink prompt should be shown on the current screen
- * @param {String} screenName
- * @param {Boolean} isAuthenticated
- * @returns {Boolean}
  */
-export default function shouldPreventDeeplinkPrompt(screenName) {
+export default function shouldPreventDeeplinkPrompt(screenName: string): boolean {
     // We don't want to show the deeplink prompt on screens where a user is in the
     // authentication process, so we are blocking the prompt on the following screens (Denylist)
-    return CONST.DEEPLINK_PROMPT_DENYLIST.includes(screenName);
+    return CONST.DEEPLINK_PROMPT_DENYLIST.some((name) => name === screenName);
 }
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
new file mode 100644
index 000000000000..41df21d8e237
--- /dev/null
+++ b/src/libs/Navigation/types.ts
@@ -0,0 +1,401 @@
+/* eslint-disable @typescript-eslint/naming-convention  */
+import {CommonActions, NavigationContainerRefWithCurrent, NavigationHelpers, NavigationState, NavigatorScreenParams, PartialRoute, Route} from '@react-navigation/native';
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+import NAVIGATORS from '@src/NAVIGATORS';
+import SCREENS from '@src/SCREENS';
+
+type NavigationRef = NavigationContainerRefWithCurrent<RootStackParamList>;
+
+type NavigationRoot = NavigationHelpers<RootStackParamList>;
+
+type GoBackAction = Extract<CommonActions.Action, {type: 'GO_BACK'}>;
+type ResetAction = Extract<CommonActions.Action, {type: 'RESET'}>;
+type SetParamsAction = Extract<CommonActions.Action, {type: 'SET_PARAMS'}>;
+
+type ActionNavigate = {
+    type: ValueOf<typeof CONST.NAVIGATION.ACTION_TYPE>;
+    payload: {
+        name?: string;
+        key?: string;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        params?: any;
+        path?: string;
+        merge?: boolean;
+    };
+    source?: string;
+    target?: string;
+};
+
+type StackNavigationAction = GoBackAction | ResetAction | SetParamsAction | ActionNavigate | undefined;
+
+type NavigationStateRoute = NavigationState['routes'][number];
+type NavigationPartialRoute = PartialRoute<Route<string>>;
+type StateOrRoute = NavigationState | NavigationStateRoute | NavigationPartialRoute;
+
+type CentralPaneNavigatorParamList = {
+    [SCREENS.REPORT]: {
+        reportActionID: string;
+        reportID: string;
+    };
+};
+
+type SettingsNavigatorParamList = {
+    [SCREENS.SETTINGS.ROOT]: undefined;
+    Settings_Share_Code: undefined;
+    [SCREENS.SETTINGS.WORKSPACES]: undefined;
+    Settings_Profile: undefined;
+    Settings_Pronouns: undefined;
+    Settings_Display_Name: undefined;
+    Settings_Timezone: undefined;
+    Settings_Timezone_Select: undefined;
+    Settings_PersonalDetails_Initial: undefined;
+    Settings_PersonalDetails_LegalName: undefined;
+    Settings_PersonalDetails_DateOfBirth: undefined;
+    Settings_PersonalDetails_Address: undefined;
+    Settings_PersonalDetails_Address_Country: undefined;
+    Settings_ContactMethods: undefined;
+    Settings_ContactMethodDetails: undefined;
+    Settings_NewContactMethod: undefined;
+    [SCREENS.SETTINGS.PREFERENCES]: undefined;
+    Settings_Preferences_PriorityMode: undefined;
+    Settings_Preferences_Language: undefined;
+    Settings_Preferences_Theme: undefined;
+    Settings_Close: undefined;
+    [SCREENS.SETTINGS.SECURITY]: undefined;
+    Settings_About: undefined;
+    Settings_App_Download_Links: undefined;
+    Settings_Lounge_Access: undefined;
+    Settings_Wallet: undefined;
+    Settings_Wallet_Cards_Digital_Details_Update_Address: undefined;
+    Settings_Wallet_DomainCard: undefined;
+    Settings_Wallet_ReportVirtualCardFraud: undefined;
+    Settings_Wallet_Card_Activate: undefined;
+    [SCREENS.SETTINGS.WALLET_CARD_GET_PHYSICAL.NAME]: undefined;
+    [SCREENS.SETTINGS.WALLET_CARD_GET_PHYSICAL.PHONE]: undefined;
+    [SCREENS.SETTINGS.WALLET_CARD_GET_PHYSICAL.ADDRESS]: undefined;
+    [SCREENS.SETTINGS.WALLET_CARD_GET_PHYSICAL.CONFIRM]: undefined;
+    Settings_Wallet_Transfer_Balance: undefined;
+    Settings_Wallet_Choose_Transfer_Account: undefined;
+    Settings_Wallet_EnablePayments: undefined;
+    Settings_Add_Debit_Card: undefined;
+    Settings_Add_Bank_Account: undefined;
+    [SCREENS.SETTINGS.STATUS]: undefined;
+    Settings_Status_Set: undefined;
+    Workspace_Initial: undefined;
+    Workspace_Settings: undefined;
+    Workspace_Settings_Currency: undefined;
+    Workspace_Card: {
+        policyID: string;
+    };
+    Workspace_Reimburse: {
+        policyID: string;
+    };
+    Workspace_RateAndUnit: undefined;
+    Workspace_Bills: {
+        policyID: string;
+    };
+    Workspace_Invoices: {
+        policyID: string;
+    };
+    Workspace_Travel: {
+        policyID: string;
+    };
+    Workspace_Members: {
+        policyID: string;
+    };
+    Workspace_Invite: {
+        policyID: string;
+    };
+    Workspace_Invite_Message: {
+        policyID: string;
+    };
+    ReimbursementAccount: {
+        stepToOpen: string;
+        policyID: string;
+    };
+    GetAssistance: {
+        taskID: string;
+    };
+    Settings_TwoFactorAuth: undefined;
+    Settings_ReportCardLostOrDamaged: undefined;
+    KeyboardShortcuts: undefined;
+};
+
+type NewChatNavigatorParamList = {
+    NewChat_Root: undefined;
+};
+
+type SearchNavigatorParamList = {
+    Search_Root: undefined;
+};
+
+type DetailsNavigatorParamList = {
+    Details_Root: {
+        login: string;
+        reportID: string;
+    };
+};
+
+type ProfileNavigatorParamList = {
+    Profile_Root: {
+        accountID: string;
+        reportID: string;
+    };
+};
+
+type ReportDetailsNavigatorParamList = {
+    Report_Details_Root: undefined;
+    Report_Details_Share_Code: {
+        reportID: string;
+    };
+};
+
+type ReportSettingsNavigatorParamList = {
+    Report_Settings_Root: undefined;
+    Report_Settings_Room_Name: undefined;
+    Report_Settings_Notification_Preferences: undefined;
+    Report_Settings_Write_Capability: undefined;
+};
+
+type ReportWelcomeMessageNavigatorParamList = {
+    Report_WelcomeMessage_Root: {reportID: string};
+};
+
+type ParticipantsNavigatorParamList = {
+    ReportParticipants_Root: {reportID: string};
+};
+
+type RoomMembersNavigatorParamList = {
+    RoomMembers_Root: undefined;
+};
+
+type RoomInviteNavigatorParamList = {
+    RoomInvite_Root: undefined;
+};
+
+type MoneyRequestNavigatorParamList = {
+    Money_Request: undefined;
+    Money_Request_Amount: undefined;
+    Money_Request_Participants: {
+        iouType: string;
+        reportID: string;
+    };
+    Money_Request_Confirmation: {
+        iouType: string;
+        reportID: string;
+    };
+    Money_Request_Currency: {
+        iouType: string;
+        reportID: string;
+        currency: string;
+        backTo: string;
+    };
+    Money_Request_Date: {
+        iouType: string;
+        reportID: string;
+        field: string;
+        threadReportID: string;
+    };
+    Money_Request_Description: {
+        iouType: string;
+        reportID: string;
+        field: string;
+        threadReportID: string;
+    };
+    Money_Request_Category: {
+        iouType: string;
+        reportID: string;
+    };
+    Money_Request_Tag: {
+        iouType: string;
+        reportID: string;
+    };
+    Money_Request_Merchant: {
+        iouType: string;
+        reportID: string;
+        field: string;
+        threadReportID: string;
+    };
+    IOU_Send_Enable_Payments: undefined;
+    IOU_Send_Add_Bank_Account: undefined;
+    IOU_Send_Add_Debit_Card: undefined;
+    Money_Request_Waypoint: {
+        iouType: string;
+        transactionID: string;
+        waypointIndex: string;
+        threadReportID: number;
+    };
+    Money_Request_Edit_Waypoint: {
+        iouType: string;
+        transactionID: string;
+        waypointIndex: string;
+        threadReportID: number;
+    };
+    Money_Request_Distance: {
+        iouType: ValueOf<typeof CONST.IOU.TYPE>;
+        reportID: string;
+    };
+    Money_Request_Receipt: {
+        iouType: string;
+        reportID: string;
+    };
+};
+
+type NewTaskNavigatorParamList = {
+    NewTask_Root: undefined;
+    NewTask_TaskAssigneeSelector: undefined;
+    NewTask_TaskShareDestinationSelector: undefined;
+    NewTask_Details: undefined;
+    NewTask_Title: undefined;
+    NewTask_Description: undefined;
+};
+
+type TeachersUniteNavigatorParamList = {
+    [SCREENS.SAVE_THE_WORLD.ROOT]: undefined;
+    I_Know_A_Teacher: undefined;
+    Intro_School_Principal: undefined;
+    I_Am_A_Teacher: undefined;
+};
+
+type TaskDetailsNavigatorParamList = {
+    Task_Title: undefined;
+    Task_Description: undefined;
+    Task_Assignee: {
+        reportID: string;
+    };
+};
+
+type EnablePaymentsNavigatorParamList = {
+    EnablePayments_Root: undefined;
+};
+
+type SplitDetailsNavigatorParamList = {
+    SplitDetails_Root: {
+        reportActionID: string;
+    };
+    SplitDetails_Edit_Request: undefined;
+    SplitDetails_Edit_Currency: undefined;
+};
+
+type AddPersonalBankAccountNavigatorParamList = {
+    AddPersonalBankAccount_Root: undefined;
+};
+
+type WalletStatementNavigatorParamList = {
+    WalletStatement_Root: undefined;
+};
+
+type FlagCommentNavigatorParamList = {
+    FlagComment_Root: {
+        reportID: string;
+        reportActionID: string;
+    };
+};
+
+type EditRequestNavigatorParamList = {
+    EditRequest_Root: {
+        field: string;
+        threadReportID: string;
+    };
+    EditRequest_Currency: undefined;
+};
+
+type SignInNavigatorParamList = {
+    SignIn_Root: undefined;
+};
+
+type ReferralDetailsNavigatorParamList = {
+    Referral_Details: undefined;
+};
+
+type PrivateNotesNavigatorParamList = {
+    PrivateNotes_View: {
+        reportID: string;
+        accountID: string;
+    };
+    PrivateNotes_List: {
+        reportID: string;
+        accountID: string;
+    };
+    PrivateNotes_Edit: {
+        reportID: string;
+        accountID: string;
+    };
+};
+
+type RightModalNavigatorParamList = {
+    Settings: NavigatorScreenParams<SettingsNavigatorParamList>;
+    NewChat: NavigatorScreenParams<NewChatNavigatorParamList>;
+    Search: NavigatorScreenParams<SearchNavigatorParamList>;
+    Details: NavigatorScreenParams<DetailsNavigatorParamList>;
+    Profile: NavigatorScreenParams<ProfileNavigatorParamList>;
+    Report_Details: NavigatorScreenParams<ReportDetailsNavigatorParamList>;
+    Report_Settings: NavigatorScreenParams<ReportSettingsNavigatorParamList>;
+    Report_WelcomeMessage: NavigatorScreenParams<ReportWelcomeMessageNavigatorParamList>;
+    Participants: NavigatorScreenParams<ParticipantsNavigatorParamList>;
+    RoomMembers: NavigatorScreenParams<RoomMembersNavigatorParamList>;
+    RoomInvite: NavigatorScreenParams<RoomInviteNavigatorParamList>;
+    MoneyRequest: NavigatorScreenParams<MoneyRequestNavigatorParamList>;
+    NewTask: NavigatorScreenParams<NewTaskNavigatorParamList>;
+    TeachersUnite: NavigatorScreenParams<TeachersUniteNavigatorParamList>;
+    Task_Details: NavigatorScreenParams<TaskDetailsNavigatorParamList>;
+    EnablePayments: NavigatorScreenParams<EnablePaymentsNavigatorParamList>;
+    SplitDetails: NavigatorScreenParams<SplitDetailsNavigatorParamList>;
+    AddPersonalBankAccount: NavigatorScreenParams<AddPersonalBankAccountNavigatorParamList>;
+    Wallet_Statement: NavigatorScreenParams<WalletStatementNavigatorParamList>;
+    Flag_Comment: NavigatorScreenParams<FlagCommentNavigatorParamList>;
+    EditRequest: NavigatorScreenParams<EditRequestNavigatorParamList>;
+    SignIn: NavigatorScreenParams<SignInNavigatorParamList>;
+    Referral: NavigatorScreenParams<ReferralDetailsNavigatorParamList>;
+    Private_Notes: NavigatorScreenParams<PrivateNotesNavigatorParamList>;
+};
+
+type PublicScreensParamList = {
+    [SCREENS.HOME]: undefined;
+    [SCREENS.TRANSITION_BETWEEN_APPS]: {
+        shouldForceLogin: string;
+        email: string;
+        shortLivedAuthToken: string;
+        exitTo: string;
+    };
+    [SCREENS.VALIDATE_LOGIN]: {
+        accountID: string;
+        validateCode: string;
+    };
+    [SCREENS.UNLINK_LOGIN]: {
+        accountID: string;
+        validateCode: string;
+    };
+    [SCREENS.SIGN_IN_WITH_APPLE_DESKTOP]: undefined;
+    [SCREENS.SIGN_IN_WITH_GOOGLE_DESKTOP]: undefined;
+    [SCREENS.SAML_SIGN_IN]: undefined;
+};
+
+type AuthScreensParamList = {
+    [SCREENS.HOME]: undefined;
+    [NAVIGATORS.CENTRAL_PANE_NAVIGATOR]: NavigatorScreenParams<CentralPaneNavigatorParamList>;
+    [SCREENS.VALIDATE_LOGIN]: {
+        accountID: string;
+        validateCode: string;
+    };
+    [SCREENS.TRANSITION_BETWEEN_APPS]: {
+        shouldForceLogin: string;
+        email: string;
+        shortLivedAuthToken: string;
+        exitTo: string;
+    };
+    [SCREENS.CONCIERGE]: undefined;
+    [SCREENS.REPORT_ATTACHMENTS]: {
+        reportID: string;
+        source: string;
+    };
+    [SCREENS.NOT_FOUND]: undefined;
+    [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: NavigatorScreenParams<RightModalNavigatorParamList>;
+    [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: undefined;
+    [CONST.DEMO_PAGES.MONEY2020]: undefined;
+};
+
+type RootStackParamList = PublicScreensParamList & AuthScreensParamList;
+
+export type {NavigationRef, StackNavigationAction, CentralPaneNavigatorParamList, RootStackParamList, StateOrRoute, NavigationStateRoute, NavigationRoot};
diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js
index b97ae6daed11..e3b6ec77380e 100644
--- a/src/libs/OptionsListUtils.js
+++ b/src/libs/OptionsListUtils.js
@@ -397,6 +397,8 @@ function getLastMessageTextForReport(report) {
         lastMessageTextFromReport = ReportUtils.getReportPreviewMessage(iouReport, lastIOUMoneyReport, true, ReportUtils.isChatReport(report));
     } else if (ReportActionUtils.isReimbursementQueuedAction(lastReportAction)) {
         lastMessageTextFromReport = ReportUtils.getReimbursementQueuedActionMessage(lastReportAction, report);
+    } else if (ReportActionUtils.isReimbursementDeQueuedAction(lastReportAction)) {
+        lastMessageTextFromReport = ReportUtils.getReimbursementDeQueuedActionMessage(report);
     } else if (ReportActionUtils.isDeletedParentAction(lastReportAction) && ReportUtils.isChatReport(report)) {
         lastMessageTextFromReport = ReportUtils.getDeletedParentActionMessageForChatReport(lastReportAction);
     } else if (ReportUtils.isReportMessageAttachment({text: report.lastMessageText, html: report.lastMessageHtml, translationKey: report.lastMessageTranslationKey})) {
@@ -910,24 +912,19 @@ function getCategoryListSections(categories, recentlyUsedCategories, selectedOpt
  * @returns {Array<Object>}
  */
 function getTagsOptions(tags) {
-    return _.map(tags, (tag) => {
-        // This is to remove unnecessary escaping backslash in tag name sent from backend.
-        const tagName = tag.name && tag.name.replace(/\\{1,2}:/g, ':');
-
-        return {
-            text: tagName,
-            keyForList: tagName,
-            searchText: tagName,
-            tooltipText: tagName,
-            isDisabled: !tag.enabled,
-        };
-    });
+    return _.map(tags, (tag) => ({
+        text: tag.name,
+        keyForList: tag.name,
+        searchText: tag.name,
+        tooltipText: tag.name,
+        isDisabled: !tag.enabled,
+    }));
 }
 
 /**
  * Build the section list for tags
  *
- * @param {Object[]} tags
+ * @param {Object[]} rawTags
  * @param {String} tags[].name
  * @param {Boolean} tags[].enabled
  * @param {String[]} recentlyUsedTags
@@ -937,8 +934,14 @@ function getTagsOptions(tags) {
  * @param {Number} maxRecentReportsToShow
  * @returns {Array<Object>}
  */
-function getTagListSections(tags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) {
+function getTagListSections(rawTags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) {
     const tagSections = [];
+    const tags = _.map(rawTags, (tag) => {
+        // This is to remove unnecessary escaping backslash in tag name sent from backend.
+        const tagName = tag.name && tag.name.replace(/\\{1,2}:/g, ':');
+
+        return {...tag, name: tagName};
+    });
     const sortedTags = sortTags(tags);
     const enabledTags = _.filter(sortedTags, (tag) => tag.enabled);
     const numberOfTags = _.size(enabledTags);
diff --git a/src/libs/PaymentUtils.ts b/src/libs/PaymentUtils.ts
index 5bd70fee4d83..fc2bfb6d83fb 100644
--- a/src/libs/PaymentUtils.ts
+++ b/src/libs/PaymentUtils.ts
@@ -1,4 +1,5 @@
 import getBankIcon from '@components/Icon/BankIcons';
+import {ThemeStyles} from '@styles/styles';
 import CONST from '@src/CONST';
 import BankAccount from '@src/types/onyx/BankAccount';
 import Fund from '@src/types/onyx/Fund';
@@ -39,7 +40,7 @@ function getPaymentMethodDescription(accountType: AccountType, account: BankAcco
 /**
  * Get the PaymentMethods list
  */
-function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>): PaymentMethod[] {
+function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fundList: Record<string, Fund>, themeStyles: ThemeStyles): PaymentMethod[] {
     const combinedPaymentMethods: PaymentMethod[] = [];
 
     Object.values(bankAccountList).forEach((bankAccount) => {
@@ -48,7 +49,11 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
             return;
         }
 
-        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(bankAccount?.accountData?.additionalData?.bankName ?? '', false);
+        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({
+            bankName: bankAccount?.accountData?.additionalData?.bankName,
+            isCard: false,
+            themeStyles,
+        });
         combinedPaymentMethods.push({
             ...bankAccount,
             description: getPaymentMethodDescription(bankAccount?.accountType, bankAccount.accountData),
@@ -61,7 +66,7 @@ function formatPaymentMethods(bankAccountList: Record<string, BankAccount>, fund
     });
 
     Object.values(fundList).forEach((card) => {
-        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon(card?.accountData?.bank ?? '', true);
+        const {icon, iconSize, iconHeight, iconWidth, iconStyles} = getBankIcon({bankName: card?.accountData?.bank, isCard: true, themeStyles});
         combinedPaymentMethods.push({
             ...card,
             description: getPaymentMethodDescription(card?.accountType, card.accountData),
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 0c8843b87415..43e7ef9fbbc8 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -1,28 +1,21 @@
+import {OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import Beta from '@src/types/onyx/Beta';
 
-function canUseAllBetas(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.ALL);
+function canUseAllBetas(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.ALL);
 }
 
-function canUseChronos(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.CHRONOS_IN_CASH) || canUseAllBetas(betas);
+function canUseChronos(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.CHRONOS_IN_CASH) || canUseAllBetas(betas);
 }
 
-function canUsePayWithExpensify(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.PAY_WITH_EXPENSIFY) || canUseAllBetas(betas);
+function canUseDefaultRooms(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.DEFAULT_ROOMS) || canUseAllBetas(betas);
 }
 
-function canUseDefaultRooms(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.DEFAULT_ROOMS) || canUseAllBetas(betas);
-}
-
-function canUseWallet(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.BETA_EXPENSIFY_WALLET) || canUseAllBetas(betas);
-}
-
-function canUseCommentLinking(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.BETA_COMMENT_LINKING) || canUseAllBetas(betas);
+function canUseCommentLinking(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.BETA_COMMENT_LINKING) || canUseAllBetas(betas);
 }
 
 /**
@@ -30,20 +23,12 @@ function canUseCommentLinking(betas: Beta[]): boolean {
  * since contributors have been reporting a number of false issues related to the feature being under development.
  * See https://expensify.slack.com/archives/C01GTK53T8Q/p1641921996319400?thread_ts=1641598356.166900&cid=C01GTK53T8Q
  */
-function canUsePolicyRooms(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.POLICY_ROOMS) || canUseAllBetas(betas);
-}
-
-function canUseTasks(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.TASKS) || canUseAllBetas(betas);
-}
-
-function canUseCustomStatus(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.CUSTOM_STATUS) || canUseAllBetas(betas);
+function canUsePolicyRooms(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.POLICY_ROOMS) || canUseAllBetas(betas);
 }
 
-function canUseViolations(betas: Beta[]): boolean {
-    return betas?.includes(CONST.BETAS.VIOLATIONS) || canUseAllBetas(betas);
+function canUseViolations(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.VIOLATIONS) || canUseAllBetas(betas);
 }
 
 /**
@@ -55,13 +40,9 @@ function canUseLinkPreviews(): boolean {
 
 export default {
     canUseChronos,
-    canUsePayWithExpensify,
     canUseDefaultRooms,
-    canUseWallet,
     canUseCommentLinking,
     canUsePolicyRooms,
-    canUseTasks,
-    canUseCustomStatus,
     canUseLinkPreviews,
     canUseViolations,
 };
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index 62640a11311a..19129959d016 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -2,7 +2,8 @@ import Str from 'expensify-common/lib/str';
 import {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {PersonalDetails, Policy, PolicyMembers, PolicyTags} from '@src/types/onyx';
+import {PersonalDetails, Policy, PolicyMembers, PolicyTag, PolicyTags} from '@src/types/onyx';
+import {EmptyObject, isEmptyObject} from '@src/types/utils/EmptyObject';
 
 type MemberEmailsToAccountIDs = Record<string, number>;
 type PersonalDetailsList = Record<string, PersonalDetails>;
@@ -157,8 +158,8 @@ function getIneligibleInvitees(policyMembers: OnyxEntry<PolicyMembers>, personal
 /**
  * Gets the tag from policy tags, defaults to the first if no key is provided.
  */
-function getTag(policyTags: OnyxEntry<PolicyTags>, tagKey?: keyof typeof policyTags) {
-    if (Object.keys(policyTags ?? {})?.length === 0) {
+function getTag(policyTags: OnyxEntry<PolicyTags>, tagKey?: keyof typeof policyTags): PolicyTag | undefined | EmptyObject {
+    if (isEmptyObject(policyTags)) {
         return {};
     }
 
diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts
index 333d621167b7..f58021e17064 100644
--- a/src/libs/ReportActionsUtils.ts
+++ b/src/libs/ReportActionsUtils.ts
@@ -8,6 +8,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import {ActionName} from '@src/types/onyx/OriginalMessage';
 import Report from '@src/types/onyx/Report';
 import ReportAction, {ReportActions} from '@src/types/onyx/ReportAction';
+import {EmptyObject, isEmptyObject} from '@src/types/utils/EmptyObject';
 import * as CollectionUtils from './CollectionUtils';
 import * as Environment from './Environment/Environment';
 import isReportMessageAttachment from './isReportMessageAttachment';
@@ -72,7 +73,10 @@ function isReversedTransaction(reportAction: OnyxEntry<ReportAction>) {
     return (reportAction?.message?.[0]?.isReversedTransaction ?? false) && (reportAction?.childVisibleActionCount ?? 0) > 0;
 }
 
-function isPendingRemove(reportAction: OnyxEntry<ReportAction>): boolean {
+function isPendingRemove(reportAction: OnyxEntry<ReportAction> | EmptyObject): boolean {
+    if (isEmptyObject(reportAction)) {
+        return false;
+    }
     return reportAction?.message?.[0]?.moderationDecision?.decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_REMOVE;
 }
 
@@ -105,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
  */
@@ -694,4 +702,7 @@ export {
     hasRequestFromCurrentAccount,
     getFirstVisibleReportActionID,
     isChannelLogMemberAction,
+    isReimbursementDeQueuedAction,
 };
+
+export type {LastVisibleMessage};
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.ts
similarity index 55%
rename from src/libs/ReportUtils.js
rename to src/libs/ReportUtils.ts
index 2e91a93af7e1..f6c3090143f4 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.ts
@@ -1,16 +1,27 @@
-/* eslint-disable rulesdir/prefer-underscore-method */
 import {format} from 'date-fns';
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
+import {isEmpty} from 'lodash';
+import lodashEscape from 'lodash/escape';
+import lodashFindLastIndex from 'lodash/findLastIndex';
 import lodashIntersection from 'lodash/intersection';
-import Onyx from 'react-native-onyx';
-import _ from 'underscore';
+import lodashIsEqual from 'lodash/isEqual';
+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 ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+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';
+import {Receipt, WaypointCollection} from '@src/types/onyx/Transaction';
+import DeepValueOf from '@src/types/utils/DeepValueOf';
+import {EmptyObject, isEmptyObject, isNotEmptyObject} from '@src/types/utils/EmptyObject';
 import * as CurrencyUtils from './CurrencyUtils';
 import DateUtils from './DateUtils';
 import isReportMessageAttachment from './isReportMessageAttachment';
@@ -22,66 +33,376 @@ import * as NumberUtils from './NumberUtils';
 import Permissions from './Permissions';
 import * as PolicyUtils from './PolicyUtils';
 import * as ReportActionsUtils from './ReportActionsUtils';
+import {LastVisibleMessage} from './ReportActionsUtils';
 import * as TransactionUtils from './TransactionUtils';
 import * as Url from './Url';
 import * as UserUtils from './UserUtils';
 
-let currentUserEmail;
-let currentUserAccountID;
-let isAnonymousUser;
+type WelcomeMessage = {showReportName: boolean; phrase1?: string; phrase2?: string};
+
+type ExpenseOriginalMessage = {
+    oldComment?: string;
+    newComment?: string;
+    comment?: string;
+    merchant?: string;
+    oldCreated?: string;
+    created?: string;
+    oldMerchant?: string;
+    oldAmount?: number;
+    amount?: number;
+    oldCurrency?: string;
+    currency?: string;
+    category?: string;
+    oldCategory?: string;
+    tag?: string;
+    oldTag?: string;
+    billable?: string;
+    oldBillable?: string;
+};
+
+type Participant = {
+    accountID: number;
+    alternateText: string;
+    firstName: string;
+    icons: Icon[];
+    keyForList: string;
+    lastName: string;
+    login: string;
+    phoneNumber: string;
+    searchText: string;
+    selected: boolean;
+    text: string;
+};
+
+type SpendBreakdown = {
+    nonReimbursableSpend: number;
+    reimbursableSpend: number;
+    totalDisplaySpend: number;
+};
+
+type ParticipantDetails = [number, string, UserUtils.AvatarSource, UserUtils.AvatarSource];
+
+type ReportAndWorkspaceName = {
+    rootReportName: string;
+    workspaceName?: string;
+};
+
+type OptimisticReportAction = {
+    commentText: string;
+    reportAction: Partial<ReportAction>;
+};
+
+type UpdateOptimisticParentReportAction = {
+    childVisibleActionCount: number;
+    childCommenterCount: number;
+    childLastVisibleActionCreated: string;
+    childOldestFourAccountIDs: string | undefined;
+};
+
+type OptimisticExpenseReport = Pick<
+    Report,
+    | 'reportID'
+    | 'chatReportID'
+    | 'policyID'
+    | 'type'
+    | 'ownerAccountID'
+    | 'hasOutstandingIOU'
+    | 'currency'
+    | 'reportName'
+    | 'state'
+    | 'stateNum'
+    | 'statusNum'
+    | 'total'
+    | 'notificationPreference'
+    | 'parentReportID'
+>;
+
+type OptimisticIOUReportAction = Pick<
+    ReportAction,
+    | 'actionName'
+    | 'actorAccountID'
+    | 'automatic'
+    | 'avatar'
+    | 'isAttachment'
+    | 'originalMessage'
+    | 'message'
+    | 'person'
+    | 'reportActionID'
+    | 'shouldShow'
+    | 'created'
+    | 'pendingAction'
+    | 'receipt'
+    | 'whisperedToAccountIDs'
+>;
+
+type OptimisticReportPreview = Pick<
+    ReportAction,
+    | 'actionName'
+    | 'reportActionID'
+    | 'pendingAction'
+    | 'originalMessage'
+    | 'message'
+    | 'created'
+    | 'actorAccountID'
+    | 'childMoneyRequestCount'
+    | 'childLastMoneyRequestComment'
+    | 'childRecentReceiptTransactionIDs'
+    | 'whisperedToAccountIDs'
+> & {reportID?: string; accountID?: number};
+
+type UpdateReportPreview = Pick<
+    ReportAction,
+    'created' | 'message' | 'childLastMoneyRequestComment' | 'childMoneyRequestCount' | 'childRecentReceiptTransactionIDs' | 'whisperedToAccountIDs'
+>;
+
+type ReportRouteParams = {
+    reportID: string;
+    isSubReportPageRoute: boolean;
+};
+
+type ReportOfflinePendingActionAndErrors = {
+    addWorkspaceRoomOrChatPendingAction: PendingAction | undefined;
+    addWorkspaceRoomOrChatErrors: Record<string, string> | null | undefined;
+};
+
+type OptimisticApprovedReportAction = Pick<
+    ReportAction,
+    'actionName' | 'actorAccountID' | 'automatic' | 'avatar' | 'isAttachment' | 'originalMessage' | 'message' | 'person' | 'reportActionID' | 'shouldShow' | 'created' | 'pendingAction'
+>;
+
+type OptimisticSubmittedReportAction = Pick<
+    ReportAction,
+    'actionName' | 'actorAccountID' | 'automatic' | 'avatar' | 'isAttachment' | 'originalMessage' | 'message' | 'person' | 'reportActionID' | 'shouldShow' | 'created' | 'pendingAction'
+>;
+
+type OptimisticEditedTaskReportAction = Pick<
+    ReportAction,
+    'reportActionID' | 'actionName' | 'pendingAction' | 'actorAccountID' | 'automatic' | 'avatar' | 'created' | 'shouldShow' | 'message' | 'person'
+>;
+
+type OptimisticClosedReportAction = Pick<
+    ReportAction,
+    'actionName' | 'actorAccountID' | 'automatic' | 'avatar' | 'created' | 'message' | 'originalMessage' | 'pendingAction' | 'person' | 'reportActionID' | 'shouldShow'
+>;
+
+type OptimisticCreatedReportAction = Pick<
+    ReportAction,
+    'actionName' | 'actorAccountID' | 'automatic' | 'avatar' | 'created' | 'message' | 'person' | 'reportActionID' | 'shouldShow' | 'pendingAction'
+>;
+
+type OptimisticChatReport = Pick<
+    Report,
+    | 'type'
+    | 'chatType'
+    | 'hasOutstandingIOU'
+    | 'isOwnPolicyExpenseChat'
+    | 'isPinned'
+    | 'lastActorAccountID'
+    | 'lastMessageTranslationKey'
+    | 'lastMessageHtml'
+    | 'lastMessageText'
+    | 'lastReadTime'
+    | 'lastVisibleActionCreated'
+    | 'notificationPreference'
+    | 'oldPolicyName'
+    | 'ownerAccountID'
+    | 'parentReportActionID'
+    | 'parentReportID'
+    | 'participantAccountIDs'
+    | 'policyID'
+    | 'reportID'
+    | 'reportName'
+    | 'stateNum'
+    | 'statusNum'
+    | 'visibility'
+    | 'welcomeMessage'
+    | 'writeCapability'
+>;
+
+type OptimisticTaskReportAction = Pick<
+    ReportAction,
+    | 'actionName'
+    | 'actorAccountID'
+    | 'automatic'
+    | 'avatar'
+    | 'created'
+    | 'isAttachment'
+    | 'message'
+    | 'originalMessage'
+    | 'person'
+    | 'pendingAction'
+    | 'reportActionID'
+    | 'shouldShow'
+    | 'isFirstItem'
+>;
+
+type OptimisticWorkspaceChats = {
+    announceChatReportID: string;
+    announceChatData: OptimisticChatReport;
+    announceReportActionData: Record<string, OptimisticCreatedReportAction>;
+    announceCreatedReportActionID: string;
+    adminsChatReportID: string;
+    adminsChatData: OptimisticChatReport;
+    adminsReportActionData: Record<string, OptimisticCreatedReportAction>;
+    adminsCreatedReportActionID: string;
+    expenseChatReportID: string;
+    expenseChatData: OptimisticChatReport;
+    expenseReportActionData: Record<string, OptimisticCreatedReportAction>;
+    expenseCreatedReportActionID: string;
+};
+
+type OptimisticModifiedExpenseReportAction = Pick<
+    ReportAction,
+    'actionName' | 'actorAccountID' | 'automatic' | 'avatar' | 'created' | 'isAttachment' | 'message' | 'originalMessage' | 'person' | 'pendingAction' | 'reportActionID' | 'shouldShow'
+> & {reportID?: string};
+
+type OptimisticTaskReport = Pick<
+    Report,
+    | 'reportID'
+    | 'reportName'
+    | 'description'
+    | 'ownerAccountID'
+    | 'participantAccountIDs'
+    | 'managerID'
+    | 'type'
+    | 'parentReportID'
+    | 'policyID'
+    | 'stateNum'
+    | 'statusNum'
+    | 'notificationPreference'
+>;
+
+type TransactionDetails =
+    | {
+          created: string;
+          amount: number;
+          currency: string;
+          merchant: string;
+          waypoints?: WaypointCollection;
+          comment: string;
+          category: string;
+          billable: boolean;
+          tag: string;
+          mccGroup?: ValueOf<typeof CONST.MCC_GROUPS>;
+          cardID: number;
+          originalAmount: number;
+          originalCurrency: string;
+      }
+    | undefined;
+
+type OptimisticIOUReport = Pick<
+    Report,
+    | 'cachedTotal'
+    | 'hasOutstandingIOU'
+    | 'type'
+    | 'chatReportID'
+    | 'currency'
+    | 'managerID'
+    | 'ownerAccountID'
+    | 'participantAccountIDs'
+    | 'reportID'
+    | 'state'
+    | 'stateNum'
+    | 'total'
+    | 'reportName'
+    | 'notificationPreference'
+    | 'parentReportID'
+    | 'statusNum'
+>;
+type DisplayNameWithTooltips = Array<Pick<PersonalDetails, 'accountID' | 'pronouns' | 'displayName' | 'login' | 'avatar'>>;
+
+type OptionData = {
+    alternateText?: string | null;
+    pendingAction?: PendingAction | null;
+    allReportErrors?: Errors | null;
+    brickRoadIndicator?: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | '' | null;
+    tooltipText?: string | null;
+    subtitle?: string | null;
+    login?: string | null;
+    accountID?: number | null;
+    status?: string | null;
+    phoneNumber?: string | null;
+    isUnread?: boolean | null;
+    isUnreadWithMention?: boolean | null;
+    hasDraftComment?: boolean | null;
+    keyForList?: string | null;
+    searchText?: string | null;
+    isIOUReportOwner?: boolean | null;
+    isArchivedRoom?: boolean | null;
+    shouldShowSubscript?: boolean | null;
+    isPolicyExpenseChat?: boolean | null;
+    isMoneyRequestReport?: boolean | null;
+    isExpenseRequest?: boolean | null;
+    isAllowedToComment?: boolean | null;
+    isThread?: boolean | null;
+    isTaskReport?: boolean | null;
+    parentReportAction?: ReportAction;
+    displayNamesWithTooltips?: DisplayNameWithTooltips | null;
+} & Report;
+
+type OnyxDataTaskAssigneeChat = {
+    optimisticData: OnyxUpdate[];
+    successData: OnyxUpdate[];
+    failureData: OnyxUpdate[];
+    optimisticAssigneeAddComment?: OptimisticReportAction;
+    optimisticChatCreatedReportAction?: OptimisticCreatedReportAction;
+};
+
+let currentUserEmail: string | undefined;
+let currentUserAccountID: number | undefined;
+let isAnonymousUser = false;
 
 Onyx.connect({
     key: ONYXKEYS.SESSION,
-    callback: (val) => {
+    callback: (value) => {
         // When signed out, val is undefined
-        if (!val) {
+        if (!value) {
             return;
         }
 
-        currentUserEmail = val.email;
-        currentUserAccountID = val.accountID;
-        isAnonymousUser = val.authTokenType === 'anonymousAccount';
+        currentUserEmail = value.email;
+        currentUserAccountID = value.accountID;
+        isAnonymousUser = value.authTokenType === 'anonymousAccount';
     },
 });
 
-let allPersonalDetails;
-let currentUserPersonalDetails;
+let allPersonalDetails: OnyxCollection<PersonalDetails>;
+let currentUserPersonalDetails: OnyxEntry<PersonalDetails>;
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    callback: (val) => {
-        currentUserPersonalDetails = lodashGet(val, currentUserAccountID, {});
-        allPersonalDetails = val || {};
+    callback: (value) => {
+        currentUserPersonalDetails = value?.[currentUserAccountID ?? -1] ?? null;
+        allPersonalDetails = value ?? {};
     },
 });
 
-let allReports;
+let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
-    callback: (val) => (allReports = val),
+    callback: (value) => (allReports = value),
 });
 
-let doesDomainHaveApprovedAccountant;
+let doesDomainHaveApprovedAccountant = false;
 Onyx.connect({
     key: ONYXKEYS.ACCOUNT,
-    waitForCollectionCallback: true,
-    callback: (val) => (doesDomainHaveApprovedAccountant = lodashGet(val, 'doesDomainHaveApprovedAccountant', false)),
+    callback: (value) => (doesDomainHaveApprovedAccountant = value?.doesDomainHaveApprovedAccountant ?? false),
 });
 
-let allPolicies;
+let allPolicies: OnyxCollection<Policy>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
     waitForCollectionCallback: true,
-    callback: (val) => (allPolicies = val),
+    callback: (value) => (allPolicies = value),
 });
 
-let loginList;
+let loginList: OnyxEntry<Login>;
 Onyx.connect({
     key: ONYXKEYS.LOGIN_LIST,
-    callback: (val) => (loginList = val),
+    callback: (value) => (loginList = value),
 });
 
-let allPolicyTags = {};
+let allPolicyTags: Record<string, PolicyTags | null> = {};
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY_TAGS,
@@ -96,119 +417,85 @@ Onyx.connect({
     },
 });
 
-function getPolicyTags(policyID) {
-    return lodashGet(allPolicyTags, `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {});
+function getPolicyTags(policyID: string) {
+    return allPolicyTags[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {};
 }
 
-function getChatType(report) {
-    return report ? report.chatType : '';
+function getChatType(report: OnyxEntry<Report>): ValueOf<typeof CONST.REPORT.CHAT_TYPE> | undefined {
+    return report?.chatType;
 }
 
-/**
- * @param {String} policyID
- * @returns {Object}
- */
-function getPolicy(policyID) {
+function getPolicy(policyID: string): Policy | EmptyObject {
     if (!allPolicies || !policyID) {
         return {};
     }
-    return allPolicies[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`] || {};
+    return allPolicies[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`] ?? {};
 }
 
 /**
  * Get the policy type from a given report
- * @param {Object} report
- * @param {String} report.policyID
- * @param {Object} policies must have Onyxkey prefix (i.e 'policy_') for keys
- * @returns {String}
+ * @param policies must have Onyxkey prefix (i.e 'policy_') for keys
  */
-function getPolicyType(report, policies) {
-    return lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'type'], '');
+function getPolicyType(report: OnyxEntry<Report>, policies: OnyxCollection<Policy>): string {
+    return policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.type ?? '';
 }
 
 /**
  * Get the policy name from a given report
- * @param {Object} report
- * @param {String} [report.policyID]
- * @param {String} [report.oldPolicyName]
- * @param {String} [report.policyName]
- * @param {Boolean} [returnEmptyIfNotFound]
- * @param {Object} [policy]
- * @returns {String}
- */
-function getPolicyName(report, returnEmptyIfNotFound = false, policy = undefined) {
+ */
+function getPolicyName(report: OnyxEntry<Report> | undefined | EmptyObject, returnEmptyIfNotFound = false, policy: OnyxEntry<Policy> | undefined = undefined): string {
     const noPolicyFound = returnEmptyIfNotFound ? '' : Localize.translateLocal('workspace.common.unavailable');
-    if (_.isEmpty(report)) {
+    if (isEmptyObject(report)) {
         return noPolicyFound;
     }
 
-    if ((!allPolicies || _.size(allPolicies) === 0) && !report.policyName) {
+    if ((!allPolicies || Object.keys(allPolicies).length === 0) && !report?.policyName) {
         return Localize.translateLocal('workspace.common.unavailable');
     }
-    const finalPolicy = policy || _.get(allPolicies, `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`);
+    const finalPolicy = policy ?? allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];
 
     // Public rooms send back the policy name with the reportSummary,
     // since they can also be accessed by people who aren't in the workspace
-    const policyName = lodashGet(finalPolicy, 'name') || report.policyName || report.oldPolicyName || noPolicyFound;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const policyName = finalPolicy?.name || report?.policyName || report?.oldPolicyName || noPolicyFound;
 
     return policyName;
 }
 
 /**
  * Returns the concatenated title for the PrimaryLogins of a report
- *
- * @param {Array} accountIDs
- * @returns {string}
  */
-function getReportParticipantsTitle(accountIDs) {
-    return (
-        _.chain(accountIDs)
-
-            // Somehow it's possible for the logins coming from report.participantAccountIDs to contain undefined values so we use compact to remove them.
-            .compact()
-            .value()
-            .join(', ')
-    );
+function getReportParticipantsTitle(accountIDs: number[]): string {
+    // Somehow it's possible for the logins coming from report.participantAccountIDs to contain undefined values so we use .filter(Boolean) to remove them.
+    return accountIDs.filter(Boolean).join(', ');
 }
 
 /**
  * Checks if a report is a chat report.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isChatReport(report) {
-    return report && report.type === CONST.REPORT.TYPE.CHAT;
+function isChatReport(report: OnyxEntry<Report>): boolean {
+    return report?.type === CONST.REPORT.TYPE.CHAT;
 }
 
 /**
  * Checks if a report is an Expense report.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isExpenseReport(report) {
-    return report && report.type === CONST.REPORT.TYPE.EXPENSE;
+function isExpenseReport(report: OnyxEntry<Report> | EmptyObject): boolean {
+    return report?.type === CONST.REPORT.TYPE.EXPENSE;
 }
 
 /**
  * Checks if a report is an IOU report.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isIOUReport(report) {
-    return report && report.type === CONST.REPORT.TYPE.IOU;
+function isIOUReport(report: OnyxEntry<Report>): boolean {
+    return report?.type === CONST.REPORT.TYPE.IOU;
 }
 
 /**
  * Checks if a report is a task report.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isTaskReport(report) {
-    return report && report.type === CONST.REPORT.TYPE.TASK;
+function isTaskReport(report: OnyxEntry<Report>): boolean {
+    return report?.type === CONST.REPORT.TYPE.TASK;
 }
 
 /**
@@ -217,17 +504,13 @@ function isTaskReport(report) {
  * This is because when you delete a task, we still allow you to chat on the report itself
  * There's another situation where you don't have access to the parentReportAction (because it was created in a chat you don't have access to)
  * In this case, we have added the key to the report itself
- *
- * @param {Object} report
- * @param {Object} parentReportAction
- * @returns {Boolean}
  */
-function isCanceledTaskReport(report = {}, parentReportAction = {}) {
-    if (!_.isEmpty(parentReportAction) && lodashGet(parentReportAction, ['message', 0, 'isDeletedParentAction'], false)) {
+function isCanceledTaskReport(report: OnyxEntry<Report> | EmptyObject = {}, parentReportAction: OnyxEntry<ReportAction> | EmptyObject = {}): boolean {
+    if (isNotEmptyObject(parentReportAction) && (parentReportAction?.message?.[0]?.isDeletedParentAction ?? false)) {
         return true;
     }
 
-    if (!_.isEmpty(report) && report.isDeletedParentAction) {
+    if (isNotEmptyObject(report) && report?.isDeletedParentAction) {
         return true;
     }
 
@@ -237,70 +520,63 @@ function isCanceledTaskReport(report = {}, parentReportAction = {}) {
 /**
  * Checks if a report is an open task report.
  *
- * @param {Object} report
- * @param {Object} parentReportAction - The parent report action of the report (Used to check if the task has been canceled)
- * @returns {Boolean}
+ * @param parentReportAction - The parent report action of the report (Used to check if the task has been canceled)
  */
-function isOpenTaskReport(report, parentReportAction = {}) {
-    return isTaskReport(report) && !isCanceledTaskReport(report, parentReportAction) && report.stateNum === CONST.REPORT.STATE_NUM.OPEN && report.statusNum === CONST.REPORT.STATUS.OPEN;
+function isOpenTaskReport(report: OnyxEntry<Report>, parentReportAction: OnyxEntry<ReportAction> | EmptyObject = {}): boolean {
+    return isTaskReport(report) && !isCanceledTaskReport(report, parentReportAction) && report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS.OPEN;
 }
 
 /**
  * Checks if a report is a completed task report.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isCompletedTaskReport(report) {
-    return isTaskReport(report) && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS.APPROVED;
+function isCompletedTaskReport(report: OnyxEntry<Report>): boolean {
+    return isTaskReport(report) && report?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report?.statusNum === CONST.REPORT.STATUS.APPROVED;
 }
 
 /**
  * Checks if the current user is the manager of the supplied report
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isReportManager(report) {
-    return report && report.managerID === currentUserAccountID;
+function isReportManager(report: OnyxEntry<Report>): boolean {
+    return Boolean(report && report.managerID === currentUserAccountID);
 }
 
 /**
  * Checks if the supplied report has been approved
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isReportApproved(report) {
-    return report && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report.statusNum === CONST.REPORT.STATUS.APPROVED;
+function isReportApproved(report: OnyxEntry<Report>): boolean {
+    return report?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && report?.statusNum === CONST.REPORT.STATUS.APPROVED;
+}
+
+/**
+ * Checks if the supplied report is an expense report in Open state and status.
+ */
+function isDraftExpenseReport(report: OnyxEntry<Report>): boolean {
+    return isExpenseReport(report) && report?.stateNum === CONST.REPORT.STATE_NUM.OPEN && report?.statusNum === CONST.REPORT.STATUS.OPEN;
 }
 
 /**
  * Given a collection of reports returns them sorted by last read
- *
- * @param {Object} reports
- * @returns {Array}
  */
-function sortReportsByLastRead(reports) {
-    return _.chain(reports)
-        .toArray()
-        .filter((report) => report && report.reportID && report.lastReadTime)
-        .sortBy('lastReadTime')
-        .value();
+function sortReportsByLastRead(reports: OnyxCollection<Report>): Array<OnyxEntry<Report>> {
+    return Object.values(reports ?? {})
+        .filter((report) => !!report?.reportID && !!report?.lastReadTime)
+        .sort((a, b) => {
+            const aTime = new Date(a?.lastReadTime ?? '');
+            const bTime = new Date(b?.lastReadTime ?? '');
+
+            return aTime.valueOf() - bTime.valueOf();
+        });
 }
 
 /**
  * Whether the Money Request report is settled
- *
- * @param {String} reportID
- * @returns {Boolean}
  */
-function isSettled(reportID) {
+function isSettled(reportID: string | undefined): boolean {
     if (!allReports) {
         return false;
     }
-    const report = allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] || {};
-    if ((typeof report === 'object' && Object.keys(report).length === 0) || report.isWaitingOnBankAccount) {
+    const report: Report | EmptyObject = allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] ?? {};
+    if (isEmptyObject(report) || report.isWaitingOnBankAccount) {
         return false;
     }
 
@@ -310,221 +586,159 @@ function isSettled(reportID) {
         return true;
     }
 
-    return report.statusNum === CONST.REPORT.STATUS.REIMBURSED;
+    return report?.statusNum === CONST.REPORT.STATUS.REIMBURSED;
 }
 
 /**
  * Whether the current user is the submitter of the report
- *
- * @param {String} reportID
- * @returns {Boolean}
  */
-function isCurrentUserSubmitter(reportID) {
+function isCurrentUserSubmitter(reportID: string): boolean {
     if (!allReports) {
         return false;
     }
-    const report = allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`] || {};
-    return report && report.ownerAccountID === currentUserAccountID;
+    const report = allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
+    return Boolean(report && report.ownerAccountID === currentUserAccountID);
 }
 
 /**
  * Whether the provided report is an Admin room
- * @param {Object} report
- * @param {String} report.chatType
- * @returns {Boolean}
  */
-function isAdminRoom(report) {
+function isAdminRoom(report: OnyxEntry<Report>): boolean {
     return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS;
 }
 
 /**
  * Whether the provided report is an Admin-only posting room
- * @param {Object} report
- * @param {String} report.writeCapability
- * @returns {Boolean}
  */
-function isAdminsOnlyPostingRoom(report) {
-    return lodashGet(report, 'writeCapability', CONST.REPORT.WRITE_CAPABILITIES.ALL) === CONST.REPORT.WRITE_CAPABILITIES.ADMINS;
+function isAdminsOnlyPostingRoom(report: OnyxEntry<Report>): boolean {
+    return report?.writeCapability === CONST.REPORT.WRITE_CAPABILITIES.ADMINS;
 }
 
 /**
  * Whether the provided report is a Announce room
- * @param {Object} report
- * @param {String} report.chatType
- * @returns {Boolean}
  */
-function isAnnounceRoom(report) {
+function isAnnounceRoom(report: OnyxEntry<Report>): boolean {
     return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE;
 }
 
 /**
  * Whether the provided report is a default room
- * @param {Object} report
- * @param {String} report.chatType
- * @returns {Boolean}
  */
-function isDefaultRoom(report) {
-    return [CONST.REPORT.CHAT_TYPE.POLICY_ADMINS, CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE, CONST.REPORT.CHAT_TYPE.DOMAIN_ALL].indexOf(getChatType(report)) > -1;
+function isDefaultRoom(report: OnyxEntry<Report>): boolean {
+    return [CONST.REPORT.CHAT_TYPE.POLICY_ADMINS, CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE, CONST.REPORT.CHAT_TYPE.DOMAIN_ALL].some((type) => type === getChatType(report));
 }
 
 /**
  * Whether the provided report is a Domain room
- * @param {Object} report
- * @param {String} report.chatType
- * @returns {Boolean}
  */
-function isDomainRoom(report) {
+function isDomainRoom(report: OnyxEntry<Report>): boolean {
     return getChatType(report) === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL;
 }
 
 /**
  * Whether the provided report is a user created policy room
- * @param {Object} report
- * @param {String} report.chatType
- * @returns {Boolean}
  */
-function isUserCreatedPolicyRoom(report) {
+function isUserCreatedPolicyRoom(report: OnyxEntry<Report>): boolean {
     return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_ROOM;
 }
 
 /**
  * Whether the provided report is a Policy Expense chat.
- * @param {Object} report
- * @param {String} [report.chatType]
- * @returns {Boolean}
  */
-function isPolicyExpenseChat(report) {
+function isPolicyExpenseChat(report: OnyxEntry<Report>): boolean {
     return getChatType(report) === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT;
 }
 
 /** Wether the provided report belongs to a Control policy and is an epxense chat
- * @param {Object} report
- * @returns {Boolean}
  */
-function isControlPolicyExpenseChat(report) {
+function isControlPolicyExpenseChat(report: OnyxEntry<Report>): boolean {
     return isPolicyExpenseChat(report) && getPolicyType(report, allPolicies) === CONST.POLICY.TYPE.CORPORATE;
 }
 
 /** Wether the provided report belongs to a Control policy and is an epxense report
- * @param {Object} report
- * @returns {Boolean}
  */
-function isControlPolicyExpenseReport(report) {
+function isControlPolicyExpenseReport(report: OnyxEntry<Report>): boolean {
     return isExpenseReport(report) && getPolicyType(report, allPolicies) === CONST.POLICY.TYPE.CORPORATE;
 }
 
 /**
  * Whether the provided report is a chat room
- * @param {Object} report
- * @param {String} [report.chatType]
- * @returns {Boolean}
  */
-function isChatRoom(report) {
+function isChatRoom(report: OnyxEntry<Report>): boolean {
     return isUserCreatedPolicyRoom(report) || isDefaultRoom(report);
 }
 
 /**
  * Whether the provided report is a public room
- * @param {Object} report
- * @param {String} report.visibility
- * @returns {Boolean}
  */
-function isPublicRoom(report) {
-    return report && (report.visibility === CONST.REPORT.VISIBILITY.PUBLIC || report.visibility === CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE);
+function isPublicRoom(report: OnyxEntry<Report>): boolean {
+    return report?.visibility === CONST.REPORT.VISIBILITY.PUBLIC || report?.visibility === CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE;
 }
 
 /**
  * Whether the provided report is a public announce room
- * @param {Object} report
- * @param {String} report.visibility
- * @returns {Boolean}
  */
-function isPublicAnnounceRoom(report) {
-    return report && report.visibility === CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE;
+function isPublicAnnounceRoom(report: OnyxEntry<Report>): boolean {
+    return report?.visibility === CONST.REPORT.VISIBILITY.PUBLIC_ANNOUNCE;
 }
 
 /**
  * If the report is a policy expense, the route should be for adding bank account for that policy
  * else since the report is a personal IOU, the route should be for personal bank account.
- * @param {Object} report
- * @returns {String}
  */
-function getBankAccountRoute(report) {
-    return isPolicyExpenseChat(report) ? ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', report.policyID) : ROUTES.SETTINGS_ADD_BANK_ACCOUNT;
+function getBankAccountRoute(report: OnyxEntry<Report>): string {
+    return isPolicyExpenseChat(report) ? ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', report?.policyID) : ROUTES.SETTINGS_ADD_BANK_ACCOUNT;
 }
 
 /**
  * Check if personal detail of accountID is empty or optimistic data
- * @param {String} accountID user accountID
- * @returns {Boolean}
  */
-function isOptimisticPersonalDetail(accountID) {
-    return _.isEmpty(allPersonalDetails[accountID]) || !!allPersonalDetails[accountID].isOptimisticPersonalDetail;
+function isOptimisticPersonalDetail(accountID: number): boolean {
+    return isEmptyObject(allPersonalDetails?.[accountID]) || !!allPersonalDetails?.[accountID]?.isOptimisticPersonalDetail;
 }
 
 /**
  * Checks if a report is a task report from a policy expense chat.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isWorkspaceTaskReport(report) {
+function isWorkspaceTaskReport(report: OnyxEntry<Report>): boolean {
     if (!isTaskReport(report)) {
         return false;
     }
-    const parentReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`];
+    const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
     return isPolicyExpenseChat(parentReport);
 }
 
 /**
  * Returns true if report has a parent
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isThread(report) {
-    return Boolean(report && report.parentReportID && report.parentReportActionID);
+function isThread(report: OnyxEntry<Report>): boolean {
+    return Boolean(report?.parentReportID && report?.parentReportActionID);
 }
 
 /**
  * Returns true if report is of type chat and has a parent and is therefore a Thread.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isChatThread(report) {
-    return isThread(report) && report.type === CONST.REPORT.TYPE.CHAT;
+function isChatThread(report: OnyxEntry<Report>): boolean {
+    return isThread(report) && report?.type === CONST.REPORT.TYPE.CHAT;
 }
 
-/**
- * Returns true if report is a DM/Group DM chat.
- *
- * @param {Object} report
- * @returns {Boolean}
- */
-function isDM(report) {
+function isDM(report: OnyxEntry<Report>): boolean {
     return isChatReport(report) && !getChatType(report);
 }
 
 /**
  * Only returns true if this is our main 1:1 DM report with Concierge
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isConciergeChatReport(report) {
-    return lodashGet(report, 'participantAccountIDs', []).length === 1 && Number(report.participantAccountIDs[0]) === CONST.ACCOUNT_ID.CONCIERGE && !isChatThread(report);
+function isConciergeChatReport(report: OnyxEntry<Report>): boolean {
+    return report?.participantAccountIDs?.length === 1 && Number(report.participantAccountIDs?.[0]) === CONST.ACCOUNT_ID.CONCIERGE && !isChatThread(report);
 }
 
 /**
  * Check if the report is a single chat report that isn't a thread
  * and personal detail of participant is optimistic data
- * @param {Object} report
- * @param {Array} report.participantAccountIDs
- * @returns {Boolean}
  */
-function shouldDisableDetailPage(report) {
-    const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);
+function shouldDisableDetailPage(report: OnyxEntry<Report>): boolean {
+    const participantAccountIDs = report?.participantAccountIDs ?? [];
 
     if (isChatRoom(report) || isPolicyExpenseChat(report) || isChatThread(report) || isTaskReport(report)) {
         return false;
@@ -537,25 +751,20 @@ function shouldDisableDetailPage(report) {
 
 /**
  * Returns true if this report has only one participant and it's an Expensify account.
- * @param {Object} report
- * @returns {Boolean}
  */
-function isExpensifyOnlyParticipantInReport(report) {
-    const reportParticipants = _.without(lodashGet(report, 'participantAccountIDs', []), currentUserAccountID);
-    return reportParticipants.length === 1 && _.some(reportParticipants, (accountID) => _.contains(CONST.EXPENSIFY_ACCOUNT_IDS, accountID));
+function isExpensifyOnlyParticipantInReport(report: OnyxEntry<Report>): boolean {
+    const reportParticipants = report?.participantAccountIDs?.filter((accountID) => accountID !== currentUserAccountID) ?? [];
+    return reportParticipants.length === 1 && reportParticipants.some((accountID) => CONST.EXPENSIFY_ACCOUNT_IDS.includes(accountID));
 }
 
 /**
  * Returns whether a given report can have tasks created in it.
  * We only prevent the task option if it's a DM/group-DM and the other users are all special Expensify accounts
  *
- * @param {Object} report
- * @returns {Boolean}
  */
-function canCreateTaskInReport(report) {
-    const otherReportParticipants = _.without(lodashGet(report, 'participantAccountIDs', []), currentUserAccountID);
-    const areExpensifyAccountsOnlyOtherParticipants =
-        otherReportParticipants.length >= 1 && _.every(otherReportParticipants, (accountID) => _.contains(CONST.EXPENSIFY_ACCOUNT_IDS, accountID));
+function canCreateTaskInReport(report: OnyxEntry<Report>): boolean {
+    const otherReportParticipants = report?.participantAccountIDs?.filter((accountID) => accountID !== currentUserAccountID) ?? [];
+    const areExpensifyAccountsOnlyOtherParticipants = otherReportParticipants?.length >= 1 && otherReportParticipants?.every((accountID) => CONST.EXPENSIFY_ACCOUNT_IDS.includes(accountID));
     if (areExpensifyAccountsOnlyOtherParticipants && isDM(report)) {
         return false;
     }
@@ -566,34 +775,27 @@ function canCreateTaskInReport(report) {
 /**
  * Returns true if there are any Expensify accounts (i.e. with domain 'expensify.com') in the set of accountIDs
  * by cross-referencing the accountIDs with personalDetails.
- *
- * @param {Array<Number>} accountIDs
- * @return {Boolean}
  */
-function hasExpensifyEmails(accountIDs) {
-    return _.some(accountIDs, (accountID) => Str.extractEmailDomain(lodashGet(allPersonalDetails, [accountID, 'login'], '')) === CONST.EXPENSIFY_PARTNER_NAME);
+function hasExpensifyEmails(accountIDs: number[]): boolean {
+    return accountIDs.some((accountID) => Str.extractEmailDomain(allPersonalDetails?.[accountID]?.login ?? '') === CONST.EXPENSIFY_PARTNER_NAME);
 }
 
 /**
  * Returns true if there are any guides accounts (team.expensify.com) in a list of accountIDs
  * by cross-referencing the accountIDs with personalDetails since guides that are participants
  * of the user's chats should have their personal details in Onyx.
- * @param {Array<Number>} accountIDs
- * @returns {Boolean}
  */
-function hasExpensifyGuidesEmails(accountIDs) {
-    return _.some(accountIDs, (accountID) => Str.extractEmailDomain(lodashGet(allPersonalDetails, [accountID, 'login'], '')) === CONST.EMAIL.GUIDES_DOMAIN);
+function hasExpensifyGuidesEmails(accountIDs: number[]): boolean {
+    return accountIDs.some((accountID) => Str.extractEmailDomain(allPersonalDetails?.[accountID]?.login ?? '') === CONST.EMAIL.GUIDES_DOMAIN);
 }
 
-/**
- * @param {Record<String, {lastReadTime, reportID}>|Array<{lastReadTime, reportID}>} reports
- * @param {Boolean} [ignoreDomainRooms]
- * @param {Object} policies
- * @param {Boolean} isFirstTimeNewExpensifyUser
- * @param {Boolean} openOnAdminRoom
- * @returns {Object}
- */
-function findLastAccessedReport(reports, ignoreDomainRooms, policies, isFirstTimeNewExpensifyUser, openOnAdminRoom = false) {
+function findLastAccessedReport(
+    reports: OnyxCollection<Report>,
+    ignoreDomainRooms: boolean,
+    policies: OnyxCollection<Policy>,
+    isFirstTimeNewExpensifyUser: boolean,
+    openOnAdminRoom = false,
+): OnyxEntry<Report> {
     // If it's the user's first time using New Expensify, then they could either have:
     //   - just a Concierge report, if so we'll return that
     //   - their Concierge report, and a separate report that must have deeplinked them to the app before they created their account.
@@ -601,9 +803,9 @@ function findLastAccessedReport(reports, ignoreDomainRooms, policies, isFirstTim
     // since the Concierge report would be incorrectly selected over the deep-linked report in the logic below.
     let sortedReports = sortReportsByLastRead(reports);
 
-    let adminReport;
+    let adminReport: OnyxEntry<Report> | undefined;
     if (openOnAdminRoom) {
-        adminReport = _.find(sortedReports, (report) => {
+        adminReport = sortedReports.find((report) => {
             const chatType = getChatType(report);
             return chatType === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS;
         });
@@ -614,42 +816,34 @@ function findLastAccessedReport(reports, ignoreDomainRooms, policies, isFirstTim
             return sortedReports[0];
         }
 
-        return adminReport || _.find(sortedReports, (report) => !isConciergeChatReport(report));
+        return adminReport ?? sortedReports.find((report) => !isConciergeChatReport(report)) ?? null;
     }
 
     if (ignoreDomainRooms) {
         // We allow public announce rooms, admins, and announce rooms through since we bypass the default rooms beta for them.
         // Check where ReportUtils.findLastAccessedReport is called in MainDrawerNavigator.js for more context.
         // Domain rooms are now the only type of default room that are on the defaultRooms beta.
-        sortedReports = _.filter(
-            sortedReports,
-            (report) => !isDomainRoom(report) || getPolicyType(report, policies) === CONST.POLICY.TYPE.FREE || hasExpensifyGuidesEmails(lodashGet(report, ['participantAccountIDs'], [])),
+        sortedReports = sortedReports.filter(
+            (report) => !isDomainRoom(report) || getPolicyType(report, policies) === CONST.POLICY.TYPE.FREE || hasExpensifyGuidesEmails(report?.participantAccountIDs ?? []),
         );
     }
 
-    return adminReport || _.last(sortedReports);
+    return adminReport ?? sortedReports.at(-1) ?? null;
 }
 
 /**
  * Whether the provided report is an archived room
- * @param {Object} report
- * @param {Number} [report.stateNum]
- * @param {Number} [report.statusNum]
- * @returns {Boolean}
  */
-function isArchivedRoom(report) {
-    return report && report.statusNum === CONST.REPORT.STATUS.CLOSED && report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED;
+function isArchivedRoom(report: OnyxEntry<Report> | EmptyObject): boolean {
+    return report?.statusNum === CONST.REPORT.STATUS.CLOSED && report?.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED;
 }
 
 /**
  * Checks if the current user is allowed to comment on the given report.
- * @param {Object} report
- * @param {String} [report.writeCapability]
- * @returns {Boolean}
  */
-function isAllowedToComment(report) {
+function isAllowedToComment(report: Report): boolean {
     // Default to allowing all users to post
-    const capability = lodashGet(report, 'writeCapability', CONST.REPORT.WRITE_CAPABILITIES.ALL) || CONST.REPORT.WRITE_CAPABILITIES.ALL;
+    const capability = report?.writeCapability ?? CONST.REPORT.WRITE_CAPABILITIES.ALL;
 
     if (capability === CONST.REPORT.WRITE_CAPABILITIES.ALL) {
         return true;
@@ -662,113 +856,78 @@ function isAllowedToComment(report) {
 
     // If we've made it here, commenting on this report is restricted.
     // If the user is an admin, allow them to post.
-    const policy = allPolicies[`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`];
-    return lodashGet(policy, 'role', '') === CONST.POLICY.ROLE.ADMIN;
+    const policy = allPolicies[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];
+    return policy?.role === CONST.POLICY.ROLE.ADMIN;
 }
 
 /**
  * Checks if the current user is the admin of the policy given the policy expense chat.
- * @param {Object} report
- * @param {String} report.policyID
- * @param {Object} policies must have OnyxKey prefix (i.e 'policy_') for keys
- * @returns {Boolean}
  */
-function isPolicyExpenseChatAdmin(report, policies) {
+function isPolicyExpenseChatAdmin(report: OnyxEntry<Report>, policies: OnyxCollection<Policy>): boolean {
     if (!isPolicyExpenseChat(report)) {
         return false;
     }
 
-    const policyRole = lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'role']);
+    const policyRole = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.role;
 
     return policyRole === CONST.POLICY.ROLE.ADMIN;
 }
 
 /**
  * Checks if the current user is the admin of the policy.
- * @param {String} policyID
- * @param {Object} policies must have OnyxKey prefix (i.e 'policy_') for keys
- * @returns {Boolean}
  */
-function isPolicyAdmin(policyID, policies) {
-    const policyRole = lodashGet(policies, [`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, 'role']);
+function isPolicyAdmin(policyID: string, policies: OnyxCollection<Policy>): boolean {
+    const policyRole = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`]?.role;
 
     return policyRole === CONST.POLICY.ROLE.ADMIN;
 }
 
 /**
  * Returns true if report has a single participant.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function hasSingleParticipant(report) {
-    return report && report.participantAccountIDs && report.participantAccountIDs.length === 1;
+function hasSingleParticipant(report: OnyxEntry<Report>): boolean {
+    return report?.participantAccountIDs?.length === 1;
 }
 
 /**
  * Checks whether all the transactions linked to the IOU report are of the Distance Request type
  *
- * @param {string|null} iouReportID
- * @returns {boolean}
  */
-function hasOnlyDistanceRequestTransactions(iouReportID) {
+function hasOnlyDistanceRequestTransactions(iouReportID: string | undefined): boolean {
     const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
-    return _.all(allTransactions, (transaction) => TransactionUtils.isDistanceRequest(transaction));
+    return allTransactions.every((transaction) => TransactionUtils.isDistanceRequest(transaction));
 }
 
 /**
  * If the report is a thread and has a chat type set, it is a workspace chat.
- *
- * @param {Object} report
- * @returns {Boolean}
- */
-function isWorkspaceThread(report) {
-    return Boolean(isThread(report) && !isDM(report));
-}
-
-/**
- * Returns true if reportAction has a child.
- *
- * @param {Object} reportAction
- * @returns {Boolean}
  */
-function isThreadParent(reportAction) {
-    return reportAction && reportAction.childReportID && reportAction.childReportID !== 0;
+function isWorkspaceThread(report: OnyxEntry<Report>): boolean {
+    return isThread(report) && !isDM(report);
 }
 
 /**
  * Returns true if reportAction is the first chat preview of a Thread
- *
- * @param {Object} reportAction
- * @param {String} reportID
- * @returns {Boolean}
  */
-function isThreadFirstChat(reportAction, reportID) {
-    return !_.isUndefined(reportAction.childReportID) && reportAction.childReportID.toString() === reportID;
+function isThreadFirstChat(reportAction: OnyxEntry<ReportAction>, reportID: string): boolean {
+    return reportAction?.childReportID?.toString() === reportID;
 }
 
 /**
  * Checks if a report is a child report.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isChildReport(report) {
+function isChildReport(report: OnyxEntry<Report>): boolean {
     return isThread(report) || isTaskReport(report);
 }
 
 /**
  * An Expense Request is a thread where the parent report is an Expense Report and
  * the parentReportAction is a transaction.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isExpenseRequest(report) {
+function isExpenseRequest(report: OnyxEntry<Report>): boolean {
     if (isThread(report)) {
         const parentReportAction = ReportActionsUtils.getParentReportAction(report);
-        const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
-        return isExpenseReport(parentReport) && ReportActionsUtils.isTransactionThread(parentReportAction);
+        const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
+        return isExpenseReport(parentReport) && isNotEmptyObject(parentReportAction) && ReportActionsUtils.isTransactionThread(parentReportAction);
     }
     return false;
 }
@@ -776,49 +935,38 @@ function isExpenseRequest(report) {
 /**
  * An IOU Request is a thread where the parent report is an IOU Report and
  * the parentReportAction is a transaction.
- *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isIOURequest(report) {
+function isIOURequest(report: OnyxEntry<Report>): boolean {
     if (isThread(report)) {
         const parentReportAction = ReportActionsUtils.getParentReportAction(report);
-        const parentReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`];
-        return isIOUReport(parentReport) && ReportActionsUtils.isTransactionThread(parentReportAction);
+        const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
+        return isIOUReport(parentReport) && isNotEmptyObject(parentReportAction) && ReportActionsUtils.isTransactionThread(parentReportAction);
     }
     return false;
 }
 
 /**
  * Checks if a report is an IOU or expense request.
- *
- * @param {Object|String} reportOrID
- * @returns {Boolean}
  */
-function isMoneyRequest(reportOrID) {
-    const report = _.isObject(reportOrID) ? reportOrID : allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`];
+function isMoneyRequest(reportOrID: OnyxEntry<Report> | string): boolean {
+    const report = typeof reportOrID === 'string' ? allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null : reportOrID;
     return isIOURequest(report) || isExpenseRequest(report);
 }
 
 /**
  * Checks if a report is an IOU or expense report.
- *
- * @param {Object|String} reportOrID
- * @returns {Boolean}
  */
-function isMoneyRequestReport(reportOrID) {
-    const report = typeof reportOrID === 'object' ? reportOrID : allReports[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`];
+function isMoneyRequestReport(reportOrID: OnyxEntry<Report> | string): boolean {
+    const report = typeof reportOrID === 'object' ? reportOrID : allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null;
     return isIOUReport(report) || isExpenseReport(report);
 }
 
 /**
  * Should return true only for personal 1:1 report
  *
- * @param {Object} report (chatReport or iouReport)
- * @returns {boolean}
  */
-function isOneOnOneChat(report) {
-    const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);
+function isOneOnOneChat(report: OnyxEntry<Report>): boolean {
+    const participantAccountIDs = report?.participantAccountIDs ?? [];
     return (
         !isThread(report) &&
         !isChatRoom(report) &&
@@ -834,11 +982,8 @@ function isOneOnOneChat(report) {
 
 /**
  * Get the report given a reportID
- *
- * @param {String} reportID
- * @returns {Object}
  */
-function getReport(reportID) {
+function getReport(reportID: string | undefined): OnyxEntry<Report> | EmptyObject {
     /**
      * Using typical string concatenation here due to performance issues
      * with template literals.
@@ -847,47 +992,38 @@ function getReport(reportID) {
         return {};
     }
 
-    return allReports[ONYXKEYS.COLLECTION.REPORT + reportID] || {};
+    return allReports?.[ONYXKEYS.COLLECTION.REPORT + reportID] ?? {};
 }
 
 /**
  * Get the notification preference given a report
- *
- * @param {Object} report
- * @returns {String}
  */
-function getReportNotificationPreference(report) {
-    return lodashGet(report, 'notificationPreference', '');
+function getReportNotificationPreference(report: OnyxEntry<Report>): string | number {
+    return report?.notificationPreference ?? '';
 }
 
 /**
  * Returns whether or not the author of the action is this user
  *
- * @param {Object} reportAction
- * @returns {Boolean}
  */
-function isActionCreator(reportAction) {
-    return reportAction.actorAccountID === currentUserAccountID;
+function isActionCreator(reportAction: OnyxEntry<ReportAction>): boolean {
+    return reportAction?.actorAccountID === currentUserAccountID;
 }
 
 /**
  * Can only delete if the author is this user and the action is an ADDCOMMENT action or an IOU action in an unsettled report, or if the user is a
  * policy admin
- *
- * @param {Object} reportAction
- * @param {String} reportID
- * @returns {Boolean}
  */
-function canDeleteReportAction(reportAction, reportID) {
+function canDeleteReportAction(reportAction: OnyxEntry<ReportAction>, reportID: string): boolean {
     const report = getReport(reportID);
 
-    const isActionOwner = reportAction.actorAccountID === currentUserAccountID;
+    const isActionOwner = reportAction?.actorAccountID === currentUserAccountID;
 
-    if (ReportActionsUtils.isMoneyRequestAction(reportAction)) {
+    if (reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU) {
         // For now, users cannot delete split actions
-        const isSplitAction = lodashGet(reportAction, 'originalMessage.type') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
+        const isSplitAction = reportAction?.originalMessage?.type === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
 
-        if (isSplitAction || isSettled(reportAction.originalMessage.IOUReportID) || isReportApproved(report)) {
+        if (isSplitAction || isSettled(String(reportAction?.originalMessage?.IOUReportID)) || (isNotEmptyObject(report) && isReportApproved(report))) {
             return false;
         }
 
@@ -897,36 +1033,32 @@ function canDeleteReportAction(reportAction, reportID) {
     }
 
     if (
-        reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT ||
-        reportAction.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ||
+        reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT ||
+        reportAction?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ||
         ReportActionsUtils.isCreatedTaskReportAction(reportAction) ||
-        reportAction.actorAccountID === CONST.ACCOUNT_ID.CONCIERGE
+        reportAction?.actorAccountID === CONST.ACCOUNT_ID.CONCIERGE
     ) {
         return false;
     }
 
-    const policy = lodashGet(allPolicies, `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`) || {};
-    const isAdmin = policy.role === CONST.POLICY.ROLE.ADMIN && !isDM(report);
+    const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`];
+    const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN && isNotEmptyObject(report) && !isDM(report);
 
     return isActionOwner || isAdmin;
 }
 
 /**
  * Get welcome message based on room type
- * @param {Object} report
- * @param {Boolean} isUserPolicyAdmin
- * @returns {Object}
  */
-
-function getRoomWelcomeMessage(report, isUserPolicyAdmin) {
-    const welcomeMessage = {showReportName: true};
+function getRoomWelcomeMessage(report: OnyxEntry<Report>, isUserPolicyAdmin: boolean): WelcomeMessage {
+    const welcomeMessage: WelcomeMessage = {showReportName: true};
     const workspaceName = getPolicyName(report);
 
     if (isArchivedRoom(report)) {
         welcomeMessage.phrase1 = Localize.translateLocal('reportActionsView.beginningOfArchivedRoomPartOne');
         welcomeMessage.phrase2 = Localize.translateLocal('reportActionsView.beginningOfArchivedRoomPartTwo');
     } else if (isDomainRoom(report)) {
-        welcomeMessage.phrase1 = Localize.translateLocal('reportActionsView.beginningOfChatHistoryDomainRoomPartOne', {domainRoom: report.reportName});
+        welcomeMessage.phrase1 = Localize.translateLocal('reportActionsView.beginningOfChatHistoryDomainRoomPartOne', {domainRoom: report?.reportName ?? ''});
         welcomeMessage.phrase2 = Localize.translateLocal('reportActionsView.beginningOfChatHistoryDomainRoomPartTwo');
     } else if (isAdminRoom(report)) {
         welcomeMessage.phrase1 = Localize.translateLocal('reportActionsView.beginningOfChatHistoryAdminRoomPartOne', {workspaceName});
@@ -948,87 +1080,65 @@ function getRoomWelcomeMessage(report, isUserPolicyAdmin) {
 
 /**
  * Returns true if Concierge is one of the chat participants (1:1 as well as group chats)
- * @param {Object} report
- * @returns {Boolean}
  */
-function chatIncludesConcierge(report) {
-    return !_.isEmpty(report.participantAccountIDs) && _.contains(report.participantAccountIDs, CONST.ACCOUNT_ID.CONCIERGE);
+function chatIncludesConcierge(report: OnyxEntry<Report>): boolean {
+    return Boolean(report?.participantAccountIDs?.length && report?.participantAccountIDs?.includes(CONST.ACCOUNT_ID.CONCIERGE));
 }
 
 /**
  * Returns true if there is any automated expensify account `in accountIDs
- * @param {Array} accountIDs
- * @returns {Boolean}
  */
-function hasAutomatedExpensifyAccountIDs(accountIDs) {
-    return _.intersection(accountIDs, CONST.EXPENSIFY_ACCOUNT_IDS).length > 0;
+function hasAutomatedExpensifyAccountIDs(accountIDs: number[]): boolean {
+    return accountIDs.some((accountID) => CONST.EXPENSIFY_ACCOUNT_IDS.includes(accountID));
 }
 
-/**
- * @param {Object} report
- * @param {Number} currentLoginAccountID
- * @returns {Array}
- */
-function getReportRecipientAccountIDs(report, currentLoginAccountID) {
-    let finalReport = report;
+function getReportRecipientAccountIDs(report: OnyxEntry<Report>, currentLoginAccountID: number): number[] {
+    let finalReport: OnyxEntry<Report> = report;
     // In 1:1 chat threads, the participants will be the same as parent report. If a report is specifically a 1:1 chat thread then we will
     // get parent report and use its participants array.
     if (isThread(report) && !(isTaskReport(report) || isMoneyRequestReport(report))) {
-        const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
+        const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
         if (hasSingleParticipant(parentReport)) {
             finalReport = parentReport;
         }
     }
 
-    let finalParticipantAccountIDs = [];
+    let finalParticipantAccountIDs: number[] | undefined = [];
     if (isMoneyRequestReport(report)) {
         // For money requests i.e the IOU (1:1 person) and Expense (1:* person) reports, use the full `initialParticipantAccountIDs` array
         // and add the `ownerAccountId`. Money request reports don't add `ownerAccountId` in `participantAccountIDs` array
-        finalParticipantAccountIDs = _.union(lodashGet(finalReport, 'participantAccountIDs'), [report.ownerAccountID]);
+        const defaultParticipantAccountIDs = finalReport?.participantAccountIDs ?? [];
+        const setOfParticipantAccountIDs = new Set<number>(report?.ownerAccountID ? [...defaultParticipantAccountIDs, report.ownerAccountID] : defaultParticipantAccountIDs);
+        finalParticipantAccountIDs = [...setOfParticipantAccountIDs];
     } else if (isTaskReport(report)) {
         // Task reports `managerID` will change when assignee is changed, in that case the old `managerID` is still present in `participantAccountIDs`
         // array along with the new one. We only need the `managerID` as a participant here.
-        finalParticipantAccountIDs = [report.managerID];
+        finalParticipantAccountIDs = report?.managerID ? [report?.managerID] : [];
     } else {
-        finalParticipantAccountIDs = lodashGet(finalReport, 'participantAccountIDs');
+        finalParticipantAccountIDs = finalReport?.participantAccountIDs;
     }
 
-    const reportParticipants = _.without(finalParticipantAccountIDs, currentLoginAccountID);
-    const participantsWithoutExpensifyAccountIDs = _.difference(reportParticipants, CONST.EXPENSIFY_ACCOUNT_IDS);
+    const reportParticipants = finalParticipantAccountIDs?.filter((accountID) => accountID !== currentLoginAccountID) ?? [];
+    const participantsWithoutExpensifyAccountIDs = reportParticipants.filter((participant) => !CONST.EXPENSIFY_ACCOUNT_IDS.includes(participant ?? 0));
     return participantsWithoutExpensifyAccountIDs;
 }
 
 /**
  * Whether the time row should be shown for a report.
- * @param {Array<Object>} personalDetails
- * @param {Object} report
- * @param {Number} accountID
- * @return {Boolean}
  */
-function canShowReportRecipientLocalTime(personalDetails, report, accountID) {
+function canShowReportRecipientLocalTime(personalDetails: OnyxCollection<PersonalDetails>, report: OnyxEntry<Report>, accountID: number): boolean {
     const reportRecipientAccountIDs = getReportRecipientAccountIDs(report, accountID);
     const hasMultipleParticipants = reportRecipientAccountIDs.length > 1;
-    const reportRecipient = personalDetails[reportRecipientAccountIDs[0]];
-    const reportRecipientTimezone = lodashGet(reportRecipient, 'timezone', CONST.DEFAULT_TIME_ZONE);
-    const isReportParticipantValidated = lodashGet(reportRecipient, 'validated', false);
-    return Boolean(
-        !hasMultipleParticipants &&
-            !isChatRoom(report) &&
-            !isPolicyExpenseChat(report) &&
-            reportRecipient &&
-            reportRecipientTimezone &&
-            reportRecipientTimezone.selected &&
-            isReportParticipantValidated,
-    );
+    const reportRecipient = personalDetails?.[reportRecipientAccountIDs[0]];
+    const reportRecipientTimezone = reportRecipient?.timezone ?? CONST.DEFAULT_TIME_ZONE;
+    const isReportParticipantValidated = reportRecipient?.validated ?? false;
+    return Boolean(!hasMultipleParticipants && !isChatRoom(report) && !isPolicyExpenseChat(report) && reportRecipient && reportRecipientTimezone?.selected && isReportParticipantValidated);
 }
 
 /**
  * Shorten last message text to fixed length and trim spaces.
- * @param {String} lastMessageText
- * @param {Boolean} isModifiedExpenseMessage
- * @returns {String}
  */
-function formatReportLastMessageText(lastMessageText, isModifiedExpenseMessage = false) {
+function formatReportLastMessageText(lastMessageText: string, isModifiedExpenseMessage = false): string {
     if (isModifiedExpenseMessage) {
         return String(lastMessageText).trim().replace(CONST.REGEX.LINE_BREAK, '').trim();
     }
@@ -1037,10 +1147,8 @@ function formatReportLastMessageText(lastMessageText, isModifiedExpenseMessage =
 
 /**
  * Helper method to return the default avatar associated with the given login
- * @param {String} [workspaceName]
- * @returns {String}
  */
-function getDefaultWorkspaceAvatar(workspaceName) {
+function getDefaultWorkspaceAvatar(workspaceName?: string): React.FC<SvgProps> {
     if (!workspaceName) {
         return defaultWorkspaceAvatars.WorkspaceBuilding;
     }
@@ -1051,57 +1159,54 @@ function getDefaultWorkspaceAvatar(workspaceName) {
         .replace(/[^0-9a-z]/gi, '')
         .toUpperCase();
 
-    return !alphaNumeric ? defaultWorkspaceAvatars.WorkspaceBuilding : defaultWorkspaceAvatars[`Workspace${alphaNumeric[0]}`];
+    const workspace = `Workspace${alphaNumeric[0]}` as keyof typeof defaultWorkspaceAvatars;
+    const defaultWorkspaceAvatar = defaultWorkspaceAvatars[workspace];
+
+    return !alphaNumeric ? defaultWorkspaceAvatars.WorkspaceBuilding : defaultWorkspaceAvatar;
 }
 
-function getWorkspaceAvatar(report) {
-    const workspaceName = getPolicyName(report, allPolicies);
-    return lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar']) || getDefaultWorkspaceAvatar(workspaceName);
+function getWorkspaceAvatar(report: OnyxEntry<Report>): UserUtils.AvatarSource {
+    const workspaceName = getPolicyName(report, false, allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]);
+    return allPolicies?.[`policy${report?.policyID}`]?.avatar ?? getDefaultWorkspaceAvatar(workspaceName);
 }
 
 /**
  * Returns the appropriate icons for the given chat report using the stored personalDetails.
  * The Avatar sources can be URLs or Icon components according to the chat type.
- *
- * @param {Array} participants
- * @param {Object} personalDetails
- * @returns {Array<*>}
  */
-function getIconsForParticipants(participants, personalDetails) {
-    const participantDetails = [];
+function getIconsForParticipants(participants: number[], personalDetails: OnyxCollection<PersonalDetails>): Icon[] {
+    const participantDetails: ParticipantDetails[] = [];
     const participantsList = participants || [];
 
-    for (let i = 0; i < participantsList.length; i++) {
-        const accountID = participantsList[i];
-        const avatarSource = UserUtils.getAvatar(lodashGet(personalDetails, [accountID, 'avatar'], ''), accountID);
-        const displayNameLogin = lodashGet(personalDetails, [accountID, 'displayName']) || lodashGet(personalDetails, [accountID, 'login'], '');
-        participantDetails.push([accountID, displayNameLogin, avatarSource, lodashGet(personalDetails, [accountID, 'fallBackIcon'])]);
+    for (const accountID of participantsList) {
+        const avatarSource = UserUtils.getAvatar(personalDetails?.[accountID]?.avatar ?? '', accountID);
+        const displayNameLogin = personalDetails?.[accountID]?.displayName ? personalDetails?.[accountID]?.displayName : personalDetails?.[accountID]?.login;
+        participantDetails.push([accountID, displayNameLogin ?? '', avatarSource, personalDetails?.[accountID]?.fallbackIcon ?? '']);
     }
 
-    const sortedParticipantDetails = _.chain(participantDetails)
-        .sort((first, second) => {
-            // First sort by displayName/login
-            const displayNameLoginOrder = first[1].localeCompare(second[1]);
-            if (displayNameLoginOrder !== 0) {
-                return displayNameLoginOrder;
-            }
+    const sortedParticipantDetails = participantDetails.sort((first, second) => {
+        // First sort by displayName/login
+        const displayNameLoginOrder = first[1].localeCompare(second[1]);
+        if (displayNameLoginOrder !== 0) {
+            return displayNameLoginOrder;
+        }
 
-            // Then fallback on accountID as the final sorting criteria.
-            // This will ensure that the order of avatars with same login/displayName
-            // stay consistent across all users and devices
-            return first[0] > second[0];
-        })
-        .value();
+        // Then fallback on accountID as the final sorting criteria.
+        // This will ensure that the order of avatars with same login/displayName
+        // stay consistent across all users and devices
+        return first[0] - second[0];
+    });
 
     // Now that things are sorted, gather only the avatars (second element in the array) and return those
-    const avatars = [];
-    for (let i = 0; i < sortedParticipantDetails.length; i++) {
+    const avatars: Icon[] = [];
+
+    for (const sortedParticipantDetail of sortedParticipantDetails) {
         const userIcon = {
-            id: sortedParticipantDetails[i][0],
-            source: sortedParticipantDetails[i][2],
+            id: sortedParticipantDetail[0],
+            source: sortedParticipantDetail[2],
             type: CONST.ICON_TYPE_AVATAR,
-            name: sortedParticipantDetails[i][1],
-            fallBackIcon: sortedParticipantDetails[i][3],
+            name: sortedParticipantDetail[1],
+            fallbackIcon: sortedParticipantDetail[3],
         };
         avatars.push(userIcon);
     }
@@ -1111,16 +1216,15 @@ function getIconsForParticipants(participants, personalDetails) {
 
 /**
  * Given a report, return the associated workspace icon.
- *
- * @param {Object} report
- * @param {Object} [policy]
- * @returns {Object}
  */
-function getWorkspaceIcon(report, policy = undefined) {
+function getWorkspaceIcon(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> = null): Icon {
     const workspaceName = getPolicyName(report, false, policy);
-    const policyExpenseChatAvatarSource = lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, 'avatar']) || getDefaultWorkspaceAvatar(workspaceName);
-    const workspaceIcon = {
-        source: policyExpenseChatAvatarSource,
+    const policyExpenseChatAvatarSource = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatar
+        ? allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatar
+        : getDefaultWorkspaceAvatar(workspaceName);
+
+    const workspaceIcon: Icon = {
+        source: policyExpenseChatAvatarSource ?? '',
         type: CONST.ICON_TYPE_WORKSPACE,
         name: workspaceName,
         id: -1,
@@ -1131,19 +1235,18 @@ function getWorkspaceIcon(report, policy = undefined) {
 /**
  * Returns the appropriate icons for the given chat report using the stored personalDetails.
  * The Avatar sources can be URLs or Icon components according to the chat type.
- *
- * @param {Object} report
- * @param {Object} personalDetails
- * @param {*} [defaultIcon]
- * @param {String} [defaultName]
- * @param {Number} [defaultAccountID]
- * @param {Object} [policy]
- * @returns {Array<*>}
- */
-function getIcons(report, personalDetails, defaultIcon = null, defaultName = '', defaultAccountID = -1, policy = undefined) {
-    if (_.isEmpty(report)) {
-        const fallbackIcon = {
-            source: defaultIcon || Expensicons.FallbackAvatar,
+ */
+function getIcons(
+    report: OnyxEntry<Report>,
+    personalDetails: OnyxCollection<PersonalDetails>,
+    defaultIcon: UserUtils.AvatarSource | null = null,
+    defaultName = '',
+    defaultAccountID = -1,
+    policy: OnyxEntry<Policy> = null,
+): Icon[] {
+    if (isEmptyObject(report)) {
+        const fallbackIcon: Icon = {
+            source: defaultIcon ?? Expensicons.FallbackAvatar,
             type: CONST.ICON_TYPE_AVATAR,
             name: defaultName,
             id: defaultAccountID,
@@ -1154,11 +1257,11 @@ function getIcons(report, personalDetails, defaultIcon = null, defaultName = '',
         const parentReportAction = ReportActionsUtils.getParentReportAction(report);
         const workspaceIcon = getWorkspaceIcon(report, policy);
         const memberIcon = {
-            source: UserUtils.getAvatar(lodashGet(personalDetails, [parentReportAction.actorAccountID, 'avatar']), parentReportAction.actorAccountID),
+            source: UserUtils.getAvatar(personalDetails?.[parentReportAction.actorAccountID ?? -1]?.avatar ?? '', parentReportAction.actorAccountID ?? -1),
             id: parentReportAction.actorAccountID,
             type: CONST.ICON_TYPE_AVATAR,
-            name: lodashGet(personalDetails, [parentReportAction.actorAccountID, 'displayName'], ''),
-            fallbackIcon: lodashGet(personalDetails, [parentReportAction.actorAccountID, 'fallbackIcon']),
+            name: personalDetails?.[parentReportAction.actorAccountID ?? -1]?.displayName ?? '',
+            fallbackIcon: personalDetails?.[parentReportAction.actorAccountID ?? -1]?.fallbackIcon,
         };
 
         return [memberIcon, workspaceIcon];
@@ -1166,14 +1269,14 @@ function getIcons(report, personalDetails, defaultIcon = null, defaultName = '',
     if (isChatThread(report)) {
         const parentReportAction = ReportActionsUtils.getParentReportAction(report);
 
-        const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', -1);
-        const actorDisplayName = lodashGet(allPersonalDetails, [actorAccountID, 'displayName'], '');
+        const actorAccountID = parentReportAction.actorAccountID;
+        const actorDisplayName = allPersonalDetails?.[actorAccountID ?? -1]?.displayName ?? '';
         const actorIcon = {
             id: actorAccountID,
-            source: UserUtils.getAvatar(lodashGet(personalDetails, [actorAccountID, 'avatar']), actorAccountID),
+            source: UserUtils.getAvatar(personalDetails?.[actorAccountID ?? -1]?.avatar ?? '', actorAccountID ?? -1),
             name: actorDisplayName,
             type: CONST.ICON_TYPE_AVATAR,
-            fallbackIcon: lodashGet(personalDetails, [parentReportAction.actorAccountID, 'fallbackIcon']),
+            fallbackIcon: personalDetails?.[parentReportAction.actorAccountID ?? -1]?.fallbackIcon,
         };
 
         if (isWorkspaceThread(report)) {
@@ -1184,11 +1287,11 @@ function getIcons(report, personalDetails, defaultIcon = null, defaultName = '',
     }
     if (isTaskReport(report)) {
         const ownerIcon = {
-            id: report.ownerAccountID,
-            source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
+            id: report?.ownerAccountID,
+            source: UserUtils.getAvatar(personalDetails?.[report?.ownerAccountID ?? -1]?.avatar ?? '', report?.ownerAccountID ?? -1),
             type: CONST.ICON_TYPE_AVATAR,
-            name: lodashGet(personalDetails, [report.ownerAccountID, 'displayName'], ''),
-            fallbackIcon: lodashGet(personalDetails, [report.ownerAccountID, 'fallbackIcon']),
+            name: personalDetails?.[report?.ownerAccountID ?? -1]?.displayName ?? '',
+            fallbackIcon: personalDetails?.[report?.ownerAccountID ?? -1]?.fallbackIcon,
         };
 
         if (isWorkspaceTaskReport(report)) {
@@ -1200,12 +1303,12 @@ function getIcons(report, personalDetails, defaultIcon = null, defaultName = '',
     }
     if (isDomainRoom(report)) {
         // Get domain name after the #. Domain Rooms use our default workspace avatar pattern.
-        const domainName = report.reportName.substring(1);
+        const domainName = report?.reportName?.substring(1);
         const policyExpenseChatAvatarSource = getDefaultWorkspaceAvatar(domainName);
-        const domainIcon = {
+        const domainIcon: Icon = {
             source: policyExpenseChatAvatarSource,
             type: CONST.ICON_TYPE_WORKSPACE,
-            name: domainName,
+            name: domainName ?? '',
             id: -1,
         };
         return [domainIcon];
@@ -1217,43 +1320,42 @@ function getIcons(report, personalDetails, defaultIcon = null, defaultName = '',
     if (isPolicyExpenseChat(report) || isExpenseReport(report)) {
         const workspaceIcon = getWorkspaceIcon(report, policy);
         const memberIcon = {
-            source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
-            id: report.ownerAccountID,
+            source: UserUtils.getAvatar(personalDetails?.[report?.ownerAccountID ?? -1]?.avatar ?? '', report?.ownerAccountID ?? -1),
+            id: report?.ownerAccountID,
             type: CONST.ICON_TYPE_AVATAR,
-            name: lodashGet(personalDetails, [report.ownerAccountID, 'displayName'], ''),
-            fallbackIcon: lodashGet(personalDetails, [report.ownerAccountID, 'fallbackIcon']),
+            name: personalDetails?.[report?.ownerAccountID ?? -1]?.displayName ?? '',
+            fallbackIcon: personalDetails?.[report?.ownerAccountID ?? -1]?.fallbackIcon,
         };
         return isExpenseReport(report) ? [memberIcon, workspaceIcon] : [workspaceIcon, memberIcon];
     }
     if (isIOUReport(report)) {
         const managerIcon = {
-            source: UserUtils.getAvatar(lodashGet(personalDetails, [report.managerID, 'avatar']), report.managerID),
-            id: report.managerID,
+            source: UserUtils.getAvatar(personalDetails?.[report?.managerID ?? -1]?.avatar ?? '', report?.managerID ?? -1),
+            id: report?.managerID,
             type: CONST.ICON_TYPE_AVATAR,
-            name: lodashGet(personalDetails, [report.managerID, 'displayName'], ''),
-            fallbackIcon: lodashGet(personalDetails, [report.managerID, 'fallbackIcon']),
+            name: personalDetails?.[report?.managerID ?? -1]?.displayName ?? '',
+            fallbackIcon: personalDetails?.[report?.managerID ?? -1]?.fallbackIcon,
         };
         const ownerIcon = {
-            id: report.ownerAccountID,
-            source: UserUtils.getAvatar(lodashGet(personalDetails, [report.ownerAccountID, 'avatar']), report.ownerAccountID),
+            id: report?.ownerAccountID,
+            source: UserUtils.getAvatar(personalDetails?.[report?.ownerAccountID ?? -1]?.avatar ?? '', report?.ownerAccountID ?? -1),
             type: CONST.ICON_TYPE_AVATAR,
-            name: lodashGet(personalDetails, [report.ownerAccountID, 'displayName'], ''),
-            fallbackIcon: lodashGet(personalDetails, [report.ownerAccountID, 'fallbackIcon']),
+            name: personalDetails?.[report?.ownerAccountID ?? -1]?.displayName ?? '',
+            fallbackIcon: personalDetails?.[report?.ownerAccountID ?? -1]?.fallbackIcon,
         };
-        const isPayer = currentUserAccountID === report.managerID;
+        const isPayer = currentUserAccountID === report?.managerID;
 
         return isPayer ? [managerIcon, ownerIcon] : [ownerIcon, managerIcon];
     }
-    return getIconsForParticipants(report.participantAccountIDs, personalDetails);
+
+    return getIconsForParticipants(report?.participantAccountIDs ?? [], personalDetails);
 }
 
 /**
  * Gets the personal details for a login by looking in the ONYXKEYS.PERSONAL_DETAILS_LIST Onyx key (stored in the local variable, allPersonalDetails). If it doesn't exist in Onyx,
  * then a default object is constructed.
- * @param {Number} accountID
- * @returns {Object}
  */
-function getPersonalDetailsForAccountID(accountID) {
+function getPersonalDetailsForAccountID(accountID: number): Partial<PersonalDetails> {
     if (!accountID) {
         return {};
     }
@@ -1266,7 +1368,7 @@ function getPersonalDetailsForAccountID(accountID) {
         };
     }
     return (
-        (allPersonalDetails && allPersonalDetails[accountID]) || {
+        allPersonalDetails?.[accountID] ?? {
             avatar: UserUtils.getDefaultAvatar(accountID),
             isOptimisticPersonalDetail: true,
         }
@@ -1275,58 +1377,57 @@ function getPersonalDetailsForAccountID(accountID) {
 
 /**
  * Get the displayName for a single report participant.
- *
- * @param {Number} accountID
- * @param {Boolean} [shouldUseShortForm]
- * @param {Boolean} shouldFallbackToHidden
- * @returns {String}
  */
-function getDisplayNameForParticipant(accountID, shouldUseShortForm = false, shouldFallbackToHidden = true) {
+function getDisplayNameForParticipant(accountID?: number, shouldUseShortForm = false, shouldFallbackToHidden = true): string | undefined {
     if (!accountID) {
         return '';
     }
 
     const personalDetails = getPersonalDetailsForAccountID(accountID);
+    // console.log(personalDetails);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const formattedLogin = LocalePhoneNumber.formatPhoneNumber(personalDetails.login || '');
-
     // This is to check if account is an invite/optimistically created one
     // and prevent from falling back to 'Hidden', so a correct value is shown
-    // when searching for a new user while offline
-    if (lodashGet(personalDetails, 'isOptimisticPersonalDetail') === true) {
+    // when searching for a new user
+    if (personalDetails.isOptimisticPersonalDetail === true) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         return formattedLogin;
     }
+    const longName = personalDetails.displayName ? personalDetails.displayName : formattedLogin;
+
+    const shortName = personalDetails.firstName ? personalDetails.firstName : longName;
 
-    const longName = personalDetails.displayName || formattedLogin;
-    const shortName = personalDetails.firstName || longName;
     if (!longName && shouldFallbackToHidden) {
         return Localize.translateLocal('common.hidden');
     }
     return shouldUseShortForm ? shortName : longName;
 }
 
-/**
- * @param {Object} personalDetailsList
- * @param {Boolean} isMultipleParticipantReport
- * @param {Boolean} shouldFallbackToHidden
- * @returns {Array}
- */
-function getDisplayNamesWithTooltips(personalDetailsList, isMultipleParticipantReport, shouldFallbackToHidden = true) {
-    return _.chain(personalDetailsList)
+function getDisplayNamesWithTooltips(
+    personalDetailsList: PersonalDetails[] | Record<string, PersonalDetails>,
+    isMultipleParticipantReport: boolean,
+    shouldFallbackToHidden = true,
+): DisplayNameWithTooltips {
+    const personalDetailsListArray = Array.isArray(personalDetailsList) ? personalDetailsList : Object.values(personalDetailsList);
+
+    return personalDetailsListArray
         .map((user) => {
             const accountID = Number(user.accountID);
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
             const displayName = getDisplayNameForParticipant(accountID, isMultipleParticipantReport, shouldFallbackToHidden) || user.login || '';
             const avatar = UserUtils.getDefaultAvatar(accountID);
 
             let pronouns = user.pronouns;
             if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) {
                 const pronounTranslationKey = pronouns.replace(CONST.PRONOUNS.PREFIX, '');
-                pronouns = Localize.translateLocal(`pronouns.${pronounTranslationKey}`);
+                pronouns = Localize.translateLocal(`pronouns.${pronounTranslationKey}` as TranslationPaths);
             }
 
             return {
                 displayName,
                 avatar,
-                login: user.login || '',
+                login: user.login ?? '',
                 accountID,
                 pronouns,
             };
@@ -1339,32 +1440,28 @@ function getDisplayNamesWithTooltips(personalDetailsList, isMultipleParticipantR
             }
 
             // Then fallback on accountID as the final sorting criteria.
-            return first.accountID > second.accountID;
-        })
-        .value();
+            return first.accountID - second.accountID;
+        });
 }
 
 /**
  * Gets a joined string of display names from the list of display name with tooltip objects.
  *
- * @param {Object} displayNamesWithTooltips
- * @returns {String}
  */
-function getDisplayNamesStringFromTooltips(displayNamesWithTooltips) {
-    return _.filter(
-        _.map(displayNamesWithTooltips, ({displayName}) => displayName),
-        (displayName) => !_.isEmpty(displayName),
-    ).join(', ');
+function getDisplayNamesStringFromTooltips(displayNamesWithTooltips: DisplayNameWithTooltips | undefined) {
+    return displayNamesWithTooltips
+        ?.map(({displayName}) => displayName)
+        .filter(Boolean)
+        .join(', ');
 }
 
 /**
  * For a deleted parent report action within a chat report,
  * let us return the appropriate display message
  *
- * @param {Object} reportAction - The deleted report action of a chat report for which we need to return message.
- * @return {String}
+ * @param reportAction - The deleted report action of a chat report for which we need to return message.
  */
-function getDeletedParentActionMessageForChatReport(reportAction) {
+function getDeletedParentActionMessageForChatReport(reportAction: OnyxEntry<ReportAction>): string {
     // By default, let us display [Deleted message]
     let deletedMessageText = Localize.translateLocal('parentReportAction.deletedMessage');
     if (ReportActionsUtils.isCreatedTaskReportAction(reportAction)) {
@@ -1377,14 +1474,13 @@ function getDeletedParentActionMessageForChatReport(reportAction) {
 /**
  * Returns the preview message for `REIMBURSEMENTQUEUED` action
  *
- * @param {Object} reportAction
- * @param {Object} report
- * @returns {String}
- */
-function getReimbursementQueuedActionMessage(reportAction, report) {
-    const submitterDisplayName = getDisplayNameForParticipant(report.ownerAccountID, true);
-    let messageKey;
-    if (lodashGet(reportAction, 'originalMessage.paymentType', '') === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
+
+ */
+function getReimbursementQueuedActionMessage(reportAction: OnyxEntry<ReportAction>, report: OnyxEntry<Report>): string {
+    const submitterDisplayName = getDisplayNameForParticipant(report?.ownerAccountID, true) ?? '';
+    const originalMessage = reportAction?.originalMessage as IOUMessage | undefined;
+    let messageKey: TranslationPaths;
+    if (originalMessage?.paymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
         messageKey = 'iou.waitingOnEnabledWallet';
     } else {
         messageKey = 'iou.waitingOnBankAccount';
@@ -1393,19 +1489,29 @@ function getReimbursementQueuedActionMessage(reportAction, report) {
     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
  *
- * @param {String} reportID - the report for which last visible message has to be fetched
- * @param {Object} [actionsToMerge] - the optimistic merge actions that needs to be considered while fetching last visible message
- * @return {Object}
+ * @param reportID - the report for which last visible message has to be fetched
+ * @param [actionsToMerge] - the optimistic merge actions that needs to be considered while fetching last visible message
+
  */
-function getLastVisibleMessage(reportID, actionsToMerge = {}) {
+function getLastVisibleMessage(reportID: string | undefined, actionsToMerge: ReportActions = {}): LastVisibleMessage {
     const report = getReport(reportID);
-    const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(reportID, actionsToMerge);
+    const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(reportID ?? '', actionsToMerge);
 
     // For Chat Report with deleted parent actions, let us fetch the correct message
-    if (ReportActionsUtils.isDeletedParentAction(lastVisibleAction) && isChatReport(report)) {
+    if (ReportActionsUtils.isDeletedParentAction(lastVisibleAction) && isNotEmptyObject(report) && isChatReport(report)) {
         const lastMessageText = getDeletedParentActionMessageForChatReport(lastVisibleAction);
         return {
             lastMessageText,
@@ -1413,32 +1519,25 @@ function getLastVisibleMessage(reportID, actionsToMerge = {}) {
     }
 
     // Fetch the last visible message for report represented by reportID and based on actions to merge.
-    return ReportActionsUtils.getLastVisibleMessage(reportID, actionsToMerge);
+    return ReportActionsUtils.getLastVisibleMessage(reportID ?? '', actionsToMerge);
 }
 
 /**
  * Checks if a report is an open task report assigned to current user.
  *
- * @param {Object} report
- * @param {Object} [parentReportAction] - The parent report action of the report (Used to check if the task has been canceled)
- * @returns {Boolean}
+ * @param [parentReportAction] - The parent report action of the report (Used to check if the task has been canceled)
  */
-function isWaitingForAssigneeToCompleteTask(report, parentReportAction = {}) {
+function isWaitingForAssigneeToCompleteTask(report: OnyxEntry<Report>, parentReportAction: OnyxEntry<ReportAction> | EmptyObject = {}): boolean {
     return isTaskReport(report) && isReportManager(report) && isOpenTaskReport(report, parentReportAction);
 }
 
-/**
- * @param {Object} report
- * @returns {Boolean}
- */
-function isUnreadWithMention(report) {
+function isUnreadWithMention(report: OnyxEntry<Report> | OptionData): boolean {
     if (!report) {
         return false;
     }
-
     // lastMentionedTime and lastReadTime are both datetime strings and can be compared directly
-    const lastMentionedTime = report.lastMentionedTime || '';
-    const lastReadTime = report.lastReadTime || '';
+    const lastMentionedTime = report.lastMentionedTime ?? '';
+    const lastReadTime = report.lastReadTime ?? '';
     return lastReadTime < lastMentionedTime;
 }
 
@@ -1448,11 +1547,10 @@ function isUnreadWithMention(report) {
     - is for an outstanding task waiting on the user
     - has an outstanding child money request that is waiting for an action from the current user (e.g. pay, approve, add bank account)
  *
- * @param {Object} option (report or optionItem)
- * @param {Object} parentReportAction (the report action the current report is a thread of)
- * @returns {boolean}
+ * @param option (report or optionItem)
+ * @param parentReportAction (the report action the current report is a thread of)
  */
-function requiresAttentionFromCurrentUser(option, parentReportAction = {}) {
+function requiresAttentionFromCurrentUser(option: OnyxEntry<Report> | OptionData, parentReportAction: EmptyObject | OnyxEntry<ReportAction> = {}) {
     if (!option) {
         return false;
     }
@@ -1465,7 +1563,7 @@ function requiresAttentionFromCurrentUser(option, parentReportAction = {}) {
         return false;
     }
 
-    if (option.isUnreadWithMention || isUnreadWithMention(option)) {
+    if (Boolean('isUnreadWithMention' in option && option.isUnreadWithMention) || isUnreadWithMention(option)) {
         return true;
     }
 
@@ -1484,30 +1582,24 @@ function requiresAttentionFromCurrentUser(option, parentReportAction = {}) {
 /**
  * Returns number of transactions that are nonReimbursable
  *
- * @param {Object|null} iouReportID
- * @returns {Number}
  */
-function hasNonReimbursableTransactions(iouReportID) {
+function hasNonReimbursableTransactions(iouReportID: string | undefined): boolean {
     const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
-    return _.filter(allTransactions, (transaction) => transaction.reimbursable === false).length > 0;
+    return allTransactions.filter((transaction) => transaction.reimbursable === false).length > 0;
 }
 
-/**
- * @param {Object} report
- * @param {Object} allReportsDict
- * @returns {Number}
- */
-function getMoneyRequestReimbursableTotal(report, allReportsDict = null) {
-    const allAvailableReports = allReportsDict || allReports;
-    let moneyRequestReport;
+function getMoneyRequestReimbursableTotal(report: OnyxEntry<Report>, allReportsDict: OnyxCollection<Report> = null): number {
+    const allAvailableReports = allReportsDict ?? allReports;
+    let moneyRequestReport: OnyxEntry<Report> | undefined;
     if (isMoneyRequestReport(report)) {
         moneyRequestReport = report;
     }
-    if (allAvailableReports && report.hasOutstandingIOU && report.iouReportID) {
+    if (allAvailableReports && report?.hasOutstandingIOU && report?.iouReportID) {
         moneyRequestReport = allAvailableReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`];
     }
     if (moneyRequestReport) {
-        const total = lodashGet(moneyRequestReport, 'total', 0);
+        const total = moneyRequestReport?.total ?? 0;
+
         if (total !== 0) {
             // There is a possibility that if the Expense report has a negative total.
             // This is because there are instances where you can get a credit back on your card,
@@ -1518,23 +1610,18 @@ function getMoneyRequestReimbursableTotal(report, allReportsDict = null) {
     return 0;
 }
 
-/**
- * @param {Object} report
- * @param {Object} allReportsDict
- * @returns {Object}
- */
-function getMoneyRequestSpendBreakdown(report, allReportsDict = null) {
-    const allAvailableReports = allReportsDict || allReports;
+function getMoneyRequestSpendBreakdown(report: OnyxEntry<Report>, allReportsDict: OnyxCollection<Report> = null): SpendBreakdown {
+    const allAvailableReports = allReportsDict ?? allReports;
     let moneyRequestReport;
     if (isMoneyRequestReport(report)) {
         moneyRequestReport = report;
     }
-    if (allAvailableReports && report.hasOutstandingIOU && report.iouReportID) {
+    if (allAvailableReports && report?.hasOutstandingIOU && report?.iouReportID) {
         moneyRequestReport = allAvailableReports[`${ONYXKEYS.COLLECTION.REPORT}${report.iouReportID}`];
     }
     if (moneyRequestReport) {
-        let nonReimbursableSpend = lodashGet(moneyRequestReport, 'nonReimbursableTotal', 0);
-        let totalSpend = lodashGet(moneyRequestReport, 'total', 0);
+        let nonReimbursableSpend = moneyRequestReport.nonReimbursableTotal ?? 0;
+        let totalSpend = moneyRequestReport.total ?? 0;
 
         if (nonReimbursableSpend + totalSpend !== 0) {
             // There is a possibility that if the Expense report has a negative total.
@@ -1562,19 +1649,16 @@ function getMoneyRequestSpendBreakdown(report, allReportsDict = null) {
 
 /**
  * Get the title for a policy expense chat which depends on the role of the policy member seeing this report
- *
- * @param {Object} report
- * @param {Object} [policy]
- * @returns {String}
  */
-function getPolicyExpenseChatName(report, policy = undefined) {
-    const ownerAccountID = report.ownerAccountID;
-    const personalDetails = allPersonalDetails[ownerAccountID];
+function getPolicyExpenseChatName(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> | undefined = undefined): string | undefined {
+    const ownerAccountID = report?.ownerAccountID;
+    const personalDetails = allPersonalDetails?.[ownerAccountID ?? -1];
     const login = personalDetails ? personalDetails.login : null;
-    const reportOwnerDisplayName = getDisplayNameForParticipant(report.ownerAccountID) || login || report.reportName;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const reportOwnerDisplayName = getDisplayNameForParticipant(ownerAccountID) || login || report?.reportName;
 
     // If the policy expense chat is owned by this user, use the name of the policy as the report name.
-    if (report.isOwnPolicyExpenseChat) {
+    if (report?.isOwnPolicyExpenseChat) {
         return getPolicyName(report, false, policy);
     }
 
@@ -1583,7 +1667,7 @@ function getPolicyExpenseChatName(report, policy = undefined) {
      * Using typical string concatenation here due to performance issues
      * with template literals.
      */
-    const policyItem = allPolicies[ONYXKEYS.COLLECTION.POLICY + report.policyID];
+    const policyItem = allPolicies?.[ONYXKEYS.COLLECTION.POLICY + report?.policyID];
     if (policyItem) {
         policyExpenseChatRole = policyItem.role || 'user';
     }
@@ -1591,8 +1675,8 @@ function getPolicyExpenseChatName(report, policy = undefined) {
     // If this user is not admin and this policy expense chat has been archived because of account merging, this must be an old workspace chat
     // of the account which was merged into the current user's account. Use the name of the policy as the name of the report.
     if (isArchivedRoom(report)) {
-        const lastAction = ReportActionsUtils.getLastVisibleAction(report.reportID);
-        const archiveReason = (lastAction && lastAction.originalMessage && lastAction.originalMessage.reason) || CONST.REPORT.ARCHIVE_REASON.DEFAULT;
+        const lastAction = ReportActionsUtils.getLastVisibleAction(report?.reportID ?? '');
+        const archiveReason = lastAction?.actionName === CONST.REPORT.ACTIONS.TYPE.CLOSED ? lastAction?.originalMessage?.reason : CONST.REPORT.ARCHIVE_REASON.DEFAULT;
         if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED && policyExpenseChatRole !== CONST.POLICY.ROLE.ADMIN) {
             return getPolicyName(report, false, policy);
         }
@@ -1604,29 +1688,29 @@ function getPolicyExpenseChatName(report, policy = undefined) {
 
 /**
  * Get the title for an IOU or expense chat which will be showing the payer and the amount
- *
- * @param {Object} report
- * @param {Object} [policy]
- * @returns  {String}
  */
-function getMoneyRequestReportName(report, policy = undefined) {
+function getMoneyRequestReportName(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> | undefined = undefined): string {
     const moneyRequestTotal = getMoneyRequestReimbursableTotal(report);
-    const formattedAmount = CurrencyUtils.convertToDisplayString(moneyRequestTotal, report.currency, hasOnlyDistanceRequestTransactions(report.reportID));
-    const payerName = isExpenseReport(report) ? getPolicyName(report, false, policy) : getDisplayNameForParticipant(report.managerID);
+    const formattedAmount = CurrencyUtils.convertToDisplayString(moneyRequestTotal, report?.currency, hasOnlyDistanceRequestTransactions(report?.reportID));
+    const payerName = isExpenseReport(report) ? getPolicyName(report, false, policy) : getDisplayNameForParticipant(report?.managerID) ?? '';
     const payerPaidAmountMessage = Localize.translateLocal('iou.payerPaidAmount', {
         payer: payerName,
         amount: formattedAmount,
     });
 
-    if (report.isWaitingOnBankAccount) {
+    if (report?.isWaitingOnBankAccount) {
         return `${payerPaidAmountMessage} • ${Localize.translateLocal('iou.pending')}`;
     }
 
-    if (hasNonReimbursableTransactions(report.reportID)) {
+    if (report?.isCancelledIOU) {
+        return `${payerPaidAmountMessage} • ${Localize.translateLocal('iou.canceled')}`;
+    }
+
+    if (hasNonReimbursableTransactions(report?.reportID)) {
         return Localize.translateLocal('iou.payerSpentAmount', {payer: payerName, amount: formattedAmount});
     }
 
-    if (report.hasOutstandingIOU || moneyRequestTotal === 0) {
+    if (!!report?.hasOutstandingIOU || isDraftExpenseReport(report) || moneyRequestTotal === 0) {
         return Localize.translateLocal('iou.payerOwesAmount', {payer: payerName, amount: formattedAmount});
     }
 
@@ -1636,16 +1720,16 @@ function getMoneyRequestReportName(report, policy = undefined) {
 /**
  * Gets transaction created, amount, currency, comment, and waypoints (for distance request)
  * into a flat object. Used for displaying transactions and sending them in API commands
- *
- * @param {Object} transaction
- * @param {Object} createdDateFormat
- * @returns {Object}
  */
-function getTransactionDetails(transaction, createdDateFormat = CONST.DATE.FNS_FORMAT_STRING) {
-    const report = getReport(transaction.reportID);
+
+function getTransactionDetails(transaction: OnyxEntry<Transaction>, createdDateFormat: string = CONST.DATE.FNS_FORMAT_STRING): TransactionDetails {
+    if (!transaction) {
+        return;
+    }
+    const report = getReport(transaction?.reportID);
     return {
         created: TransactionUtils.getCreated(transaction, createdDateFormat),
-        amount: TransactionUtils.getAmount(transaction, isExpenseReport(report)),
+        amount: TransactionUtils.getAmount(transaction, isNotEmptyObject(report) && isExpenseReport(report)),
         currency: TransactionUtils.getCurrency(transaction),
         comment: TransactionUtils.getDescription(transaction),
         merchant: TransactionUtils.getMerchant(transaction),
@@ -1668,12 +1752,8 @@ function getTransactionDetails(transaction, createdDateFormat = CONST.DATE.FNS_F
  * - in case of expense report
  *    - the current user is the requestor and is not settled yet
  *    - or the user is an admin on the policy the expense report is tied to
- *
- * @param {Object} reportAction
- * @param {String} fieldToEdit
- * @returns {Boolean}
  */
-function canEditMoneyRequest(reportAction, fieldToEdit = '') {
+function canEditMoneyRequest(reportAction: OnyxEntry<ReportAction>, fieldToEdit = ''): boolean {
     const isDeleted = ReportActionsUtils.isDeletedAction(reportAction);
 
     if (isDeleted) {
@@ -1681,23 +1761,25 @@ function canEditMoneyRequest(reportAction, fieldToEdit = '') {
     }
 
     // If the report action is not IOU type, return true early
-    if (reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU) {
+    if (reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU) {
         return true;
     }
 
-    const moneyRequestReportID = lodashGet(reportAction, 'originalMessage.IOUReportID', 0);
+    const moneyRequestReportID = reportAction?.originalMessage?.IOUReportID ?? 0;
 
     if (!moneyRequestReportID) {
         return false;
     }
 
-    const moneyRequestReport = getReport(moneyRequestReportID);
-    const isReportSettled = isSettled(moneyRequestReport.reportID);
-    const isAdmin = isExpenseReport(moneyRequestReport) && lodashGet(getPolicy(moneyRequestReport.policyID), 'role', '') === CONST.POLICY.ROLE.ADMIN;
-    const isRequestor = currentUserAccountID === reportAction.actorAccountID;
+    const moneyRequestReport = getReport(String(moneyRequestReportID));
+    const isReportSettled = isSettled(moneyRequestReport?.reportID);
+    const isAdmin = isExpenseReport(moneyRequestReport) && (getPolicy(moneyRequestReport?.policyID ?? '')?.role ?? '') === CONST.POLICY.ROLE.ADMIN;
+    const isRequestor = currentUserAccountID === reportAction?.actorAccountID;
+
     if (isAdmin && !isRequestor && fieldToEdit === CONST.EDIT_REQUEST_FIELD.RECEIPT) {
         return false;
     }
+
     if (isAdmin) {
         return true;
     }
@@ -1708,14 +1790,10 @@ function canEditMoneyRequest(reportAction, fieldToEdit = '') {
 /**
  * Checks if the current user can edit the provided property of a money request
  *
- * @param {Object} reportAction
- * @param {String} reportID
- * @param {String} fieldToEdit
- * @returns {Boolean}
  */
-function canEditFieldOfMoneyRequest(reportAction, reportID, fieldToEdit) {
+function canEditFieldOfMoneyRequest(reportAction: OnyxEntry<ReportAction>, reportID: string, fieldToEdit: ValueOf<typeof CONST.EDIT_REQUEST_FIELD>): boolean {
     // A list of fields that cannot be edited by anyone, once a money request has been settled
-    const nonEditableFieldsWhenSettled = [
+    const nonEditableFieldsWhenSettled: string[] = [
         CONST.EDIT_REQUEST_FIELD.AMOUNT,
         CONST.EDIT_REQUEST_FIELD.CURRENCY,
         CONST.EDIT_REQUEST_FIELD.DATE,
@@ -1740,32 +1818,27 @@ function canEditFieldOfMoneyRequest(reportAction, reportID, fieldToEdit) {
  * - It's an ADDCOMMENT that is not an attachment
  * - It's money request where conditions for editability are defined in canEditMoneyRequest method
  * - It's not pending deletion
- *
- * @param {Object} reportAction
- * @returns {Boolean}
  */
-function canEditReportAction(reportAction) {
-    const isCommentOrIOU = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT || reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU;
-    return (
-        reportAction.actorAccountID === currentUserAccountID &&
-        isCommentOrIOU &&
-        canEditMoneyRequest(reportAction) && // Returns true for non-IOU actions
-        !isReportMessageAttachment(lodashGet(reportAction, ['message', 0], {})) &&
-        !ReportActionsUtils.isDeletedAction(reportAction) &&
-        !ReportActionsUtils.isCreatedTaskReportAction(reportAction) &&
-        reportAction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE
+function canEditReportAction(reportAction: OnyxEntry<ReportAction>): boolean {
+    const isCommentOrIOU = reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU;
+
+    return Boolean(
+        reportAction?.actorAccountID === currentUserAccountID &&
+            isCommentOrIOU &&
+            canEditMoneyRequest(reportAction) && // Returns true for non-IOU actions
+            !isReportMessageAttachment(reportAction?.message?.[0] ?? {type: '', text: ''}) &&
+            !ReportActionsUtils.isDeletedAction(reportAction) &&
+            !ReportActionsUtils.isCreatedTaskReportAction(reportAction) &&
+            reportAction?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
     );
 }
 
 /**
  * Gets all transactions on an IOU report with a receipt
- *
- * @param {string|null} iouReportID
- * @returns {[Object]}
  */
-function getTransactionsWithReceipts(iouReportID) {
+function getTransactionsWithReceipts(iouReportID: string | undefined): Transaction[] {
     const allTransactions = TransactionUtils.getAllReportTransactions(iouReportID);
-    return _.filter(allTransactions, (transaction) => TransactionUtils.hasReceipt(transaction));
+    return allTransactions.filter((transaction) => TransactionUtils.hasReceipt(transaction));
 }
 
 /**
@@ -1774,38 +1847,29 @@ function getTransactionsWithReceipts(iouReportID) {
  * all requests are receipts that are being SmartScanned. As soon as we have a non-receipt request,
  * or as soon as one receipt request is done scanning, we have at least one
  * "ready" money request, and we remove this indicator to show the partial report total.
- *
- * @param {Object|null} iouReportID
- * @param {Object|null} reportPreviewAction the preview action associated with the IOU report
- * @returns {Boolean}
  */
-function areAllRequestsBeingSmartScanned(iouReportID, reportPreviewAction) {
+function areAllRequestsBeingSmartScanned(iouReportID: string, reportPreviewAction: OnyxEntry<ReportAction>): boolean {
     const transactionsWithReceipts = getTransactionsWithReceipts(iouReportID);
     // If we have more requests than requests with receipts, we have some manual requests
     if (ReportActionsUtils.getNumberOfMoneyRequests(reportPreviewAction) > transactionsWithReceipts.length) {
         return false;
     }
-    return _.all(transactionsWithReceipts, (transaction) => TransactionUtils.isReceiptBeingScanned(transaction));
+    return transactionsWithReceipts.every((transaction) => TransactionUtils.isReceiptBeingScanned(transaction));
 }
 
 /**
  * Check if any of the transactions in the report has required missing fields
  *
- * @param {Object|null} iouReportID
- * @returns {Boolean}
  */
-function hasMissingSmartscanFields(iouReportID) {
+function hasMissingSmartscanFields(iouReportID: string): boolean {
     const transactionsWithReceipts = getTransactionsWithReceipts(iouReportID);
-    return _.some(transactionsWithReceipts, (transaction) => TransactionUtils.hasMissingSmartscanFields(transaction));
+    return transactionsWithReceipts.some((transaction) => TransactionUtils.hasMissingSmartscanFields(transaction));
 }
 
 /**
  * Given a parent IOU report action get report name for the LHN.
- *
- * @param {Object} reportAction
- * @returns {String}
  */
-function getTransactionReportName(reportAction) {
+function getTransactionReportName(reportAction: OnyxEntry<ReportAction>): string {
     if (ReportActionsUtils.isReversedTransaction(reportAction)) {
         return Localize.translateLocal('parentReportAction.reversedTransaction');
     }
@@ -1815,6 +1879,10 @@ function getTransactionReportName(reportAction) {
     }
 
     const transaction = TransactionUtils.getLinkedTransaction(reportAction);
+    if (!isNotEmptyObject(transaction)) {
+        // 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');
     }
@@ -1823,45 +1891,49 @@ function getTransactionReportName(reportAction) {
         return Localize.translateLocal('iou.receiptMissingDetails');
     }
 
-    const {amount, currency, comment} = getTransactionDetails(transaction);
+    const transactionDetails = getTransactionDetails(transaction);
 
     return Localize.translateLocal(ReportActionsUtils.isSentMoneyReportAction(reportAction) ? 'iou.threadSentMoneyReportName' : 'iou.threadRequestReportName', {
-        formattedAmount: CurrencyUtils.convertToDisplayString(amount, currency, TransactionUtils.isDistanceRequest(transaction)),
-        comment,
+        formattedAmount: CurrencyUtils.convertToDisplayString(transactionDetails?.amount ?? 0, transactionDetails?.currency, TransactionUtils.isDistanceRequest(transaction)) ?? '',
+        comment: transactionDetails?.comment ?? '',
     });
 }
 
 /**
  * Get money request message for an IOU report
  *
- * @param {Object} report
- * @param {Object} [reportAction={}] This can be either a report preview action or the IOU action
- * @param {Boolean} [shouldConsiderReceiptBeingScanned=false]
- * @param {Boolean} isPreviewMessageForParentChatReport
- * @param {Object} [policy]
- * @returns  {String}
- */
-function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceiptBeingScanned = false, isPreviewMessageForParentChatReport = false, policy = undefined) {
-    const reportActionMessage = lodashGet(reportAction, 'message[0].html', '');
-
-    if (_.isEmpty(report) || !report.reportID) {
+ * @param [reportAction] This can be either a report preview action or the IOU action
+ */
+function getReportPreviewMessage(
+    report: OnyxEntry<Report>,
+    reportAction: OnyxEntry<ReportAction> | EmptyObject = {},
+    shouldConsiderReceiptBeingScanned = false,
+    isPreviewMessageForParentChatReport = false,
+    policy: OnyxEntry<Policy> = null,
+): string {
+    const reportActionMessage = reportAction?.message?.[0].html ?? '';
+    if (isEmptyObject(report) || !report?.reportID) {
         // The iouReport is not found locally after SignIn because the OpenApp API won't return iouReports if they're settled
         // As a temporary solution until we know how to solve this the best, we just use the message that returned from BE
         return reportActionMessage;
     }
 
-    if (!isIOUReport(report) && ReportActionsUtils.isSplitBillAction(reportAction)) {
+    if (isNotEmptyObject(reportAction) && !isIOUReport(report) && reportAction && ReportActionsUtils.isSplitBillAction(reportAction)) {
         // This covers group chats where the last action is a split bill action
         const linkedTransaction = TransactionUtils.getLinkedTransaction(reportAction);
-        if (_.isEmpty(linkedTransaction)) {
+        if (isEmptyObject(linkedTransaction)) {
             return reportActionMessage;
         }
-        if (TransactionUtils.isReceiptBeingScanned(linkedTransaction)) {
-            return Localize.translateLocal('iou.receiptScanning');
+
+        if (isNotEmptyObject(linkedTransaction)) {
+            if (TransactionUtils.isReceiptBeingScanned(linkedTransaction)) {
+                return Localize.translateLocal('iou.receiptScanning');
+            }
+
+            const transactionDetails = getTransactionDetails(linkedTransaction);
+            const formattedAmount = CurrencyUtils.convertToDisplayString(transactionDetails?.amount ?? 0, transactionDetails?.currency ?? '');
+            return Localize.translateLocal('iou.didSplitAmount', {formattedAmount, comment: transactionDetails?.comment ?? ''});
         }
-        const {amount, currency, comment} = getTransactionDetails(linkedTransaction);
-        const formattedAmount = CurrencyUtils.convertToDisplayString(amount, currency);
-        return Localize.translateLocal('iou.didSplitAmount', {formattedAmount, comment});
     }
 
     const totalAmount = getMoneyRequestReimbursableTotal(report);
@@ -1872,10 +1944,10 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip
         return `approved ${formattedAmount}`;
     }
 
-    if (shouldConsiderReceiptBeingScanned && ReportActionsUtils.isMoneyRequestAction(reportAction)) {
+    if (isNotEmptyObject(reportAction) && shouldConsiderReceiptBeingScanned && reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction)) {
         const linkedTransaction = TransactionUtils.getLinkedTransaction(reportAction);
 
-        if (!_.isEmpty(linkedTransaction) && TransactionUtils.hasReceipt(linkedTransaction) && TransactionUtils.isReceiptBeingScanned(linkedTransaction)) {
+        if (isNotEmptyObject(linkedTransaction) && TransactionUtils.hasReceipt(linkedTransaction) && TransactionUtils.isReceiptBeingScanned(linkedTransaction)) {
             return Localize.translateLocal('iou.receiptScanning');
         }
     }
@@ -1883,38 +1955,32 @@ function getReportPreviewMessage(report, reportAction = {}, shouldConsiderReceip
     // Show Paid preview message if it's settled or if the amount is paid & stuck at receivers end for only chat reports.
     if (isSettled(report.reportID) || (report.isWaitingOnBankAccount && isPreviewMessageForParentChatReport)) {
         // A settled report preview message can come in three formats "paid ... elsewhere" or "paid ... with Expensify"
-        let translatePhraseKey = 'iou.paidElsewhereWithAmount';
+        let translatePhraseKey: TranslationPaths = 'iou.paidElsewhereWithAmount';
+        const originalMessage = reportAction?.originalMessage as IOUMessage | undefined;
         if (
-            _.contains([CONST.IOU.PAYMENT_TYPE.VBBA, CONST.IOU.PAYMENT_TYPE.EXPENSIFY], lodashGet(reportAction, 'originalMessage.paymentType')) ||
-            reportActionMessage.match(/ (with Expensify|using Expensify)$/) ||
+            [CONST.IOU.PAYMENT_TYPE.VBBA, CONST.IOU.PAYMENT_TYPE.EXPENSIFY].some((paymentType) => paymentType === originalMessage?.paymentType) ||
+            !!reportActionMessage.match(/ (with Expensify|using Expensify)$/) ||
             report.isWaitingOnBankAccount
         ) {
             translatePhraseKey = 'iou.paidWithExpensifyWithAmount';
         }
-        return Localize.translateLocal(translatePhraseKey, {amount: formattedAmount, payer: payerName});
+        return Localize.translateLocal(translatePhraseKey, {amount: formattedAmount, payer: payerName ?? ''});
     }
 
     if (report.isWaitingOnBankAccount) {
-        const submitterDisplayName = getDisplayNameForParticipant(report.ownerAccountID, true);
+        const submitterDisplayName = getDisplayNameForParticipant(report.ownerAccountID ?? -1, true) ?? '';
         return Localize.translateLocal('iou.waitingOnBankAccount', {submitterDisplayName});
     }
 
     const containsNonReimbursable = hasNonReimbursableTransactions(report.reportID);
-    return Localize.translateLocal(containsNonReimbursable ? 'iou.payerSpentAmount' : 'iou.payerOwesAmount', {payer: payerName, amount: formattedAmount});
+    return Localize.translateLocal(containsNonReimbursable ? 'iou.payerSpentAmount' : 'iou.payerOwesAmount', {payer: payerName ?? '', amount: formattedAmount});
 }
 
 /**
  * Get the proper message schema for modified expense message.
- *
- * @param {String} newValue
- * @param {String} oldValue
- * @param {String} valueName
- * @param {Boolean} valueInQuotes
- * @param {Boolean} shouldConvertToLowercase
- * @returns {String}
  */
 
-function getProperSchemaForModifiedExpenseMessage(newValue, oldValue, valueName, valueInQuotes, shouldConvertToLowercase = true) {
+function getProperSchemaForModifiedExpenseMessage(newValue: string, oldValue: string, valueName: string, valueInQuotes: boolean, shouldConvertToLowercase = true): string {
     const newValueToDisplay = valueInQuotes ? `"${newValue}"` : newValue;
     const oldValueToDisplay = valueInQuotes ? `"${oldValue}"` : oldValue;
     const displayValueName = shouldConvertToLowercase ? valueName.toLowerCase() : valueName;
@@ -1930,15 +1996,8 @@ function getProperSchemaForModifiedExpenseMessage(newValue, oldValue, valueName,
 
 /**
  * Get the proper message schema for modified distance message.
- *
- * @param {String} newDistance
- * @param {String} oldDistance
- * @param {String} newAmount
- * @param {String} oldAmount
- * @returns {String}
  */
-
-function getProperSchemaForModifiedDistanceMessage(newDistance, oldDistance, newAmount, oldAmount) {
+function getProperSchemaForModifiedDistanceMessage(newDistance: string, oldDistance: string, newAmount: string, oldAmount: string): string {
     if (!oldDistance) {
         return Localize.translateLocal('iou.setTheDistance', {newDistanceToDisplay: newDistance, newAmountToDisplay: newAmount});
     }
@@ -1955,80 +2014,99 @@ function getProperSchemaForModifiedDistanceMessage(newDistance, oldDistance, new
  *
  * ModifiedExpense::getNewDotComment in Web-Expensify should match this.
  * If we change this function be sure to update the backend as well.
- *
- * @param {Object} reportAction
- * @returns {String}
  */
-function getModifiedExpenseMessage(reportAction) {
-    const reportActionOriginalMessage = lodashGet(reportAction, 'originalMessage', {});
-    if (_.isEmpty(reportActionOriginalMessage)) {
+function getModifiedExpenseMessage(reportAction: OnyxEntry<ReportAction>): string | undefined {
+    const reportActionOriginalMessage = reportAction?.originalMessage as ExpenseOriginalMessage | undefined;
+    if (isEmptyObject(reportActionOriginalMessage)) {
         return Localize.translateLocal('iou.changedTheRequest');
     }
-    const reportID = lodashGet(reportAction, 'reportID', '');
-    const policyID = lodashGet(getReport(reportID), 'policyID', '');
+    const reportID = reportAction?.reportID ?? '';
+    const policyID = getReport(reportID)?.policyID ?? '';
     const policyTags = getPolicyTags(policyID);
     const policyTag = PolicyUtils.getTag(policyTags);
-    const policyTagListName = lodashGet(policyTag, 'name', Localize.translateLocal('common.tag'));
+    const policyTagListName = policyTag?.name ?? Localize.translateLocal('common.tag');
 
     const hasModifiedAmount =
-        _.has(reportActionOriginalMessage, 'oldAmount') &&
-        _.has(reportActionOriginalMessage, 'oldCurrency') &&
-        _.has(reportActionOriginalMessage, 'amount') &&
-        _.has(reportActionOriginalMessage, 'currency');
+        reportActionOriginalMessage &&
+        'oldAmount' in reportActionOriginalMessage &&
+        'oldCurrency' in reportActionOriginalMessage &&
+        'amount' in reportActionOriginalMessage &&
+        'currency' in reportActionOriginalMessage;
 
-    const hasModifiedMerchant = _.has(reportActionOriginalMessage, 'oldMerchant') && _.has(reportActionOriginalMessage, 'merchant');
+    const hasModifiedMerchant = reportActionOriginalMessage && 'oldMerchant' in reportActionOriginalMessage && 'merchant' in reportActionOriginalMessage;
     if (hasModifiedAmount) {
-        const oldCurrency = reportActionOriginalMessage.oldCurrency;
-        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.oldAmount, oldCurrency);
+        const oldCurrency = reportActionOriginalMessage?.oldCurrency;
+        const oldAmount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage?.oldAmount ?? 0, oldCurrency ?? '');
 
-        const currency = reportActionOriginalMessage.currency;
-        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage.amount, currency);
+        const currency = reportActionOriginalMessage?.currency;
+        const amount = CurrencyUtils.convertToDisplayString(reportActionOriginalMessage?.amount ?? 0, currency);
 
         // Only Distance edits should modify amount and merchant (which stores distance) in a single transaction.
         // We check the merchant is in distance format (includes @) as a sanity check
-        if (hasModifiedMerchant && reportActionOriginalMessage.merchant.includes('@')) {
-            return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, amount, oldAmount);
+        if (hasModifiedMerchant && reportActionOriginalMessage?.merchant?.includes('@')) {
+            return getProperSchemaForModifiedDistanceMessage(reportActionOriginalMessage?.merchant, reportActionOriginalMessage?.oldMerchant ?? '', amount, oldAmount);
         }
 
         return getProperSchemaForModifiedExpenseMessage(amount, oldAmount, Localize.translateLocal('iou.amount'), false);
     }
 
-    const hasModifiedComment = _.has(reportActionOriginalMessage, 'oldComment') && _.has(reportActionOriginalMessage, 'newComment');
+    const hasModifiedComment = reportActionOriginalMessage && 'oldComment' in reportActionOriginalMessage && 'newComment' in reportActionOriginalMessage;
     if (hasModifiedComment) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.newComment, reportActionOriginalMessage.oldComment, Localize.translateLocal('common.description'), true);
+        return getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage?.newComment ?? '',
+            reportActionOriginalMessage?.oldComment ?? '',
+            Localize.translateLocal('common.description'),
+            true,
+        );
     }
 
-    const hasModifiedCreated = _.has(reportActionOriginalMessage, 'oldCreated') && _.has(reportActionOriginalMessage, 'created');
+    const hasModifiedCreated = reportActionOriginalMessage && 'oldCreated' in reportActionOriginalMessage && 'created' in reportActionOriginalMessage;
     if (hasModifiedCreated) {
         // Take only the YYYY-MM-DD value as the original date includes timestamp
-        let formattedOldCreated = new Date(reportActionOriginalMessage.oldCreated);
+        let formattedOldCreated: Date | string = new Date(reportActionOriginalMessage?.oldCreated ?? 0);
         formattedOldCreated = format(formattedOldCreated, CONST.DATE.FNS_FORMAT_STRING);
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.created, formattedOldCreated, Localize.translateLocal('common.date'), false);
+
+        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage?.created ?? '', formattedOldCreated?.toString?.(), Localize.translateLocal('common.date'), false);
     }
 
     if (hasModifiedMerchant) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.merchant, reportActionOriginalMessage.oldMerchant, Localize.translateLocal('common.merchant'), true);
+        return getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage?.merchant ?? '',
+            reportActionOriginalMessage?.oldMerchant ?? '',
+            Localize.translateLocal('common.merchant'),
+            true,
+        );
     }
 
-    const hasModifiedCategory = _.has(reportActionOriginalMessage, 'oldCategory') && _.has(reportActionOriginalMessage, 'category');
+    const hasModifiedCategory = reportActionOriginalMessage && 'oldCategory' in reportActionOriginalMessage && 'category' in reportActionOriginalMessage;
     if (hasModifiedCategory) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.category, reportActionOriginalMessage.oldCategory, Localize.translateLocal('common.category'), true);
+        return getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage?.category ?? '',
+            reportActionOriginalMessage?.oldCategory ?? '',
+            Localize.translateLocal('common.category'),
+            true,
+        );
     }
 
-    const hasModifiedTag = _.has(reportActionOriginalMessage, 'oldTag') && _.has(reportActionOriginalMessage, 'tag');
+    const hasModifiedTag = reportActionOriginalMessage && 'oldTag' in reportActionOriginalMessage && 'tag' in reportActionOriginalMessage;
     if (hasModifiedTag) {
         return getProperSchemaForModifiedExpenseMessage(
-            reportActionOriginalMessage.tag,
-            reportActionOriginalMessage.oldTag,
+            reportActionOriginalMessage.tag ?? '',
+            reportActionOriginalMessage.oldTag ?? '',
             policyTagListName,
             true,
             policyTagListName === Localize.translateLocal('common.tag'),
         );
     }
 
-    const hasModifiedBillable = _.has(reportActionOriginalMessage, 'oldBillable') && _.has(reportActionOriginalMessage, 'billable');
+    const hasModifiedBillable = reportActionOriginalMessage && 'oldBillable' in reportActionOriginalMessage && 'billable' in reportActionOriginalMessage;
     if (hasModifiedBillable) {
-        return getProperSchemaForModifiedExpenseMessage(reportActionOriginalMessage.billable, reportActionOriginalMessage.oldBillable, Localize.translateLocal('iou.request'), true);
+        return getProperSchemaForModifiedExpenseMessage(
+            reportActionOriginalMessage?.billable ?? '',
+            reportActionOriginalMessage?.oldBillable ?? '',
+            Localize.translateLocal('iou.request'),
+            true,
+        );
     }
 }
 
@@ -2037,53 +2115,47 @@ function getModifiedExpenseMessage(reportAction) {
  * object of the modified expense action.
  *
  * At the moment, we only allow changing one transaction field at a time.
- *
- * @param {Object} oldTransaction
- * @param {Object} transactionChanges
- * @param {Boolean} isFromExpenseReport
- * @returns {Object}
  */
-function getModifiedExpenseOriginalMessage(oldTransaction, transactionChanges, isFromExpenseReport) {
-    const originalMessage = {};
-
+function getModifiedExpenseOriginalMessage(oldTransaction: OnyxEntry<Transaction>, transactionChanges: ExpenseOriginalMessage, isFromExpenseReport: boolean): ExpenseOriginalMessage {
+    const originalMessage: ExpenseOriginalMessage = {};
     // Remark: Comment field is the only one which has new/old prefixes for the keys (newComment/ oldComment),
     // all others have old/- pattern such as oldCreated/created
-    if (_.has(transactionChanges, 'comment')) {
+    if ('comment' in transactionChanges) {
         originalMessage.oldComment = TransactionUtils.getDescription(oldTransaction);
-        originalMessage.newComment = transactionChanges.comment;
+        originalMessage.newComment = transactionChanges?.comment;
     }
-    if (_.has(transactionChanges, 'created')) {
+    if ('created' in transactionChanges) {
         originalMessage.oldCreated = TransactionUtils.getCreated(oldTransaction);
-        originalMessage.created = transactionChanges.created;
+        originalMessage.created = transactionChanges?.created;
     }
-    if (_.has(transactionChanges, 'merchant')) {
+    if ('merchant' in transactionChanges) {
         originalMessage.oldMerchant = TransactionUtils.getMerchant(oldTransaction);
-        originalMessage.merchant = transactionChanges.merchant;
+        originalMessage.merchant = transactionChanges?.merchant;
     }
 
     // The amount is always a combination of the currency and the number value so when one changes we need to store both
     // to match how we handle the modified expense action in oldDot
-    if (_.has(transactionChanges, 'amount') || _.has(transactionChanges, 'currency')) {
+    if ('amount' in transactionChanges || 'currency' in transactionChanges) {
         originalMessage.oldAmount = TransactionUtils.getAmount(oldTransaction, isFromExpenseReport);
-        originalMessage.amount = lodashGet(transactionChanges, 'amount', originalMessage.oldAmount);
+        originalMessage.amount = transactionChanges?.amount ?? transactionChanges.oldAmount;
         originalMessage.oldCurrency = TransactionUtils.getCurrency(oldTransaction);
-        originalMessage.currency = lodashGet(transactionChanges, 'currency', originalMessage.oldCurrency);
+        originalMessage.currency = transactionChanges?.currency ?? transactionChanges.oldCurrency;
     }
 
-    if (_.has(transactionChanges, 'category')) {
+    if ('category' in transactionChanges) {
         originalMessage.oldCategory = TransactionUtils.getCategory(oldTransaction);
-        originalMessage.category = transactionChanges.category;
+        originalMessage.category = transactionChanges?.category;
     }
 
-    if (_.has(transactionChanges, 'tag')) {
+    if ('tag' in transactionChanges) {
         originalMessage.oldTag = TransactionUtils.getTag(oldTransaction);
-        originalMessage.tag = transactionChanges.tag;
+        originalMessage.tag = transactionChanges?.tag;
     }
 
-    if (_.has(transactionChanges, 'billable')) {
+    if ('billable' in transactionChanges) {
         const oldBillable = TransactionUtils.getBillable(oldTransaction);
         originalMessage.oldBillable = oldBillable ? Localize.translateLocal('common.billable').toLowerCase() : Localize.translateLocal('common.nonBillable').toLowerCase();
-        originalMessage.billable = transactionChanges.billable ? Localize.translateLocal('common.billable').toLowerCase() : Localize.translateLocal('common.nonBillable').toLowerCase();
+        originalMessage.billable = transactionChanges?.billable ? Localize.translateLocal('common.billable').toLowerCase() : Localize.translateLocal('common.nonBillable').toLowerCase();
     }
 
     return originalMessage;
@@ -2091,63 +2163,53 @@ function getModifiedExpenseOriginalMessage(oldTransaction, transactionChanges, i
 
 /**
  * Returns the parentReport if the given report is a thread.
- *
- * @param {Object} report
- * @returns {Object}
  */
-function getParentReport(report) {
-    if (!report || !report.parentReportID) {
+function getParentReport(report: OnyxEntry<Report>): OnyxEntry<Report> | EmptyObject {
+    if (!report?.parentReportID) {
         return {};
     }
-    return lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, {});
+    return allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`] ?? {};
 }
 
 /**
  * Returns the root parentReport if the given report is nested.
  * Uses recursion to iterate any depth of nested reports.
- *
- * @param {Object} report
- * @returns {Object}
  */
-function getRootParentReport(report) {
+function getRootParentReport(report: OnyxEntry<Report>): OnyxEntry<Report> | EmptyObject {
     if (!report) {
         return {};
     }
 
     // Returns the current report as the root report, because it does not have a parentReportID
-    if (!report.parentReportID) {
+    if (!report?.parentReportID) {
         return report;
     }
 
-    const parentReport = getReport(report.parentReportID);
+    const parentReport = getReport(report?.parentReportID);
 
     // Runs recursion to iterate a parent report
-    return getRootParentReport(parentReport);
+    return getRootParentReport(isNotEmptyObject(parentReport) ? parentReport : null);
 }
 
 /**
  * Get the title for a report.
- *
- * @param {Object} report
- * @param {Object} [policy]
- * @returns {String}
  */
-function getReportName(report, policy = undefined) {
-    let formattedName;
+function getReportName(report: OnyxEntry<Report>, policy: OnyxEntry<Policy> = null): string {
+    let formattedName: string | undefined;
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
     if (isChatThread(report)) {
-        if (ReportActionsUtils.isTransactionThread(parentReportAction)) {
+        if (isNotEmptyObject(parentReportAction) && ReportActionsUtils.isTransactionThread(parentReportAction)) {
             return getTransactionReportName(parentReportAction);
         }
 
-        const isAttachment = ReportActionsUtils.isReportActionAttachment(parentReportAction);
-        const parentReportActionMessage = lodashGet(parentReportAction, ['message', 0, 'text'], '').replace(/(\r\n|\n|\r)/gm, ' ');
+        const isAttachment = ReportActionsUtils.isReportActionAttachment(isNotEmptyObject(parentReportAction) ? parentReportAction : null);
+        const parentReportActionMessage = (parentReportAction?.message?.[0]?.text ?? '').replace(/(\r\n|\n|\r)/gm, ' ');
         if (isAttachment && parentReportActionMessage) {
             return `[${Localize.translateLocal('common.attachment')}]`;
         }
         if (
-            lodashGet(parentReportAction, 'message[0].moderationDecision.decision') === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE ||
-            lodashGet(parentReportAction, 'message[0].moderationDecision.decision') === CONST.MODERATION.MODERATOR_DECISION_HIDDEN
+            parentReportAction?.message?.[0]?.moderationDecision?.decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE ||
+            parentReportAction?.message?.[0]?.moderationDecision?.decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN
         ) {
             return Localize.translateLocal('parentReportAction.hiddenMessage');
         }
@@ -2159,7 +2221,7 @@ function getReportName(report, policy = undefined) {
     }
 
     if (isChatRoom(report) || isTaskReport(report)) {
-        formattedName = report.reportName;
+        formattedName = report?.reportName;
     }
 
     if (isPolicyExpenseChat(report)) {
@@ -2179,22 +2241,25 @@ function getReportName(report, policy = undefined) {
     }
 
     // Not a room or PolicyExpenseChat, generate title from participants
-    const participantAccountIDs = (report && report.participantAccountIDs) || [];
-    const participantsWithoutCurrentUser = _.without(participantAccountIDs, currentUserAccountID);
+    const participantAccountIDs = report?.participantAccountIDs ?? [];
+    const participantsWithoutCurrentUser = participantAccountIDs.filter((accountID) => accountID !== currentUserAccountID);
     const isMultipleParticipantReport = participantsWithoutCurrentUser.length > 1;
 
-    return _.map(participantsWithoutCurrentUser, (accountID) => getDisplayNameForParticipant(accountID, isMultipleParticipantReport)).join(', ');
+    return participantsWithoutCurrentUser.map((accountID) => getDisplayNameForParticipant(accountID, isMultipleParticipantReport)).join(', ');
 }
 
 /**
  * Recursively navigates through thread parents to get the root report and workspace name.
  * The recursion stops when we find a non thread or money request report, whichever comes first.
- * @param {Object} report
- * @returns {Object}
  */
-function getRootReportAndWorkspaceName(report) {
+function getRootReportAndWorkspaceName(report: OnyxEntry<Report>): ReportAndWorkspaceName {
+    if (!report) {
+        return {
+            rootReportName: '',
+        };
+    }
     if (isChildReport(report) && !isMoneyRequestReport(report) && !isTaskReport(report)) {
-        const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
+        const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
         return getRootReportAndWorkspaceName(parentReport);
     }
 
@@ -2218,10 +2283,8 @@ function getRootReportAndWorkspaceName(report) {
 
 /**
  * Get either the policyName or domainName the chat is tied to
- * @param {Object} report
- * @returns {String}
  */
-function getChatRoomSubtitle(report) {
+function getChatRoomSubtitle(report: OnyxEntry<Report>): string | undefined {
     if (isChatThread(report)) {
         return '';
     }
@@ -2230,27 +2293,25 @@ function getChatRoomSubtitle(report) {
     }
     if (getChatType(report) === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL) {
         // The domainAll rooms are just #domainName, so we ignore the prefix '#' to get the domainName
-        return report.reportName.substring(1);
+        return report?.reportName?.substring(1) ?? '';
     }
-    if ((isPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat) || isExpenseReport(report)) {
+    if ((isPolicyExpenseChat(report) && !!report?.isOwnPolicyExpenseChat) || isExpenseReport(report)) {
         return Localize.translateLocal('workspace.common.workspace');
     }
     if (isArchivedRoom(report)) {
-        return report.oldPolicyName || '';
+        return report?.oldPolicyName ?? '';
     }
     return getPolicyName(report);
 }
 
 /**
  * Gets the parent navigation subtitle for the report
- * @param {Object} report
- * @returns {Object}
  */
-function getParentNavigationSubtitle(report) {
+function getParentNavigationSubtitle(report: OnyxEntry<Report>): ReportAndWorkspaceName | EmptyObject {
     if (isThread(report)) {
-        const parentReport = lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`]);
+        const parentReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`] ?? null;
         const {rootReportName, workspaceName} = getRootReportAndWorkspaceName(parentReport);
-        if (_.isEmpty(rootReportName)) {
+        if (!rootReportName) {
             return {};
         }
 
@@ -2262,29 +2323,28 @@ function getParentNavigationSubtitle(report) {
 /**
  * Navigate to the details page of a given report
  *
- * @param {Object} report
  */
-function navigateToDetailsPage(report) {
-    const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);
+function navigateToDetailsPage(report: OnyxEntry<Report>) {
+    const participantAccountIDs = report?.participantAccountIDs ?? [];
 
     if (isOneOnOneChat(report)) {
         Navigation.navigate(ROUTES.PROFILE.getRoute(participantAccountIDs[0]));
         return;
     }
-    Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
+    if (report?.reportID) {
+        Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID));
+    }
 }
 
 /**
  * Go back to the details page of a given report
- *
- * @param {Object} report
  */
-function goBackToDetailsPage(report) {
+function goBackToDetailsPage(report: OnyxEntry<Report>) {
     if (isOneOnOneChat(report)) {
-        Navigation.goBack(ROUTES.PROFILE.getRoute(report.participantAccountIDs[0]));
+        Navigation.goBack(ROUTES.PROFILE.getRoute(report?.participantAccountIDs?.[0] ?? ''));
         return;
     }
-    Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID));
+    Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report?.reportID ?? ''));
 }
 
 /**
@@ -2294,48 +2354,33 @@ function goBackToDetailsPage(report) {
  *
  * In a test of 500M reports (28 years of reports at our current max rate) we got 20-40 collisions meaning that
  * this is more than random enough for our needs.
- *
- * @returns {String}
  */
-function generateReportID() {
+function generateReportID(): string {
     return (Math.floor(Math.random() * 2 ** 21) * 2 ** 32 + Math.floor(Math.random() * 2 ** 32)).toString();
 }
 
-/**
- * @param {Object} report
- * @returns {Boolean}
- */
-function hasReportNameError(report) {
-    return !_.isEmpty(lodashGet(report, 'errorFields.reportName', {}));
+function hasReportNameError(report: OnyxEntry<Report>): boolean {
+    return !isEmptyObject(report?.errorFields?.reportName);
 }
 
 /**
  * For comments shorter than or equal to 10k chars, convert the comment from MD into HTML because that's how it is stored in the database
  * For longer comments, skip parsing, but still escape the text, and display plaintext for performance reasons. It takes over 40s to parse a 100k long string!!
- *
- * @param {String} text
- * @returns {String}
  */
-function getParsedComment(text) {
+function getParsedComment(text: string): string {
     const parser = new ExpensiMark();
-    return text.length <= CONST.MAX_MARKUP_LENGTH ? parser.replace(text) : _.escape(text);
+    return text.length <= CONST.MAX_MARKUP_LENGTH ? parser.replace(text) : lodashEscape(text);
 }
 
-/**
- * @param {String} [text]
- * @param {File} [file]
- * @returns {Object}
- */
-function buildOptimisticAddCommentReportAction(text, file) {
+function buildOptimisticAddCommentReportAction(text?: string, file?: File & {source: string; uri: string}): OptimisticReportAction {
     const parser = new ExpensiMark();
-    const commentText = getParsedComment(text);
-    const isAttachment = _.isEmpty(text) && file !== undefined;
+    const commentText = getParsedComment(text ?? '');
+    const isAttachment = !text && file !== undefined;
     const attachmentInfo = isAttachment ? file : {};
     const htmlForNewComment = isAttachment ? CONST.ATTACHMENT_UPLOADING_MESSAGE_HTML : commentText;
 
     // Remove HTML from text when applying optimistic offline comment
     const textForNewComment = isAttachment ? CONST.ATTACHMENT_MESSAGE_TEXT : parser.htmlToText(htmlForNewComment);
-
     return {
         commentText,
         reportAction: {
@@ -2345,12 +2390,12 @@ function buildOptimisticAddCommentReportAction(text, file) {
             person: [
                 {
                     style: 'strong',
-                    text: lodashGet(allPersonalDetails, [currentUserAccountID, 'displayName'], currentUserEmail),
+                    text: allPersonalDetails?.[currentUserAccountID ?? -1]?.displayName ?? currentUserEmail,
                     type: 'TEXT',
                 },
             ],
             automatic: false,
-            avatar: lodashGet(allPersonalDetails, [currentUserAccountID, 'avatar'], UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+            avatar: allPersonalDetails?.[currentUserAccountID ?? -1]?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
             created: DateUtils.getDBTime(),
             message: [
                 {
@@ -2371,25 +2416,24 @@ function buildOptimisticAddCommentReportAction(text, file) {
 
 /**
  * update optimistic parent reportAction when a comment is added or remove in the child report
- * @param {String} parentReportAction - Parent report action of the child report
- * @param {String} lastVisibleActionCreated - Last visible action created of the child report
- * @param {String} type - The type of action in the child report
- * @returns {Object}
+ * @param parentReportAction - Parent report action of the child report
+ * @param lastVisibleActionCreated - Last visible action created of the child report
+ * @param type - The type of action in the child report
  */
 
-function updateOptimisticParentReportAction(parentReportAction, lastVisibleActionCreated, type) {
-    let childVisibleActionCount = parentReportAction.childVisibleActionCount || 0;
-    let childCommenterCount = parentReportAction.childCommenterCount || 0;
-    let childOldestFourAccountIDs = parentReportAction.childOldestFourAccountIDs;
+function updateOptimisticParentReportAction(parentReportAction: OnyxEntry<ReportAction>, lastVisibleActionCreated: string, type: string): UpdateOptimisticParentReportAction {
+    let childVisibleActionCount = parentReportAction?.childVisibleActionCount ?? 0;
+    let childCommenterCount = parentReportAction?.childCommenterCount ?? 0;
+    let childOldestFourAccountIDs = parentReportAction?.childOldestFourAccountIDs;
 
     if (type === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
         childVisibleActionCount += 1;
         const oldestFourAccountIDs = childOldestFourAccountIDs ? childOldestFourAccountIDs.split(',') : [];
         if (oldestFourAccountIDs.length < 4) {
-            const index = _.findIndex(oldestFourAccountIDs, (accountID) => accountID === currentUserAccountID.toString());
+            const index = oldestFourAccountIDs.findIndex((accountID) => accountID === currentUserAccountID?.toString());
             if (index === -1) {
                 childCommenterCount += 1;
-                oldestFourAccountIDs.push(currentUserAccountID);
+                oldestFourAccountIDs.push(currentUserAccountID?.toString() ?? '');
             }
         }
         childOldestFourAccountIDs = oldestFourAccountIDs.join(',');
@@ -2414,48 +2458,51 @@ function updateOptimisticParentReportAction(parentReportAction, lastVisibleActio
 
 /**
  * Get optimistic data of parent report action
- * @param {String} reportID The reportID of the report that is updated
- * @param {String} lastVisibleActionCreated Last visible action created of the child report
- * @param {String} type The type of action in the child report
- * @param {String} parentReportID Custom reportID to be updated
- * @param {String} parentReportActionID Custom reportActionID to be updated
- * @returns {Object}
- */
-function getOptimisticDataForParentReportAction(reportID, lastVisibleActionCreated, type, parentReportID = '', parentReportActionID = '') {
+ * @param reportID The reportID of the report that is updated
+ * @param lastVisibleActionCreated Last visible action created of the child report
+ * @param type The type of action in the child report
+ * @param parentReportID Custom reportID to be updated
+ * @param parentReportActionID Custom reportActionID to be updated
+ */
+function getOptimisticDataForParentReportAction(reportID: string, lastVisibleActionCreated: string, type: string, parentReportID = '', parentReportActionID = ''): OnyxUpdate | EmptyObject {
     const report = getReport(reportID);
+    if (!report || !isNotEmptyObject(report)) {
+        return {};
+    }
     const parentReportAction = ReportActionsUtils.getParentReportAction(report);
-    if (_.isEmpty(parentReportAction)) {
+    if (!parentReportAction || !isNotEmptyObject(parentReportAction)) {
         return {};
     }
 
     const optimisticParentReportAction = updateOptimisticParentReportAction(parentReportAction, lastVisibleActionCreated, type);
     return {
         onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID || report.parentReportID}`,
+        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${parentReportID || report?.parentReportID}`,
         value: {
-            [parentReportActionID || report.parentReportActionID]: optimisticParentReportAction,
+            [parentReportActionID || (report?.parentReportActionID ?? '')]: optimisticParentReportAction,
         },
     };
 }
 
 /**
  * Builds an optimistic reportAction for the parent report when a task is created
- * @param {String} taskReportID - Report ID of the task
- * @param {String} taskTitle - Title of the task
- * @param {Number} taskAssigneeAccountID - AccountID of the person assigned to the task
- * @param {String} text - Text of the comment
- * @param {String} parentReportID - Report ID of the parent report
- * @returns {Object}
- */
-function buildOptimisticTaskCommentReportAction(taskReportID, taskTitle, taskAssigneeAccountID, text, parentReportID) {
+ * @param taskReportID - Report ID of the task
+ * @param taskTitle - Title of the task
+ * @param taskAssigneeAccountID - AccountID of the person assigned to the task
+ * @param text - Text of the comment
+ * @param parentReportID - Report ID of the parent report
+ */
+function buildOptimisticTaskCommentReportAction(taskReportID: string, taskTitle: string, taskAssigneeAccountID: number, text: string, parentReportID: string): OptimisticReportAction {
     const reportAction = buildOptimisticAddCommentReportAction(text);
-    reportAction.reportAction.message[0].taskReportID = taskReportID;
+    if (reportAction.reportAction.message) {
+        reportAction.reportAction.message[0].taskReportID = taskReportID;
+    }
 
     // These parameters are not saved on the reportAction, but are used to display the task in the UI
     // Added when we fetch the reportActions on a report
     reportAction.reportAction.originalMessage = {
-        html: reportAction.reportAction.message[0].html,
-        taskReportID: reportAction.reportAction.message[0].taskReportID,
+        html: reportAction.reportAction.message?.[0].html,
+        taskReportID: reportAction.reportAction.message?.[0].taskReportID,
     };
     reportAction.reportAction.childReportID = taskReportID;
     reportAction.reportAction.parentReportID = parentReportID;
@@ -2471,19 +2518,18 @@ function buildOptimisticTaskCommentReportAction(taskReportID, taskTitle, taskAss
 /**
  * Builds an optimistic IOU report with a randomly generated reportID
  *
- * @param {Number} payeeAccountID - AccountID of the person generating the IOU.
- * @param {Number} payerAccountID - AccountID of the other person participating in the IOU.
- * @param {Number} total - IOU amount in the smallest unit of the currency.
- * @param {String} chatReportID - Report ID of the chat where the IOU is.
- * @param {String} currency - IOU currency.
- * @param {Boolean} isSendingMoney - If we send money the IOU should be created as settled
- *
- * @returns {Object}
+ * @param payeeAccountID - AccountID of the person generating the IOU.
+ * @param payerAccountID - AccountID of the other person participating in the IOU.
+ * @param total - IOU amount in the smallest unit of the currency.
+ * @param chatReportID - Report ID of the chat where the IOU is.
+ * @param currency - IOU currency.
+ * @param isSendingMoney - If we send money the IOU should be created as settled
  */
-function buildOptimisticIOUReport(payeeAccountID, payerAccountID, total, chatReportID, currency, isSendingMoney = false) {
+
+function buildOptimisticIOUReport(payeeAccountID: number, payerAccountID: number, total: number, chatReportID: string, currency: string, isSendingMoney = false): OptimisticIOUReport {
     const formattedTotal = CurrencyUtils.convertToDisplayString(total, currency);
     const personalDetails = getPersonalDetailsForAccountID(payerAccountID);
-    const payerEmail = personalDetails.login;
+    const payerEmail = 'login' in personalDetails ? personalDetails.login : '';
     return {
         // If we're sending money, hasOutstandingIOU should be false
         hasOutstandingIOU: !isSendingMoney,
@@ -2510,22 +2556,28 @@ function buildOptimisticIOUReport(payeeAccountID, payerAccountID, total, chatRep
 /**
  * Builds an optimistic Expense report with a randomly generated reportID
  *
- * @param {String} chatReportID - Report ID of the PolicyExpenseChat where the Expense Report is
- * @param {String} policyID - The policy ID of the PolicyExpenseChat
- * @param {Number} payeeAccountID - AccountID of the employee (payee)
- * @param {Number} total - Amount in cents
- * @param {String} currency
- *
- * @returns {Object}
+ * @param chatReportID - Report ID of the PolicyExpenseChat where the Expense Report is
+ * @param policyID - The policy ID of the PolicyExpenseChat
+ * @param payeeAccountID - AccountID of the employee (payee)
+ * @param total - Amount in cents
+ * @param currency
  */
-function buildOptimisticExpenseReport(chatReportID, policyID, payeeAccountID, total, currency) {
+
+function buildOptimisticExpenseReport(chatReportID: string, policyID: string, payeeAccountID: number, total: number, currency: string): OptimisticExpenseReport {
     // The amount for Expense reports are stored as negative value in the database
     const storedTotal = total * -1;
-    const policyName = getPolicyName(allReports[`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`]);
+    const policyName = getPolicyName(allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`]);
     const formattedTotal = CurrencyUtils.convertToDisplayString(storedTotal, currency);
+    const policy = getPolicy(policyID);
 
     // The expense report is always created with the policy's output currency
-    const outputCurrency = lodashGet(allPolicies, [`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, 'outputCurrency'], CONST.CURRENCY.USD);
+    const outputCurrency = policy?.outputCurrency ?? CONST.CURRENCY.USD;
+    const isFree = policy?.type === CONST.POLICY.TYPE.FREE;
+
+    // Define the state and status of the report based on whether the policy is free or paid
+    const state = isFree ? CONST.REPORT.STATE.SUBMITTED : CONST.REPORT.STATE.OPEN;
+    const stateNum = isFree ? CONST.REPORT.STATE_NUM.PROCESSING : CONST.REPORT.STATE_NUM.OPEN;
+    const statusNum = isFree ? CONST.REPORT.STATUS.SUBMITTED : CONST.REPORT.STATUS.OPEN;
 
     return {
         reportID: generateReportID(),
@@ -2538,8 +2590,9 @@ function buildOptimisticExpenseReport(chatReportID, policyID, payeeAccountID, to
 
         // We don't translate reportName because the server response is always in English
         reportName: `${policyName} owes ${formattedTotal}`,
-        state: CONST.REPORT.STATE.SUBMITTED,
-        stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
+        state,
+        stateNum,
+        statusNum,
         total: storedTotal,
         notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
         parentReportID: chatReportID,
@@ -2547,19 +2600,19 @@ function buildOptimisticExpenseReport(chatReportID, policyID, payeeAccountID, to
 }
 
 /**
- * @param {String} iouReportID - the report ID of the IOU report the action belongs to
- * @param {String} type - IOUReportAction type. Can be oneOf(create, decline, cancel, pay, split)
- * @param {Number} total - IOU total in cents
- * @param {String} comment - IOU comment
- * @param {String} currency - IOU currency
- * @param {String} paymentType - IOU paymentMethodType. Can be oneOf(Elsewhere, Expensify)
- * @param {Boolean} isSettlingUp - Whether we are settling up an IOU
- * @returns {Array}
+ * @param iouReportID - the report ID of the IOU report the action belongs to
+ * @param type - IOUReportAction type. Can be oneOf(create, decline, cancel, pay, split)
+ * @param total - IOU total in cents
+ * @param comment - IOU comment
+ * @param currency - IOU currency
+ * @param paymentType - IOU paymentMethodType. Can be oneOf(Elsewhere, Expensify)
+ * @param isSettlingUp - Whether we are settling up an IOU
  */
-function getIOUReportActionMessage(iouReportID, type, total, comment, currency, paymentType = '', isSettlingUp = false) {
+function getIOUReportActionMessage(iouReportID: string, type: string, total: number, comment: string, currency: string, paymentType = '', isSettlingUp = false): [Message] {
+    const report = getReport(iouReportID);
     const amount =
         type === CONST.IOU.REPORT_ACTION_TYPE.PAY
-            ? CurrencyUtils.convertToDisplayString(getMoneyRequestReimbursableTotal(getReport(iouReportID)), currency)
+            ? CurrencyUtils.convertToDisplayString(getMoneyRequestReimbursableTotal(isNotEmptyObject(report) ? report : null), currency)
             : CurrencyUtils.convertToDisplayString(total, currency);
 
     let paymentMethodMessage;
@@ -2599,8 +2652,8 @@ function getIOUReportActionMessage(iouReportID, type, total, comment, currency,
 
     return [
         {
-            html: _.escape(iouMessage),
-            text: iouMessage,
+            html: lodashEscape(iouMessage),
+            text: iouMessage ?? '',
             isEdited: false,
             type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
         },
@@ -2610,39 +2663,38 @@ function getIOUReportActionMessage(iouReportID, type, total, comment, currency,
 /**
  * Builds an optimistic IOU reportAction object
  *
- * @param {String} type - IOUReportAction type. Can be oneOf(create, delete, pay, split).
- * @param {Number} amount - IOU amount in cents.
- * @param {String} currency
- * @param {String} comment - User comment for the IOU.
- * @param {Array}  participants - An array with participants details.
- * @param {String} [transactionID] - Not required if the IOUReportAction type is 'pay'
- * @param {String} [paymentType] - Only required if the IOUReportAction type is 'pay'. Can be oneOf(elsewhere, Expensify).
- * @param {String} [iouReportID] - Only required if the IOUReportActions type is oneOf(decline, cancel, pay). Generates a randomID as default.
- * @param {Boolean} [isSettlingUp] - Whether we are settling up an IOU.
- * @param {Boolean} [isSendMoneyFlow] - Whether this is send money flow
- * @param {Object} [receipt]
- * @param {Boolean} [isOwnPolicyExpenseChat] - Whether this is an expense report create from the current user's policy expense chat
- * @param {String} [created] - Action created time
- * @returns {Object}
+ * @param type - IOUReportAction type. Can be oneOf(create, delete, pay, split).
+ * @param amount - IOU amount in cents.
+ * @param currency
+ * @param comment - User comment for the IOU.
+ * @param participants - An array with participants details.
+ * @param [transactionID] - Not required if the IOUReportAction type is 'pay'
+ * @param [paymentType] - Only required if the IOUReportAction type is 'pay'. Can be oneOf(elsewhere, Expensify).
+ * @param [iouReportID] - Only required if the IOUReportActions type is oneOf(decline, cancel, pay). Generates a randomID as default.
+ * @param [isSettlingUp] - Whether we are settling up an IOU.
+ * @param [isSendMoneyFlow] - Whether this is send money flow
+ * @param [receipt]
+ * @param [isOwnPolicyExpenseChat] - Whether this is an expense report create from the current user's policy expense chat
  */
+
 function buildOptimisticIOUReportAction(
-    type,
-    amount,
-    currency,
-    comment,
-    participants,
-    transactionID = '',
-    paymentType = '',
+    type: ValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE>,
+    amount: number,
+    currency: string,
+    comment: string,
+    participants: Participant[],
+    transactionID: string,
+    paymentType: DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>,
     iouReportID = '',
     isSettlingUp = false,
     isSendMoneyFlow = false,
-    receipt = {},
+    receipt: Receipt = {},
     isOwnPolicyExpenseChat = false,
     created = DateUtils.getDBTime(),
-) {
+): OptimisticIOUReportAction {
     const IOUReportID = iouReportID || generateReportID();
 
-    const originalMessage = {
+    const originalMessage: IOUMessage = {
         amount,
         comment,
         currency,
@@ -2654,7 +2706,8 @@ function buildOptimisticIOUReportAction(
     if (type === CONST.IOU.REPORT_ACTION_TYPE.PAY) {
         // In send money flow, we store amount, comment, currency in IOUDetails when type = pay
         if (isSendMoneyFlow) {
-            _.each(['amount', 'comment', 'currency'], (key) => {
+            const keys = ['amount', 'comment', 'currency'] as const;
+            keys.forEach((key) => {
                 delete originalMessage[key];
             });
             originalMessage.IOUDetails = {amount, comment, currency};
@@ -2673,9 +2726,11 @@ function buildOptimisticIOUReportAction(
         delete originalMessage.IOUReportID;
         // Split bill made from a policy expense chat only have the payee's accountID as the participant because the payer could be any policy admin
         if (isOwnPolicyExpenseChat) {
-            originalMessage.participantAccountIDs = [currentUserAccountID];
+            originalMessage.participantAccountIDs = currentUserAccountID ? [currentUserAccountID] : [];
         } else {
-            originalMessage.participantAccountIDs = [currentUserAccountID, ..._.pluck(participants, 'accountID')];
+            originalMessage.participantAccountIDs = currentUserAccountID
+                ? [currentUserAccountID, ...participants.map((participant) => participant.accountID)]
+                : participants.map((participant) => participant.accountID);
         }
     }
 
@@ -2683,14 +2738,14 @@ function buildOptimisticIOUReportAction(
         actionName: CONST.REPORT.ACTIONS.TYPE.IOU,
         actorAccountID: currentUserAccountID,
         automatic: false,
-        avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: currentUserPersonalDetails?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         isAttachment: false,
         originalMessage,
         message: getIOUReportActionMessage(iouReportID, type, amount, comment, currency, paymentType, isSettlingUp),
         person: [
             {
                 style: 'strong',
-                text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserEmail),
+                text: currentUserPersonalDetails?.displayName ?? currentUserEmail,
                 type: 'TEXT',
             },
         ],
@@ -2698,20 +2753,14 @@ function buildOptimisticIOUReportAction(
         shouldShow: true,
         created,
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
-        whisperedToAccountIDs: _.contains([CONST.IOU.RECEIPT_STATE.SCANREADY, CONST.IOU.RECEIPT_STATE.SCANNING], receipt.state) ? [currentUserAccountID] : [],
+        whisperedToAccountIDs: [CONST.IOU.RECEIPT_STATE.SCANREADY, CONST.IOU.RECEIPT_STATE.SCANNING].some((value) => value === receipt?.state) ? [currentUserAccountID ?? -1] : [],
     };
 }
 
 /**
  * Builds an optimistic APPROVED report action with a randomly generated reportActionID.
- *
- * @param {Number} amount
- * @param {String} currency
- * @param {Number} expenseReportID
- *
- * @returns {Object}
  */
-function buildOptimisticApprovedReportAction(amount, currency, expenseReportID) {
+function buildOptimisticApprovedReportAction(amount: number, currency: string, expenseReportID: string): OptimisticApprovedReportAction {
     const originalMessage = {
         amount,
         currency,
@@ -2722,14 +2771,14 @@ function buildOptimisticApprovedReportAction(amount, currency, expenseReportID)
         actionName: CONST.REPORT.ACTIONS.TYPE.APPROVED,
         actorAccountID: currentUserAccountID,
         automatic: false,
-        avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: currentUserPersonalDetails?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         isAttachment: false,
         originalMessage,
         message: getIOUReportActionMessage(expenseReportID, CONST.REPORT.ACTIONS.TYPE.APPROVED, Math.abs(amount), '', currency),
         person: [
             {
                 style: 'strong',
-                text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserEmail),
+                text: currentUserPersonalDetails?.displayName ?? currentUserEmail,
                 type: 'TEXT',
             },
         ],
@@ -2743,15 +2792,8 @@ function buildOptimisticApprovedReportAction(amount, currency, expenseReportID)
 /**
  * Builds an optimistic MOVED report action with a randomly generated reportActionID.
  * This action is used when we move reports across workspaces.
- *
- * @param {String} fromPolicyID
- * @param {String} toPolicyID
- * @param {Number} newParentReportID
- * @param {Number} movedReportID
- *
- * @returns {Object}
  */
-function buildOptimisticMovedReportAction(fromPolicyID, toPolicyID, newParentReportID, movedReportID) {
+function buildOptimisticMovedReportAction(fromPolicyID: string, toPolicyID: string, newParentReportID: string, movedReportID: string, policyName: string): ReportAction {
     const originalMessage = {
         fromPolicyID,
         toPolicyID,
@@ -2759,7 +2801,6 @@ function buildOptimisticMovedReportAction(fromPolicyID, toPolicyID, newParentRep
         movedReportID,
     };
 
-    const policyName = getPolicyName(allReports[`${ONYXKEYS.COLLECTION.REPORT}${newParentReportID}`]);
     const movedActionMessage = [
         {
             html: `moved the report to the <a href='${CONST.NEW_EXPENSIFY_URL}r/${newParentReportID}' target='_blank' rel='noreferrer noopener'>${policyName}</a> workspace`,
@@ -2772,14 +2813,14 @@ function buildOptimisticMovedReportAction(fromPolicyID, toPolicyID, newParentRep
         actionName: CONST.REPORT.ACTIONS.TYPE.MOVED,
         actorAccountID: currentUserAccountID,
         automatic: false,
-        avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: currentUserPersonalDetails?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         isAttachment: false,
         originalMessage,
         message: movedActionMessage,
         person: [
             {
                 style: 'strong',
-                text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserEmail),
+                text: currentUserPersonalDetails?.displayName ?? currentUserEmail,
                 type: 'TEXT',
             },
         ],
@@ -2793,13 +2834,8 @@ function buildOptimisticMovedReportAction(fromPolicyID, toPolicyID, newParentRep
 /**
  * Builds an optimistic SUBMITTED report action with a randomly generated reportActionID.
  *
- * @param {Number} amount
- * @param {String} currency
- * @param {Number} expenseReportID
- *
- * @returns {Object}
  */
-function buildOptimisticSubmittedReportAction(amount, currency, expenseReportID) {
+function buildOptimisticSubmittedReportAction(amount: number, currency: string, expenseReportID: string): OptimisticSubmittedReportAction {
     const originalMessage = {
         amount,
         currency,
@@ -2810,14 +2846,14 @@ function buildOptimisticSubmittedReportAction(amount, currency, expenseReportID)
         actionName: CONST.REPORT.ACTIONS.TYPE.SUBMITTED,
         actorAccountID: currentUserAccountID,
         automatic: false,
-        avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatar(currentUserAccountID)),
+        avatar: currentUserPersonalDetails?.avatar ?? UserUtils.getDefaultAvatar(currentUserAccountID),
         isAttachment: false,
         originalMessage,
         message: getIOUReportActionMessage(expenseReportID, CONST.REPORT.ACTIONS.TYPE.SUBMITTED, Math.abs(amount), '', currency),
         person: [
             {
                 style: 'strong',
-                text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserEmail),
+                text: currentUserPersonalDetails?.displayName ?? currentUserEmail,
                 type: 'TEXT',
             },
         ],
@@ -2831,25 +2867,23 @@ function buildOptimisticSubmittedReportAction(amount, currency, expenseReportID)
 /**
  * Builds an optimistic report preview action with a randomly generated reportActionID.
  *
- * @param {Object} chatReport
- * @param {Object} iouReport
- * @param {String} [comment] - User comment for the IOU.
- * @param {Object} [transaction] - optimistic first transaction of preview
- *
- * @returns {Object}
+ * @param chatReport
+ * @param iouReport
+ * @param [comment] - User comment for the IOU.
+ * @param [transaction] - optimistic first transaction of preview
  */
-function buildOptimisticReportPreview(chatReport, iouReport, comment = '', transaction = undefined) {
+function buildOptimisticReportPreview(chatReport: OnyxEntry<Report>, iouReport: OnyxEntry<Report>, comment = '', transaction: OnyxEntry<Transaction> = null): OptimisticReportPreview {
     const hasReceipt = TransactionUtils.hasReceipt(transaction);
     const isReceiptBeingScanned = hasReceipt && TransactionUtils.isReceiptBeingScanned(transaction);
     const message = getReportPreviewMessage(iouReport);
     const created = DateUtils.getDBTime();
     return {
         reportActionID: NumberUtils.rand64(),
-        reportID: chatReport.reportID,
+        reportID: chatReport?.reportID,
         actionName: CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW,
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
         originalMessage: {
-            linkedReportID: iouReport.reportID,
+            linkedReportID: iouReport?.reportID,
         },
         message: [
             {
@@ -2860,32 +2894,31 @@ function buildOptimisticReportPreview(chatReport, iouReport, comment = '', trans
             },
         ],
         created,
-        accountID: iouReport.managerID || 0,
+        accountID: iouReport?.managerID ?? 0,
         // The preview is initially whispered if created with a receipt, so the actor is the current user as well
-        actorAccountID: hasReceipt ? currentUserAccountID : iouReport.managerID || 0,
+        actorAccountID: hasReceipt ? currentUserAccountID : iouReport?.managerID ?? 0,
         childMoneyRequestCount: 1,
         childLastMoneyRequestComment: comment,
-        childRecentReceiptTransactionIDs: hasReceipt ? {[transaction.transactionID]: created} : [],
-        whisperedToAccountIDs: isReceiptBeingScanned ? [currentUserAccountID] : [],
+        childRecentReceiptTransactionIDs: hasReceipt && isNotEmptyObject(transaction) ? {[transaction?.transactionID ?? '']: created} : undefined,
+        whisperedToAccountIDs: isReceiptBeingScanned ? [currentUserAccountID ?? -1] : [],
     };
 }
 
 /**
  * Builds an optimistic modified expense action with a randomly generated reportActionID.
- *
- * @param {Object} transactionThread
- * @param {Object} oldTransaction
- * @param {Object} transactionChanges
- * @param {Object} isFromExpenseReport
- * @returns {Object}
  */
-function buildOptimisticModifiedExpenseReportAction(transactionThread, oldTransaction, transactionChanges, isFromExpenseReport) {
+function buildOptimisticModifiedExpenseReportAction(
+    transactionThread: OnyxEntry<Transaction>,
+    oldTransaction: OnyxEntry<Transaction>,
+    transactionChanges: ExpenseOriginalMessage,
+    isFromExpenseReport: boolean,
+): OptimisticModifiedExpenseReportAction {
     const originalMessage = getModifiedExpenseOriginalMessage(oldTransaction, transactionChanges, isFromExpenseReport);
     return {
         actionName: CONST.REPORT.ACTIONS.TYPE.MODIFIEDEXPENSE,
         actorAccountID: currentUserAccountID,
         automatic: false,
-        avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: currentUserPersonalDetails?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         created: DateUtils.getDBTime(),
         isAttachment: false,
         message: [
@@ -2900,13 +2933,13 @@ function buildOptimisticModifiedExpenseReportAction(transactionThread, oldTransa
         person: [
             {
                 style: 'strong',
-                text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserAccountID),
+                text: currentUserPersonalDetails?.displayName ?? String(currentUserAccountID),
                 type: 'TEXT',
             },
         ],
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
         reportActionID: NumberUtils.rand64(),
-        reportID: transactionThread.reportID,
+        reportID: transactionThread?.reportID,
         shouldShow: true,
     };
 }
@@ -2914,19 +2947,30 @@ function buildOptimisticModifiedExpenseReportAction(transactionThread, oldTransa
 /**
  * Updates a report preview action that exists for an IOU report.
  *
- * @param {Object} iouReport
- * @param {Object} reportPreviewAction
- * @param {Boolean} isPayRequest
- * @param {String} [comment] - User comment for the IOU.
- * @param {Object} [transaction] - optimistic newest transaction of a report preview
+ * @param [comment] - User comment for the IOU.
+ * @param [transaction] - optimistic newest transaction of a report preview
  *
- * @returns {Object}
  */
-function updateReportPreview(iouReport, reportPreviewAction, isPayRequest = false, comment = '', transaction = undefined) {
+function updateReportPreview(
+    iouReport: OnyxEntry<Report>,
+    reportPreviewAction: OnyxEntry<ReportAction>,
+    isPayRequest = false,
+    comment = '',
+    transaction: OnyxEntry<Transaction> = null,
+): UpdateReportPreview {
     const hasReceipt = TransactionUtils.hasReceipt(transaction);
-    const recentReceiptTransactions = lodashGet(reportPreviewAction, 'childRecentReceiptTransactionIDs', {});
+    const recentReceiptTransactions = reportPreviewAction?.childRecentReceiptTransactionIDs ?? {};
     const transactionsToKeep = TransactionUtils.getRecentTransactions(recentReceiptTransactions);
-    const previousTransactions = _.mapObject(recentReceiptTransactions, (value, key) => (_.contains(transactionsToKeep, key) ? value : null));
+    const previousTransactionsArray = Object.entries(recentReceiptTransactions ?? {}).map(([key, value]) => (transactionsToKeep.includes(key) ? {[key]: value} : null));
+    const previousTransactions: Record<string, string> = {};
+
+    for (const obj of previousTransactionsArray) {
+        for (const key in obj) {
+            if (obj) {
+                previousTransactions[key] = obj[key];
+            }
+        }
+    }
 
     const message = getReportPreviewMessage(iouReport, reportPreviewAction);
     return {
@@ -2940,32 +2984,31 @@ function updateReportPreview(iouReport, reportPreviewAction, isPayRequest = fals
                 type: CONST.REPORT.MESSAGE.TYPE.COMMENT,
             },
         ],
-        childLastMoneyRequestComment: comment || reportPreviewAction.childLastMoneyRequestComment,
-        childMoneyRequestCount: reportPreviewAction.childMoneyRequestCount + (isPayRequest ? 0 : 1),
+        childLastMoneyRequestComment: comment || reportPreviewAction?.childLastMoneyRequestComment,
+        childMoneyRequestCount: (reportPreviewAction?.childMoneyRequestCount ?? 0) + (isPayRequest ? 0 : 1),
         childRecentReceiptTransactionIDs: hasReceipt
             ? {
-                  [transaction.transactionID]: transaction.created,
+                  ...(transaction && {[transaction.transactionID]: transaction?.created}),
                   ...previousTransactions,
               }
             : recentReceiptTransactions,
         // As soon as we add a transaction without a receipt to the report, it will have ready money requests,
         // so we remove the whisper
-        whisperedToAccountIDs: hasReceipt ? reportPreviewAction.whisperedToAccountIDs : [],
+        whisperedToAccountIDs: hasReceipt ? reportPreviewAction?.whisperedToAccountIDs : [],
     };
 }
 
-function buildOptimisticTaskReportAction(taskReportID, actionName, message = '') {
+function buildOptimisticTaskReportAction(taskReportID: string, actionName: OriginalMessageActionName, message = ''): OptimisticTaskReportAction {
     const originalMessage = {
         taskReportID,
         type: actionName,
         text: message,
     };
-
     return {
         actionName,
         actorAccountID: currentUserAccountID,
         automatic: false,
-        avatar: lodashGet(currentUserPersonalDetails, 'avatar', UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: currentUserPersonalDetails?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         isAttachment: false,
         originalMessage,
         message: [
@@ -2978,7 +3021,7 @@ function buildOptimisticTaskReportAction(taskReportID, actionName, message = '')
         person: [
             {
                 style: 'strong',
-                text: lodashGet(currentUserPersonalDetails, 'displayName', currentUserAccountID),
+                text: currentUserPersonalDetails?.displayName ?? String(currentUserAccountID),
                 type: 'TEXT',
             },
         ],
@@ -2992,37 +3035,22 @@ function buildOptimisticTaskReportAction(taskReportID, actionName, message = '')
 
 /**
  * Builds an optimistic chat report with a randomly generated reportID and as much information as we currently have
- *
- * @param {Array} participantList Array of participant accountIDs
- * @param {String} reportName
- * @param {String} chatType
- * @param {String} policyID
- * @param {Number} ownerAccountID
- * @param {Boolean} isOwnPolicyExpenseChat
- * @param {String} oldPolicyName
- * @param {String} visibility
- * @param {String} writeCapability
- * @param {String} notificationPreference
- * @param {String} parentReportActionID
- * @param {String} parentReportID
- * @param {String} welcomeMessage
- * @returns {Object}
  */
 function buildOptimisticChatReport(
-    participantList,
-    reportName = CONST.REPORT.DEFAULT_REPORT_NAME,
-    chatType = '',
-    policyID = CONST.POLICY.OWNER_EMAIL_FAKE,
-    ownerAccountID = CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
+    participantList: number[],
+    reportName: string = CONST.REPORT.DEFAULT_REPORT_NAME,
+    chatType: ValueOf<typeof CONST.REPORT.CHAT_TYPE> | undefined = undefined,
+    policyID: string = CONST.POLICY.OWNER_EMAIL_FAKE,
+    ownerAccountID: number = CONST.REPORT.OWNER_ACCOUNT_ID_FAKE,
     isOwnPolicyExpenseChat = false,
     oldPolicyName = '',
-    visibility = undefined,
-    writeCapability = undefined,
-    notificationPreference = CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS,
+    visibility: ValueOf<typeof CONST.REPORT.VISIBILITY> | undefined = undefined,
+    writeCapability: ValueOf<typeof CONST.REPORT.WRITE_CAPABILITIES> | undefined = undefined,
+    notificationPreference: string | number = CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS,
     parentReportActionID = '',
     parentReportID = '',
     welcomeMessage = '',
-) {
+): OptimisticChatReport {
     const currentTime = DateUtils.getDBTime();
     const isNewlyCreatedWorkspaceChat = chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT && isOwnPolicyExpenseChat;
     return {
@@ -3034,7 +3062,7 @@ function buildOptimisticChatReport(
         lastActorAccountID: 0,
         lastMessageTranslationKey: '',
         lastMessageHtml: '',
-        lastMessageText: null,
+        lastMessageText: undefined,
         lastReadTime: currentTime,
         lastVisibleActionCreated: currentTime,
         notificationPreference,
@@ -3056,11 +3084,9 @@ function buildOptimisticChatReport(
 
 /**
  * Returns the necessary reportAction onyx data to indicate that the chat has been created optimistically
- * @param {String} emailCreatingAction
- * @param {String} [created] - Action created time
- * @returns {Object}
+ * @param [created] - Action created time
  */
-function buildOptimisticCreatedReportAction(emailCreatingAction, created = DateUtils.getDBTime()) {
+function buildOptimisticCreatedReportAction(emailCreatingAction: string, created = DateUtils.getDBTime()): OptimisticCreatedReportAction {
     return {
         reportActionID: NumberUtils.rand64(),
         actionName: CONST.REPORT.ACTIONS.TYPE.CREATED,
@@ -3082,11 +3108,11 @@ function buildOptimisticCreatedReportAction(emailCreatingAction, created = DateU
             {
                 type: CONST.REPORT.MESSAGE.TYPE.TEXT,
                 style: 'strong',
-                text: lodashGet(allPersonalDetails, [currentUserAccountID, 'displayName'], currentUserEmail),
+                text: allPersonalDetails?.[currentUserAccountID ?? '']?.displayName ?? currentUserEmail,
             },
         ],
         automatic: false,
-        avatar: lodashGet(allPersonalDetails, [currentUserAccountID, 'avatar'], UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: allPersonalDetails?.[currentUserAccountID ?? '']?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         created,
         shouldShow: true,
     };
@@ -3094,12 +3120,8 @@ function buildOptimisticCreatedReportAction(emailCreatingAction, created = DateU
 
 /**
  * Returns the necessary reportAction onyx data to indicate that a task report has been edited
- *
- * @param {String} emailEditingTask
- * @returns {Object}
  */
-
-function buildOptimisticEditedTaskReportAction(emailEditingTask) {
+function buildOptimisticEditedTaskReportAction(emailEditingTask: string): OptimisticEditedTaskReportAction {
     return {
         reportActionID: NumberUtils.rand64(),
         actionName: CONST.REPORT.ACTIONS.TYPE.TASKEDITED,
@@ -3121,11 +3143,11 @@ function buildOptimisticEditedTaskReportAction(emailEditingTask) {
             {
                 type: CONST.REPORT.MESSAGE.TYPE.TEXT,
                 style: 'strong',
-                text: lodashGet(allPersonalDetails, [currentUserAccountID, 'displayName'], currentUserEmail),
+                text: allPersonalDetails?.[currentUserAccountID ?? '']?.displayName ?? currentUserEmail,
             },
         ],
         automatic: false,
-        avatar: lodashGet(allPersonalDetails, [currentUserAccountID, 'avatar'], UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: allPersonalDetails?.[currentUserAccountID ?? '']?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         created: DateUtils.getDBTime(),
         shouldShow: false,
     };
@@ -3134,17 +3156,14 @@ function buildOptimisticEditedTaskReportAction(emailEditingTask) {
 /**
  * Returns the necessary reportAction onyx data to indicate that a chat has been archived
  *
- * @param {String} emailClosingReport
- * @param {String} policyName
- * @param {String} reason - A reason why the chat has been archived
- * @returns {Object}
+ * @param reason - A reason why the chat has been archived
  */
-function buildOptimisticClosedReportAction(emailClosingReport, policyName, reason = CONST.REPORT.ARCHIVE_REASON.DEFAULT) {
+function buildOptimisticClosedReportAction(emailClosingReport: string, policyName: string, reason: string = CONST.REPORT.ARCHIVE_REASON.DEFAULT): OptimisticClosedReportAction {
     return {
         actionName: CONST.REPORT.ACTIONS.TYPE.CLOSED,
         actorAccountID: currentUserAccountID,
         automatic: false,
-        avatar: lodashGet(allPersonalDetails, [currentUserAccountID, 'avatar'], UserUtils.getDefaultAvatarURL(currentUserAccountID)),
+        avatar: allPersonalDetails?.[currentUserAccountID ?? '']?.avatar ?? UserUtils.getDefaultAvatarURL(currentUserAccountID),
         created: DateUtils.getDBTime(),
         message: [
             {
@@ -3167,7 +3186,7 @@ function buildOptimisticClosedReportAction(emailClosingReport, policyName, reaso
             {
                 type: CONST.REPORT.MESSAGE.TYPE.TEXT,
                 style: 'strong',
-                text: lodashGet(allPersonalDetails, [currentUserAccountID, 'displayName'], currentUserEmail),
+                text: allPersonalDetails?.[currentUserAccountID ?? '']?.displayName ?? currentUserEmail,
             },
         ],
         reportActionID: NumberUtils.rand64(),
@@ -3175,21 +3194,16 @@ function buildOptimisticClosedReportAction(emailClosingReport, policyName, reaso
     };
 }
 
-/**
- * @param {String} policyID
- * @param {String} policyName
- * @returns {Object}
- */
-function buildOptimisticWorkspaceChats(policyID, policyName) {
+function buildOptimisticWorkspaceChats(policyID: string, policyName: string): OptimisticWorkspaceChats {
     const announceChatData = buildOptimisticChatReport(
-        [currentUserAccountID],
+        currentUserAccountID ? [currentUserAccountID] : [],
         CONST.REPORT.WORKSPACE_CHAT_ROOMS.ANNOUNCE,
         CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE,
         policyID,
         CONST.POLICY.OWNER_ACCOUNT_ID_FAKE,
         false,
         policyName,
-        null,
+        undefined,
         undefined,
 
         // #announce contains all policy members so notifying always should be opt-in only.
@@ -3202,7 +3216,7 @@ function buildOptimisticWorkspaceChats(policyID, policyName) {
     };
 
     const adminsChatData = buildOptimisticChatReport(
-        [currentUserAccountID],
+        [currentUserAccountID ?? -1],
         CONST.REPORT.WORKSPACE_CHAT_ROOMS.ADMINS,
         CONST.REPORT.CHAT_TYPE.POLICY_ADMINS,
         policyID,
@@ -3216,9 +3230,9 @@ function buildOptimisticWorkspaceChats(policyID, policyName) {
         [adminsCreatedAction.reportActionID]: adminsCreatedAction,
     };
 
-    const expenseChatData = buildOptimisticChatReport([currentUserAccountID], '', CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT, policyID, currentUserAccountID, true, policyName);
+    const expenseChatData = buildOptimisticChatReport([currentUserAccountID ?? -1], '', CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT, policyID, currentUserAccountID, true, policyName);
     const expenseChatReportID = expenseChatData.reportID;
-    const expenseReportCreatedAction = buildOptimisticCreatedReportAction(currentUserEmail);
+    const expenseReportCreatedAction = buildOptimisticCreatedReportAction(currentUserEmail ?? '');
     const expenseReportActionData = {
         [expenseReportCreatedAction.reportActionID]: expenseReportCreatedAction,
     };
@@ -3242,17 +3256,22 @@ function buildOptimisticWorkspaceChats(policyID, policyName) {
 /**
  * Builds an optimistic Task Report with a randomly generated reportID
  *
- * @param {Number} ownerAccountID - Account ID of the person generating the Task.
- * @param {String} assigneeAccountID - AccountID of the other person participating in the Task.
- * @param {String} parentReportID - Report ID of the chat where the Task is.
- * @param {String} title - Task title.
- * @param {String} description - Task description.
- * @param {String} policyID - PolicyID of the parent report
- *
- * @returns {Object}
- */
-
-function buildOptimisticTaskReport(ownerAccountID, assigneeAccountID = 0, parentReportID, title, description, policyID = CONST.POLICY.OWNER_EMAIL_FAKE) {
+ * @param ownerAccountID - Account ID of the person generating the Task.
+ * @param assigneeAccountID - AccountID of the other person participating in the Task.
+ * @param parentReportID - Report ID of the chat where the Task is.
+ * @param title - Task title.
+ * @param description - Task description.
+ * @param policyID - PolicyID of the parent report
+ */
+
+function buildOptimisticTaskReport(
+    ownerAccountID: number,
+    assigneeAccountID = 0,
+    parentReportID?: string,
+    title?: string,
+    description?: string,
+    policyID: string = CONST.POLICY.OWNER_EMAIL_FAKE,
+): OptimisticTaskReport {
     return {
         reportID: generateReportID(),
         reportName: title,
@@ -3272,52 +3291,41 @@ function buildOptimisticTaskReport(ownerAccountID, assigneeAccountID = 0, parent
 /**
  * A helper method to create transaction thread
  *
- * @param {Object} reportAction - the parent IOU report action from which to create the thread
- *
- * @param {String} moneyRequestReportID - the reportID which the report action belong to
+ * @param reportAction - the parent IOU report action from which to create the thread
  *
- * @returns {Object}
+ * @param moneyRequestReportID - the reportID which the report action belong to
  */
-function buildTransactionThread(reportAction, moneyRequestReportID) {
-    const participantAccountIDs = _.uniq([currentUserAccountID, Number(reportAction.actorAccountID)]);
+function buildTransactionThread(reportAction: OnyxEntry<ReportAction>, moneyRequestReportID: string): OptimisticChatReport {
+    const participantAccountIDs = [...new Set([currentUserAccountID, Number(reportAction?.actorAccountID)])].filter(Boolean) as number[];
     return buildOptimisticChatReport(
         participantAccountIDs,
         getTransactionReportName(reportAction),
-        '',
-        lodashGet(getReport(moneyRequestReportID), 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE),
+        undefined,
+        getReport(moneyRequestReportID)?.policyID ?? CONST.POLICY.OWNER_EMAIL_FAKE,
         CONST.POLICY.OWNER_ACCOUNT_ID_FAKE,
         false,
         '',
         undefined,
         undefined,
         CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN,
-        reportAction.reportActionID,
+        reportAction?.reportActionID,
         moneyRequestReportID,
     );
 }
 
-/**
- * @param {Object} report
- * @returns {Boolean}
- */
-function isUnread(report) {
+function isUnread(report: OnyxEntry<Report>): boolean {
     if (!report) {
         return false;
     }
 
     // lastVisibleActionCreated and lastReadTime are both datetime strings and can be compared directly
-    const lastVisibleActionCreated = report.lastVisibleActionCreated || '';
-    const lastReadTime = report.lastReadTime || '';
+    const lastVisibleActionCreated = report.lastVisibleActionCreated ?? '';
+    const lastReadTime = report.lastReadTime ?? '';
     return lastReadTime < lastVisibleActionCreated;
 }
 
-/**
- * @param {Object} report
- * @param {Object} allReportsDict
- * @returns {Boolean}
- */
-function isIOUOwnedByCurrentUser(report, allReportsDict = null) {
-    const allAvailableReports = allReportsDict || allReports;
+function isIOUOwnedByCurrentUser(report: OnyxEntry<Report>, allReportsDict: OnyxCollection<Report> = null): boolean {
+    const allAvailableReports = allReportsDict ?? allReports;
     if (!report || !allAvailableReports) {
         return false;
     }
@@ -3336,13 +3344,8 @@ function isIOUOwnedByCurrentUser(report, allReportsDict = null) {
 /**
  * Assuming the passed in report is a default room, lets us know whether we can see it or not, based on permissions and
  * the various subsets of users we've allowed to use default rooms.
- *
- * @param {Object} report
- * @param {Array<Object>} policies
- * @param {Array<String>} betas
- * @return {Boolean}
  */
-function canSeeDefaultRoom(report, policies, betas) {
+function canSeeDefaultRoom(report: OnyxEntry<Report>, policies: OnyxCollection<Policy>, betas: OnyxEntry<Beta[]>): boolean {
     // Include archived rooms
     if (isArchivedRoom(report)) {
         return true;
@@ -3354,12 +3357,12 @@ function canSeeDefaultRoom(report, policies, betas) {
     }
 
     // Include domain rooms with Partner Managers (Expensify accounts) in them for accounts that are on a domain with an Approved Accountant
-    if (isDomainRoom(report) && doesDomainHaveApprovedAccountant && hasExpensifyEmails(lodashGet(report, ['participantAccountIDs'], []))) {
+    if (isDomainRoom(report) && doesDomainHaveApprovedAccountant && hasExpensifyEmails(report?.participantAccountIDs ?? [])) {
         return true;
     }
 
     // If the room has an assigned guide, it can be seen.
-    if (hasExpensifyGuidesEmails(lodashGet(report, ['participantAccountIDs'], []))) {
+    if (hasExpensifyGuidesEmails(report?.participantAccountIDs ?? [])) {
         return true;
     }
 
@@ -3369,17 +3372,10 @@ function canSeeDefaultRoom(report, policies, betas) {
     }
 
     // For all other cases, just check that the user belongs to the default rooms beta
-    return Permissions.canUseDefaultRooms(betas);
+    return Permissions.canUseDefaultRooms(betas ?? []);
 }
 
-/**
- * @param {Object} report
- * @param {Object | null} policies
- * @param {Array<String> | null} betas
- * @param {Object} allReportActions
- * @returns {Boolean}
- */
-function canAccessReport(report, policies, betas, allReportActions) {
+function canAccessReport(report: OnyxEntry<Report>, policies: OnyxCollection<Policy>, betas: OnyxEntry<Beta[]>, allReportActions?: OnyxCollection<ReportActions>): boolean {
     if (isThread(report) && ReportActionsUtils.isPendingRemove(ReportActionsUtils.getParentReportAction(report, allReportActions))) {
         return false;
     }
@@ -3393,15 +3389,13 @@ function canAccessReport(report, policies, betas, allReportActions) {
 }
 /**
  * Check if the report is the parent report of the currently viewed report or at least one child report has report action
- * @param {Object} report
- * @param {String} currentReportId
- * @returns {Boolean}
  */
-function shouldHideReport(report, currentReportId) {
-    const parentReport = getParentReport(getReport(currentReportId));
-    const reportActions = ReportActionsUtils.getAllReportActions(report.reportID);
-    const isChildReportHasComment = _.some(reportActions, (reportAction) => (reportAction.childVisibleActionCount || 0) > 0);
-    return parentReport.reportID !== report.reportID && !isChildReportHasComment;
+function shouldHideReport(report: OnyxEntry<Report>, currentReportId: string): boolean {
+    const currentReport = getReport(currentReportId);
+    const parentReport = getParentReport(isNotEmptyObject(currentReport) ? currentReport : null);
+    const reportActions = ReportActionsUtils.getAllReportActions(report?.reportID ?? '');
+    const isChildReportHasComment = Object.values(reportActions ?? {})?.some((reportAction) => (reportAction?.childVisibleActionCount ?? 0) > 0);
+    return parentReport?.reportID !== report?.reportID && !isChildReportHasComment;
 }
 
 /**
@@ -3410,30 +3404,27 @@ function shouldHideReport(report, currentReportId) {
  *
  * This logic is very specific and the order of the logic is very important. It should fail quickly in most cases and also
  * filter out the majority of reports before filtering out very specific minority of reports.
- *
- * @param {Object} report
- * @param {String | Null | Undefined} currentReportId
- * @param {Boolean} isInGSDMode
- * @param {String[]} betas
- * @param {Object} policies
- * @param {Object} allReportActions
- * @param {Boolean} excludeEmptyChats
- * @returns {boolean}
- */
-function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas, policies, allReportActions, excludeEmptyChats = false) {
+ */
+function shouldReportBeInOptionList(
+    report: OnyxEntry<Report>,
+    currentReportId: string,
+    isInGSDMode: boolean,
+    betas: Beta[],
+    policies: OnyxCollection<Policy>,
+    allReportActions?: OnyxCollection<ReportActions>,
+    excludeEmptyChats = false,
+) {
     const isInDefaultMode = !isInGSDMode;
-
     // Exclude reports that have no data because there wouldn't be anything to show in the option item.
     // This can happen if data is currently loading from the server or a report is in various stages of being created.
     // This can also happen for anyone accessing a public room or archived room for which they don't have access to the underlying policy.
     if (
-        !report ||
-        !report.reportID ||
-        !report.type ||
-        report.reportName === undefined ||
-        report.isHidden ||
-        (report.participantAccountIDs &&
-            report.participantAccountIDs.length === 0 &&
+        !report?.reportID ||
+        !report?.type ||
+        report?.reportName === undefined ||
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        report?.isHidden ||
+        (report?.participantAccountIDs?.length === 0 &&
             !isChatThread(report) &&
             !isPublicRoom(report) &&
             !isUserCreatedPolicyRoom(report) &&
@@ -3443,7 +3434,6 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas,
     ) {
         return false;
     }
-
     if (!canAccessReport(report, policies, betas, allReportActions)) {
         return false;
     }
@@ -3456,6 +3446,7 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas,
     }
 
     // Include reports that are relevant to the user in any view mode. Criteria include having a draft or having a GBR showing.
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     if (report.hasDraft || requiresAttentionFromCurrentUser(report)) {
         return true;
     }
@@ -3475,7 +3466,7 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas,
 
     // Include reports that have errors from trying to add a workspace
     // If we excluded it, then the red-brock-road pattern wouldn't work for the user to resolve the error
-    if (report.errorFields && report.errorFields.addWorkspaceRoom) {
+    if (report.errorFields?.addWorkspaceRoom) {
         return true;
     }
 
@@ -3499,64 +3490,57 @@ function shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas,
 
 /**
  * Attempts to find a report in onyx with the provided list of participants. Does not include threads, task, money request, room, and policy expense chat.
- * @param {Array<Number>} newParticipantList
- * @returns {Array|undefined}
  */
-function getChatByParticipants(newParticipantList) {
-    const sortedNewParticipantList = _.sortBy(newParticipantList);
-    return _.find(allReports, (report) => {
-        // If the report has been deleted, or there are no participants (like an empty #admins room) then skip it
-        if (
-            !report ||
-            _.isEmpty(report.participantAccountIDs) ||
-            isChatThread(report) ||
-            isTaskReport(report) ||
-            isMoneyRequestReport(report) ||
-            isChatRoom(report) ||
-            isPolicyExpenseChat(report)
-        ) {
-            return false;
-        }
+function getChatByParticipants(newParticipantList: number[]): OnyxEntry<Report> {
+    const sortedNewParticipantList = newParticipantList.sort();
+    return (
+        Object.values(allReports ?? {}).find((report) => {
+            // If the report has been deleted, or there are no participants (like an empty #admins room) then skip it
+            if (
+                !report ||
+                report.participantAccountIDs?.length === 0 ||
+                isChatThread(report) ||
+                isTaskReport(report) ||
+                isMoneyRequestReport(report) ||
+                isChatRoom(report) ||
+                isPolicyExpenseChat(report)
+            ) {
+                return false;
+            }
 
-        // Only return the chat if it has all the participants
-        return _.isEqual(sortedNewParticipantList, _.sortBy(report.participantAccountIDs));
-    });
+            // Only return the chat if it has all the participants
+            return lodashIsEqual(sortedNewParticipantList, report.participantAccountIDs?.sort());
+        }) ?? null
+    );
 }
 
 /**
  * Attempts to find a report in onyx with the provided list of participants in given policy
- * @param {Array} newParticipantList
- * @param {String} policyID
- * @returns {object|undefined}
  */
-function getChatByParticipantsAndPolicy(newParticipantList, policyID) {
+function getChatByParticipantsAndPolicy(newParticipantList: number[], policyID: string): OnyxEntry<Report> {
     newParticipantList.sort();
-    return _.find(allReports, (report) => {
-        // If the report has been deleted, or there are no participants (like an empty #admins room) then skip it
-        if (!report || !report.participantAccountIDs) {
-            return false;
-        }
-
-        // Only return the room if it has all the participants and is not a policy room
-        return report.policyID === policyID && _.isEqual(newParticipantList, _.sortBy(report.participantAccountIDs));
-    });
+    return (
+        Object.values(allReports ?? {}).find((report) => {
+            // If the report has been deleted, or there are no participants (like an empty #admins room) then skip it
+            if (!report?.participantAccountIDs) {
+                return false;
+            }
+            const sortedParticipanctsAccountIDs = report.parentReportActionIDs?.sort();
+            // Only return the room if it has all the participants and is not a policy room
+            return report.policyID === policyID && lodashIsEqual(newParticipantList, sortedParticipanctsAccountIDs);
+        }) ?? null
+    );
 }
 
-/**
- * @param {String} policyID
- * @returns {Array}
- */
-function getAllPolicyReports(policyID) {
-    return _.filter(allReports, (report) => report && report.policyID === policyID);
+function getAllPolicyReports(policyID: string): Array<OnyxEntry<Report>> {
+    return Object.values(allReports ?? {}).filter((report) => report?.policyID === policyID);
 }
 
 /**
  * Returns true if Chronos is one of the chat participants (1:1)
- * @param {Object} report
- * @returns {Boolean}
  */
-function chatIncludesChronos(report) {
-    return report.participantAccountIDs && _.contains(report.participantAccountIDs, CONST.ACCOUNT_ID.CHRONOS);
+function chatIncludesChronos(report: OnyxEntry<Report>): boolean {
+    return Boolean(report?.participantAccountIDs?.includes(CONST.ACCOUNT_ID.CHRONOS));
 }
 
 /**
@@ -3565,18 +3549,17 @@ function chatIncludesChronos(report) {
  * - It was written by someone else and isn't a whisper
  * - It's a welcome message whisper
  * - It's an ADDCOMMENT that is not an attachment
- *
- * @param {Object} reportAction
- * @param {number} reportID
- * @returns {Boolean}
  */
-function canFlagReportAction(reportAction, reportID) {
+function canFlagReportAction(reportAction: OnyxEntry<ReportAction>, reportID: string | undefined): boolean {
     const report = getReport(reportID);
-    const isCurrentUserAction = reportAction.actorAccountID === currentUserAccountID;
-
+    const isCurrentUserAction = reportAction?.actorAccountID === currentUserAccountID;
+    const isOriginalMessageHaveHtml =
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT ||
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED ||
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.CHRONOSOOOLIST;
     if (ReportActionsUtils.isWhisperAction(reportAction)) {
         // Allow flagging welcome message whispers as they can be set by any room creator
-        if (report.welcomeMessage && !isCurrentUserAction && lodashGet(reportAction, 'originalMessage.html') === report.welcomeMessage) {
+        if (report?.welcomeMessage && !isCurrentUserAction && isOriginalMessageHaveHtml && reportAction?.originalMessage?.html === report.welcomeMessage) {
             return true;
         }
 
@@ -3584,74 +3567,62 @@ function canFlagReportAction(reportAction, reportID) {
         return false;
     }
 
-    return (
+    return Boolean(
         !isCurrentUserAction &&
-        reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT &&
-        !ReportActionsUtils.isDeletedAction(reportAction) &&
-        !ReportActionsUtils.isCreatedTaskReportAction(reportAction) &&
-        isAllowedToComment(report)
+            reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT &&
+            !ReportActionsUtils.isDeletedAction(reportAction) &&
+            !ReportActionsUtils.isCreatedTaskReportAction(reportAction) &&
+            isNotEmptyObject(report) &&
+            report &&
+            isAllowedToComment(report),
     );
 }
 
 /**
  * Whether flag comment page should show
- *
- * @param {Object} reportAction
- * @param {Object} report
- * @returns {Boolean}
  */
-
-function shouldShowFlagComment(reportAction, report) {
+function shouldShowFlagComment(reportAction: OnyxEntry<ReportAction>, report: OnyxEntry<Report>): boolean {
     return (
-        canFlagReportAction(reportAction, report.reportID) &&
+        canFlagReportAction(reportAction, report?.reportID) &&
         !isArchivedRoom(report) &&
         !chatIncludesChronos(report) &&
-        !isConciergeChatReport(report.reportID) &&
-        reportAction.actorAccountID !== CONST.ACCOUNT_ID.CONCIERGE
+        !isConciergeChatReport(report) &&
+        reportAction?.actorAccountID !== CONST.ACCOUNT_ID.CONCIERGE
     );
 }
 
 /**
- * @param {Object} report
- * @param {String} report.lastReadTime
- * @param {Array} sortedAndFilteredReportActions - reportActions for the report, sorted newest to oldest, and filtered for only those that should be visible
- *
- * @returns {String|null}
+ * @param sortedAndFilteredReportActions - reportActions for the report, sorted newest to oldest, and filtered for only those that should be visible
  */
-function getNewMarkerReportActionID(report, sortedAndFilteredReportActions) {
+function getNewMarkerReportActionID(report: OnyxEntry<Report>, sortedAndFilteredReportActions: ReportAction[]): string {
     if (!isUnread(report)) {
         return '';
     }
 
-    const newMarkerIndex = _.findLastIndex(sortedAndFilteredReportActions, (reportAction) => (reportAction.created || '') > report.lastReadTime);
+    const newMarkerIndex = lodashFindLastIndex(sortedAndFilteredReportActions, (reportAction) => (reportAction.created ?? '') > (report?.lastReadTime ?? ''));
 
-    return _.has(sortedAndFilteredReportActions[newMarkerIndex], 'reportActionID') ? sortedAndFilteredReportActions[newMarkerIndex].reportActionID : '';
+    return 'reportActionID' in sortedAndFilteredReportActions[newMarkerIndex] ? sortedAndFilteredReportActions[newMarkerIndex].reportActionID : '';
 }
 
 /**
  * Performs the markdown conversion, and replaces code points > 127 with C escape sequences
  * Used for compatibility with the backend auth validator for AddComment, and to account for MD in comments
- * @param {String} textComment
- * @returns {Number} The comment's total length as seen from the backend
+ * @returns The comment's total length as seen from the backend
  */
-function getCommentLength(textComment) {
+function getCommentLength(textComment: string): number {
     return getParsedComment(textComment)
         .replace(/[^ -~]/g, '\\u????')
         .trim().length;
 }
 
-/**
- * @param {String|null} url
- * @returns {String}
- */
-function getRouteFromLink(url) {
+function getRouteFromLink(url: string | null): string {
     if (!url) {
         return '';
     }
 
     // Get the reportID from URL
     let route = url;
-    _.each(linkingConfig.prefixes, (prefix) => {
+    linkingConfig.prefixes.forEach((prefix) => {
         const localWebAndroidRegEx = /^(http:\/\/([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3}))/;
         if (route.startsWith(prefix)) {
             route = route.replace(prefix, '');
@@ -3674,11 +3645,7 @@ function getRouteFromLink(url) {
     return route;
 }
 
-/**
- * @param {String} route
- * @returns {Object}
- */
-function parseReportRouteParams(route) {
+function parseReportRouteParams(route: string): ReportRouteParams {
     let parsingRoute = route;
     if (parsingRoute.at(0) === '/') {
         // remove the first slash
@@ -3704,11 +3671,7 @@ function parseReportRouteParams(route) {
     };
 }
 
-/**
- * @param {String|null} url
- * @returns {String}
- */
-function getReportIDFromLink(url) {
+function getReportIDFromLink(url: string | null): string {
     const route = getRouteFromLink(url);
     const {reportID, isSubReportPageRoute} = parseReportRouteParams(route);
     if (isSubReportPageRoute) {
@@ -3720,14 +3683,11 @@ function getReportIDFromLink(url) {
 
 /**
  * Check if the chat report is linked to an iou that is waiting for the current user to add a credit bank account.
- *
- * @param {Object} chatReport
- * @returns {Boolean}
  */
-function hasIOUWaitingOnCurrentUserBankAccount(chatReport) {
-    if (chatReport.iouReportID) {
-        const iouReport = allReports[`${ONYXKEYS.COLLECTION.REPORT}${chatReport.iouReportID}`];
-        if (iouReport && iouReport.isWaitingOnBankAccount && iouReport.ownerAccountID === currentUserAccountID) {
+function hasIOUWaitingOnCurrentUserBankAccount(chatReport: OnyxEntry<Report>): boolean {
+    if (chatReport?.iouReportID) {
+        const iouReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${chatReport?.iouReportID}`];
+        if (iouReport?.isWaitingOnBankAccount && iouReport?.ownerAccountID === currentUserAccountID) {
             return true;
         }
     }
@@ -3742,12 +3702,8 @@ function hasIOUWaitingOnCurrentUserBankAccount(chatReport) {
  *     - employee can request money in submitted expense report only if the policy has Instant Submit settings turned on
  * - in an IOU report, which is not settled yet
  * - in a 1:1 DM chat
- *
- * @param {Object} report
- * @param {Array<Number>} otherParticipants
- * @returns {Boolean}
  */
-function canRequestMoney(report, otherParticipants) {
+function canRequestMoney(report: OnyxEntry<Report>, otherParticipants: number[]): boolean {
     // User cannot request money in chat thread or in task report or in chat room
     if (isChatThread(report) || isTaskReport(report) || isChatRoom(report)) {
         return false;
@@ -3764,9 +3720,9 @@ function canRequestMoney(report, otherParticipants) {
     }
 
     // In case of expense reports, we have to look at the parent workspace chat to get the isOwnPolicyExpenseChat property
-    let isOwnPolicyExpenseChat = report.isOwnPolicyExpenseChat || false;
+    let isOwnPolicyExpenseChat = report?.isOwnPolicyExpenseChat ?? false;
     if (isExpenseReport(report) && getParentReport(report)) {
-        isOwnPolicyExpenseChat = getParentReport(report).isOwnPolicyExpenseChat;
+        isOwnPolicyExpenseChat = Boolean(getParentReport(report)?.isOwnPolicyExpenseChat);
     }
 
     // In case there are no other participants than the current user and it's not user's own policy expense chat, they can't request money from such report
@@ -3777,7 +3733,7 @@ function canRequestMoney(report, otherParticipants) {
     // User can request money in any IOU report, unless paid, but user can only request money in an expense report
     // which is tied to their workspace chat.
     if (isMoneyRequestReport(report)) {
-        return ((isExpenseReport(report) && isOwnPolicyExpenseChat) || isIOUReport(report)) && !isReportApproved(report) && !isSettled(report.reportID);
+        return ((isExpenseReport(report) && isOwnPolicyExpenseChat) || isIOUReport(report)) && !isReportApproved(report) && !isSettled(report?.reportID);
     }
 
     // In case of policy expense chat, users can only request money from their own policy expense chat
@@ -3801,12 +3757,8 @@ function canRequestMoney(report, otherParticipants) {
  *
  * None of the options should show in chat threads or if there is some special Expensify account
  * as a participant of the report.
- *
- * @param {Object} report
- * @param {Array<Number>} reportParticipants
- * @returns {Array}
  */
-function getMoneyRequestOptions(report, reportParticipants) {
+function getMoneyRequestOptions(report: OnyxEntry<Report>, reportParticipants: number[]): Array<ValueOf<typeof CONST.IOU.TYPE>> {
     // In any thread or task report, we do not allow any new money requests yet
     if (isChatThread(report) || isTaskReport(report)) {
         return [];
@@ -3814,21 +3766,21 @@ function getMoneyRequestOptions(report, reportParticipants) {
 
     // We don't allow IOU actions if an Expensify account is a participant of the report, unless the policy that the report is on is owned by an Expensify account
     const doParticipantsIncludeExpensifyAccounts = lodashIntersection(reportParticipants, CONST.EXPENSIFY_ACCOUNT_IDS).length > 0;
-    const isPolicyOwnedByExpensifyAccounts = report.policyID ? CONST.EXPENSIFY_ACCOUNT_IDS.includes(getPolicy(report.policyID).ownerAccountID || 0) : false;
+    const isPolicyOwnedByExpensifyAccounts = report?.policyID ? CONST.EXPENSIFY_ACCOUNT_IDS.includes(getPolicy(report?.policyID ?? '')?.ownerAccountID ?? 0) : false;
     if (doParticipantsIncludeExpensifyAccounts && !isPolicyOwnedByExpensifyAccounts) {
         return [];
     }
 
-    const otherParticipants = _.filter(reportParticipants, (accountID) => currentUserPersonalDetails.accountID !== accountID);
+    const otherParticipants = reportParticipants.filter((accountID) => currentUserPersonalDetails?.accountID !== accountID);
     const hasSingleOtherParticipantInReport = otherParticipants.length === 1;
     const hasMultipleOtherParticipants = otherParticipants.length > 1;
-    let options = [];
+    let options: Array<ValueOf<typeof CONST.IOU.TYPE>> = [];
 
     // User created policy rooms and default rooms like #admins or #announce will always have the Split Bill option
     // unless there are no other participants at all (e.g. #admins room for a policy with only 1 admin)
     // DM chats will have the Split Bill option only when there are at least 2 other people in the chat.
     // Your own workspace chats will have the split bill option.
-    if ((isChatRoom(report) && otherParticipants.length > 0) || (isDM(report) && hasMultipleOtherParticipants) || (isPolicyExpenseChat(report) && report.isOwnPolicyExpenseChat)) {
+    if ((isChatRoom(report) && otherParticipants.length > 0) || (isDM(report) && hasMultipleOtherParticipants) || (isPolicyExpenseChat(report) && report?.isOwnPolicyExpenseChat)) {
         options = [CONST.IOU.TYPE.SPLIT];
     }
 
@@ -3855,21 +3807,15 @@ function getMoneyRequestOptions(report, reportParticipants) {
  * `domain` - Nobody can leave (it's auto-shared with domain members)
  * `dm` - Nobody can leave (it's auto-shared with users)
  * `private` - Anybody can leave (though you can only be invited to join)
- *
- * @param {Object} report
- * @param {String} report.visibility
- * @param {String} report.chatType
- * @param {Boolean} isPolicyMember
- * @returns {Boolean}
- */
-function canLeaveRoom(report, isPolicyMember) {
-    if (_.isEmpty(report.visibility)) {
+ */
+function canLeaveRoom(report: OnyxEntry<Report>, isPolicyMember: boolean): boolean {
+    if (!report?.visibility) {
         if (
-            report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS ||
-            report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE ||
-            report.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT ||
-            report.chatType === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL ||
-            _.isEmpty(report.chatType)
+            report?.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ADMINS ||
+            report?.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ANNOUNCE ||
+            report?.chatType === CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT ||
+            report?.chatType === CONST.REPORT.CHAT_TYPE.DOMAIN_ALL ||
+            !report?.chatType
         ) {
             // DM chats don't have a chatType
             return false;
@@ -3880,22 +3826,15 @@ function canLeaveRoom(report, isPolicyMember) {
     return true;
 }
 
-/**
- * @param {Number[]} participantAccountIDs
- * @returns {Boolean}
- */
-function isCurrentUserTheOnlyParticipant(participantAccountIDs) {
-    return participantAccountIDs && participantAccountIDs.length === 1 && participantAccountIDs[0] === currentUserAccountID;
+function isCurrentUserTheOnlyParticipant(participantAccountIDs?: number[]): boolean {
+    return Boolean(participantAccountIDs?.length === 1 && participantAccountIDs?.[0] === currentUserAccountID);
 }
 
 /**
  * Returns display names for those that can see the whisper.
  * However, it returns "you" if the current user is the only one who can see it besides the person that sent it.
- *
- * @param {Number[]} participantAccountIDs
- * @returns {string}
  */
-function getWhisperDisplayNames(participantAccountIDs) {
+function getWhisperDisplayNames(participantAccountIDs?: number[]): string | undefined {
     const isWhisperOnlyVisibleToCurrentUser = isCurrentUserTheOnlyParticipant(participantAccountIDs);
 
     // When the current user is the only participant, the display name needs to be "you" because that's the only person reading it
@@ -3903,20 +3842,18 @@ function getWhisperDisplayNames(participantAccountIDs) {
         return Localize.translateLocal('common.youAfterPreposition');
     }
 
-    return _.map(participantAccountIDs, (accountID) => getDisplayNameForParticipant(accountID, !isWhisperOnlyVisibleToCurrentUser)).join(', ');
+    return participantAccountIDs?.map((accountID) => getDisplayNameForParticipant(accountID, !isWhisperOnlyVisibleToCurrentUser)).join(', ');
 }
 
 /**
  * Show subscript on workspace chats / threads and expense requests
- * @param {Object} report
- * @returns {Boolean}
  */
-function shouldReportShowSubscript(report) {
+function shouldReportShowSubscript(report: OnyxEntry<Report>): boolean {
     if (isArchivedRoom(report)) {
         return false;
     }
 
-    if (isPolicyExpenseChat(report) && !isChatThread(report) && !isTaskReport(report) && !report.isOwnPolicyExpenseChat) {
+    if (isPolicyExpenseChat(report) && !isChatThread(report) && !isTaskReport(report) && !report?.isOwnPolicyExpenseChat) {
         return true;
     }
 
@@ -3941,78 +3878,60 @@ function shouldReportShowSubscript(report) {
 
 /**
  * Return true if reports data exists
- * @returns {Boolean}
  */
-function isReportDataReady() {
-    return !_.isEmpty(allReports) && _.some(_.keys(allReports), (key) => allReports[key] && allReports[key].reportID);
+function isReportDataReady(): boolean {
+    return !isEmptyObject(allReports) && Object.keys(allReports ?? {}).some((key) => allReports?.[key]?.reportID);
 }
 
 /**
  * Return true if reportID from path is valid
- * @param {String} reportIDFromPath
- * @returns {Boolean}
  */
-function isValidReportIDFromPath(reportIDFromPath) {
-    return typeof reportIDFromPath === 'string' && !['', 'null', '0'].includes(reportIDFromPath);
+function isValidReportIDFromPath(reportIDFromPath: string): boolean {
+    return !['', 'null', '0'].includes(reportIDFromPath);
 }
 
 /**
  * Return the errors we have when creating a chat or a workspace room
- * @param {Object} report
- * @returns {Object} errors
  */
-function getAddWorkspaceRoomOrChatReportErrors(report) {
+function getAddWorkspaceRoomOrChatReportErrors(report: OnyxEntry<Report>): Record<string, string> | null | undefined {
     // We are either adding a workspace room, or we're creating a chat, it isn't possible for both of these to have errors for the same report at the same time, so
     // simply looking up the first truthy value will get the relevant property if it's set.
-    return lodashGet(report, 'errorFields.addWorkspaceRoom') || lodashGet(report, 'errorFields.createChat');
+    return report?.errorFields?.addWorkspaceRoom ?? report?.errorFields?.createChat;
 }
 
-/**
- * Returns true if write actions like assign task, money request, send message should be disabled on a report
- * @param {Object} report
- * @returns {Boolean}
- */
-function canUserPerformWriteAction(report) {
+function canUserPerformWriteAction(report: OnyxEntry<Report>) {
     const reportErrors = getAddWorkspaceRoomOrChatReportErrors(report);
-    return !isArchivedRoom(report) && _.isEmpty(reportErrors) && isAllowedToComment(report) && !isAnonymousUser;
+    return !isArchivedRoom(report) && isEmptyObject(reportErrors) && report && isAllowedToComment(report) && !isAnonymousUser;
 }
 
 /**
  * Returns ID of the original report from which the given reportAction is first created.
- *
- * @param {String} reportID
- * @param {Object} reportAction
- * @returns {String}
  */
-function getOriginalReportID(reportID, reportAction) {
-    const currentReportAction = ReportActionsUtils.getReportAction(reportID, reportAction.reportActionID);
-    return isThreadFirstChat(reportAction, reportID) && _.isEmpty(currentReportAction) ? lodashGet(allReports, [`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, 'parentReportID']) : reportID;
+function getOriginalReportID(reportID: string, reportAction: OnyxEntry<ReportAction>): string | undefined {
+    const currentReportAction = ReportActionsUtils.getReportAction(reportID, reportAction?.reportActionID ?? '');
+    return isThreadFirstChat(reportAction, reportID) && Object.keys(currentReportAction ?? {}).length === 0
+        ? allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]?.parentReportID
+        : reportID;
 }
 
 /**
  * Return the pendingAction and the errors we have when creating a chat or a workspace room offline
- * @param {Object} report
- * @returns {Object} pending action , errors
  */
-function getReportOfflinePendingActionAndErrors(report) {
+function getReportOfflinePendingActionAndErrors(report: OnyxEntry<Report>): ReportOfflinePendingActionAndErrors {
     // We are either adding a workspace room, or we're creating a chat, it isn't possible for both of these to be pending, or to have errors for the same report at the same time, so
     // simply looking up the first truthy value for each case will get the relevant property if it's set.
-    const addWorkspaceRoomOrChatPendingAction = lodashGet(report, 'pendingFields.addWorkspaceRoom') || lodashGet(report, 'pendingFields.createChat');
+    const addWorkspaceRoomOrChatPendingAction = report?.pendingFields?.addWorkspaceRoom ?? report?.pendingFields?.createChat;
     const addWorkspaceRoomOrChatErrors = getAddWorkspaceRoomOrChatReportErrors(report);
     return {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors};
 }
 
-/**
- * @param {String} policyOwner
- * @returns {String|null}
- */
-function getPolicyExpenseChatReportIDByOwner(policyOwner) {
-    const policyWithOwner = _.find(allPolicies, (policy) => policy.owner === policyOwner);
+function getPolicyExpenseChatReportIDByOwner(policyOwner: string): string | null {
+    const policyWithOwner = Object.values(allPolicies ?? {}).find((policy) => policy?.owner === policyOwner);
     if (!policyWithOwner) {
         return null;
     }
 
-    const expenseChat = _.find(allReports, (report) => isPolicyExpenseChat(report) && report.policyID === policyWithOwner.id);
+    const expenseChat = Object.values(allReports ?? {}).find((report) => isPolicyExpenseChat(report) && report?.policyID === policyWithOwner.id);
     if (!expenseChat) {
         return null;
     }
@@ -4021,34 +3940,23 @@ function getPolicyExpenseChatReportIDByOwner(policyOwner) {
 
 /**
  * Check if the report can create the request with type is iouType
- * @param {Object} report
- * @param {Array} betas
- * @param {String} iouType
- * @returns {Boolean}
  */
-function canCreateRequest(report, betas, iouType) {
-    const participantAccountIDs = lodashGet(report, 'participantAccountIDs', []);
+function canCreateRequest(report: OnyxEntry<Report>, iouType: (typeof CONST.IOU.TYPE)[keyof typeof CONST.IOU.TYPE]): boolean {
+    const participantAccountIDs = report?.participantAccountIDs ?? [];
     if (!canUserPerformWriteAction(report)) {
         return false;
     }
-    return getMoneyRequestOptions(report, participantAccountIDs, betas).includes(iouType);
+    return getMoneyRequestOptions(report, participantAccountIDs).includes(iouType);
 }
 
-/**
- * @param {String} policyID
- * @param {Array} accountIDs
- * @returns {Array}
- */
-function getWorkspaceChats(policyID, accountIDs) {
-    return _.filter(allReports, (report) => isPolicyExpenseChat(report) && lodashGet(report, 'policyID', '') === policyID && _.contains(accountIDs, lodashGet(report, 'ownerAccountID', '')));
+function getWorkspaceChats(policyID: string, accountIDs: number[]): Array<OnyxEntry<Report>> {
+    return Object.values(allReports ?? {}).filter((report) => isPolicyExpenseChat(report) && (report?.policyID ?? '') === policyID && accountIDs.includes(report?.ownerAccountID ?? -1));
 }
 
 /**
- * @param {Object|null} report
- * @param {Object|null} policy - the workspace the report is on, null if the user isn't a member of the workspace
- * @returns {Boolean}
+ * @param policy - the workspace the report is on, null if the user isn't a member of the workspace
  */
-function shouldDisableRename(report, policy) {
+function shouldDisableRename(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
     if (isDefaultRoom(report) || isArchivedRoom(report) || isThread(report) || isMoneyRequestReport(report) || isPolicyExpenseChat(report)) {
         return true;
     }
@@ -4061,42 +3969,40 @@ function shouldDisableRename(report, policy) {
 
     // If there is a linked workspace, that means the user is a member of the workspace the report is in.
     // Still, we only want policy owners and admins to be able to modify the name.
-    return !_.keys(loginList).includes(policy.owner) && policy.role !== CONST.POLICY.ROLE.ADMIN;
+    return !Object.keys(loginList ?? {}).includes(policy.owner) && policy.role !== CONST.POLICY.ROLE.ADMIN;
 }
 
 /**
- * @param {Object|null} report
- * @param {Object|null} policy - the workspace the report is on, null if the user isn't a member of the workspace
- * @returns {Boolean}
+ * @param policy - the workspace the report is on, null if the user isn't a member of the workspace
  */
-function canEditWriteCapability(report, policy) {
+function canEditWriteCapability(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
     return PolicyUtils.isPolicyAdmin(policy) && !isAdminRoom(report) && !isArchivedRoom(report) && !isThread(report);
 }
 
 /**
  * Returns the onyx data needed for the task assignee chat
- * @param {Number} accountID
- * @param {Number} assigneeAccountID
- * @param {String} taskReportID
- * @param {String} assigneeChatReportID
- * @param {String} parentReportID
- * @param {String} title
- * @param {Object} assigneeChatReport
- * @returns {Object}
- */
-function getTaskAssigneeChatOnyxData(accountID, assigneeAccountID, taskReportID, assigneeChatReportID, parentReportID, title, assigneeChatReport) {
+ */
+function getTaskAssigneeChatOnyxData(
+    accountID: number,
+    assigneeAccountID: number,
+    taskReportID: string,
+    assigneeChatReportID: string,
+    parentReportID: string,
+    title: string,
+    assigneeChatReport: OnyxEntry<Report>,
+): OnyxDataTaskAssigneeChat {
     // Set if we need to add a comment to the assignee chat notifying them that they have been assigned a task
-    let optimisticAssigneeAddComment;
+    let optimisticAssigneeAddComment: OptimisticReportAction | undefined;
     // Set if this is a new chat that needs to be created for the assignee
-    let optimisticChatCreatedReportAction;
+    let optimisticChatCreatedReportAction: OptimisticCreatedReportAction | undefined;
     const currentTime = DateUtils.getDBTime();
-    const optimisticData = [];
-    const successData = [];
-    const failureData = [];
+    const optimisticData: OnyxUpdate[] = [];
+    const successData: OnyxUpdate[] = [];
+    const failureData: OnyxUpdate[] = [];
 
     // You're able to assign a task to someone you haven't chatted with before - so we need to optimistically create the chat and the chat reportActions
     // Only add the assignee chat report to onyx if we haven't already set it optimistically
-    if (assigneeChatReport.isOptimisticReport && lodashGet(assigneeChatReport, 'pendingFields.createChat') !== CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
+    if (assigneeChatReport?.isOptimisticReport && assigneeChatReport.pendingFields?.createChat !== CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
         optimisticChatCreatedReportAction = buildOptimisticCreatedReportAction(assigneeChatReportID);
         optimisticData.push(
             {
@@ -4112,7 +4018,7 @@ function getTaskAssigneeChatOnyxData(accountID, assigneeAccountID, taskReportID,
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${assigneeChatReportID}`,
-                value: {[optimisticChatCreatedReportAction.reportActionID]: optimisticChatCreatedReportAction},
+                value: {[optimisticChatCreatedReportAction.reportActionID]: optimisticChatCreatedReportAction as Partial<ReportAction>},
             },
         );
 
@@ -4151,9 +4057,10 @@ function getTaskAssigneeChatOnyxData(accountID, assigneeAccountID, taskReportID,
 
     // If you're choosing to share the task in the same DM as the assignee then we don't need to create another reportAction indicating that you've been assigned
     if (assigneeChatReportID !== parentReportID) {
-        const displayname = lodashGet(allPersonalDetails, [assigneeAccountID, 'displayName']) || lodashGet(allPersonalDetails, [assigneeAccountID, 'login'], '');
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        const displayname = allPersonalDetails?.[assigneeAccountID]?.displayName || allPersonalDetails?.[assigneeAccountID]?.login || '';
         optimisticAssigneeAddComment = buildOptimisticTaskCommentReportAction(taskReportID, title, assigneeAccountID, `assigned to ${displayname}`, parentReportID);
-        const lastAssigneeCommentText = formatReportLastMessageText(optimisticAssigneeAddComment.reportAction.message[0].text);
+        const lastAssigneeCommentText = formatReportLastMessageText(optimisticAssigneeAddComment.reportAction.message?.[0].text ?? '');
         const optimisticAssigneeReport = {
             lastVisibleActionCreated: currentTime,
             lastMessageText: lastAssigneeCommentText,
@@ -4165,7 +4072,7 @@ function getTaskAssigneeChatOnyxData(accountID, assigneeAccountID, taskReportID,
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${assigneeChatReportID}`,
-                value: {[optimisticAssigneeAddComment.reportAction.reportActionID]: optimisticAssigneeAddComment.reportAction},
+                value: {[optimisticAssigneeAddComment.reportAction.reportActionID ?? '']: optimisticAssigneeAddComment.reportAction},
             },
             {
                 onyxMethod: Onyx.METHOD.MERGE,
@@ -4176,7 +4083,7 @@ function getTaskAssigneeChatOnyxData(accountID, assigneeAccountID, taskReportID,
         failureData.push({
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${assigneeChatReportID}`,
-            value: {[optimisticAssigneeAddComment.reportAction.reportActionID]: {pendingAction: null}},
+            value: {[optimisticAssigneeAddComment.reportAction.reportActionID ?? '']: {pendingAction: null}},
         });
     }
 
@@ -4191,46 +4098,41 @@ function getTaskAssigneeChatOnyxData(accountID, assigneeAccountID, taskReportID,
 
 /**
  * Returns an array of the participants Ids of a report
- *
- * @param {Object} report
- * @returns {Array}
  */
-function getParticipantsIDs(report) {
+function getParticipantsIDs(report: OnyxEntry<Report>): number[] {
     if (!report) {
         return [];
     }
 
-    const participants = report.participantAccountIDs || [];
+    const participants = report.participantAccountIDs ?? [];
 
     // Build participants list for IOU/expense reports
     if (isMoneyRequestReport(report)) {
-        return _.chain([report.managerID, report.ownerAccountID, ...participants])
-            .compact()
-            .uniq()
-            .value();
+        const onlyTruthyValues = [report.managerID, report.ownerAccountID, ...participants].filter(Boolean) as number[];
+        const onlyUnique = [...new Set([...onlyTruthyValues])];
+        return onlyUnique;
     }
     return participants;
 }
 
 /**
  * Return iou report action display message
- *
- * @param {Object} reportAction report action
- * @returns {String}
  */
-function getIOUReportActionDisplayMessage(reportAction) {
-    const originalMessage = _.get(reportAction, 'originalMessage', {});
-    let translationKey;
+function getIOUReportActionDisplayMessage(reportAction: OnyxEntry<ReportAction>): string {
+    if (reportAction?.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU) {
+        return '';
+    }
+    const originalMessage = reportAction.originalMessage;
+    let translationKey: TranslationPaths;
     if (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY) {
         const {IOUReportID} = originalMessage;
-
         // The `REPORT_ACTION_TYPE.PAY` action type is used for both fulfilling existing requests and sending money. To
         // differentiate between these two scenarios, we check if the `originalMessage` contains the `IOUDetails`
         // property. If it does, it indicates that this is a 'Send money' action.
-        const {amount, currency} = originalMessage.IOUDetails || originalMessage;
-        const formattedAmount = CurrencyUtils.convertToDisplayString(amount, currency);
+        const {amount, currency} = originalMessage.IOUDetails ?? originalMessage;
+        const formattedAmount = CurrencyUtils.convertToDisplayString(amount, currency) ?? '';
         const iouReport = getReport(IOUReportID);
-        const payerName = isExpenseReport(iouReport) ? getPolicyName(iouReport) : getDisplayNameForParticipant(iouReport.managerID, true);
+        const payerName = isExpenseReport(iouReport) ? getPolicyName(iouReport) : getDisplayNameForParticipant(iouReport?.managerID, true);
 
         switch (originalMessage.paymentType) {
             case CONST.IOU.PAYMENT_TYPE.ELSEWHERE:
@@ -4238,18 +4140,18 @@ function getIOUReportActionDisplayMessage(reportAction) {
                 break;
             case CONST.IOU.PAYMENT_TYPE.EXPENSIFY:
             case CONST.IOU.PAYMENT_TYPE.VBBA:
-                translationKey = 'iou.paidUsingExpensifyWithAmount';
+                translationKey = 'iou.paidWithExpensifyWithAmount';
                 break;
             default:
-                translationKey = '';
+                translationKey = 'iou.payerPaidAmount';
                 break;
         }
-        return Localize.translateLocal(translationKey, {amount: formattedAmount, payer: payerName});
+        return Localize.translateLocal(translationKey, {amount: formattedAmount, payer: payerName ?? ''});
     }
 
-    const transaction = TransactionUtils.getTransaction(originalMessage.IOUTransactionID);
-    const {amount, currency, comment} = getTransactionDetails(transaction);
-    const formattedAmount = CurrencyUtils.convertToDisplayString(amount, currency);
+    const transaction = TransactionUtils.getTransaction(originalMessage.IOUTransactionID ?? '');
+    const transactionDetails = getTransactionDetails(isNotEmptyObject(transaction) ? transaction : null);
+    const formattedAmount = CurrencyUtils.convertToDisplayString(transactionDetails?.amount ?? 0, transactionDetails?.currency);
     const isRequestSettled = isSettled(originalMessage.IOUReportID);
     if (isRequestSettled) {
         return Localize.translateLocal('iou.payerSettled', {
@@ -4259,44 +4161,40 @@ function getIOUReportActionDisplayMessage(reportAction) {
     translationKey = ReportActionsUtils.isSplitBillAction(reportAction) ? 'iou.didSplitAmount' : 'iou.requestedAmount';
     return Localize.translateLocal(translationKey, {
         formattedAmount,
-        comment,
+        comment: transactionDetails?.comment ?? '',
     });
 }
 
 /**
  * Return room channel log display message
- *
- * @param {Object} reportAction
- * @returns {String}
  */
-function getChannelLogMemberMessage(reportAction) {
+function getChannelLogMemberMessage(reportAction: OnyxEntry<ReportAction>): string {
     const verb =
-        reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
+        reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
             ? 'invited'
             : 'removed';
 
-    const mentions = _.map(reportAction.originalMessage.targetAccountIDs, (accountID) => {
-        const personalDetail = lodashGet(allPersonalDetails, accountID);
-        const displayNameOrLogin =
-            LocalePhoneNumber.formatPhoneNumber(lodashGet(personalDetail, 'login', '')) || lodashGet(personalDetail, 'displayName', '') || Localize.translateLocal('common.hidden');
+    const mentions = (reportAction?.originalMessage as ChangeLog)?.targetAccountIDs?.map(() => {
+        const personalDetail = allPersonalDetails?.accountID;
+        const displayNameOrLogin = LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? '') || (personalDetail?.displayName ?? '') || Localize.translateLocal('common.hidden');
         return `@${displayNameOrLogin}`;
     });
 
-    const lastMention = mentions.pop();
+    const lastMention = mentions?.pop();
     let message = '';
 
-    if (mentions.length === 0) {
+    if (mentions?.length === 0) {
         message = `${verb} ${lastMention}`;
-    } else if (mentions.length === 1) {
-        message = `${verb} ${mentions[0]} and ${lastMention}`;
+    } else if (mentions?.length === 1) {
+        message = `${verb} ${mentions?.[0]} and ${lastMention}`;
     } else {
-        message = `${verb} ${mentions.join(', ')}, and ${lastMention}`;
+        message = `${verb} ${mentions?.join(', ')}, and ${lastMention}`;
     }
 
-    const roomName = lodashGet(reportAction, 'originalMessage.roomName', '');
+    const roomName = (reportAction?.originalMessage as ChangeLog)?.roomName ?? '';
     if (roomName) {
         const preposition =
-            reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
+            reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG.INVITE_TO_ROOM || reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG.INVITE_TO_ROOM
                 ? ' to'
                 : ' from';
         message += `${preposition} ${roomName}`;
@@ -4316,57 +4214,50 @@ function getChannelLogMemberMessage(reportAction) {
  * - Not a public / admin / announce chat room (chat type doesn't match any of the specified types).
  * - More than 2 participants.
  *
- * @param {Object} report
- * @returns {Boolean}
  */
-function isGroupChat(report) {
-    return (
+function isGroupChat(report: OnyxEntry<Report>): boolean {
+    return Boolean(
         report &&
-        !isChatThread(report) &&
-        !isTaskReport(report) &&
-        !isMoneyRequestReport(report) &&
-        !isArchivedRoom(report) &&
-        !Object.values(CONST.REPORT.CHAT_TYPE).includes(getChatType(report)) &&
-        lodashGet(report, 'participantAccountIDs.length', 0) > 2
+            !isChatThread(report) &&
+            !isTaskReport(report) &&
+            !isMoneyRequestReport(report) &&
+            !isArchivedRoom(report) &&
+            !Object.values(CONST.REPORT.CHAT_TYPE).some((chatType) => chatType === getChatType(report)) &&
+            (report.participantAccountIDs?.length ?? 0) > 2,
     );
 }
 
-/**
- * @param {Object} report
- * @returns {Boolean}
- */
-function isReportDraft(report) {
-    return isExpenseReport(report) && lodashGet(report, 'stateNum') === CONST.REPORT.STATE_NUM.OPEN && lodashGet(report, 'statusNum') === CONST.REPORT.STATUS.OPEN;
-}
-
-/**
- * @param {Object} report
- * @returns {Boolean}
- */
-function shouldUseFullTitleToDisplay(report) {
+function shouldUseFullTitleToDisplay(report: OnyxEntry<Report>): boolean {
     return isMoneyRequestReport(report) || isPolicyExpenseChat(report) || isChatRoom(report) || isChatThread(report) || isTaskReport(report);
 }
 
-/**
- *
- * @param {String} type
- * @param {String} policyID
- * @returns {Object}
- */
-function getRoom(type, policyID) {
-    const room = _.find(allReports, (report) => report && report.policyID === policyID && report.chatType === type && !isThread(report));
+function getRoom(type: ValueOf<typeof CONST.REPORT.CHAT_TYPE>, policyID: string): OnyxEntry<Report> | undefined {
+    const room = Object.values(allReports ?? {}).find((report) => report?.policyID === policyID && report?.chatType === type && !isThread(report));
     return room;
 }
+
 /**
  *  We only want policy owners and admins to be able to modify the welcome message, but not in thread chat.
- * @param {Object} report
- * @param {Object} policy
- * @return {Boolean}
  */
-function shouldDisableWelcomeMessage(report, policy) {
+function shouldDisableWelcomeMessage(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
     return isMoneyRequestReport(report) || isArchivedRoom(report) || !isChatRoom(report) || isChatThread(report) || !PolicyUtils.isPolicyAdmin(policy);
 }
 
+/**
+ * Navigates to the appropriate screen based on the presence of a private note for the current user.
+ */
+function navigateToPrivateNotes(report: Report, session: Session) {
+    if (isEmpty(report) || isEmpty(session)) {
+        return;
+    }
+    const currentUserPrivateNote = report.privateNotes?.[String(session.accountID)]?.note ?? '';
+    if (isEmpty(currentUserPrivateNote)) {
+        Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, String(session.accountID)));
+        return;
+    }
+    Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -4482,7 +4373,6 @@ export {
     getWorkspaceAvatar,
     isThread,
     isChatThread,
-    isThreadParent,
     isThreadFirstChat,
     isChildReport,
     shouldReportShowSubscript,
@@ -4524,13 +4414,17 @@ export {
     getIOUReportActionDisplayMessage,
     isWaitingForAssigneeToCompleteTask,
     isGroupChat,
-    isReportDraft,
+    isDraftExpenseReport,
     shouldUseFullTitleToDisplay,
     parseReportRouteParams,
     getReimbursementQueuedActionMessage,
+    getReimbursementDeQueuedActionMessage,
     getPersonalDetailsForAccountID,
     getChannelLogMemberMessage,
     getRoom,
     shouldDisableWelcomeMessage,
+    navigateToPrivateNotes,
     canEditWriteCapability,
 };
+
+export type {OptionData};
diff --git a/src/libs/RoomNameInputUtils.ts b/src/libs/RoomNameInputUtils.ts
index cff0bbc30274..e6f7d420bf59 100644
--- a/src/libs/RoomNameInputUtils.ts
+++ b/src/libs/RoomNameInputUtils.ts
@@ -3,14 +3,14 @@ import CONST from '@src/CONST';
 /**
  * Replaces spaces with dashes
  */
-function modifyRoomName(roomName: string): string {
+function modifyRoomName(roomName: string, skipPolicyPrefix?: boolean): string {
     const modifiedRoomNameWithoutHash = roomName
         .replace(/ /g, '-')
 
         // Replaces the smart dash on iOS devices with two hyphens
         .replace(/—/g, '--');
 
-    return `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
+    return skipPolicyPrefix ? modifiedRoomNameWithoutHash : `${CONST.POLICY.ROOM_PREFIX}${modifiedRoomNameWithoutHash}`;
 }
 
 export {
diff --git a/src/libs/SidebarUtils.ts b/src/libs/SidebarUtils.ts
index 763a0000ba35..bace29e06d28 100644
--- a/src/libs/SidebarUtils.ts
+++ b/src/libs/SidebarUtils.ts
@@ -1,6 +1,6 @@
 /* eslint-disable rulesdir/prefer-underscore-method */
 import Str from 'expensify-common/lib/str';
-import Onyx from 'react-native-onyx';
+import Onyx, {OnyxCollection} from 'react-native-onyx';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -117,11 +117,12 @@ function getOrderedReportIDs(
     betas: Beta[],
     policies: Record<string, Policy>,
     priorityMode: ValueOf<typeof CONST.PRIORITY_MODE>,
-    allReportActions: Record<string, ReportAction[]>,
+    allReportActions: OnyxCollection<ReportActions>,
 ): string[] {
     // Generate a unique cache key based on the function arguments
     const cachedReportsKey = JSON.stringify(
-        [currentReportId, allReports, betas, policies, priorityMode, allReportActions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${currentReportId}`]?.length || 1],
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        [currentReportId, allReports, betas, policies, priorityMode, allReportActions?.[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${currentReportId}`]?.length || 1],
         (key, value: unknown) => {
             /**
              *  Exclude 'participantAccountIDs', 'participants' and 'lastMessageText' not to overwhelm a cached key value with huge data,
@@ -148,7 +149,9 @@ function getOrderedReportIDs(
     const isInDefaultMode = !isInGSDMode;
     const allReportsDictValues = Object.values(allReports);
     // Filter out all the reports that shouldn't be displayed
-    const reportsToDisplay = allReportsDictValues.filter((report) => ReportUtils.shouldReportBeInOptionList(report, currentReportId, isInGSDMode, betas, policies, allReportActions, true));
+    const reportsToDisplay = allReportsDictValues.filter((report) =>
+        ReportUtils.shouldReportBeInOptionList(report, currentReportId ?? '', isInGSDMode, betas, policies, allReportActions, true),
+    );
 
     if (reportsToDisplay.length === 0) {
         // Display Concierge chat report when there is no report to be displayed
@@ -219,86 +222,22 @@ function getOrderedReportIDs(
     return LHNReports;
 }
 
-type OptionData = {
-    text?: string | null;
-    alternateText?: string | null;
-    pendingAction?: OnyxCommon.PendingAction | null;
-    allReportErrors?: OnyxCommon.Errors | null;
-    brickRoadIndicator?: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | '' | null;
-    icons?: Icon[] | null;
-    tooltipText?: string | null;
-    ownerAccountID?: number | null;
-    subtitle?: string | null;
-    participantsList?: PersonalDetails[] | null;
-    login?: string | null;
-    accountID?: number | null;
-    managerID?: number | null;
-    reportID?: string | null;
-    policyID?: string | null;
-    status?: string | null;
-    type?: string | null;
-    stateNum?: ValueOf<typeof CONST.REPORT.STATE_NUM> | null;
-    statusNum?: ValueOf<typeof CONST.REPORT.STATUS> | null;
-    phoneNumber?: string | null;
-    isUnread?: boolean | null;
-    isUnreadWithMention?: boolean | null;
-    hasDraftComment?: boolean | null;
-    keyForList?: string | null;
-    searchText?: string | null;
-    isPinned?: boolean | null;
-    hasOutstandingIOU?: boolean | null;
-    hasOutstandingChildRequest?: boolean | null;
-    iouReportID?: string | null;
-    isIOUReportOwner?: boolean | null;
-    iouReportAmount?: number | null;
-    isChatRoom?: boolean | null;
-    isArchivedRoom?: boolean | null;
-    shouldShowSubscript?: boolean | null;
-    isPolicyExpenseChat?: boolean | null;
-    isMoneyRequestReport?: boolean | null;
-    isExpenseRequest?: boolean | null;
-    isWaitingOnBankAccount?: boolean | null;
-    isAllowedToComment?: boolean | null;
-    isThread?: boolean | null;
-    isTaskReport?: boolean | null;
-    parentReportID?: string | null;
-    parentReportAction?: ReportAction;
-    notificationPreference?: string | number | null;
-    displayNamesWithTooltips?: DisplayNamesWithTooltip[] | null;
-    chatType?: ValueOf<typeof CONST.REPORT.CHAT_TYPE> | null;
-};
-
-type DisplayNamesWithTooltip = {
-    displayName?: string;
-    avatar?: string;
-    login?: string;
-    accountID?: number;
-    pronouns?: string;
-};
-
 type ActorDetails = {
     displayName?: string;
     accountID?: number;
 };
 
-type Icon = {
-    source?: string;
-    id?: number;
-    type?: string;
-    name?: string;
-};
-
 /**
  * Gets all the data necessary for rendering an OptionRowLHN component
  */
 function getOptionData(
     report: Report,
-    reportActions: Record<string, ReportAction[]>,
+    reportActions: Record<string, ReportAction>,
     personalDetails: Record<number, PersonalDetails>,
     preferredLocale: ValueOf<typeof CONST.LOCALES>,
     policy: Policy,
     parentReportAction: ReportAction,
-): OptionData | undefined {
+): ReportUtils.OptionData | undefined {
     // When a user signs out, Onyx is cleared. Due to the lazy rendering with a virtual list, it's possible for
     // this method to be called after the Onyx data has been cleared out. In that case, it's fine to do
     // a null check here and return early.
@@ -306,24 +245,16 @@ function getOptionData(
         return;
     }
 
-    const result: OptionData = {
-        text: null,
+    const result: ReportUtils.OptionData = {
         alternateText: null,
         pendingAction: null,
         allReportErrors: null,
         brickRoadIndicator: null,
-        icons: null,
         tooltipText: null,
-        ownerAccountID: null,
         subtitle: null,
-        participantsList: null,
         login: null,
         accountID: null,
-        managerID: null,
-        reportID: null,
-        policyID: null,
-        statusNum: null,
-        stateNum: null,
+        reportID: '',
         phoneNumber: null,
         isUnread: null,
         isUnreadWithMention: null,
@@ -333,7 +264,6 @@ function getOptionData(
         isPinned: false,
         hasOutstandingIOU: false,
         hasOutstandingChildRequest: false,
-        iouReportID: null,
         isIOUReportOwner: null,
         iouReportAmount: 0,
         isChatRoom: false,
@@ -344,7 +274,6 @@ function getOptionData(
         isExpenseRequest: false,
         isWaitingOnBankAccount: false,
         isAllowedToComment: true,
-        chatType: null,
     };
     const participantPersonalDetailList: PersonalDetails[] = Object.values(OptionsListUtils.getPersonalDetailsForAccountIDs(report.participantAccountIDs ?? [], personalDetails));
     const personalDetail = participantPersonalDetailList[0] ?? {};
@@ -376,9 +305,9 @@ function getOptionData(
     result.tooltipText = ReportUtils.getReportParticipantsTitle(report.participantAccountIDs ?? []);
     result.hasOutstandingIOU = report.hasOutstandingIOU;
     result.hasOutstandingChildRequest = report.hasOutstandingChildRequest;
-    result.parentReportID = report.parentReportID ?? null;
+    result.parentReportID = report.parentReportID ?? '';
     result.isWaitingOnBankAccount = report.isWaitingOnBankAccount;
-    result.notificationPreference = report.notificationPreference ?? null;
+    result.notificationPreference = report.notificationPreference ?? '';
     result.isAllowedToComment = ReportUtils.canUserPerformWriteAction(report);
     result.chatType = report.chatType;
 
@@ -390,7 +319,7 @@ function getOptionData(
     const formattedLogin = Str.isSMSLogin(login) ? LocalePhoneNumber.formatPhoneNumber(login) : login;
 
     // We only create tooltips for the first 10 users or so since some reports have hundreds of users, causing performance to degrade.
-    const displayNamesWithTooltips: DisplayNamesWithTooltip[] = ReportUtils.getDisplayNamesWithTooltips((participantPersonalDetailList || []).slice(0, 10), hasMultipleParticipants);
+    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips((participantPersonalDetailList || []).slice(0, 10), hasMultipleParticipants);
     const lastMessageTextFromReport = OptionsListUtils.getLastMessageTextForReport(report);
 
     // If the last actor's details are not currently saved in Onyx Collection,
@@ -492,8 +421,8 @@ function getOptionData(
         result.alternateText = lastMessageText || formattedLogin;
     }
 
-    result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result);
-    result.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(result);
+    result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result as Report);
+    result.iouReportAmount = ReportUtils.getMoneyRequestReimbursableTotal(result as Report);
 
     if (!hasMultipleParticipants) {
         result.accountID = personalDetail.accountID;
diff --git a/src/libs/StatusBar/index.android.ts b/src/libs/StatusBar/index.android.ts
index c928f0949665..6cbf1a762a0b 100644
--- a/src/libs/StatusBar/index.android.ts
+++ b/src/libs/StatusBar/index.android.ts
@@ -1,10 +1,14 @@
 import StatusBar from './types';
 
-// Only has custom web implementation
-StatusBar.getBackgroundColor = () => null;
+const setBackgroundColor = StatusBar.setBackgroundColor;
 
-// We override this because it's not used – on Android our app display edge-to-edge.
-// Also because Reanimated's interpolateColor gives Android native colors instead of hex strings, causing this to display a warning.
-StatusBar.setBackgroundColor = () => null;
+let statusBarColor: string | null = null;
+
+StatusBar.getBackgroundColor = () => statusBarColor;
+
+StatusBar.setBackgroundColor = (color, animated = false) => {
+    statusBarColor = color as string;
+    setBackgroundColor(color, animated);
+};
 
 export default StatusBar;
diff --git a/src/libs/StringUtils.ts b/src/libs/StringUtils.ts
index f1dd5a06e828..2fb918c7a233 100644
--- a/src/libs/StringUtils.ts
+++ b/src/libs/StringUtils.ts
@@ -63,4 +63,13 @@ function removeInvisibleCharacters(value: string): string {
     return result.trim();
 }
 
-export default {sanitizeString, isEmptyString, removeInvisibleCharacters};
+/**
+ *  Replace all CRLF with LF
+ *  @param value - The input string
+ *  @returns The string with all CRLF replaced with LF
+ */
+function normalizeCRLF(value?: string): string | undefined {
+    return value?.replace(/\r\n/g, '\n');
+}
+
+export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeCRLF};
diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts
index 00ce8c55dbd7..d03235a637c7 100644
--- a/src/libs/TransactionUtils.ts
+++ b/src/libs/TransactionUtils.ts
@@ -1,9 +1,11 @@
-import Onyx, {OnyxCollection} from 'react-native-onyx';
+import Onyx, {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {RecentWaypoint, ReportAction, Transaction} from '@src/types/onyx';
 import {Comment, Receipt, Waypoint, WaypointCollection} from '@src/types/onyx/Transaction';
-import {isExpensifyCard} from './CardUtils';
+import {EmptyObject} from '@src/types/utils/EmptyObject';
+import {isCorporateCard, isExpensifyCard} from './CardUtils';
 import DateUtils from './DateUtils';
 import * as NumberUtils from './NumberUtils';
 
@@ -166,7 +168,8 @@ function getUpdatedTransaction(transaction: Transaction, transactionChanges: Tra
         shouldStopSmartscan &&
         transaction?.receipt &&
         Object.keys(transaction.receipt).length > 0 &&
-        transaction?.receipt?.state !== CONST.IOU.RECEIPT_STATE.OPEN
+        transaction?.receipt?.state !== CONST.IOU.RECEIPT_STATE.OPEN &&
+        updatedTransaction.receipt
     ) {
         updatedTransaction.receipt.state = CONST.IOU.RECEIPT_STATE.OPEN;
     }
@@ -191,7 +194,7 @@ function getUpdatedTransaction(transaction: Transaction, transactionChanges: Tra
  *
  * @deprecated Use withOnyx() or Onyx.connect() instead
  */
-function getTransaction(transactionID: string): Transaction | Record<string, never> {
+function getTransaction(transactionID: string): OnyxEntry<Transaction> | EmptyObject {
     return allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] ?? {};
 }
 
@@ -199,7 +202,7 @@ function getTransaction(transactionID: string): Transaction | Record<string, nev
  * Return the comment field (referred to as description in the App) from the transaction.
  * The comment does not have its modifiedComment counterpart.
  */
-function getDescription(transaction: Transaction): string {
+function getDescription(transaction: OnyxEntry<Transaction>): string {
     // Casting the description to string to avoid wrong data types (e.g. number) being returned from the API
     return transaction?.comment?.comment?.toString() ?? '';
 }
@@ -207,7 +210,7 @@ function getDescription(transaction: Transaction): string {
 /**
  * Return the amount field from the transaction, return the modifiedAmount if present.
  */
-function getAmount(transaction: Transaction, isFromExpenseReport: boolean): number {
+function getAmount(transaction: OnyxEntry<Transaction>, isFromExpenseReport: boolean): number {
     // IOU requests cannot have negative values but they can be stored as negative values, let's return absolute value
     if (!isFromExpenseReport) {
         const amount = transaction?.modifiedAmount ?? 0;
@@ -233,7 +236,7 @@ function getAmount(transaction: Transaction, isFromExpenseReport: boolean): numb
 /**
  * Return the currency field from the transaction, return the modifiedCurrency if present.
  */
-function getCurrency(transaction: Transaction): string {
+function getCurrency(transaction: OnyxEntry<Transaction>): string {
     const currency = transaction?.modifiedCurrency ?? '';
     if (currency) {
         return currency;
@@ -259,28 +262,28 @@ function getOriginalAmount(transaction: Transaction): number {
 /**
  * Return the merchant field from the transaction, return the modifiedMerchant if present.
  */
-function getMerchant(transaction: Transaction): string {
-    return transaction?.modifiedMerchant ? transaction.modifiedMerchant : transaction?.merchant || '';
+function getMerchant(transaction: OnyxEntry<Transaction>): string {
+    return transaction?.modifiedMerchant ? transaction.modifiedMerchant : transaction?.merchant ?? '';
 }
 
 /**
  * Return the mccGroup field from the transaction, return the modifiedMCCGroup if present.
  */
-function getMCCGroup(transaction: Transaction): string {
-    return transaction?.modifiedMCCGroup ? transaction.modifiedMCCGroup : transaction?.mccGroup ?? '';
+function getMCCGroup(transaction: Transaction): ValueOf<typeof CONST.MCC_GROUPS> | undefined {
+    return transaction?.modifiedMCCGroup ? transaction.modifiedMCCGroup : transaction?.mccGroup;
 }
 
 /**
  * Return the waypoints field from the transaction, return the modifiedWaypoints if present.
  */
-function getWaypoints(transaction: Transaction): WaypointCollection | undefined {
+function getWaypoints(transaction: OnyxEntry<Transaction>): WaypointCollection | undefined {
     return transaction?.modifiedWaypoints ?? transaction?.comment?.waypoints;
 }
 
 /**
  * Return the category from the transaction. This "category" field has no "modified" complement.
  */
-function getCategory(transaction: Transaction): string {
+function getCategory(transaction: OnyxEntry<Transaction>): string {
     return transaction?.category ?? '';
 }
 
@@ -294,27 +297,28 @@ function getCardID(transaction: Transaction): number {
 /**
  * Return the billable field from the transaction. This "billable" field has no "modified" complement.
  */
-function getBillable(transaction: Transaction): boolean {
+function getBillable(transaction: OnyxEntry<Transaction>): boolean {
     return transaction?.billable ?? false;
 }
 
 /**
  * Return the tag from the transaction. This "tag" field has no "modified" complement.
  */
-function getTag(transaction: Transaction): string {
+function getTag(transaction: OnyxEntry<Transaction>): string {
     return transaction?.tag ?? '';
 }
 
 /**
  * Return the created field from the transaction, return the modifiedCreated if present.
  */
-function getCreated(transaction: Transaction, dateFormat: string = CONST.DATE.FNS_FORMAT_STRING): string {
+function getCreated(transaction: OnyxEntry<Transaction>, dateFormat: string = CONST.DATE.FNS_FORMAT_STRING): string {
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const created = transaction?.modifiedCreated ? transaction.modifiedCreated : transaction?.created || '';
 
     return DateUtils.formatWithUTCTimeZone(created, dateFormat);
 }
 
-function isDistanceRequest(transaction: Transaction): boolean {
+function isDistanceRequest(transaction: OnyxEntry<Transaction>): boolean {
     const type = transaction?.comment?.type;
     const customUnitName = transaction?.comment?.customUnit?.name;
     return type === CONST.TRANSACTION.TYPE.CUSTOM_UNIT && customUnitName === CONST.CUSTOM_UNITS.NAME_DISTANCE;
@@ -330,6 +334,14 @@ function isExpensifyCardTransaction(transaction: Transaction): boolean {
     return isExpensifyCard(transaction.cardID);
 }
 
+/**
+ * Determine whether a transaction is made with a card (Expensify or Company Card).
+ */
+function isCardTransaction(transaction: Transaction): boolean {
+    const cardID = transaction?.cardID ?? 0;
+    return isCorporateCard(cardID);
+}
+
 /**
  * Check if the transaction status is set to Pending.
  */
@@ -350,15 +362,15 @@ function isPosted(transaction: Transaction): boolean {
     return transaction.status === CONST.TRANSACTION.STATUS.POSTED;
 }
 
-function isReceiptBeingScanned(transaction: Transaction): boolean {
-    return [CONST.IOU.RECEIPT_STATE.SCANREADY, CONST.IOU.RECEIPT_STATE.SCANNING].some((value) => value === transaction.receipt.state);
+function isReceiptBeingScanned(transaction: OnyxEntry<Transaction>): boolean {
+    return [CONST.IOU.RECEIPT_STATE.SCANREADY, CONST.IOU.RECEIPT_STATE.SCANNING].some((value) => value === transaction?.receipt?.state);
 }
 
 /**
  * Check if the transaction has a non-smartscanning receipt and is missing required fields
  */
-function hasMissingSmartscanFields(transaction: Transaction): boolean {
-    return hasReceipt(transaction) && !isDistanceRequest(transaction) && !isReceiptBeingScanned(transaction) && areRequiredFieldsEmpty(transaction);
+function hasMissingSmartscanFields(transaction: OnyxEntry<Transaction>): boolean {
+    return Boolean(transaction && hasReceipt(transaction) && !isDistanceRequest(transaction) && !isReceiptBeingScanned(transaction) && areRequiredFieldsEmpty(transaction));
 }
 
 /**
@@ -374,7 +386,7 @@ function hasRoute(transaction: Transaction): boolean {
  *
  * @deprecated Use Onyx.connect() or withOnyx() instead
  */
-function getLinkedTransaction(reportAction: ReportAction): Transaction | Record<string, never> {
+function getLinkedTransaction(reportAction: OnyxEntry<ReportAction>): Transaction | EmptyObject {
     let transactionID = '';
 
     if (reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU) {
@@ -475,6 +487,7 @@ export {
     getValidWaypoints,
     isDistanceRequest,
     isExpensifyCardTransaction,
+    isCardTransaction,
     isPending,
     isPosted,
     getWaypoints,
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 b6d061432585..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): 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): 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: string, accountID: number): React.FC<SvgProps> | string {
-    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): React.FC<SvgProps> | string {
-    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): React.FC<SvgPr
  * 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): React.FC<SvgProps> | string {
-    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 7c49006c10a5..388020bc0d6d 100644
--- a/src/libs/ValidationUtils.ts
+++ b/src/libs/ValidationUtils.ts
@@ -200,7 +200,8 @@ function getAgeRequirementError(date: string, minimumAge: number, maximumAge: nu
  * http/https/ftp URL scheme required.
  */
 function isValidWebsite(url: string): boolean {
-    return new RegExp(`^${URL_REGEX_WITH_REQUIRED_PROTOCOL}$`, 'i').test(url);
+    const isLowerCase = url === url.toLowerCase();
+    return new RegExp(`^${URL_REGEX_WITH_REQUIRED_PROTOCOL}$`, 'i').test(url) && isLowerCase;
 }
 
 function validateIdentity(identity: Record<string, string>): Record<string, boolean> {
@@ -296,6 +297,13 @@ function isValidLegalName(name: string): boolean {
     return CONST.REGEX.ALPHABETIC_AND_LATIN_CHARS.test(name);
 }
 
+/**
+ * Checks that the provided name doesn't contain special characters or numbers
+ */
+function isValidPersonName(value: string) {
+    return /^[^\d^!#$%*=<>;{}"]+$/.test(value);
+}
+
 /**
  * Checks if the provided string includes any of the provided reserved words
  */
@@ -406,4 +414,5 @@ export {
     isValidAccountRoute,
     isValidRecoveryCode,
     prepareValues,
+    isValidPersonName,
 };
diff --git a/src/libs/__mocks__/Permissions.ts b/src/libs/__mocks__/Permissions.ts
index e95d13f52803..4f47c0b756b7 100644
--- a/src/libs/__mocks__/Permissions.ts
+++ b/src/libs/__mocks__/Permissions.ts
@@ -12,5 +12,4 @@ export default {
     ...jest.requireActual('../Permissions'),
     canUseDefaultRooms: (betas: Beta[]) => betas.includes(CONST.BETAS.DEFAULT_ROOMS),
     canUsePolicyRooms: (betas: Beta[]) => betas.includes(CONST.BETAS.POLICY_ROOMS),
-    canUseCustomStatus: (betas: Beta[]) => betas.includes(CONST.BETAS.CUSTOM_STATUS),
 };
diff --git a/src/libs/actions/App.ts b/src/libs/actions/App.ts
index accf84002bd3..4de8f1c1f171 100644
--- a/src/libs/actions/App.ts
+++ b/src/libs/actions/App.ts
@@ -13,7 +13,7 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as SessionUtils from '@libs/SessionUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
+import ROUTES, {Route} from '@src/ROUTES';
 import * as OnyxTypes from '@src/types/onyx';
 import {SelectedTimezone} from '@src/types/onyx/PersonalDetails';
 import type {OnyxData} from '@src/types/onyx/Request';
@@ -392,7 +392,7 @@ function setUpPoliciesAndNavigate(session: OnyxTypes.Session) {
 
     const isLoggingInAsNewUser = !!session.email && SessionUtils.isLoggingInAsNewUser(currentUrl, session.email);
     const url = new URL(currentUrl);
-    const exitTo = url.searchParams.get('exitTo');
+    const exitTo = url.searchParams.get('exitTo') as Route | null;
 
     // Approved Accountants and Guides can enter a flow where they make a workspace for other users,
     // and those are passed as a search parameter when using transition links
diff --git a/src/libs/actions/Card.js b/src/libs/actions/Card.js
index 9adcd3803766..68642bd8fdf1 100644
--- a/src/libs/actions/Card.js
+++ b/src/libs/actions/Card.js
@@ -93,7 +93,7 @@ function requestReplacementExpensifyCard(cardId, reason) {
 /**
  * Activates the physical Expensify card based on the last four digits of the card number
  *
- * @param {Number} cardLastFourDigits
+ * @param {String} cardLastFourDigits
  * @param {Number} cardID
  */
 function activatePhysicalExpensifyCard(cardLastFourDigits, cardID) {
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 8d44e3898062..91ec0cd6471b 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -141,18 +141,6 @@ function resetMoneyRequestInfo(id = '') {
     });
 }
 
-/**
- *  Helper function to get the receipt error for money requests, or the generic error if there's no receipt
- *
- * @param {Object} receipt
- * @returns {Object}
- */
-function getReceiptError(receipt) {
-    return _.isEmpty(receipt)
-        ? ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage')
-        : ErrorUtils.getMicroSecondOnyxErrorObject({error: CONST.IOU.RECEIPT_ERROR, source: receipt.source, filename: receipt.filename});
-}
-
 function buildOnyxDataForMoneyRequest(
     chatReport,
     iouReport,
@@ -356,7 +344,7 @@ function buildOnyxDataForMoneyRequest(
                 ...(isNewChatReport
                     ? {
                           [chatCreatedAction.reportActionID]: {
-                              errors: getReceiptError(transaction.receipt),
+                              errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
                           },
                           [reportPreviewAction.reportActionID]: {
                               errors: ErrorUtils.getMicroSecondOnyxError(null),
@@ -365,7 +353,7 @@ function buildOnyxDataForMoneyRequest(
                     : {
                           [reportPreviewAction.reportActionID]: {
                               created: reportPreviewAction.created,
-                              errors: getReceiptError(transaction.receipt),
+                              errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
                           },
                       }),
             },
@@ -377,7 +365,7 @@ function buildOnyxDataForMoneyRequest(
                 ...(isNewIOUReport
                     ? {
                           [iouCreatedAction.reportActionID]: {
-                              errors: getReceiptError(transaction.receipt),
+                              errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
                           },
                           [iouAction.reportActionID]: {
                               errors: ErrorUtils.getMicroSecondOnyxError(null),
@@ -385,7 +373,7 @@ function buildOnyxDataForMoneyRequest(
                       }
                     : {
                           [iouAction.reportActionID]: {
-                              errors: getReceiptError(transaction.receipt),
+                              errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
                           },
                       }),
             },
@@ -471,6 +459,15 @@ function getMoneyRequestInformation(
     const isNewIOUReport = !chatReport.iouReportID || ReportUtils.hasIOUWaitingOnCurrentUserBankAccount(chatReport);
     let iouReport = isNewIOUReport ? null : allReports[`${ONYXKEYS.COLLECTION.REPORT}${chatReport.iouReportID}`];
 
+    // If the linked expense report on paid policy is not draft, we need to create a new draft expense report
+    if (isPolicyExpenseChat && iouReport) {
+        const policyType = ReportUtils.getPolicy(iouReport.policyID).type || '';
+        const isFromPaidPolicy = policyType === CONST.POLICY.TYPE.TEAM || policyType === CONST.POLICY.TYPE.CORPORATE;
+        if (isFromPaidPolicy && !ReportUtils.isDraftExpenseReport(iouReport)) {
+            iouReport = null;
+        }
+    }
+
     if (iouReport) {
         if (isPolicyExpenseChat) {
             iouReport = {...iouReport};
@@ -784,7 +781,8 @@ function editDistanceMoneyRequest(transactionID, transactionThreadReportID, tran
 
     // Optimistically modify the transaction
     optimisticData.push({
-        onyxMethod: Onyx.METHOD.MERGE,
+        // We need to use SET method to save updated waypoint instead MERGE method to avoid wrong update of waypoints. More detail: https://github.com/Expensify/App/issues/30290#issuecomment-1778957070
+        onyxMethod: Onyx.METHOD.SET,
         key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
         value: {
             ...updatedTransaction,
@@ -872,6 +870,7 @@ function requestMoney(
     const currentChatReport = isMoneyRequestReport ? ReportUtils.getReport(report.chatReportID) : report;
     const {payerAccountID, payerEmail, iouReport, chatReport, transaction, iouAction, createdChatReportActionID, createdIOUReportActionID, reportPreviewAction, onyxData} =
         getMoneyRequestInformation(currentChatReport, participant, comment, amount, currency, created, merchant, payeeAccountID, payeeEmail, receipt, undefined, category, tag, billable);
+    const activeReportID = isMoneyRequestReport ? report.reportID : chatReport.reportID;
 
     API.write(
         'RequestMoney',
@@ -899,8 +898,8 @@ function requestMoney(
         onyxData,
     );
     resetMoneyRequestInfo();
-    Navigation.dismissModal(isMoneyRequestReport ? report.reportID : chatReport.reportID);
-    Report.notifyNewAction(chatReport.reportID, payeeAccountID);
+    Navigation.dismissModal(activeReportID);
+    Report.notifyNewAction(activeReportID, payeeAccountID);
 }
 
 /**
@@ -1445,7 +1444,7 @@ function startSplitBill(participants, currentUserLogin, currentUserAccountID, co
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${splitChatReport.reportID}`,
             value: {
                 [splitIOUReportAction.reportActionID]: {
-                    errors: getReceiptError(receipt),
+                    errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
                 },
             },
         });
@@ -1468,7 +1467,7 @@ function startSplitBill(participants, currentUserLogin, currentUserAccountID, co
                         errors: ErrorUtils.getMicroSecondOnyxError('report.genericCreateReportFailureMessage'),
                     },
                     [splitIOUReportAction.reportActionID]: {
-                        errors: getReceiptError(receipt),
+                        errors: ErrorUtils.getMicroSecondOnyxError('iou.error.genericCreateFailureMessage'),
                     },
                 },
             },
@@ -2670,30 +2669,46 @@ function approveMoneyRequest(expenseReport) {
  */
 function submitReport(expenseReport) {
     const optimisticSubmittedReportAction = ReportUtils.buildOptimisticSubmittedReportAction(expenseReport.total, expenseReport.currency, expenseReport.reportID);
+    const parentReport = ReportUtils.getReport(expenseReport.parentReportID);
 
-    const optimisticReportActionsData = {
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
-        value: {
-            [optimisticSubmittedReportAction.reportActionID]: {
-                ...optimisticSubmittedReportAction,
-                pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+    const optimisticData = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${expenseReport.reportID}`,
+            value: {
+                [optimisticSubmittedReportAction.reportActionID]: {
+                    ...optimisticSubmittedReportAction,
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+                },
             },
         },
-    };
-    const optimisticIOUReportData = {
-        onyxMethod: Onyx.METHOD.MERGE,
-        key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`,
-        value: {
-            ...expenseReport,
-            lastMessageText: optimisticSubmittedReportAction.message[0].text,
-            lastMessageHtml: optimisticSubmittedReportAction.message[0].html,
-            state: CONST.REPORT.STATE.SUBMITTED,
-            stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
-            statusNum: CONST.REPORT.STATUS.SUBMITTED,
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${expenseReport.reportID}`,
+            value: {
+                ...expenseReport,
+                lastMessageText: lodashGet(optimisticSubmittedReportAction, 'message.0.text', ''),
+                lastMessageHtml: lodashGet(optimisticSubmittedReportAction, 'message.0.html', ''),
+                state: CONST.REPORT.STATE.SUBMITTED,
+                stateNum: CONST.REPORT.STATE_NUM.PROCESSING,
+                statusNum: CONST.REPORT.STATUS.SUBMITTED,
+            },
         },
-    };
-    const optimisticData = [optimisticIOUReportData, optimisticReportActionsData];
+        ...(parentReport.reportID
+            ? [
+                  {
+                      onyxMethod: Onyx.METHOD.MERGE,
+                      key: `${ONYXKEYS.COLLECTION.REPORT}${parentReport.reportID}`,
+                      value: {
+                          ...parentReport,
+                          hasOutstandingIOU: false,
+                          hasOutstandingChildRequest: false,
+                          iouReportID: null,
+                      },
+                  },
+              ]
+            : []),
+    ];
 
     const successData = [
         {
@@ -2725,6 +2740,19 @@ function submitReport(expenseReport) {
                 stateNum: CONST.REPORT.STATE_NUM.OPEN,
             },
         },
+        ...(parentReport.reportID
+            ? [
+                  {
+                      onyxMethod: Onyx.METHOD.MERGE,
+                      key: `${ONYXKEYS.COLLECTION.REPORT}${parentReport.reportID}`,
+                      value: {
+                          hasOutstandingIOU: parentReport.hasOutstandingIOU,
+                          hasOutstandingChildRequest: parentReport.hasOutstandingChildRequest,
+                          iouReportID: expenseReport.reportID,
+                      },
+                  },
+              ]
+            : []),
     ];
 
     API.write(
diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts
index e26cee71dc67..29d18d543a11 100644
--- a/src/libs/actions/PersonalDetails.ts
+++ b/src/libs/actions/PersonalDetails.ts
@@ -495,7 +495,7 @@ function updateAvatar(file: File | CustomRNImageManipulatorResult) {
                     pendingFields: {
                         avatar: null,
                     },
-                },
+                } as OnyxEntry<Partial<PersonalDetails>>,
             },
         },
     ];
diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
index ebc1cdf9a2e1..bcc371b3a609 100644
--- a/src/libs/actions/Policy.js
+++ b/src/libs/actions/Policy.js
@@ -1431,6 +1431,14 @@ function setWorkspaceInviteMembersDraft(policyID, invitedEmailsToAccountIDs) {
     Onyx.set(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${policyID}`, invitedEmailsToAccountIDs);
 }
 
+/**
+ * @param {String} policyID
+ * @param {String} message
+ */
+function setWorkspaceInviteMessageDraft(policyID, message) {
+    Onyx.set(`${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MESSAGE_DRAFT}${policyID}`, message);
+}
+
 /**
  * @param {String} policyID
  */
@@ -1812,7 +1820,7 @@ function createWorkspaceFromIOUPayment(iouReport) {
     });
 
     // Create the MOVED report action and add it to the DM chat which indicates to the user where the report has been moved
-    const movedReportAction = ReportUtils.buildOptimisticMovedReportAction(oldPersonalPolicyID, policyID, memberData.workspaceChatReportID, iouReportID);
+    const movedReportAction = ReportUtils.buildOptimisticMovedReportAction(oldPersonalPolicyID, policyID, memberData.workspaceChatReportID, iouReportID, workspaceName);
     optimisticData.push({
         onyxMethod: Onyx.METHOD.MERGE,
         key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${oldChatReportID}`,
@@ -1893,4 +1901,5 @@ export {
     openDraftWorkspaceRequest,
     buildOptimisticPolicyRecentlyUsedCategories,
     createDraftInitialWorkspace,
+    setWorkspaceInviteMessageDraft,
 };
diff --git a/src/libs/actions/ReportActions.ts b/src/libs/actions/ReportActions.ts
index 49d2432277a0..7cd72fb4cd49 100644
--- a/src/libs/actions/ReportActions.ts
+++ b/src/libs/actions/ReportActions.ts
@@ -20,7 +20,7 @@ function clearReportActionErrors(reportID: string, reportAction: ReportAction) {
         });
 
         // If there's a linked transaction, delete that too
-        const linkedTransactionID = ReportActionUtils.getLinkedTransactionID(originalReportID, reportAction.reportActionID);
+        const linkedTransactionID = ReportActionUtils.getLinkedTransactionID(originalReportID ?? '', reportAction.reportActionID);
         if (linkedTransactionID) {
             Onyx.set(`${ONYXKEYS.COLLECTION.TRANSACTION}${linkedTransactionID}`, null);
         }
diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
index ba6127801102..559f60a21c98 100644
--- a/src/libs/actions/Session/index.ts
+++ b/src/libs/actions/Session/index.ts
@@ -578,7 +578,7 @@ function setSupportAuthToken(supportAuthToken: string, email: string, accountID:
 function clearSignInData() {
     Onyx.multiSet({
         [ONYXKEYS.ACCOUNT]: null,
-        [ONYXKEYS.CREDENTIALS]: {},
+        [ONYXKEYS.CREDENTIALS]: null,
     });
 }
 
diff --git a/src/libs/actions/Task.js b/src/libs/actions/Task.js
index c91f6d1a2eec..bf816d0a62a7 100644
--- a/src/libs/actions/Task.js
+++ b/src/libs/actions/Task.js
@@ -366,7 +366,7 @@ function reopenTask(taskReport) {
  * @param {object} report
  * @param {Object} editedTask
  */
-function editTaskAndNavigate(report, {title, description}) {
+function editTask(report, {title, description}) {
     // Create the EditedReportAction on the task
     const editTaskReportAction = ReportUtils.buildOptimisticEditedTaskReportAction(currentUserEmail);
 
@@ -433,11 +433,9 @@ function editTaskAndNavigate(report, {title, description}) {
         },
         {optimisticData, successData, failureData},
     );
-
-    Navigation.dismissModal(report.reportID);
 }
 
-function editTaskAssigneeAndNavigate(report, ownerAccountID, assigneeEmail, assigneeAccountID = 0, assigneeChatReport = null) {
+function editTaskAssignee(report, ownerAccountID, assigneeEmail, assigneeAccountID = 0, assigneeChatReport = null) {
     // Create the EditedReportAction on the task
     const editTaskReportAction = ReportUtils.buildOptimisticEditedTaskReportAction(currentUserEmail);
     const reportName = report.reportName.trim();
@@ -525,8 +523,6 @@ function editTaskAssigneeAndNavigate(report, ownerAccountID, assigneeEmail, assi
         },
         {optimisticData, successData, failureData},
     );
-
-    Navigation.dismissModal(report.reportID);
 }
 
 /**
@@ -628,9 +624,9 @@ function setAssigneeValue(assigneeEmail, assigneeAccountID, shareDestination, is
     // This is only needed for creation of a new task and so it should only be stored locally
     Onyx.merge(ONYXKEYS.TASK, {assignee: assigneeEmail, assigneeAccountID});
 
-    // When we're editing the assignee, we immediately call EditTaskAndNavigate. Since setting the assignee is async,
-    // the chatReport is not yet set when EditTaskAndNavigate is called. So we return the chatReport here so that
-    // EditTaskAndNavigate can use it.
+    // When we're editing the assignee, we immediately call editTaskAssignee. Since setting the assignee is async,
+    // the chatReport is not yet set when editTaskAssignee is called. So we return the chatReport here so that
+    // editTaskAssignee can use it.
     return chatReport;
 }
 
@@ -761,7 +757,7 @@ function cancelTask(taskReportID, taskTitle, originalStateNum, originalStatusNum
             key: `${ONYXKEYS.COLLECTION.REPORT}${parentReport.reportID}`,
             value: {
                 lastMessageText: ReportActionsUtils.getLastVisibleMessage(parentReport.reportID, optimisticReportActions).lastMessageText,
-                lastVisibleActionCreated: ReportActionsUtils.getLastVisibleAction(parentReport.reportID, optimisticReportActions).created,
+                lastVisibleActionCreated: lodashGet(ReportActionsUtils.getLastVisibleAction(parentReport.reportID, optimisticReportActions), 'created'),
             },
         },
         {
@@ -941,8 +937,8 @@ function getTaskReportActionMessage(actionName, reportID, isCreateTaskAction) {
 
 export {
     createTaskAndNavigate,
-    editTaskAndNavigate,
-    editTaskAssigneeAndNavigate,
+    editTask,
+    editTaskAssignee,
     setTitleValue,
     setDescriptionValue,
     setTaskReport,
diff --git a/src/libs/actions/TwoFactorAuthActions.ts b/src/libs/actions/TwoFactorAuthActions.ts
index ccd4e2baf662..26e402096aa6 100644
--- a/src/libs/actions/TwoFactorAuthActions.ts
+++ b/src/libs/actions/TwoFactorAuthActions.ts
@@ -1,14 +1,14 @@
 import Onyx from 'react-native-onyx';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
+import ROUTES, {Route} from '@src/ROUTES';
 import {TwoFactorAuthStep} from '@src/types/onyx/Account';
 
 /**
  * Clear 2FA data if the flow is interrupted without finishing
  */
 function clearTwoFactorAuthData() {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: '', twoFactorAuthSecretKey: '', twoFactorAuthStep: '', codesAreCopied: false});
+    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: null, twoFactorAuthSecretKey: null, twoFactorAuthStep: null, codesAreCopied: false});
 }
 function setTwoFactorAuthStep(twoFactorAuthStep: TwoFactorAuthStep) {
     Onyx.merge(ONYXKEYS.ACCOUNT, {twoFactorAuthStep});
@@ -18,9 +18,10 @@ function setCodesAreCopied() {
     Onyx.merge(ONYXKEYS.ACCOUNT, {codesAreCopied: true});
 }
 
-function quitAndNavigateBackToSettings() {
+function quitAndNavigateBack(backTo?: Route) {
     clearTwoFactorAuthData();
-    Navigation.goBack(ROUTES.SETTINGS_SECURITY);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    Navigation.goBack(backTo || ROUTES.SETTINGS_SECURITY);
 }
 
-export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBackToSettings, setCodesAreCopied};
+export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBack, setCodesAreCopied};
diff --git a/src/libs/actions/User.js b/src/libs/actions/User.js
index 3c91dc4624cd..ad6fd7be10dd 100644
--- a/src/libs/actions/User.js
+++ b/src/libs/actions/User.js
@@ -77,7 +77,6 @@ function closeAccount(message) {
  * Resends a validation link to a given login
  *
  * @param {String} login
- * @param {Boolean} isPasswordless - temporary param to trigger passwordless flow in backend
  */
 function resendValidateCode(login) {
     Session.resendValidateCode(login);
diff --git a/src/libs/actions/UserLocation.ts b/src/libs/actions/UserLocation.ts
new file mode 100644
index 000000000000..4c58f7a83284
--- /dev/null
+++ b/src/libs/actions/UserLocation.ts
@@ -0,0 +1,12 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {UserLocation} from '@src/types/onyx';
+
+/**
+ * Sets the longitude and latitude of user's current location
+ */
+function setUserLocation({longitude, latitude}: UserLocation) {
+    Onyx.set(ONYXKEYS.USER_LOCATION, {longitude, latitude});
+}
+
+export default setUserLocation;
diff --git a/src/libs/assignRef.ts b/src/libs/assignRef.ts
new file mode 100644
index 000000000000..f2c2b488519f
--- /dev/null
+++ b/src/libs/assignRef.ts
@@ -0,0 +1,19 @@
+import {MutableRefObject, RefCallback} from 'react';
+
+/**
+ * Assigns an element to ref, either by setting the `current` property of the ref object or by calling the ref function
+ *
+ * @param ref The ref object or function.
+ * @param element The element to assign the ref to.
+ */
+export default function assignRef<E extends HTMLElement>(ref: RefCallback<E> | MutableRefObject<E | null> | undefined, element: E) {
+    if (!ref) {
+        return;
+    }
+    if (typeof ref === 'function') {
+        ref(element);
+    } else if ('current' in ref) {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = element;
+    }
+}
diff --git a/src/libs/migrations/PersonalDetailsByAccountID.js b/src/libs/migrations/PersonalDetailsByAccountID.js
index 38c992a6a375..c08ec6fb2c43 100644
--- a/src/libs/migrations/PersonalDetailsByAccountID.js
+++ b/src/libs/migrations/PersonalDetailsByAccountID.js
@@ -257,6 +257,18 @@ export default function () {
                     delete newReport.participants;
                 }
 
+                if (lodashHas(newReport, ['ownerEmail'])) {
+                    reportWasModified = true;
+                    Log.info(`[Migrate Onyx] PersonalDetailsByAccountID migration: removing ownerEmail from report ${newReport.reportID}`);
+                    delete newReport.ownerEmail;
+                }
+
+                if (lodashHas(newReport, ['managerEmail'])) {
+                    reportWasModified = true;
+                    Log.info(`[Migrate Onyx] PersonalDetailsByAccountID migration: removing managerEmail from report ${newReport.reportID}`);
+                    delete newReport.managerEmail;
+                }
+
                 if (reportWasModified) {
                     onyxData[onyxKey] = newReport;
                 }
diff --git a/src/libs/models/BankAccount.js b/src/libs/models/BankAccount.ts
similarity index 51%
rename from src/libs/models/BankAccount.js
rename to src/libs/models/BankAccount.ts
index c4366a48aa6a..6fd77b161aa9 100644
--- a/src/libs/models/BankAccount.js
+++ b/src/libs/models/BankAccount.ts
@@ -1,10 +1,24 @@
 import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
-import lodashHas from 'lodash/has';
-import _ from 'underscore';
+import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
+import BankAccountJSON, {AdditionalData} from '@src/types/onyx/BankAccount';
+
+type State = ValueOf<typeof BankAccount.STATE>;
+
+type ACHData = {
+    routingNumber: string;
+    accountNumber: string;
+    addressName: string;
+    isSavings: boolean;
+    bankAccountID: number;
+    state: State;
+    validateCodeExpectedDate: string;
+    needsToUpgrade: boolean;
+};
 
 class BankAccount {
+    json: BankAccountJSON;
+
     static STATE = {
         PENDING: 'PENDING',
         OPEN: 'OPEN',
@@ -14,14 +28,12 @@ class BankAccount {
         VERIFYING: 'VERIFYING',
     };
 
-    constructor(accountJSON) {
+    constructor(accountJSON: BankAccountJSON) {
         this.json = accountJSON;
     }
 
     /**
      * Return the ID of the reimbursement account
-     *
-     * @returns {Number}
      */
     getID() {
         return this.json.methodID;
@@ -30,61 +42,43 @@ class BankAccount {
     /**
      * Return the account number, which has been obfuscated by the back end
      * example "XXXXXX3956"
-     *
-     * @returns {String}
      */
     getMaskedAccountNumber() {
-        return this.json.accountData.accountNumber;
+        return this.json.accountData?.accountNumber;
     }
 
     /**
      * Used as the display name for the account...
-     * @returns {String}
      */
     getAddressName() {
-        return this.json.accountData.addressName;
+        return this.json.accountData?.addressName;
     }
 
-    /**
-     * @returns {String}
-     */
     getProcessor() {
-        return this.json.accountData.processor;
+        return this.json.accountData?.processor;
     }
 
-    /**
-     * @returns {String}
-     */
     getRoutingNumber() {
-        return this.json.accountData.routingNumber;
+        return this.json.accountData?.routingNumber;
     }
 
     /**
      * Get all user emails that have access to this bank account
-     * @return {String[]}
      */
     getSharees() {
-        return this.json.accountData.sharees;
+        return this.json.accountData?.sharees;
     }
 
-    /**
-     * @returns {String}
-     * @private
-     */
     getState() {
-        return this.json.accountData.state;
+        return this.json.accountData?.state;
     }
 
-    /**
-     * @returns {Boolean}
-     */
     isOpen() {
         return this.getState() === BankAccount.STATE.OPEN;
     }
 
     /**
      * @deprecated Use !isPending instead.
-     * @returns {Boolean}
      */
     isVerified() {
         return !this.isPending();
@@ -92,7 +86,6 @@ class BankAccount {
 
     /**
      * If the user still needs to enter the 3 micro deposit amounts.
-     * @returns {Boolean}
      */
     isPending() {
         return this.getState() === BankAccount.STATE.PENDING;
@@ -100,7 +93,6 @@ class BankAccount {
 
     /**
      * If success team is currently verifying the bank account data provided by the user.
-     * @returns {Boolean}
      */
     isVerifying() {
         return this.getState() === BankAccount.STATE.VERIFYING;
@@ -108,158 +100,132 @@ class BankAccount {
 
     /**
      * If the user didn't finish entering all their info.
-     * @returns {Boolean}
      */
     isInSetup() {
         return this.getState() === BankAccount.STATE.SETUP;
     }
 
-    /**
-     * @returns {Boolean}
-     */
     isLocked() {
         return this.getState() === BankAccount.STATE.LOCKED;
     }
 
     /**
      * Is it the account to use by default to receive money?
-     *
-     * @returns {Boolean}
      */
     isDefaultCredit() {
-        return this.json.accountData.defaultCredit === true;
+        return this.json.accountData?.defaultCredit === true;
     }
 
     /**
      * Can we use this account to pay other people?
-     *
-     * @returns {Boolean}
      */
     isWithdrawal() {
-        return this.json.accountData.allowDebit === true;
+        return this.json.accountData?.allowDebit === true;
     }
 
     getType() {
-        return this.json.accountData.type;
+        return this.json.accountData?.type;
     }
 
     /**
      * Return the client ID of this bank account
      *
      * @NOTE WARNING KEEP IN SYNC WITH THE PHP
-     * @returns {String}
      */
     getClientID() {
         // eslint-disable-next-line max-len
-        return `${Str.makeID(this.getMaskedAccountNumber())}${Str.makeID(this.getAddressName())}${Str.makeID(this.getRoutingNumber())}${this.getTransactionType()}`;
+        return `${Str.makeID(this.getMaskedAccountNumber() ?? '')}${Str.makeID(this.getAddressName() ?? '')}${Str.makeID(this.getRoutingNumber() ?? '')}${this.getTransactionType()}`;
     }
 
-    /**
-     * @returns {String}
-     * @private
-     */
-    getTransactionType() {
+    private getTransactionType() {
         return this.isWithdrawal() ? 'withdrawal' : 'direct-deposit';
     }
 
     /**
      * Return the internal json data structure used by auth
-     * @returns {Object}
      */
     getJSON() {
         return this.json;
     }
 
     /**
-     * Return whether or not this bank account has been risk checked
-     * @returns {Boolean}
+     * Return whether this bank account has been risk checked
      */
     isRiskChecked() {
-        return Boolean(this.json.accountData.riskChecked);
+        return Boolean(this.json.accountData?.riskChecked);
     }
 
     /**
      * Return when the 3 micro amounts for validation were supposed to reach the bank account.
-     * @returns {String}
      */
     getValidateCodeExpectedDate() {
-        return this.json.validateCodeExpectedDate || '';
+        return this.json.validateCodeExpectedDate ?? '';
     }
 
     /**
      * In which country is the bank account?
-     * @returns {string}
      */
     getCountry() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'country'], CONST.COUNTRY.US);
+        return this.json.accountData?.additionalData?.country ?? CONST.COUNTRY.US;
     }
 
     /**
      * In which currency is the bank account?
-     * @returns {String}
      */
     getCurrency() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'currency'], 'USD');
+        return this.json.accountData?.additionalData?.currency ?? 'USD';
     }
 
     /**
      * In which bank is the bank account?
-     * @returns {String}
      */
     getBankName() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'bankName'], '');
+        return this.json.accountData?.additionalData?.bankName ?? '';
     }
 
     /**
      * Did we get bank account details for local transfer or international wire?
-     * @returns {Boolean}
      */
     hasInternationalWireDetails() {
-        return lodashGet(this.json, ['accountData', 'additionalData', 'fieldsType'], 'local') === 'international';
+        return (this.json.accountData?.additionalData?.fieldsType ?? 'local') === 'international';
     }
 
     /**
      * Get the additional data of a bankAccount
-     * @returns {Object}
      */
-    getAdditionalData() {
-        return this.json.accountData.additionalData || {};
+    getAdditionalData(): Partial<AdditionalData> {
+        return this.json.accountData?.additionalData ?? {};
     }
 
     /**
      * Get the pending action of the bank account
-     * @returns {String}
      */
     getPendingAction() {
-        return lodashGet(this.json, 'pendingAction', '');
+        return this.json.pendingAction ?? '';
     }
 
     /**
-     * Return a map needed to setup a withdrawal account
-     * @returns {Object}
+     * Return a map needed to set up a withdrawal account
      */
-    toACHData() {
-        return _.extend(
-            {
-                routingNumber: this.getRoutingNumber(),
-                accountNumber: this.getMaskedAccountNumber(),
-                addressName: this.getAddressName(),
-                isSavings: this.json.isSavings,
-                bankAccountID: this.getID(),
-                state: this.getState(),
-                validateCodeExpectedDate: this.getValidateCodeExpectedDate(),
-                needsToUpgrade: this.needsToUpgrade(),
-            },
-            this.getAdditionalData(),
-        );
+    toACHData(): Partial<ACHData> {
+        return {
+            routingNumber: this.getRoutingNumber(),
+            accountNumber: this.getMaskedAccountNumber(),
+            addressName: this.getAddressName(),
+            isSavings: this.json.isSavings,
+            bankAccountID: this.getID(),
+            state: this.getState(),
+            validateCodeExpectedDate: this.getValidateCodeExpectedDate(),
+            needsToUpgrade: this.needsToUpgrade(),
+            ...this.getAdditionalData(),
+        } as ACHData;
     }
 
     /**
      * Check if user hasn't upgraded their bank account yet.
-     * @return {Boolean}
      */
     needsToUpgrade() {
-        return !this.isInSetup() && !lodashHas(this.json, ['accountData', 'additionalData', 'beneficialOwners']);
+        return !this.isInSetup() && this.json.accountData?.additionalData?.beneficialOwners === undefined;
     }
 }
 
diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index 43e1847e554a..a4d75a7c73a0 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -5,7 +5,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPlaidBankAccount from '@components/AddPlaidBankAccount';
 import ConfirmationPage from '@components/ConfirmationPage';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
@@ -113,7 +113,7 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
                     onButtonPress={() => exitFlow(true)}
                 />
             ) : (
-                <Form
+                <FormProvider
                     formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
                     isSubmitButtonVisible={Boolean(selectedPlaidAccountId)}
                     submitButtonText={translate('common.saveAndContinue')}
@@ -129,7 +129,7 @@ function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
                         receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
                         selectedPlaidAccountID={selectedPlaidAccountId}
                     />
-                </Form>
+                </FormProvider>
             )}
         </ScreenWrapper>
     );
diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js
index 1bc464fc37da..53cb4946d640 100644
--- a/src/pages/EditRequestMerchantPage.js
+++ b/src/pages/EditRequestMerchantPage.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
-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 TextInput from '@components/TextInput';
@@ -42,7 +43,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
             testID={EditRequestMerchantPage.displayName}
         >
             <HeaderWithBackButton title={translate('common.merchant')} />
-            <Form
+            <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.MONEY_REQUEST_MERCHANT_FORM}
                 onSubmit={onSubmit}
@@ -51,7 +52,8 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
                 enabledWhenOffline
             >
                 <View style={styles.mb4}>
-                    <TextInput
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="merchant"
                         name="merchant"
                         defaultValue={defaultMerchant}
@@ -61,7 +63,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
                         ref={(e) => (merchantInputRef.current = e)}
                     />
                 </View>
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js
index 52b0fea01395..74cf69944f2c 100644
--- a/src/pages/EditRequestTagPage.js
+++ b/src/pages/EditRequestTagPage.js
@@ -36,18 +36,23 @@ function EditRequestTagPage({defaultTag, policyID, tagName, onSubmit}) {
             shouldEnableMaxHeight
             testID={EditRequestTagPage.displayName}
         >
-            <HeaderWithBackButton
-                title={tagName || translate('common.tag')}
-                onBackButtonPress={Navigation.goBack}
-            />
-            <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection', {tagName: tagName || translate('common.tag')})}</Text>
-            <TagPicker
-                selectedTag={defaultTag}
-                tag={tagName}
-                policyID={policyID}
-                onSubmit={selectTag}
-                shouldShowDisabledAndSelectedOption
-            />
+            {({insets}) => (
+                <>
+                    <HeaderWithBackButton
+                        title={tagName || translate('common.tag')}
+                        onBackButtonPress={Navigation.goBack}
+                    />
+                    <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection', {tagName: tagName || translate('common.tag')})}</Text>
+                    <TagPicker
+                        selectedTag={defaultTag}
+                        tag={tagName}
+                        policyID={policyID}
+                        shouldShowDisabledAndSelectedOption
+                        insets={insets}
+                        onSubmit={selectTag}
+                    />
+                </>
+            )}
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/EnablePayments/IdologyQuestions.js b/src/pages/EnablePayments/IdologyQuestions.js
index 97c0f55f27c6..9e4f9d697fca 100644
--- a/src/pages/EnablePayments/IdologyQuestions.js
+++ b/src/pages/EnablePayments/IdologyQuestions.js
@@ -1,17 +1,14 @@
 import PropTypes from 'prop-types';
-import React, {useRef, useState} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import FixedFooter from '@components/FixedFooter';
-import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
-import FormScrollView from '@components/FormScrollView';
-import OfflineIndicator from '@components/OfflineIndicator';
-import RadioButtons from '@components/RadioButtons';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import SingleChoiceQuestion from '@components/SingleChoiceQuestion';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
-import * as ErrorUtils from '@libs/ErrorUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,15 +48,13 @@ const defaultProps = {
     walletAdditionalDetails: {},
 };
 
-function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
+function IdologyQuestions({questions, idNumber}) {
     const styles = useThemeStyles();
-    const formRef = useRef();
     const {translate} = useLocalize();
 
     const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
     const [shouldHideSkipAnswer, setShouldHideSkipAnswer] = useState(false);
     const [userAnswers, setUserAnswers] = useState([]);
-    const [error, setError] = useState('');
 
     const currentQuestion = questions[currentQuestionIndex] || {};
     const possibleAnswers = _.filter(
@@ -74,7 +69,6 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
             };
         }),
     );
-    const errorMessage = ErrorUtils.getLatestErrorMessage(walletAdditionalDetails) || error;
 
     /**
      * Put question answer in the state.
@@ -86,7 +80,6 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
         tempAnswers[currentQuestionIndex] = {question: currentQuestion.type, answer};
 
         setUserAnswers(tempAnswers);
-        setError('');
     };
 
     /**
@@ -94,32 +87,39 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
      */
     const submitAnswers = () => {
         if (!userAnswers[currentQuestionIndex]) {
-            setError(translate('additionalDetailsStep.selectAnswer'));
-        } else {
-            // Get the number of questions that were skipped by the user.
-            const skippedQuestionsCount = _.filter(userAnswers, (answer) => answer.answer === SKIP_QUESTION_TEXT).length;
-
-            // We have enough answers, let's call expectID KBA to verify them
-            if (userAnswers.length - skippedQuestionsCount >= questions.length - MAX_SKIP) {
-                const tempAnswers = _.map(userAnswers, _.clone);
-
-                // Auto skip any remaining questions
-                if (tempAnswers.length < questions.length) {
-                    for (let i = tempAnswers.length; i < questions.length; i++) {
-                        tempAnswers[i] = {question: questions[i].type, answer: SKIP_QUESTION_TEXT};
-                    }
-                }
+            return;
+        }
+        // Get the number of questions that were skipped by the user.
+        const skippedQuestionsCount = _.filter(userAnswers, (answer) => answer.answer === SKIP_QUESTION_TEXT).length;
 
-                BankAccounts.answerQuestionsForWallet(tempAnswers, idNumber);
-                setUserAnswers(tempAnswers);
-            } else {
-                // Else, show next question
-                setCurrentQuestionIndex(currentQuestionIndex + 1);
-                setShouldHideSkipAnswer(skippedQuestionsCount >= MAX_SKIP);
+        // We have enough answers, let's call expectID KBA to verify them
+        if (userAnswers.length - skippedQuestionsCount >= questions.length - MAX_SKIP) {
+            const tempAnswers = _.map(userAnswers, _.clone);
+
+            // Auto skip any remaining questions
+            if (tempAnswers.length < questions.length) {
+                for (let i = tempAnswers.length; i < questions.length; i++) {
+                    tempAnswers[i] = {question: questions[i].type, answer: SKIP_QUESTION_TEXT};
+                }
             }
+
+            BankAccounts.answerQuestionsForWallet(tempAnswers, idNumber);
+            setUserAnswers(tempAnswers);
+        } else {
+            // Else, show next question
+            setCurrentQuestionIndex(currentQuestionIndex + 1);
+            setShouldHideSkipAnswer(skippedQuestionsCount >= MAX_SKIP);
         }
     };
 
+    const validate = (values) => {
+        const errors = {};
+        if (!values.answer) {
+            errors.answer = translate('additionalDetailsStep.selectAnswer');
+        }
+        return errors;
+    };
+
     return (
         <View style={styles.flex1}>
             <View style={styles.ph5}>
@@ -131,33 +131,24 @@ function IdologyQuestions({questions, walletAdditionalDetails, idNumber}) {
                     {translate('additionalDetailsStep.helpLink')}
                 </TextLink>
             </View>
-            <FormScrollView ref={formRef}>
-                <View
-                    style={styles.m5}
-                    key={currentQuestion.type}
-                >
-                    <Text style={[styles.textStrong, styles.mb5]}>{currentQuestion.prompt}</Text>
-                    <RadioButtons
-                        items={possibleAnswers}
-                        key={currentQuestionIndex}
-                        onPress={chooseAnswer}
-                    />
-                </View>
-            </FormScrollView>
-            <FixedFooter>
-                <FormAlertWithSubmitButton
-                    isAlertVisible={Boolean(errorMessage)}
-                    onSubmit={submitAnswers}
-                    onFixTheErrorsLinkPressed={() => {
-                        formRef.current.scrollTo({y: 0, animated: true});
-                    }}
-                    message={errorMessage}
-                    isLoading={walletAdditionalDetails.isLoading}
-                    buttonText={translate('common.saveAndContinue')}
-                    containerStyles={[styles.mh0, styles.mv0, styles.mb0]}
+            <FormProvider
+                formID={ONYXKEYS.WALLET_ADDITIONAL_DETAILS}
+                onSubmit={submitAnswers}
+                key={currentQuestionIndex}
+                validate={validate}
+                scrollContextEnabled
+                style={[styles.flexGrow1, styles.ph5]}
+                submitButtonText={translate('common.saveAndContinue')}
+            >
+                <InputWrapper
+                    InputComponent={SingleChoiceQuestion}
+                    inputID="answer"
+                    prompt={currentQuestion.prompt}
+                    possibleAnswers={possibleAnswers}
+                    currentQuestionIndex={currentQuestionIndex}
+                    onValueChange={chooseAnswer}
                 />
-                <OfflineIndicator containerStyles={[styles.mh5, styles.mb3]} />
-            </FixedFooter>
+            </FormProvider>
         </View>
     );
 }
diff --git a/src/pages/EnablePayments/TermsPage/LongTermsForm.js b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
index 5a925ad4e7c3..2ed7854ee6ba 100644
--- a/src/pages/EnablePayments/TermsPage/LongTermsForm.js
+++ b/src/pages/EnablePayments/TermsPage/LongTermsForm.js
@@ -7,7 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import * as Localize from '@libs/Localize';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const termsData = [
@@ -58,7 +58,7 @@ const termsData = [
     },
 ];
 
-const getLongTermsSections = () =>
+const getLongTermsSections = (styles) =>
     _.map(termsData, (section, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <View key={section.title + index}>
@@ -77,9 +77,10 @@ const getLongTermsSections = () =>
     ));
 
 function LongTermsForm() {
+    const styles = useThemeStyles();
     return (
         <>
-            <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections()}</CollapsibleSection>
+            <CollapsibleSection title={Localize.translateLocal('termsStep.longTermsForm.listOfAllFees')}>{getLongTermsSections(styles)}</CollapsibleSection>
 
             <Text style={[styles.mb4, styles.mt6, styles.textMicroSupporting]}>
                 {Localize.translateLocal('termsStep.longTermsForm.fdicInsuranceBancorp')} {CONST.TERMS.FDIC_PREPAID}{' '}
diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.js
index 7b627a8e18d5..ba9bd783752b 100644
--- a/src/pages/ErrorPage/GenericErrorPage.js
+++ b/src/pages/ErrorPage/GenericErrorPage.js
@@ -29,7 +29,7 @@ function GenericErrorPage({translate}) {
     return (
         <SafeAreaConsumer>
             {({paddingBottom}) => (
-                <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(paddingBottom)]}>
+                <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(theme, paddingBottom)]}>
                     <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
                         <View>
                             <View style={styles.mb5}>
diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 721bc6742c4b..3695896ea473 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -19,6 +19,7 @@ import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import reportActionPropTypes from './home/report/reportActionPropTypes';
 import withReportAndReportActionOrNotFound from './home/report/withReportAndReportActionOrNotFound';
 import reportPropTypes from './reportPropTypes';
@@ -161,7 +162,14 @@ function FlagCommentPage(props) {
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(getActionToFlag(), props.report)}>
-                    <HeaderWithBackButton title={props.translate('reportActionContextMenu.flagAsOffensive')} />
+                    <HeaderWithBackButton
+                        title={props.translate('reportActionContextMenu.flagAsOffensive')}
+                        shouldNavigateToTopMostReport
+                        onBackButtonPress={() => {
+                            Navigation.goBack();
+                            Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.report.reportID));
+                        }}
+                    />
                     <ScrollView
                         contentContainerStyle={safeAreaPaddingBottomStyle}
                         style={styles.settingsPageBackground}
diff --git a/src/pages/KeyboardShortcutsPage.js b/src/pages/KeyboardShortcutsPage.js
index fde4bf5ff3df..c44c6213d3a5 100644
--- a/src/pages/KeyboardShortcutsPage.js
+++ b/src/pages/KeyboardShortcutsPage.js
@@ -36,7 +36,7 @@ function KeyboardShortcutsPage() {
             key={shortcut.displayName}
             title={shortcut.displayName}
             description={translate(`keyboardShortcutsPage.shortcuts.${shortcut.descriptionKey}`)}
-            wrapperStyle={styles.ph0}
+            wrapperStyle={[styles.ph0, styles.cursorAuto]}
             interactive={false}
         />
     );
diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.js b/src/pages/PrivateNotes/PrivateNotesEditPage.js
index c4946d3c07b4..2c3064d199ef 100644
--- a/src/pages/PrivateNotes/PrivateNotesEditPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesEditPage.js
@@ -18,6 +18,7 @@ import withLocalize from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
@@ -94,9 +95,9 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
 
     const savePrivateNote = () => {
         const originalNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '');
-
+        let editedNote = '';
         if (privateNote.trim() !== originalNote.trim()) {
-            const editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
+            editedNote = Report.handleUserDeletedLinksInHtml(privateNote.trim(), parser.htmlToMarkdown(originalNote).trim());
             Report.updatePrivateNotes(report.reportID, route.params.accountID, editedNote);
         }
 
@@ -104,9 +105,11 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
         debouncedSavePrivateNote('');
 
         Keyboard.dismiss();
-
-        // Take user back to the PrivateNotesView page
-        Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID));
+        if (!_.some({...report.privateNotes, [route.params.accountID]: {note: editedNote}}, (item) => item.note)) {
+            ReportUtils.navigateToDetailsPage(report);
+        } else {
+            Navigation.goBack(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID));
+        }
     };
 
     return (
@@ -117,7 +120,6 @@ function PrivateNotesEditPage({route, personalDetailsList, report}) {
         >
             <HeaderWithBackButton
                 title={translate('privateNotes.title')}
-                subtitle={translate('privateNotes.myNote')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, route.params.accountID))}
                 shouldShowBackButton
                 onCloseButtonPress={() => Navigation.dismissModal()}
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.js b/src/pages/PrivateNotes/PrivateNotesListPage.js
index 7bcf9c22690b..e9a4f11a7202 100644
--- a/src/pages/PrivateNotes/PrivateNotesListPage.js
+++ b/src/pages/PrivateNotes/PrivateNotesListPage.js
@@ -1,19 +1,20 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import MenuItem from '@components/MenuItem';
+import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import * as UserUtils from '@libs/UserUtils';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -57,6 +58,20 @@ const defaultProps = {
 function PrivateNotesListPage({report, personalDetailsList, session}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const isFocused = useIsFocused();
+
+    useEffect(() => {
+        const navigateToEditPageTimeout = setTimeout(() => {
+            if (_.some(report.privateNotes, (item) => item.note) || !isFocused) {
+                return;
+            }
+            Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, session.accountID));
+        }, CONST.ANIMATED_TRANSITION);
+
+        return () => {
+            clearTimeout(navigateToEditPageTimeout);
+        };
+    }, [report.privateNotes, report.reportID, session.accountID, isFocused]);
 
     /**
      * Gets the menu item for each workspace
@@ -67,7 +82,6 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
      */
     function getMenuItem(item, index) {
         const keyTitle = item.translationKey ? translate(item.translationKey) : item.title;
-
         return (
             <OfflineWithFeedback
                 key={`${keyTitle}_${index}`}
@@ -76,14 +90,16 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
                 onClose={item.dismissError}
                 errors={item.errors}
             >
-                <MenuItem
-                    title={keyTitle}
-                    icon={item.icon}
-                    iconType={CONST.ICON_TYPE_WORKSPACE}
+                <MenuItemWithTopDescription
+                    description={item.title}
+                    title={item.note}
                     onPress={item.action}
-                    shouldShowRightIcon
-                    fallbackIcon={item.fallbackIcon}
+                    shouldShowRightIcon={!item.disabled}
+                    numberOfLinesTitle={0}
+                    shouldRenderAsHTML
                     brickRoadIndicator={item.brickRoadIndicator}
+                    disabled={item.disabled}
+                    shouldGreyOutWhenDisabled={false}
                 />
             </OfflineWithFeedback>
         );
@@ -98,10 +114,10 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
         return _.chain(lodashGet(report, 'privateNotes', {}))
             .map((privateNote, accountID) => ({
                 title: Number(lodashGet(session, 'accountID', null)) === Number(accountID) ? translate('privateNotes.myNote') : lodashGet(personalDetailsList, [accountID, 'login'], ''),
-                icon: UserUtils.getAvatar(lodashGet(personalDetailsList, [accountID, 'avatar'], UserUtils.getDefaultAvatar(accountID)), accountID),
-                iconType: CONST.ICON_TYPE_AVATAR,
-                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_VIEW.getRoute(report.reportID, accountID)),
+                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, accountID)),
                 brickRoadIndicator: privateNoteBrickRoadIndicator(accountID),
+                note: lodashGet(privateNote, 'note', ''),
+                disabled: Number(session.accountID) !== Number(accountID),
             }))
             .value();
     }, [report, personalDetailsList, session, translate]);
@@ -116,6 +132,7 @@ function PrivateNotesListPage({report, personalDetailsList, session}) {
                 shouldShowBackButton
                 onCloseButtonPress={() => Navigation.dismissModal()}
             />
+            <Text style={[styles.mb5, styles.ph5]}>{translate('privateNotes.personalNoteMessage')}</Text>
             <ScrollView contentContainerStyle={styles.flexGrow1}>{_.map(privateNotes, (item, index) => getMenuItem(item, index))}</ScrollView>
         </ScreenWrapper>
     );
@@ -132,6 +149,9 @@ export default compose(
         personalDetailsList: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
     withNetwork(),
 )(PrivateNotesListPage);
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 4b3c927ef317..97ec3f99da3c 100755
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -25,7 +25,6 @@ import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -133,7 +132,7 @@ function ProfilePage(props) {
 
     const statusEmojiCode = lodashGet(details, 'status.emojiCode', '');
     const statusText = lodashGet(details, 'status.text', '');
-    const hasStatus = !!statusEmojiCode && Permissions.canUseCustomStatus(props.betas);
+    const hasStatus = !!statusEmojiCode;
     const statusContent = `${statusEmojiCode}  ${statusText}`;
 
     const navigateBackTo = lodashGet(props.route, 'params.backTo', ROUTES.HOME);
@@ -255,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 : ''}
@@ -292,9 +291,6 @@ export default compose(
         isLoadingReportData: {
             key: ONYXKEYS.IS_LOADING_REPORT_DATA,
         },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
index 36fc74836d58..60b5d23b39da 100644
--- a/src/pages/ReferralDetailsPage.js
+++ b/src/pages/ReferralDetailsPage.js
@@ -14,7 +14,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -40,14 +40,19 @@ const defaultProps = {
 };
 
 function ReferralDetailsPage({route, account}) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     let {contentType} = route.params;
 
     if (!_.includes(_.values(CONST.REFERRAL_PROGRAM.CONTENT_TYPES), contentType)) {
         contentType = CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND;
     }
+
     const contentHeader = translate(`referralProgram.${contentType}.header`);
-    const contentBody = translate(`referralProgram.${contentType}.body`);
+    const contentBody = translate(`referralProgram.${contentType}.body1`);
+    const isShareCode = contentType === CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE;
+    const shouldShowBody2 = isShareCode;
+    const shouldShowClipboard = contentType === CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND || isShareCode;
 
     function generateReferralURL(email) {
         return `${CONST.REFERRAL_PROGRAM.LINK}/?thanks=${encodeURIComponent(email)}`;
@@ -80,9 +85,9 @@ function ReferralDetailsPage({route, account}) {
                     width={178}
                     height={232}
                 />
-                <Text style={[styles.textHeadline, styles.mb3, styles.mt8]}>{contentHeader}</Text>
+                <Text style={[styles.textHeadline, styles.textAlignCenter, styles.mb3, styles.mt8]}>{contentHeader}</Text>
                 <Text style={[styles.textAlignCenter, styles.inlineSystemMessage, styles.mb6]}>{contentBody}</Text>
-                {contentType === CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND && (
+                {shouldShowClipboard && (
                     <View style={[styles.border, styles.pv2, styles.ph3, styles.mb6]}>
                         <CopyTextToClipboard
                             text={translate('referralProgram.copyReferralLink')}
@@ -91,6 +96,11 @@ function ReferralDetailsPage({route, account}) {
                         />
                     </View>
                 )}
+                {shouldShowBody2 && (
+                    <Text style={[styles.textAlignCenter, styles.inlineSystemMessage, styles.mb6]}>
+                        {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SHARE_CODE}.body2`)}
+                    </Text>
+                )}
                 <TextLink href={CONST.REFERRAL_PROGRAM.LEARN_MORE_LINK}>{translate('requestorStep.learnMore')}</TextLink>
             </View>
             <FixedFooter>
diff --git a/src/pages/ReimbursementAccount/ACHContractStep.js b/src/pages/ReimbursementAccount/ACHContractStep.js
index b52a8c4c9a62..4161932b35b6 100644
--- a/src/pages/ReimbursementAccount/ACHContractStep.js
+++ b/src/pages/ReimbursementAccount/ACHContractStep.js
@@ -163,7 +163,7 @@ function ACHContractStep(props) {
                 validate={validate}
                 onSubmit={submit}
                 submitButtonText={props.translate('common.saveAndContinue')}
-                style={[styles.mh5, styles.flexGrow1]}
+                style={[styles.mh5, styles.mt3, styles.flexGrow1]}
             >
                 {({inputValues}) => (
                     <>
diff --git a/src/pages/ReimbursementAccount/BankAccountManualStep.js b/src/pages/ReimbursementAccount/BankAccountManualStep.js
index a953dca378fd..13d6fe8568fa 100644
--- a/src/pages/ReimbursementAccount/BankAccountManualStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountManualStep.js
@@ -92,7 +92,7 @@ function BankAccountManualStep(props) {
                 onSubmit={submit}
                 validate={validate}
                 submitButtonText={translate('common.continue')}
-                style={[styles.mh5, styles.flexGrow1]}
+                style={[styles.mh5, styles.mt3, styles.flexGrow1]}
             >
                 <Text style={[styles.mb5]}>{translate('bankAccount.checkHelpLine')}</Text>
                 <Image
diff --git a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
index 080c6ba9fd13..298862570271 100644
--- a/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountPlaidStep.js
@@ -6,7 +6,8 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AddPlaidBankAccount from '@components/AddPlaidBankAccount';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-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';
@@ -99,13 +100,13 @@ function BankAccountPlaidStep(props) {
                 guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
                 onBackButtonPress={onBackButtonPress}
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
                 validate={validate}
                 onSubmit={submit}
                 scrollContextEnabled
                 submitButtonText={translate('common.saveAndContinue')}
-                style={[styles.mh5, styles.flexGrow1]}
+                style={[styles.mh5, styles.mt3, styles.flexGrow1]}
                 isSubmitButtonVisible={Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(plaidData, 'bankAccounts'))}
             >
                 <AddPlaidBankAccount
@@ -122,7 +123,8 @@ function BankAccountPlaidStep(props) {
                     selectedPlaidAccountID={selectedPlaidAccountID}
                 />
                 {Boolean(selectedPlaidAccountID) && !_.isEmpty(lodashGet(plaidData, 'bankAccounts')) && (
-                    <CheckboxWithLabel
+                    <InputWrapper
+                        InputComponent={CheckboxWithLabel}
                         accessibilityLabel={`${translate('common.iAcceptThe')} ${translate('common.expensifyTermsOfService')}`}
                         style={styles.mt4}
                         inputID="acceptTerms"
@@ -136,7 +138,7 @@ function BankAccountPlaidStep(props) {
                         shouldSaveDraft
                     />
                 )}
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
index e31988fbb118..814a572b8f16 100644
--- a/src/pages/ReimbursementAccount/CompanyStep.js
+++ b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -159,7 +159,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                 onSubmit={submit}
                 scrollContextEnabled
                 submitButtonText={translate('common.saveAndContinue')}
-                style={[styles.mh5, styles.flexGrow1]}
+                style={[styles.mh5, styles.mt3, styles.flexGrow1]}
             >
                 <Text>{translate('companyStep.subtitle')}</Text>
                 <InputWrapper
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index 3cbb3111e089..d91c8df7bed0 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -5,39 +6,39 @@ import * as Illustrations from '@components/Icon/Illustrations';
 import Section from '@components/Section';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import Navigation from '@navigation/Navigation';
 import useThemeStyles from '@styles/useThemeStyles';
-import * as Link from '@userActions/Link';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
     ...withLocalizePropTypes,
+
+    /** policyID of the workspace where user is setting up bank account */
+    policyID: PropTypes.string.isRequired,
 };
-function Enable2FAPrompt(props) {
+
+function Enable2FAPrompt({translate, policyID}) {
     const styles = useThemeStyles();
-    const secureYourAccountUrl = encodeURI(
-        `settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute()}","isFromNewDot":"true"}`,
-    );
 
     return (
         <Section
-            title={props.translate('validationStep.enable2FATitle')}
+            title={translate('validationStep.enable2FATitle')}
             icon={Illustrations.ShieldYellow}
             menuItems={[
                 {
-                    title: props.translate('validationStep.secureYourAccount'),
+                    title: translate('validationStep.secureYourAccount'),
                     onPress: () => {
-                        Link.openOldDotLink(secureYourAccountUrl);
+                        Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID)));
                     },
                     icon: Expensicons.Shield,
                     shouldShowRightIcon: true,
                     iconRight: Expensicons.NewWindow,
                     wrapperStyle: [styles.cardMenuItem],
-                    link: () => Link.buildOldDotURL(secureYourAccountUrl),
                 },
             ]}
         >
             <View style={[styles.mv3]}>
-                <Text>{props.translate('validationStep.enable2FAText')}</Text>
+                <Text>{translate('validationStep.enable2FAText')}</Text>
             </View>
         </Section>
     );
diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 4f4285d1a62b..13ab2794ea09 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -50,7 +50,7 @@ function EnableStep(props) {
     const styles = useThemeStyles();
     const isUsingExpensifyCard = props.user.isUsingExpensifyCard;
     const achData = lodashGet(props.reimbursementAccount, 'achData') || {};
-    const {icon, iconSize} = getBankIcon(achData.bankName);
+    const {icon, iconSize} = getBankIcon({bankName: achData.bankName, themeStyles: styles});
     const formattedBankAccountNumber = achData.accountNumber ? `${props.translate('paymentMethodList.accountLastFour')} ${achData.accountNumber.slice(-4)}` : '';
     const bankName = achData.addressName;
 
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
index 729201735786..4620ab1ddcae 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -443,7 +443,7 @@ class ReimbursementAccountPage extends React.Component {
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
                     />
 
-                    <View style={[this.props.themeStyles.m5, this.props.themeStyles.flex1]}>
+                    <View style={[this.props.themeStyles.m5, this.props.themeStyles.mv3, this.props.themeStyles.flex1]}>
                         <Text>{errorText}</Text>
                     </View>
                 </ScreenWrapper>
@@ -520,6 +520,7 @@ class ReimbursementAccountPage extends React.Component {
                 <ValidationStep
                     reimbursementAccount={this.props.reimbursementAccount}
                     onBackButtonPress={this.goBack}
+                    policyID={policyID}
                 />
             );
         }
diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
index d894753d6025..31f5f0f4d315 100644
--- a/src/pages/ReimbursementAccount/RequestorStep.js
+++ b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -11,7 +11,7 @@ import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -52,6 +52,14 @@ const validate = (values) => {
         }
     }
 
+    if (values.firstName && !ValidationUtils.isValidPersonName(values.firstName)) {
+        errors.firstName = 'bankAccount.error.firstName';
+    }
+
+    if (values.lastName && !ValidationUtils.isValidPersonName(values.lastName)) {
+        errors.lastName = 'bankAccount.error.lastName';
+    }
+
     if (values.ssnLast4 && !ValidationUtils.isValidSSNLastFour(values.ssnLast4)) {
         errors.ssnLast4 = 'bankAccount.error.ssnLast4';
     }
@@ -77,6 +85,7 @@ const validate = (values) => {
  */
 const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido, onBackButtonPress, getDefaultStateForField}, ref) => {
     const {translate} = useLocalize();
+    const styles = useThemeStyles();
 
     const defaultValues = useMemo(
         () => ({
@@ -138,7 +147,7 @@ const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido,
                 submitButtonText={translate('common.saveAndContinue')}
                 validate={validate}
                 onSubmit={submit}
-                style={[styles.mh5, styles.flexGrow1]}
+                style={[styles.mh5, styles.mt3, styles.flexGrow1]}
                 scrollContextEnabled
             >
                 <Text>{translate('requestorStep.subtitle')}</Text>
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 386b6b346467..b64f8e098a8a 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -43,6 +43,9 @@ const propTypes = {
         /** If user has two-factor authentication enabled */
         requiresTwoFactorAuth: PropTypes.bool,
     }),
+
+    /** policyID of the workspace where user is setting up bank account */
+    policyID: PropTypes.string.isRequired,
 };
 
 const defaultProps = {
@@ -73,7 +76,7 @@ const filterInput = (amount) => {
     return value;
 };
 
-function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account}) {
+function ValidationStep({reimbursementAccount, translate, onBackButtonPress, account, policyID}) {
     const styles = useThemeStyles();
     /**
      * @param {Object} values - form input values passed by the Form component
@@ -146,7 +149,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                     submitButtonText={translate('validationStep.buttonText')}
                     onSubmit={submit}
                     validate={validate}
-                    style={[styles.mh5, styles.flexGrow1]}
+                    style={[styles.mh5, styles.mt3, styles.flexGrow1]}
                 >
                     <View style={[styles.mb2]}>
                         <Text style={[styles.mb5]}>{translate('validationStep.description')}</Text>
@@ -180,7 +183,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                     </View>
                     {!requiresTwoFactorAuth && (
                         <View style={[styles.mln5, styles.mrn5]}>
-                            <Enable2FAPrompt />
+                            <Enable2FAPrompt policyID={policyID} />
                         </View>
                     )}
                 </Form>
@@ -211,7 +214,7 @@ function ValidationStep({reimbursementAccount, translate, onBackButtonPress, acc
                         />
                     </Section>
                     {reimbursementAccount.shouldShowResetModal && <WorkspaceResetBankAccountModal reimbursementAccount={reimbursementAccount} />}
-                    {!requiresTwoFactorAuth && <Enable2FAPrompt />}
+                    {!requiresTwoFactorAuth && <Enable2FAPrompt policyID={policyID} />}
                 </ScrollView>
             )}
         </ScreenWrapper>
diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js
index d39af722a1df..442276b19a0b 100644
--- a/src/pages/ReportDetailsPage.js
+++ b/src/pages/ReportDetailsPage.js
@@ -137,13 +137,13 @@ function ReportDetailsPage(props) {
                 translationKey: 'privateNotes.title',
                 icon: Expensicons.Pencil,
                 isAnonymousAction: false,
-                action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(props.report.reportID)),
+                action: () => ReportUtils.navigateToPrivateNotes(props.report, props.session),
                 brickRoadIndicator: Report.hasErrorInPrivateNotes(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '',
             });
         }
 
         return items;
-    }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom]);
+    }, [isArchivedRoom, participants.length, isThread, isMoneyRequestReport, props.report, isGroupDMChat, isPolicyMember, isUserCreatedPolicyRoom, props.session]);
 
     const displayNamesWithTooltips = useMemo(() => {
         const hasMultipleParticipants = participants.length > 1;
@@ -157,7 +157,7 @@ function ReportDetailsPage(props) {
             fullTitle={chatRoomSubtitle}
             tooltipEnabled
             numberOfLines={1}
-            textStyles={[styles.sidebarLinkText, styles.textLabelSupporting, styles.pre, styles.mt1]}
+            textStyles={[styles.sidebarLinkText, styles.textLabelSupporting, styles.pre, styles.mt1, styles.textAlignCenter]}
             shouldUseFullTitle
         />
     ) : null;
@@ -167,12 +167,8 @@ function ReportDetailsPage(props) {
             <FullPageNotFoundView shouldShow={_.isEmpty(props.report)}>
                 <HeaderWithBackButton
                     title={props.translate('common.details')}
+                    shouldNavigateToTopMostReport
                     onBackButtonPress={() => {
-                        const topMostReportID = Navigation.getTopmostReportId();
-                        if (topMostReportID) {
-                            Navigation.goBack(ROUTES.HOME);
-                            return;
-                        }
                         Navigation.goBack();
                         Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.report.reportID));
                     }}
@@ -260,5 +256,8 @@ export default compose(
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(ReportDetailsPage);
diff --git a/src/pages/RoomMembersPage.js b/src/pages/RoomMembersPage.js
index 2b96536c9719..662bedac71a5 100644
--- a/src/pages/RoomMembersPage.js
+++ b/src/pages/RoomMembersPage.js
@@ -7,6 +7,7 @@ import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView
 import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
@@ -27,13 +28,9 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
-import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
 
 const propTypes = {
-    /** All personal details asssociated with user */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
@@ -67,7 +64,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    personalDetails: {},
     session: {
         accountID: 0,
     },
@@ -83,6 +79,7 @@ function RoomMembersPage(props) {
     const [removeMembersConfirmModalVisible, setRemoveMembersConfirmModalVisible] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const [didLoadRoomMembers, setDidLoadRoomMembers] = useState(false);
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     /**
      * Get members for the current room
@@ -187,7 +184,7 @@ function RoomMembersPage(props) {
         let result = [];
 
         _.each(props.report.participantAccountIDs, (accountID) => {
-            const details = props.personalDetails[accountID];
+            const details = personalDetails[accountID];
 
             if (!details) {
                 Log.hmmm(`[RoomMembersPage] no personal details found for room member with accountID: ${accountID}`);
@@ -299,7 +296,7 @@ function RoomMembersPage(props) {
                             headerMessage={headerMessage}
                             onSelectRow={(item) => toggleUser(item.keyForList)}
                             onSelectAll={() => toggleAllUsers(data)}
-                            showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(props.personalDetails) || !didLoadRoomMembers}
+                            showLoadingPlaceholder={!OptionsListUtils.isPersonalDetailsReady(personalDetails) || !didLoadRoomMembers}
                             showScrollIndicator
                             shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}
                         />
@@ -319,9 +316,6 @@ export default compose(
     withWindowDimensions,
     withReportOrNotFound(),
     withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         session: {
             key: ONYXKEYS.SESSION,
         },
diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
index d8322b8c58d5..d81593fb552a 100644
--- a/src/pages/ShareCodePage.js
+++ b/src/pages/ShareCodePage.js
@@ -108,6 +108,12 @@ 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
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/HeaderView.js b/src/pages/home/HeaderView.js
index 7b315ff6c819..5b57419c8530 100644
--- a/src/pages/home/HeaderView.js
+++ b/src/pages/home/HeaderView.js
@@ -19,14 +19,12 @@ import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
 import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import Tooltip from '@components/Tooltip';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
-import compose from '@libs/compose';
+import useLocalize from '@hooks/useLocalize';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import {getGroupChatName} from '@libs/GroupChatUtils';
 import * as HeaderUtils from '@libs/HeaderUtils';
 import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -60,8 +58,14 @@ const propTypes = {
         accountID: PropTypes.number,
     }),
 
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
+    /** The current policy of the report */
+    policy: PropTypes.shape({
+        /** The policy name */
+        name: PropTypes.string,
+
+        /** The URL for the policy avatar */
+        avatar: PropTypes.string,
+    }),
 };
 
 const defaultProps = {
@@ -72,9 +76,12 @@ const defaultProps = {
     session: {
         accountID: 0,
     },
+    policy: {},
 };
 
 function HeaderView(props) {
+    const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
+    const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
     const participants = lodashGet(props.report, 'participantAccountIDs', []);
@@ -97,10 +104,9 @@ function HeaderView(props) {
     const lastVisibleMessage = ReportActionsUtils.getLastVisibleMessage(props.report.reportID);
     const isEmptyChat = !props.report.lastMessageText && !props.report.lastMessageTranslationKey && !lastVisibleMessage.lastMessageText && !lastVisibleMessage.lastMessageTranslationKey;
     const isUserCreatedPolicyRoom = ReportUtils.isUserCreatedPolicyRoom(props.report);
-    const policy = useMemo(() => props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`], [props.policies, props.report.policyID]);
-    const canLeaveRoom = ReportUtils.canLeaveRoom(props.report, !_.isEmpty(policy));
+    const isPolicyMember = useMemo(() => !_.isEmpty(props.policy), [props.policy]);
+    const canLeaveRoom = ReportUtils.canLeaveRoom(props.report, isPolicyMember);
     const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
-    const isPolicyMember = useMemo(() => PolicyUtils.isPolicyMember(props.report.policyID, props.policies), [props.report.policyID, props.policies]);
 
     // We hide the button when we are chatting with an automated Expensify account since it's not possible to contact
     // these users via alternative means. It is possible to request a call with Concierge so we leave the option for them.
@@ -112,7 +118,7 @@ function HeaderView(props) {
         if (ReportUtils.isCompletedTaskReport(props.report) && canModifyTask) {
             threeDotMenuItems.push({
                 icon: Expensicons.Checkmark,
-                text: props.translate('task.markAsIncomplete'),
+                text: translate('task.markAsIncomplete'),
                 onSelected: Session.checkIfActionIsAllowed(() => Task.reopenTask(props.report)),
             });
         }
@@ -121,7 +127,7 @@ function HeaderView(props) {
         if (props.report.stateNum !== CONST.REPORT.STATE_NUM.SUBMITTED && props.report.statusNum !== CONST.REPORT.STATUS.CLOSED && canModifyTask) {
             threeDotMenuItems.push({
                 icon: Expensicons.Trashcan,
-                text: props.translate('common.cancel'),
+                text: translate('common.cancel'),
                 onSelected: Session.checkIfActionIsAllowed(() => Task.cancelTask(props.report.reportID, props.report.reportName, props.report.stateNum, props.report.statusNum)),
             });
         }
@@ -131,7 +137,7 @@ function HeaderView(props) {
         if (props.report.notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) {
             threeDotMenuItems.push({
                 icon: Expensicons.ChatBubbles,
-                text: props.translate('common.join'),
+                text: translate('common.join'),
                 onSelected: Session.checkIfActionIsAllowed(() =>
                     Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, false),
                 ),
@@ -140,7 +146,7 @@ function HeaderView(props) {
             const isWorkspaceMemberLeavingWorkspaceRoom = lodashGet(props.report, 'visibility', '') === CONST.REPORT.VISIBILITY.RESTRICTED && isPolicyMember;
             threeDotMenuItems.push({
                 icon: Expensicons.ChatBubbles,
-                text: props.translate('common.leave'),
+                text: translate('common.leave'),
                 onSelected: Session.checkIfActionIsAllowed(() => Report.leaveRoom(props.report.reportID, isWorkspaceMemberLeavingWorkspaceRoom)),
             });
         }
@@ -151,7 +157,7 @@ function HeaderView(props) {
     if (isConcierge && props.guideCalendarLink) {
         threeDotMenuItems.push({
             icon: Expensicons.Phone,
-            text: props.translate('videoChatButtonAndMenu.tooltip'),
+            text: translate('videoChatButtonAndMenu.tooltip'),
             onSelected: Session.checkIfActionIsAllowed(() => {
                 Link.openExternalLink(props.guideCalendarLink);
             }),
@@ -159,14 +165,14 @@ function HeaderView(props) {
     } else if (!isAutomatedExpensifyAccount && !isTaskReport && !isArchivedRoom) {
         threeDotMenuItems.push({
             icon: ZoomIcon,
-            text: props.translate('videoChatButtonAndMenu.zoom'),
+            text: translate('videoChatButtonAndMenu.zoom'),
             onSelected: Session.checkIfActionIsAllowed(() => {
                 Link.openExternalLink(CONST.NEW_ZOOM_MEETING_URL);
             }),
         });
         threeDotMenuItems.push({
             icon: GoogleMeetIcon,
-            text: props.translate('videoChatButtonAndMenu.googleMeet'),
+            text: translate('videoChatButtonAndMenu.googleMeet'),
             onSelected: Session.checkIfActionIsAllowed(() => {
                 Link.openExternalLink(CONST.NEW_GOOGLE_MEET_MEETING_URL);
             }),
@@ -179,7 +185,7 @@ function HeaderView(props) {
     const defaultSubscriptSize = ReportUtils.isExpenseRequest(props.report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT;
     const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails);
     const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '';
-    const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
+    const shouldShowBorderBottom = !isTaskReport || !isSmallScreenWidth;
     const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);
 
     const isLoading = !props.report || !title;
@@ -189,21 +195,21 @@ function HeaderView(props) {
             style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
             dataSet={{dragArea: true}}
         >
-            <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && !isLoading && styles.pl5]}>
+            <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && !isLoading && styles.pl5]}>
                 {isLoading ? (
                     <ReportHeaderSkeletonView />
                 ) : (
                     <>
-                        {props.isSmallScreenWidth && (
+                        {isSmallScreenWidth && (
                             <PressableWithoutFeedback
                                 onPress={props.onNavigationMenuButtonClicked}
                                 style={[styles.LHNToggle]}
-                                accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
-                                accessibilityLabel={props.translate('common.back')}
+                                accessibilityHint={translate('accessibilityHints.navigateToChatsList')}
+                                accessibilityLabel={translate('common.back')}
                                 role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                             >
                                 <Tooltip
-                                    text={props.translate('common.back')}
+                                    text={translate('common.back')}
                                     shiftVertical={4}
                                 >
                                     <View>
@@ -267,10 +273,10 @@ function HeaderView(props) {
                                 )}
                             </PressableWithoutFeedback>
                             <View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
-                                {isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
+                                {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
                                 {shouldShowThreeDotsButton && (
                                     <ThreeDotsMenu
-                                        anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
+                                        anchorPosition={styles.threeDotsPopoverOffset(windowWidth)}
                                         menuItems={threeDotMenuItems}
                                         shouldSetModalVisibility={false}
                                     />
@@ -288,25 +294,22 @@ HeaderView.displayName = 'HeaderView';
 HeaderView.defaultProps = defaultProps;
 
 export default memo(
-    compose(
-        withWindowDimensions,
-        withLocalize,
-        withOnyx({
-            guideCalendarLink: {
-                key: ONYXKEYS.ACCOUNT,
-                selector: (account) => (account && account.guideCalendarLink) || null,
-                initialValue: null,
-            },
-            parentReport: {
-                key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID || report.reportID}`,
-                selector: reportWithoutHasDraftSelector,
-            },
-            session: {
-                key: ONYXKEYS.SESSION,
-            },
-            policies: {
-                key: ONYXKEYS.COLLECTION.POLICY,
-            },
-        }),
-    )(HeaderView),
+    withOnyx({
+        guideCalendarLink: {
+            key: ONYXKEYS.ACCOUNT,
+            selector: (account) => (account && account.guideCalendarLink) || null,
+            initialValue: null,
+        },
+        parentReport: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID || report.reportID}`,
+            selector: reportWithoutHasDraftSelector,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+        policy: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,
+            selector: (policy) => _.pick(policy, ['name', 'avatar', 'pendingAction']),
+        },
+    })(HeaderView),
 );
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index 33646e7129cd..68d2af8beb63 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -162,6 +162,7 @@ function ReportScreen({
     const prevUserLeavingStatus = usePrevious(userLeavingStatus);
     const [isBannerVisible, setIsBannerVisible] = useState(true);
     const [listHeight, setListHeight] = useState(0);
+    const [scrollPosition, setScrollPosition] = useState({});
 
     const reportID = getReportID(route);
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
@@ -371,8 +372,10 @@ function ReportScreen({
         [report, reportMetadata, isLoading, shouldHideReport, isOptimisticDelete, userLeavingStatus],
     );
 
+    const actionListValue = useMemo(() => ({flatListRef, scrollPosition, setScrollPosition}), [flatListRef, scrollPosition, setScrollPosition]);
+
     return (
-        <ActionListContext.Provider value={flatListRef}>
+        <ActionListContext.Provider value={actionListValue}>
             <ReactionListContext.Provider value={reactionListRef}>
                 <ScreenWrapper
                     style={screenWrapperStyle}
diff --git a/src/pages/home/ReportScreenContext.ts b/src/pages/home/ReportScreenContext.ts
index ab85c9e3afb9..49681d46e4be 100644
--- a/src/pages/home/ReportScreenContext.ts
+++ b/src/pages/home/ReportScreenContext.ts
@@ -7,11 +7,17 @@ type ReactionListRef = {
     isActiveReportAction: (actionID: number | string) => boolean;
 };
 
-type ActionListContextType = RefObject<FlatList<unknown>> | null;
+type FlatListRefType = RefObject<FlatList<unknown>> | null;
+
+type ActionListContextType = {
+    flatListRef: FlatListRefType;
+    scrollPosition: {offset: number} | null;
+    setScrollPosition: (position: {offset: number}) => void;
+};
 type ReactionListContextType = RefObject<ReactionListRef> | null;
 
-const ActionListContext = createContext<ActionListContextType>(null);
+const ActionListContext = createContext<ActionListContextType>({flatListRef: null, scrollPosition: null, setScrollPosition: () => {}});
 const ReactionListContext = createContext<ReactionListContextType>(null);
 
 export {ActionListContext, ReactionListContext};
-export type {ReactionListRef, ActionListContextType, ReactionListContextType};
+export type {ReactionListRef, ActionListContextType, ReactionListContextType, FlatListRefType};
diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.js b/src/pages/home/report/AnimatedEmptyStateBackground.js
index 6091347a24a2..c003a3809130 100644
--- a/src/pages/home/report/AnimatedEmptyStateBackground.js
+++ b/src/pages/home/report/AnimatedEmptyStateBackground.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import Animated, {SensorType, useAnimatedSensor, useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
-import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade.png';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as NumberUtils from '@libs/NumberUtils';
+import useThemeIllustrations from '@styles/illustrations/useThemeIllustrations';
 import * as StyleUtils from '@styles/StyleUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -11,6 +11,7 @@ const IMAGE_OFFSET_Y = 75;
 
 function AnimatedEmptyStateBackground() {
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    const illustrations = useThemeIllustrations();
     const IMAGE_OFFSET_X = windowWidth / 2;
 
     // If window width is greater than the max background width, repeat the background image
@@ -41,7 +42,7 @@ function AnimatedEmptyStateBackground() {
 
     return (
         <Animated.Image
-            source={EmptyStateBackgroundImage}
+            source={illustrations.EmptyStateBackgroundImage}
             style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
             resizeMode={windowWidth > maxBackgroundWidth ? 'repeat' : 'cover'}
         />
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/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index aa5706e3ba88..4f35926c5957 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -286,11 +286,11 @@ export default [
                     Clipboard.setString(logMessage);
                 } else if (content) {
                     const parser = new ExpensiMark();
-                    const markdown = parser.htmlToMarkdown(content);
                     if (!Clipboard.canSetHtml()) {
-                        Clipboard.setString(markdown);
+                        Clipboard.setString(parser.htmlToMarkdown(content));
                     } else {
-                        Clipboard.setHtml(content, markdown);
+                        const plainText = parser.htmlToText(content);
+                        Clipboard.setHtml(content, plainText);
                     }
                 }
             }
diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
index ef28a2690af4..37901db09954 100644
--- a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
+++ b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
@@ -8,6 +8,7 @@ import {
     propTypes as genericReportActionContextMenuPropTypes,
 } from '@pages/home/report/ContextMenu/genericReportActionContextMenuPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
 const propTypes = {
@@ -24,9 +25,11 @@ const defaultProps = {
 };
 
 function MiniReportActionContextMenu(props) {
+    const styles = useThemeStyles();
+
     return (
         <View
-            style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}
+            style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(styles, props.displayAsGroup)}
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.isVisible}}
         >
             <BaseReportActionContextMenu
diff --git a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
index 6dd56471af07..7184944d5902 100644
--- a/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
+++ b/src/pages/home/report/ListBoundaryLoader/ListBoundaryLoader.js
@@ -36,22 +36,20 @@ function ListBoundaryLoader({type, isLoadingOlderReportActions, isLoadingInitial
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
-    // we use two different loading components for header and footer to reduce the jumping effect when you scrolling to the newer reports
+    // We use two different loading components for the header and footer
+    // to reduce the jumping effect when the user is scrolling to the newer report actions
     if (type === CONST.LIST_COMPONENTS.FOOTER) {
         if (isLoadingOlderReportActions) {
             return <ReportActionsSkeletonView />;
         }
 
-        // Make sure the oldest report action loaded is not the first. This is so we do not show the
-        // skeleton view above the created action in a newly generated optimistic chat or one with not
+        // Make sure the report chat is not loaded till the beginning. This is so we do not show the
+        // skeleton view above the "created" action in a newly generated optimistic chat or one with not
         // that many comments.
-        if (isLoadingInitialReportActions && lastReportActionName !== CONST.REPORT.ACTIONS.TYPE.CREATED) {
-            return (
-                <ReportActionsSkeletonView
-                    shouldAnimate={!isOffline}
-                    possibleVisibleContentItems={3}
-                />
-            );
+        // Also, if we are offline and the report is not yet loaded till the beginning, we assume there are more actions to load,
+        // therefore show the skeleton view, even though the actions are not loading.
+        if (lastReportActionName !== CONST.REPORT.ACTIONS.TYPE.CREATED && (isLoadingInitialReportActions || isOffline)) {
+            return <ReportActionsSkeletonView possibleVisibleContentItems={3} />;
         }
     }
     if (type === CONST.LIST_COMPONENTS.HEADER && isLoadingNewerReportActions) {
diff --git a/src/pages/home/report/ReactionList/HeaderReactionList.js b/src/pages/home/report/ReactionList/HeaderReactionList.js
index c07b36d42949..59367395119c 100644
--- a/src/pages/home/report/ReactionList/HeaderReactionList.js
+++ b/src/pages/home/report/ReactionList/HeaderReactionList.js
@@ -7,6 +7,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import reactionPropTypes from './reactionPropTypes';
 
@@ -27,12 +28,13 @@ const defaultProps = {
 
 function HeaderReactionList(props) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     return (
         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.emojiReactionListHeader, !props.isSmallScreenWidth && styles.pt4]}>
             <View style={styles.flexRow}>
-                <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(false, props.hasUserReacted)]}>
+                <View style={[styles.emojiReactionListHeaderBubble, StyleUtils.getEmojiReactionBubbleStyle(theme, false, props.hasUserReacted)]}>
                     <Text style={[styles.miniQuickEmojiReactionText, StyleUtils.getEmojiReactionBubbleTextStyle(true)]}>{props.emojiCodes.join('')}</Text>
-                    <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.emojiCount}</Text>
+                    <Text style={[styles.reactionCounterText, StyleUtils.getEmojiReactionCounterTextStyle(theme, props.hasUserReacted)]}>{props.emojiCount}</Text>
                 </View>
                 <Text style={styles.reactionListHeaderText}>{`:${EmojiUtils.getLocalizedEmojiName(props.emojiName, props.preferredLocale)}:`}</Text>
             </View>
diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
index 44183b23e43f..ec9421bfa1cb 100644
--- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
+++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import AttachmentPicker from '@components/AttachmentPicker';
 import Icon from '@components/Icon';
@@ -12,19 +11,14 @@ import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
 import * as Report from '@userActions/Report';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 
 const propTypes = {
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** The report currently being looked at */
     report: PropTypes.shape({
         /** ID of the report */
@@ -87,7 +81,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    betas: [],
     reportParticipantIDs: [],
 };
 
@@ -98,7 +91,6 @@ const defaultProps = {
  * @returns {React.Component}
  */
 function AttachmentPickerWithMenuItems({
-    betas,
     report,
     reportParticipantIDs,
     displayFileInModal,
@@ -152,7 +144,7 @@ function AttachmentPickerWithMenuItems({
      * @returns {Boolean}
      */
     const taskOption = useMemo(() => {
-        if (!Permissions.canUseTasks(betas) || !ReportUtils.canCreateTaskInReport(report)) {
+        if (!ReportUtils.canCreateTaskInReport(report)) {
             return [];
         }
 
@@ -163,7 +155,7 @@ function AttachmentPickerWithMenuItems({
                 onSelected: () => Task.clearOutTaskInfoAndNavigate(reportID),
             },
         ];
-    }, [betas, report, reportID, translate]);
+    }, [report, reportID, translate]);
 
     const onPopoverMenuClose = () => {
         setMenuVisibility(false);
@@ -287,8 +279,4 @@ AttachmentPickerWithMenuItems.propTypes = propTypes;
 AttachmentPickerWithMenuItems.defaultProps = defaultProps;
 AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems';
 
-export default withOnyx({
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
-})(AttachmentPickerWithMenuItems);
+export default AttachmentPickerWithMenuItems;
diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
index 6e69f77d0649..ea48f9cc931e 100644
--- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
+++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js
@@ -10,7 +10,6 @@ import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -40,11 +39,6 @@ import {defaultProps, propTypes} from './composerWithSuggestionsProps';
 
 const {RNTextInputReset} = NativeModules;
 
-// For mobile Safari, updating the selection prop on an unfocused input will cause it to automatically gain focus
-// and subsequent programmatic focus shifts (e.g., modal focus trap) to show the blue frame (:focus-visible style),
-// so we need to ensure that it is only updated after focus.
-const isMobileSafari = Browser.isMobileSafari();
-
 /**
  * Broadcast that the user is typing. Debounced to limit how often we publish client events.
  * @param {String} reportID
@@ -132,10 +126,7 @@ function ComposerWithSuggestions({
     const valueRef = useRef(value);
     valueRef.current = value;
 
-    const [selection, setSelection] = useState(() => ({
-        start: isMobileSafari && !shouldAutoFocus ? 0 : value.length,
-        end: isMobileSafari && !shouldAutoFocus ? 0 : value.length,
-    }));
+    const [selection, setSelection] = useState(() => ({start: 0, end: 0}));
 
     const [composerHeight, setComposerHeight] = useState(0);
 
@@ -498,7 +489,7 @@ function ComposerWithSuggestions({
         // We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
         // We avoid doing this on native platforms since the software keyboard popping
         // open creates a jarring and broken UX.
-        if (!(willBlurTextInputOnTapOutside && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
+        if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
             return;
         }
 
@@ -506,8 +497,9 @@ function ComposerWithSuggestions({
             InputFocus.inputFocusChange(false);
             return;
         }
-        focus();
-    }, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef]);
+        focus(true);
+    }, [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);
@@ -535,7 +527,7 @@ function ComposerWithSuggestions({
 
     return (
         <>
-            <View style={[containerComposeStyles, styles.textInputComposeBorder]}>
+            <View style={[containerComposeStyles(styles), styles.textInputComposeBorder]}>
                 <Composer
                     checkComposerVisibility={checkComposerVisibility}
                     autoFocus={shouldAutoFocus}
@@ -546,7 +538,7 @@ function ComposerWithSuggestions({
                     onChangeText={(commentValue) => updateComment(commentValue, true)}
                     onKeyPress={triggerHotkeyActions}
                     textAlignVertical="top"
-                    style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.flex4]}
+                    style={[styles.textInputCompose, isComposerFullSize ? styles.textInputFullCompose : styles.textInputCollapseCompose]}
                     maxLines={maxComposerLines}
                     onFocus={onFocus}
                     onBlur={onBlur}
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
index 7bce37dc3826..89e1ecb6156b 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -11,8 +11,7 @@ import EmojiPickerButton from '@components/EmojiPicker/EmojiPickerButton';
 import ExceededCommentLength from '@components/ExceededCommentLength';
 import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {withNetwork} from '@components/OnyxProvider';
-import participantPropTypes from '@components/participantPropTypes';
+import {usePersonalDetails, withNetwork} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
@@ -49,9 +48,6 @@ const propTypes = {
     /** Array of report actions for this report */
     reportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)),
 
-    /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes),
-
     /** The report currently being looked at */
     report: reportPropTypes,
 
@@ -84,7 +80,6 @@ const propTypes = {
 const defaultProps = {
     report: {},
     blockedFromConcierge: {},
-    personalDetails: {},
     preferredSkinTone: CONST.EMOJI_DEFAULT_SKIN_TONE,
     isComposerFullSize: false,
     pendingAction: null,
@@ -108,7 +103,6 @@ function ReportActionCompose({
     network,
     onSubmit,
     pendingAction,
-    personalDetails,
     report,
     reportID,
     reportActions,
@@ -121,7 +115,7 @@ function ReportActionCompose({
     const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions();
     const animatedRef = useAnimatedRef();
     const actionButtonRef = useRef(null);
-
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     /**
      * Updates the Highlight state of the composer
      */
@@ -474,9 +468,6 @@ export default compose(
         blockedFromConcierge: {
             key: ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         shouldShowComposeInput: {
             key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
         },
diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.js b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
index b442ca961939..e55b96ad99f5 100644
--- a/src/pages/home/report/ReportActionCompose/SuggestionMention.js
+++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.js
@@ -51,7 +51,7 @@ function SuggestionMention({
     isComposerFocused,
 }) {
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
-    const {translate} = useLocalize();
+    const {translate, formatPhoneNumber} = useLocalize();
     const previousValue = usePrevious(value);
     const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);
 
@@ -74,7 +74,7 @@ function SuggestionMention({
         (highlightedMentionIndexInner) => {
             const commentBeforeAtSign = value.slice(0, suggestionValues.atSignIndex);
             const mentionObject = suggestionValues.suggestedMentions[highlightedMentionIndexInner];
-            const mentionCode = mentionObject.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT ? CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT : `@${mentionObject.alternateText}`;
+            const mentionCode = mentionObject.text === CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT ? CONST.AUTO_COMPLETE_SUGGESTER.HERE_TEXT : `@${mentionObject.login}`;
             const commentAfterMention = value.slice(suggestionValues.atSignIndex + suggestionValues.mentionPrefix.length + 1);
 
             updateComment(`${commentBeforeAtSign}${mentionCode} ${SuggestionsUtils.trimLeadingSpace(commentAfterMention)}`, true);
@@ -149,7 +149,8 @@ function SuggestionMention({
                 if (!detail.login || detail.isOptimisticPersonalDetail) {
                     return false;
                 }
-                if (searchValue && !`${detail.displayName} ${detail.login}`.toLowerCase().includes(searchValue.toLowerCase())) {
+                const displayText = detail.displayName === formatPhoneNumber(detail.login) ? detail.displayName : `${detail.displayName} ${detail.login}`;
+                if (searchValue && !displayText.toLowerCase().includes(searchValue.toLowerCase())) {
                     return false;
                 }
                 return true;
@@ -159,7 +160,8 @@ function SuggestionMention({
             _.each(_.first(sortedPersonalDetails, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS - suggestions.length), (detail) => {
                 suggestions.push({
                     text: detail.displayName,
-                    alternateText: detail.login,
+                    alternateText: formatPhoneNumber(detail.login),
+                    login: detail.login,
                     icons: [
                         {
                             name: detail.login,
@@ -173,7 +175,7 @@ function SuggestionMention({
 
             return suggestions;
         },
-        [translate],
+        [translate, formatPhoneNumber],
     );
 
     const calculateMentionSuggestion = useCallback(
@@ -198,13 +200,26 @@ function SuggestionMention({
             const leftString = value.substring(0, suggestionEndIndex);
             const words = leftString.split(CONST.REGEX.SPACE_OR_EMOJI);
             const lastWord = _.last(words);
+            const secondToLastWord = words[words.length - 3];
 
             let atSignIndex;
+            let suggestionWord;
+            let prefix;
+
+            // Detect if the last two words contain a mention (two words are needed to detect a mention with a space in it)
             if (lastWord.startsWith('@')) {
                 atSignIndex = leftString.lastIndexOf(lastWord);
-            }
+                suggestionWord = lastWord;
+
+                prefix = suggestionWord.substring(1);
+            } else if (secondToLastWord && secondToLastWord.startsWith('@') && secondToLastWord.length > 1) {
+                atSignIndex = leftString.lastIndexOf(secondToLastWord);
+                suggestionWord = `${secondToLastWord} ${lastWord}`;
 
-            const prefix = lastWord.substring(1);
+                prefix = suggestionWord.substring(1);
+            } else {
+                prefix = lastWord.substring(1);
+            }
 
             const nextState = {
                 suggestedMentions: [],
@@ -212,10 +227,11 @@ function SuggestionMention({
                 mentionPrefix: prefix,
             };
 
-            const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(lastWord);
+            const isCursorBeforeTheMention = valueAfterTheCursor.startsWith(suggestionWord);
 
-            if (!isCursorBeforeTheMention && isMentionCode(lastWord)) {
+            if (!isCursorBeforeTheMention && isMentionCode(suggestionWord)) {
                 const suggestions = getMentionOptions(personalDetails, prefix);
+
                 nextState.suggestedMentions = suggestions;
                 nextState.shouldShowSuggestionMenu = !_.isEmpty(suggestions);
             }
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 17d49bd0f486..2b073d7fee34 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -34,6 +34,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withW
 import usePrevious from '@hooks/usePrevious';
 import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import focusTextInputAfterAnimation from '@libs/focusTextInputAfterAnimation';
 import Navigation from '@libs/Navigation/Navigation';
@@ -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 {
@@ -544,7 +552,7 @@ function ReportActionItem(props) {
                 <ReportActionItemSingle
                     action={props.action}
                     showHeader={!props.draftMessage}
-                    wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}
+                    wrapperStyle={isWhisper ? styles.pt1 : {}}
                     shouldShowSubscriptAvatar={props.shouldShowSubscriptAvatar}
                     report={props.report}
                     iouReport={props.iouReport}
@@ -556,7 +564,7 @@ function ReportActionItem(props) {
             );
         }
 
-        return <ReportActionItemGrouped wrapperStyles={[styles.chatItem, isWhisper ? styles.pt1 : {}]}>{content}</ReportActionItemGrouped>;
+        return <ReportActionItemGrouped wrapperStyle={isWhisper ? styles.pt1 : {}}>{content}</ReportActionItemGrouped>;
     };
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
@@ -586,7 +594,6 @@ function ReportActionItem(props) {
                             <ReportActionItemSingle
                                 action={parentReportAction}
                                 showHeader={!props.draftMessage}
-                                wrapperStyles={[styles.chatItem]}
                                 report={props.report}
                             >
                                 <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
@@ -671,7 +678,7 @@ function ReportActionItem(props) {
         >
             <Hoverable
                 shouldHandleScroll
-                disabled={Boolean(props.draftMessage)}
+                isDisabled={Boolean(props.draftMessage)}
             >
                 {(hovered) => (
                     <View style={highlightedBackgroundColorIfNeeded}>
@@ -686,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/ReportActionItemGrouped.js b/src/pages/home/report/ReportActionItemGrouped.js
index 2d55ecbbe037..8c8c51bda3c2 100644
--- a/src/pages/home/report/ReportActionItemGrouped.js
+++ b/src/pages/home/report/ReportActionItemGrouped.js
@@ -1,25 +1,26 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import styles from '@styles/styles';
+import stylePropTypes from '@styles/stylePropTypes';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Children view component for this action item */
     children: PropTypes.node.isRequired,
 
     /** Styles for the outermost View */
-    // eslint-disable-next-line react/forbid-prop-types
-    wrapperStyles: PropTypes.arrayOf(PropTypes.object),
+    wrapperStyle: stylePropTypes,
 };
 
 const defaultProps = {
-    wrapperStyles: [styles.chatItem],
+    wrapperStyle: undefined,
 };
 
-function ReportActionItemGrouped(props) {
+function ReportActionItemGrouped({wrapperStyle, children}) {
+    const styles = useThemeStyles();
     return (
-        <View style={props.wrapperStyles}>
-            <View style={[styles.chatItemRightGrouped]}>{props.children}</View>
+        <View style={[styles.chatItem, wrapperStyle]}>
+            <View style={styles.chatItemRightGrouped}>{children}</View>
         </View>
     );
 }
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index c8ea0d5e3514..1ed5db385f7a 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -397,7 +397,7 @@ function ReportActionItemMessageEdit(props) {
                             </PressableWithFeedback>
                         </Tooltip>
                     </View>
-                    <View style={[containerComposeStyles, styles.textInputComposeBorder]}>
+                    <View style={[containerComposeStyles(styles), styles.textInputComposeBorder]}>
                         <Composer
                             multiline
                             ref={(el) => {
diff --git a/src/pages/home/report/ReportActionItemSingle.js b/src/pages/home/report/ReportActionItemSingle.js
index 955e024bd7a8..c50f868cae99 100644
--- a/src/pages/home/report/ReportActionItemSingle.js
+++ b/src/pages/home/report/ReportActionItemSingle.js
@@ -2,7 +2,6 @@ import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Avatar from '@components/Avatar';
 import MultipleAvatars from '@components/MultipleAvatars';
@@ -14,19 +13,17 @@ import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import compose from '@libs/compose';
 import ControlSelection from '@libs/ControlSelection';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
 import reportPropTypes from '@pages/reportPropTypes';
-import styles from '@styles/styles';
+import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import ReportActionItemDate from './ReportActionItemDate';
 import ReportActionItemFragment from './ReportActionItemFragment';
@@ -37,8 +34,7 @@ const propTypes = {
     action: PropTypes.shape(reportActionPropTypes).isRequired,
 
     /** Styles for the outermost View */
-    // eslint-disable-next-line react/forbid-prop-types
-    wrapperStyles: PropTypes.arrayOf(PropTypes.object),
+    wrapperStyle: stylePropTypes,
 
     /** Children view component for this action item */
     children: PropTypes.node.isRequired,
@@ -65,7 +61,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    wrapperStyles: [styles.chatItem],
+    wrapperStyle: undefined,
     showHeader: true,
     shouldShowSubscriptAvatar: false,
     hasBeenFlagged: false,
@@ -83,6 +79,8 @@ const showWorkspaceDetails = (reportID) => {
 };
 
 function ReportActionItemSingle(props) {
+    const styles = useThemeStyles();
+    const theme = useTheme();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const actorAccountID = props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORTPREVIEW && props.iouReport ? props.iouReport.managerID : props.action.actorAccountID;
     let displayName = ReportUtils.getDisplayNameForParticipant(actorAccountID);
@@ -169,10 +167,7 @@ function ReportActionItemSingle(props) {
                     icons={[icon, secondaryAvatar]}
                     isInReportAction
                     shouldShowTooltip
-                    secondAvatarStyle={[
-                        StyleUtils.getBackgroundAndBorderStyle(themeColors.appBG),
-                        props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(themeColors.highlightBG) : undefined,
-                    ]}
+                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(theme.appBG), props.isHovered ? StyleUtils.getBackgroundAndBorderStyle(theme.highlightBG) : undefined]}
                 />
             );
         }
@@ -205,13 +200,13 @@ function ReportActionItemSingle(props) {
             </UserDetailsTooltip>
         );
     };
-    const hasEmojiStatus = !displayAllActors && status && status.emojiCode && Permissions.canUseCustomStatus(props.betas);
+    const hasEmojiStatus = !displayAllActors && status && status.emojiCode;
     const formattedDate = DateUtils.getStatusUntilDate(lodashGet(status, 'clearAfter'));
     const statusText = lodashGet(status, 'text', '');
     const statusTooltipText = formattedDate ? `${statusText} (${formattedDate})` : statusText;
 
     return (
-        <View style={props.wrapperStyles}>
+        <View style={[styles.chatItem, props.wrapperStyle]}>
             <PressableWithoutFeedback
                 style={[styles.alignSelfStart, styles.mr3]}
                 onPressIn={ControlSelection.block}
@@ -267,11 +262,4 @@ ReportActionItemSingle.propTypes = propTypes;
 ReportActionItemSingle.defaultProps = defaultProps;
 ReportActionItemSingle.displayName = 'ReportActionItemSingle';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-    }),
-)(ReportActionItemSingle);
+export default withLocalize(ReportActionItemSingle);
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/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js
index 173a4b5637be..c580da7887a2 100644
--- a/src/pages/home/report/ReportAttachments.js
+++ b/src/pages/home/report/ReportAttachments.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import _ from 'underscore';
 import AttachmentModal from '@components/AttachmentModal';
+import ComposerFocusManager from '@libs/ComposerFocusManager';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import ROUTES from '@src/ROUTES';
@@ -38,7 +39,11 @@ function ReportAttachments(props) {
             defaultOpen
             report={report}
             source={source}
-            onModalHide={() => Navigation.dismissModal()}
+            onModalHide={() => {
+                Navigation.dismissModal();
+                // This enables Composer refocus when the attachments modal is closed by the browser navigation
+                ComposerFocusManager.setReadyToFocus();
+            }}
             onCarouselAttachmentChange={onCarouselAttachmentChange}
         />
     );
diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx
index 95997da71a2d..93d42ef6fd2b 100644
--- a/src/pages/home/report/withReportOrNotFound.tsx
+++ b/src/pages/home/report/withReportOrNotFound.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable rulesdir/no-negated-variables */
 import {RouteProp} from '@react-navigation/native';
 import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
-import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import {OnyxCollection, OnyxEntry, withOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -13,7 +13,7 @@ type OnyxProps = {
     /** The report currently being looked at */
     report: OnyxEntry<OnyxTypes.Report>;
     /** The policies which the user has access to */
-    policies: OnyxEntry<OnyxTypes.Policy>;
+    policies: OnyxCollection<OnyxTypes.Policy>;
     /** Beta features list */
     betas: OnyxEntry<OnyxTypes.Beta[]>;
     /** Indicated whether the report data is loading */
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index 739f7e3e0295..a1ba7042f158 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -13,7 +13,6 @@ import withWindowDimensions from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as IOU from '@userActions/IOU';
@@ -54,9 +53,6 @@ const propTypes = {
         name: PropTypes.string,
     }),
 
-    /* Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** Indicated whether the report data is loading */
     isLoading: PropTypes.bool,
 
@@ -74,7 +70,6 @@ const defaultProps = {
     onHideCreateMenu: () => {},
     onShowCreateMenu: () => {},
     allPolicies: {},
-    betas: [],
     isLoading: false,
     innerRef: null,
     demoInfo: {},
@@ -207,15 +202,13 @@ function FloatingActionButtonAndPopover(props) {
                         text: props.translate('iou.sendMoney'),
                         onSelected: () => interceptAnonymousUser(() => IOU.startMoneyRequest(CONST.IOU.TYPE.SEND)),
                     },
-                    ...(Permissions.canUseTasks(props.betas)
-                        ? [
-                              {
-                                  icon: Expensicons.Task,
-                                  text: props.translate('newTaskPage.assignTask'),
-                                  onSelected: () => interceptAnonymousUser(() => Task.clearOutTaskInfoAndNavigate()),
-                              },
-                          ]
-                        : []),
+                    ...[
+                        {
+                            icon: Expensicons.Task,
+                            text: props.translate('newTaskPage.assignTask'),
+                            onSelected: () => interceptAnonymousUser(() => Task.clearOutTaskInfoAndNavigate()),
+                        },
+                    ],
                     {
                         icon: Expensicons.Heart,
                         text: props.translate('sidebarScreen.saveTheWorld'),
@@ -278,9 +271,6 @@ export default compose(
             key: ONYXKEYS.COLLECTION.POLICY,
             selector: policySelector,
         },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         isLoading: {
             key: ONYXKEYS.IS_LOADING_APP,
         },
diff --git a/src/pages/home/sidebar/SignInOrAvatarWithOptionalStatus.js b/src/pages/home/sidebar/SignInOrAvatarWithOptionalStatus.js
index 8e41e1c6af6a..8e680a20d419 100644
--- a/src/pages/home/sidebar/SignInOrAvatarWithOptionalStatus.js
+++ b/src/pages/home/sidebar/SignInOrAvatarWithOptionalStatus.js
@@ -2,13 +2,9 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
-import compose from '@libs/compose';
-import Permissions from '@libs/Permissions';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
 import * as Session from '@userActions/Session';
-import ONYXKEYS from '@src/ONYXKEYS';
 import AvatarWithOptionalStatus from './AvatarWithOptionalStatus';
 import PressableAvatarWithIndicator from './PressableAvatarWithIndicator';
 import SignInButton from './SignInButton';
@@ -19,22 +15,17 @@ const propTypes = {
 
     /** Whether the create menu is open or not */
     isCreateMenuOpen: PropTypes.bool,
-
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
 };
 
 const defaultProps = {
-    betas: [],
     isCreateMenuOpen: false,
     currentUserPersonalDetails: {
         status: {emojiCode: ''},
     },
 };
 
-function SignInOrAvatarWithOptionalStatus({currentUserPersonalDetails, isCreateMenuOpen, betas}) {
-    const statusEmojiCode = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
-    const emojiStatus = Permissions.canUseCustomStatus(betas) ? statusEmojiCode : '';
+function SignInOrAvatarWithOptionalStatus({currentUserPersonalDetails, isCreateMenuOpen}) {
+    const emojiStatus = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
 
     if (Session.isAnonymousUser()) {
         return <SignInButton />;
@@ -53,11 +44,4 @@ function SignInOrAvatarWithOptionalStatus({currentUserPersonalDetails, isCreateM
 SignInOrAvatarWithOptionalStatus.propTypes = propTypes;
 SignInOrAvatarWithOptionalStatus.defaultProps = defaultProps;
 SignInOrAvatarWithOptionalStatus.displayName = 'SignInOrAvatarWithOptionalStatus';
-export default compose(
-    withCurrentUserPersonalDetails,
-    withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-    }),
-)(SignInOrAvatarWithOptionalStatus);
+export default withCurrentUserPersonalDetails(SignInOrAvatarWithOptionalStatus);
diff --git a/src/pages/iou/MoneyRequestSelectorPage.js b/src/pages/iou/MoneyRequestSelectorPage.js
index 37eaee513fb6..af52ea1222ed 100644
--- a/src/pages/iou/MoneyRequestSelectorPage.js
+++ b/src/pages/iou/MoneyRequestSelectorPage.js
@@ -45,15 +45,11 @@ const propTypes = {
 
     /** Which tab has been selected */
     selectedTab: PropTypes.string,
-
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
 };
 
 const defaultProps = {
     selectedTab: CONST.TAB.SCAN,
     report: {},
-    betas: [],
 };
 
 function MoneyRequestSelectorPage(props) {
@@ -80,7 +76,7 @@ function MoneyRequestSelectorPage(props) {
     };
 
     // Allow the user to create the request if we are creating the request in global menu or the report can create the request
-    const isAllowedToCreateRequest = _.isEmpty(props.report.reportID) || ReportUtils.canCreateRequest(props.report, props.betas, iouType);
+    const isAllowedToCreateRequest = _.isEmpty(props.report.reportID) || ReportUtils.canCreateRequest(props.report, iouType);
     const prevSelectedTab = usePrevious(props.selectedTab);
 
     useEffect(() => {
diff --git a/src/pages/iou/MoneyRequestTagPage.js b/src/pages/iou/MoneyRequestTagPage.js
index b8ef1dba6207..d16a7aa6679c 100644
--- a/src/pages/iou/MoneyRequestTagPage.js
+++ b/src/pages/iou/MoneyRequestTagPage.js
@@ -78,17 +78,22 @@ function MoneyRequestTagPage({route, report, policyTags, iou}) {
             shouldEnableMaxHeight
             testID={MoneyRequestTagPage.displayName}
         >
-            <HeaderWithBackButton
-                title={policyTagListName}
-                onBackButtonPress={navigateBack}
-            />
-            <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection', {tagName: policyTagListName})}</Text>
-            <TagPicker
-                policyID={report.policyID}
-                tag={tagListKey}
-                selectedTag={iou.tag}
-                onSubmit={updateTag}
-            />
+            {({insets}) => (
+                <>
+                    <HeaderWithBackButton
+                        title={policyTagListName}
+                        onBackButtonPress={navigateBack}
+                    />
+                    <Text style={[styles.ph5, styles.pv3]}>{translate('iou.tagSelection', {tagName: policyTagListName})}</Text>
+                    <TagPicker
+                        policyID={report.policyID}
+                        tag={tagListKey}
+                        selectedTag={iou.tag}
+                        insets={insets}
+                        onSubmit={updateTag}
+                    />
+                </>
+            )}
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js
index ecc56fbae80f..74a3a353ef50 100644
--- a/src/pages/iou/WaypointEditor.js
+++ b/src/pages/iou/WaypointEditor.js
@@ -224,7 +224,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp
                             inputID={`waypoint${waypointIndex}`}
                             ref={(e) => (textInput.current = e)}
                             hint={!isOffline ? 'distance.errors.selectSuggestedAddress' : ''}
-                            containerStyles={[styles.mt4]}
+                            containerStyles={[styles.mt3]}
                             label={translate('distance.address')}
                             defaultValue={waypointAddress}
                             onPress={selectWaypoint}
diff --git a/src/pages/iou/steps/MoneyRequestConfirmPage.js b/src/pages/iou/steps/MoneyRequestConfirmPage.js
index a69abeb94089..29257d9201fa 100644
--- a/src/pages/iou/steps/MoneyRequestConfirmPage.js
+++ b/src/pages/iou/steps/MoneyRequestConfirmPage.js
@@ -7,6 +7,7 @@ import _ from 'underscore';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MoneyRequestConfirmationList from '@components/MoneyRequestConfirmationList';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize from '@components/withLocalize';
@@ -20,7 +21,6 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import {iouDefaultProps, iouPropTypes} from '@pages/iou/propTypes';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as IOU from '@userActions/IOU';
@@ -47,15 +47,11 @@ const propTypes = {
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: iouPropTypes,
 
-    /** Personal details of all users */
-    personalDetails: personalDetailsPropType,
-
     ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
     report: {},
-    personalDetails: {},
     iou: iouDefaultProps,
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -70,16 +66,15 @@ function MoneyRequestConfirmPage(props) {
     const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType, props.selectedTab);
     const isScanRequest = MoneyRequestUtils.isScanRequest(props.selectedTab);
     const [receiptFile, setReceiptFile] = useState();
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
+
     const participants = useMemo(
         () =>
-            _.chain(props.iou.participants)
-                .map((participant) => {
-                    const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
-                    return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, props.personalDetails);
-                })
-                .filter((participant) => !!participant.login || !!participant.text)
-                .value(),
-        [props.iou.participants, props.personalDetails],
+            _.map(props.iou.participants, (participant) => {
+                const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
+                return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
+            }),
+        [props.iou.participants, personalDetails],
     );
     const isPolicyExpenseChat = useMemo(() => ReportUtils.isPolicyExpenseChat(ReportUtils.getRootParentReport(props.report)), [props.report]);
     const isManualRequestDM = props.selectedTab === CONST.TAB.MANUAL && iouType === CONST.IOU.TYPE.REQUEST;
@@ -419,9 +414,6 @@ export default compose(
                 return `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
             },
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         selectedTab: {
             key: `${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.RECEIPT_TAB_ID}`,
         },
diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
index a88a07117f08..c192abf84e43 100644
--- a/src/pages/settings/AboutPage/AboutPage.js
+++ b/src/pages/settings/AboutPage/AboutPage.js
@@ -107,7 +107,7 @@ function AboutPage(props) {
                     />
                     <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween, safeAreaPaddingBottomStyle]}>
                         <View style={[styles.flex1]}>
-                            <View style={styles.pageWrapper}>
+                            <View style={[styles.pageWrapper, styles.pv3]}>
                                 <View style={[styles.settingsPageBody, styles.mb6, styles.alignItemsCenter]}>
                                     <Logo
                                         height={80}
diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js
index ab8a1f310cf4..182a25a121b5 100644
--- a/src/pages/settings/AppDownloadLinks.js
+++ b/src/pages/settings/AppDownloadLinks.js
@@ -61,7 +61,7 @@ function AppDownloadLinksPage(props) {
                 title={props.translate('initialSettingsPage.aboutPage.appDownloadLinks')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)}
             />
-            <ScrollView style={[styles.mt5]}>
+            <ScrollView style={[styles.mt3]}>
                 {_.map(menuItems, (item) => (
                     <MenuItem
                         key={item.translationKey}
diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index d88105b31360..8ca1f96b3796 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -25,7 +25,6 @@ import useWaitForNavigation from '@hooks/useWaitForNavigation';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as UserUtils from '@libs/UserUtils';
@@ -89,9 +88,6 @@ const propTypes = {
     /** Bank account attached to free plan */
     reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes,
 
-    /** List of betas available to current user */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** Information about the user accepting the terms for payments */
     walletTerms: walletTermsPropTypes,
 
@@ -120,7 +116,6 @@ const defaultProps = {
         currentBalance: 0,
     },
     reimbursementAccount: {},
-    betas: [],
     walletTerms: {},
     bankAccountList: {},
     fundList: null,
@@ -286,10 +281,9 @@ function InitialSettingsPage(props) {
     const getMenuItems = useMemo(() => {
         /**
          * @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item
-         * @returns {Number} the user wallet balance
+         * @returns {String|undefined} the user's wallet balance
          */
-        const getWalletBalance = (isPaymentItem) =>
-            isPaymentItem && Permissions.canUseWallet(props.betas) ? CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance) : undefined;
+        const getWalletBalance = (isPaymentItem) => (isPaymentItem ? CurrencyUtils.convertToDisplayString(props.userWallet.currentBalance) : undefined);
 
         return (
             <>
@@ -324,7 +318,7 @@ function InitialSettingsPage(props) {
                 })}
             </>
         );
-    }, [getDefaultMenuItems, props.betas, props.userWallet.currentBalance, translate, isExecuting, singleExecution]);
+    }, [getDefaultMenuItems, props.userWallet.currentBalance, translate, isExecuting, singleExecution]);
 
     const headerContent = (
         <View style={[styles.avatarSectionWrapper, styles.justifyContentCenter]}>
@@ -387,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}
@@ -426,9 +420,6 @@ export default compose(
         userWallet: {
             key: ONYXKEYS.USER_WALLET,
         },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         bankAccountList: {
             key: ONYXKEYS.BANK_ACCOUNT_LIST,
         },
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/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
index 8f6e4564fe92..0778394d2b28 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.js
@@ -55,7 +55,7 @@ function PriorityModePage(props) {
                 title={props.translate('priorityModePage.priorityMode')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PREFERENCES)}
             />
-            <Text style={[styles.mh5, styles.mv4]}>{props.translate('priorityModePage.explainerText')}</Text>
+            <Text style={[styles.mh5, styles.mv3]}>{props.translate('priorityModePage.explainerText')}</Text>
             <SelectionList
                 sections={[{data: priorityModes}]}
                 onSelectRow={updateMode}
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
index 5f91414368a0..b468607ed8f3 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js
@@ -2,7 +2,7 @@ import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {Keyboard, ScrollView, View} from 'react-native';
+import {InteractionManager, Keyboard, ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -264,6 +264,14 @@ class ContactMethodDetailsPage extends Component {
                         title={this.props.translate('contacts.removeContactMethod')}
                         onConfirm={this.confirmDeleteAndHideModal}
                         onCancel={() => this.toggleDeleteModal(false)}
+                        onModalHide={() => {
+                            InteractionManager.runAfterInteractions(() => {
+                                if (!this.validateCodeFormRef.current) {
+                                    return;
+                                }
+                                this.validateCodeFormRef.current.focusLastSelected();
+                            });
+                        }}
                         prompt={this.props.translate('contacts.removeAreYouSure')}
                         confirmText={this.props.translate('common.yesContinue')}
                         cancelText={this.props.translate('common.cancel')}
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 d5b87fbaf03f..f0aea2301383 100644
--- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js
@@ -89,6 +89,15 @@ function BaseValidateCodeForm(props) {
             }
             inputValidateCodeRef.current.focus();
         },
+        focusLastSelected() {
+            if (!inputValidateCodeRef.current) {
+                return;
+            }
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+            focusTimeoutRef.current = setTimeout(inputValidateCodeRef.current.focusLastSelected, CONST.ANIMATED_TRANSITION);
+        },
     }));
 
     useFocusEffect(
@@ -96,6 +105,9 @@ function BaseValidateCodeForm(props) {
             if (!inputValidateCodeRef.current) {
                 return;
             }
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
             focusTimeoutRef.current = setTimeout(inputValidateCodeRef.current.focus, CONST.ANIMATED_TRANSITION);
             return () => {
                 if (!focusTimeoutRef.current) {
@@ -197,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/CountrySelectionPage.js b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js
index a0c2a02b2cb5..38c4d1eac449 100644
--- a/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/CountrySelectionPage.js
@@ -96,6 +96,7 @@ function CountrySelectionPage({route, navigation}) {
                 onSelectRow={selectCountry}
                 onChangeText={setSearchValue}
                 initiallyFocusedOptionKey={currentCountry}
+                shouldUseDynamicMaxToRenderPerBatch
             />
         </ScreenWrapper>
     );
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
index 1e4485b4c36b..fc6c38f96335 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.js
@@ -15,7 +15,6 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import * as UserUtils from '@libs/UserUtils';
 import userPropTypes from '@pages/settings/userPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -83,15 +82,13 @@ function ProfilePage(props) {
             pageRoute: ROUTES.SETTINGS_CONTACT_METHODS.route,
             brickRoadIndicator: contactMethodBrickRoadIndicator,
         },
-        ...(Permissions.canUseCustomStatus(props.betas)
-            ? [
-                  {
-                      description: props.translate('statusPage.status'),
-                      title: emojiCode ? `${emojiCode} ${lodashGet(props, 'currentUserPersonalDetails.status.text', '')}` : '',
-                      pageRoute: ROUTES.SETTINGS_STATUS,
-                  },
-              ]
-            : []),
+        ...[
+            {
+                description: props.translate('statusPage.status'),
+                title: emojiCode ? `${emojiCode} ${lodashGet(props, 'currentUserPersonalDetails.status.text', '')}` : '',
+                pageRoute: ROUTES.SETTINGS_STATUS,
+            },
+        ],
         {
             description: props.translate('pronounsPage.pronouns'),
             title: getPronouns(),
@@ -184,8 +181,5 @@ export default compose(
         user: {
             key: ONYXKEYS.USER,
         },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
     }),
 )(ProfilePage);
diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.js
index 7916043c7e20..f8b6568733c7 100644
--- a/src/pages/settings/Report/RoomNamePage.js
+++ b/src/pages/settings/Report/RoomNamePage.js
@@ -4,7 +4,7 @@ import React, {useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import RoomNameInput from '@components/RoomNameInput';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -42,13 +42,8 @@ const defaultProps = {
     policy: {},
 };
 
-function RoomNamePage(props) {
+function RoomNamePage({policy, report, reports, translate}) {
     const styles = useThemeStyles();
-    const policy = props.policy;
-    const report = props.report;
-    const reports = props.reports;
-    const translate = props.translate;
-
     const roomNameInputRef = useRef(null);
     const isFocused = useIsFocused();
 
@@ -91,7 +86,7 @@ function RoomNamePage(props) {
                     title={translate('newRoomPage.roomName')}
                     onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID))}
                 />
-                <Form
+                <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.ROOM_NAME_FORM}
                     onSubmit={(values) => Report.updatePolicyRoomNameAndNavigate(report, values.roomName)}
@@ -101,13 +96,14 @@ function RoomNamePage(props) {
                 >
                     <View style={styles.mb4}>
                         <RoomNameInput
-                            ref={(ref) => (roomNameInputRef.current = ref)}
+                            ref={roomNameInputRef}
                             inputID="roomName"
                             defaultValue={report.reportName}
                             isFocused={isFocused}
+                            roomName={report.reportName.slice(1)}
                         />
                     </View>
-                </Form>
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );
diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
index db2be7f5b681..95a0efa2fc39 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.js
+++ b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -44,7 +44,7 @@ function SecuritySettingsPage(props) {
             {
                 translationKey: 'twoFactorAuth.headerTitle',
                 icon: Expensicons.Shield,
-                action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_2FA)),
+                action: waitForNavigate(() => Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute())),
             },
             {
                 translationKey: 'closeAccountPage.closeAccount',
@@ -69,7 +69,7 @@ function SecuritySettingsPage(props) {
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             shouldShowBackButton
             illustration={LottieAnimations.Safe}
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.SECURITY]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>
diff --git a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
index bd1068693785..69d662ba6e81 100644
--- a/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
+++ b/src/pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper.js
@@ -11,7 +11,7 @@ import StepWrapperPropTypes from './StepWrapperPropTypes';
 function StepWrapper({
     title = '',
     stepCounter = null,
-    onBackButtonPress = TwoFactorAuthActions.quitAndNavigateBackToSettings,
+    onBackButtonPress = () => TwoFactorAuthActions.quitAndNavigateBack(),
     children = null,
     shouldEnableKeyboardAvoidingView = true,
     onEntryTransitionEnd,
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
index bc85b01cd3da..86d218ec63ae 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js
@@ -24,7 +24,7 @@ import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
-function CodesStep({account = defaultAccount}) {
+function CodesStep({account = defaultAccount, backTo}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -50,6 +50,7 @@ function CodesStep({account = defaultAccount}) {
                 text: translate('twoFactorAuth.stepCodes'),
                 total: 3,
             }}
+            onBackButtonPress={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <Section
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
index 72b005122a33..9de25ecb8f4b 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.js
@@ -26,7 +26,7 @@ function DisabledStep() {
                 <Button
                     success
                     text={translate('common.buttonConfirm')}
-                    onPress={TwoFactorAuthActions.quitAndNavigateBackToSettings}
+                    onPress={() => TwoFactorAuthActions.quitAndNavigateBack()}
                 />
             </FixedFooter>
         </StepWrapper>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
index c1cb9dc460ea..de36888f30b8 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.js
@@ -1,13 +1,24 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import ConfirmationPage from '@components/ConfirmationPage';
 import LottieAnimations from '@components/LottieAnimations';
 import useLocalize from '@hooks/useLocalize';
+import Navigation from '@navigation/Navigation';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as TwoFactorAuthActions from '@userActions/TwoFactorAuthActions';
 import CONST from '@src/CONST';
 
-function SuccessStep() {
+const propTypes = {
+    /** The route where user needs to be redirected after setting up 2FA */
+    backTo: PropTypes.string,
+};
+
+const defaultProps = {
+    backTo: '',
+};
+
+function SuccessStep({backTo}) {
     const {setStep} = useTwoFactorAuthContext();
 
     const {translate} = useLocalize();
@@ -29,10 +40,16 @@ function SuccessStep() {
                 onButtonPress={() => {
                     TwoFactorAuthActions.clearTwoFactorAuthData();
                     setStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
+                    if (backTo) {
+                        Navigation.navigate(backTo);
+                    }
                 }}
             />
         </StepWrapper>
     );
 }
 
+SuccessStep.propTypes = propTypes;
+SuccessStep.defaultProps = defaultProps;
+
 export default SuccessStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
index 31a33efa3996..720c2e02b3c0 100644
--- a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
+++ b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.js
@@ -1,3 +1,5 @@
+import {useRoute} from '@react-navigation/native';
+import lodashGet from 'lodash/get';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import useAnimatedStepContext from '@components/AnimatedStep/useAnimatedStepContext';
@@ -13,6 +15,8 @@ import TwoFactorAuthContext from './TwoFactorAuthContext';
 import {defaultAccount, TwoFactorAuthPropTypes} from './TwoFactorAuthPropTypes';
 
 function TwoFactorAuthSteps({account = defaultAccount}) {
+    const route = useRoute();
+    const backTo = lodashGet(route.params, 'backTo', '');
     const [currentStep, setCurrentStep] = useState(CONST.TWO_FACTOR_AUTH_STEPS.CODES);
 
     const {setAnimationDirection} = useAnimatedStepContext();
@@ -45,17 +49,17 @@ function TwoFactorAuthSteps({account = defaultAccount}) {
     const renderStep = () => {
         switch (currentStep) {
             case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
-                return <CodesStep />;
+                return <CodesStep backTo={backTo} />;
             case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
                 return <VerifyStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
-                return <SuccessStep />;
+                return <SuccessStep backTo={backTo} />;
             case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED:
                 return <EnabledStep />;
             case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED:
                 return <DisabledStep />;
             default:
-                return <CodesStep />;
+                return <CodesStep backTo={backTo} />;
         }
     };
 
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
index e20721b5db4a..e45b4ad67f4e 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
@@ -123,7 +123,7 @@ function ActivatePhysicalCardPage({
             return;
         }
 
-        CardSettings.activatePhysicalExpensifyCard(Number(lastFourDigits), cardID);
+        CardSettings.activatePhysicalExpensifyCard(lastFourDigits, cardID);
     }, [lastFourDigits, cardID, translate]);
 
     if (_.isEmpty(physicalCard)) {
@@ -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/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.js
index 45893dfb5d65..872052067213 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.js
@@ -4,7 +4,8 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import AddressSearch from '@components/AddressSearch';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-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 StatePicker from '@components/StatePicker';
@@ -14,9 +15,7 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
@@ -28,16 +27,12 @@ const propTypes = {
     formData: PropTypes.shape({
         setupComplete: PropTypes.bool,
     }),
-
-    /** List of betas available to current user */
-    betas: PropTypes.arrayOf(PropTypes.string),
 };
 
 const defaultProps = {
     formData: {
         setupComplete: false,
     },
-    betas: [],
 };
 
 function DebitCardPage(props) {
@@ -104,10 +99,6 @@ function DebitCardPage(props) {
         return errors;
     };
 
-    if (!Permissions.canUseWallet(props.betas)) {
-        return <NotFoundPage />;
-    }
-
     return (
         <ScreenWrapper
             onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
@@ -118,7 +109,7 @@ function DebitCardPage(props) {
                 title={translate('addDebitCardPage.addADebitCard')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
             />
-            <Form
+            <FormProvider
                 formID={ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM}
                 validate={validate}
                 onSubmit={PaymentMethods.addPaymentCard}
@@ -126,15 +117,17 @@ function DebitCardPage(props) {
                 scrollContextEnabled
                 style={[styles.mh5, styles.flexGrow1]}
             >
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="nameOnCard"
                     label={translate('addDebitCardPage.nameOnCard')}
                     aria-label={translate('addDebitCardPage.nameOnCard')}
                     role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                    ref={(ref) => (nameOnCardRef.current = ref)}
+                    ref={nameOnCardRef}
                     spellCheck={false}
                 />
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="cardNumber"
                     label={translate('addDebitCardPage.debitCardNumber')}
                     aria-label={translate('addDebitCardPage.debitCardNumber')}
@@ -144,7 +137,8 @@ function DebitCardPage(props) {
                 />
                 <View style={[styles.flexRow, styles.mt4]}>
                     <View style={[styles.flex1, styles.mr2]}>
-                        <TextInput
+                        <InputWrapper
+                            InputComponent={TextInput}
                             inputID="expirationDate"
                             label={translate('addDebitCardPage.expiration')}
                             aria-label={translate('addDebitCardPage.expiration')}
@@ -155,7 +149,8 @@ function DebitCardPage(props) {
                         />
                     </View>
                     <View style={[styles.flex1]}>
-                        <TextInput
+                        <InputWrapper
+                            InputComponent={TextInput}
                             inputID="securityCode"
                             label={translate('addDebitCardPage.cvv')}
                             aria-label={translate('addDebitCardPage.cvv')}
@@ -166,7 +161,8 @@ function DebitCardPage(props) {
                     </View>
                 </View>
                 <View>
-                    <AddressSearch
+                    <InputWrapper
+                        InputComponent={AddressSearch}
                         inputID="addressStreet"
                         label={translate('addDebitCardPage.billingAddress')}
                         containerStyles={[styles.mt4]}
@@ -175,7 +171,8 @@ function DebitCardPage(props) {
                         isLimitedToUSA
                     />
                 </View>
-                <TextInput
+                <InputWrapper
+                    InputComponent={TextInput}
                     inputID="addressZipCode"
                     label={translate('common.zip')}
                     aria-label={translate('common.zip')}
@@ -186,11 +183,16 @@ function DebitCardPage(props) {
                     containerStyles={[styles.mt4]}
                 />
                 <View style={[styles.mt4, styles.mhn5]}>
-                    <StatePicker inputID="addressState" />
+                    <InputWrapper
+                        InputComponent={StatePicker}
+                        inputID="addressState"
+                    />
                 </View>
-                <CheckboxWithLabel
+                <InputWrapper
+                    InputComponent={CheckboxWithLabel}
                     accessibilityLabel={`${translate('common.iAcceptThe')} ${translate('common.expensifyTermsOfService')}`}
                     inputID="acceptTerms"
+                    defaultValue={false}
                     LabelComponent={() => (
                         <Text>
                             {`${translate('common.iAcceptThe')}`}
@@ -199,7 +201,7 @@ function DebitCardPage(props) {
                     )}
                     style={[styles.mt4]}
                 />
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }
@@ -212,7 +214,4 @@ export default withOnyx({
     formData: {
         key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM,
     },
-    betas: {
-        key: ONYXKEYS.BETAS,
-    },
 })(DebitCardPage);
diff --git a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
index 030ca04b7074..4176393e92dd 100644
--- a/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
+++ b/src/pages/settings/Wallet/Card/BaseGetPhysicalCard.js
@@ -13,7 +13,7 @@ import FormUtils from '@libs/FormUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import assignedCardPropTypes from '@pages/settings/Wallet/assignedCardPropTypes';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -113,7 +113,7 @@ const defaultProps = {
     session: {},
     loginList: {},
     isConfirmation: false,
-    renderContent: (onSubmit, submitButtonText, children = () => {}, onValidate = () => ({})) => (
+    renderContent: (onSubmit, submitButtonText, styles, children = () => {}, onValidate = () => ({})) => (
         <Form
             formID={ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM}
             submitButtonText={submitButtonText}
@@ -144,6 +144,7 @@ function BaseGetPhysicalCard({
     title,
     onValidate,
 }) {
+    const styles = useThemeStyles();
     const isRouteSet = useRef(false);
 
     useEffect(() => {
@@ -207,8 +208,8 @@ function BaseGetPhysicalCard({
                 title={title}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
             />
-            <Text style={[styles.textHeadline, styles.mh5]}>{headline}</Text>
-            {renderContent(onSubmit, submitButtonText, children, onValidate)}
+            <Text style={[styles.textHeadline, styles.mh5, styles.mb5]}>{headline}</Text>
+            {renderContent(onSubmit, submitButtonText, styles, children, onValidate)}
         </ScreenWrapper>
     );
 }
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
index e6a11e2ba1e1..0ae83cd28b5c 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardConfirm.js
@@ -8,7 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -71,6 +71,7 @@ function GetPhysicalCardConfirm({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     return (
@@ -82,7 +83,7 @@ function GetPhysicalCardConfirm({
             submitButtonText={translate('getPhysicalCard.shipCard')}
             title={translate('getPhysicalCard.header')}
         >
-            <Text style={[styles.baseFontStyle, styles.mv5, styles.mh5]}>{translate('getPhysicalCard.estimatedDeliveryMessage')}</Text>
+            <Text style={[styles.baseFontStyle, styles.mb5, styles.mh5]}>{translate('getPhysicalCard.estimatedDeliveryMessage')}</Text>
             <MenuItemWithTopDescription
                 description={translate('getPhysicalCard.legalName')}
                 iconRight={Expensicons.ArrowRight}
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
index 3a5399adad3a..3c87bed424ba 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardName.js
@@ -6,7 +6,7 @@ import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -43,6 +43,7 @@ function GetPhysicalCardName({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
     const onValidate = (values) => {
         const errors = {};
@@ -79,7 +80,7 @@ function GetPhysicalCardName({
                 role={CONST.ACCESSIBILITY_ROLE.TEXT}
                 autoCapitalize="words"
                 defaultValue={legalFirstName}
-                containerStyles={[styles.mt5, styles.mh5]}
+                containerStyles={[styles.mh5]}
                 shouldSaveDraft
             />
             <TextInput
diff --git a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
index 9d9ae607438e..82b684332491 100644
--- a/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
+++ b/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.js
@@ -7,7 +7,7 @@ import _ from 'underscore';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
 import FormUtils from '@libs/FormUtils';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -42,6 +42,7 @@ function GetPhysicalCardPhone({
         params: {domain},
     },
 }) {
+    const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const onValidate = (values) => {
@@ -72,7 +73,7 @@ function GetPhysicalCardPhone({
                 aria-label={translate('getPhysicalCard.phoneNumber')}
                 role={CONST.ACCESSIBILITY_ROLE.TEXT}
                 defaultValue={phoneNumber}
-                containerStyles={[styles.mt5, styles.mh5]}
+                containerStyles={[styles.mh5]}
                 shouldSaveDraft
             />
         </BaseGetPhysicalCard>
diff --git a/src/pages/settings/Wallet/PaymentMethodList.js b/src/pages/settings/Wallet/PaymentMethodList.js
index ef11f8c7dc6e..d956e10e1384 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.js
+++ b/src/pages/settings/Wallet/PaymentMethodList.js
@@ -22,6 +22,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
 import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
+import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
@@ -207,6 +208,7 @@ function PaymentMethodList({
     style,
 }) {
     const styles = useThemeStyles();
+    const theme = useTheme();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
 
@@ -222,7 +224,7 @@ function PaymentMethodList({
 
             return _.map(assignedCards, (card) => {
                 const isExpensifyCard = CardUtils.isExpensifyCard(card.cardID);
-                const icon = getBankIcon(card.bank, true);
+                const icon = getBankIcon({bankName: card.bank, isCard: true, themeStyles: styles});
 
                 // In the case a user has been assigned multiple physical Expensify Cards under one domain, display the Card with PAN
                 const expensifyCardDescription = numberPhysicalExpensifyCards > 1 ? CardUtils.getCardDescription(card.cardID) : translate('walletPage.expensifyCard');
@@ -245,7 +247,7 @@ function PaymentMethodList({
 
         // Hide any billing cards that are not P2P debit cards for now because you cannot make them your default method, or delete them
         const filteredCardList = _.filter(paymentCardList, (card) => card.accountData.additionalData.isP2PDebitCard);
-        let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList);
+        let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList, styles);
 
         if (!_.isEmpty(filterType)) {
             combinedPaymentMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterType);
@@ -264,14 +266,14 @@ function PaymentMethodList({
             return {
                 ...paymentMethod,
                 onPress: (e) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID),
-                iconFill: isMethodActive ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
-                wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
+                iconFill: isMethodActive ? StyleUtils.getIconFillColor(theme, CONST.BUTTON_STATES.PRESSED) : null,
+                wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(theme, CONST.BUTTON_STATES.PRESSED)] : null,
                 disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
             };
         });
 
         return combinedPaymentMethods;
-    }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress]);
+    }, [shouldShowAssignedCards, fundList, bankAccountList, filterType, isOffline, cardList, translate, actionPaymentMethodType, activePaymentMethodID, onPress, styles, theme]);
 
     /**
      * Render placeholder when there are no payments methods
diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.js
index 59704e323eb6..2414edb29087 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.js
@@ -94,7 +94,7 @@ function TransferBalancePage(props) {
      * @returns {Object|undefined}
      */
     function getSelectedPaymentMethodAccount() {
-        const paymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList);
+        const paymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles);
 
         const defaultAccount = _.find(paymentMethods, (method) => method.isDefault);
         const selectedAccount = _.find(
@@ -111,7 +111,7 @@ function TransferBalancePage(props) {
         PaymentMethods.saveWalletTransferMethodType(filterPaymentMethodType);
 
         // If we only have a single option for the given paymentMethodType do not force the user to make a selection
-        const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList);
+        const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles);
 
         const filteredMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterPaymentMethodType);
         if (filteredMethods.length === 1) {
diff --git a/src/pages/settings/Wallet/WalletEmptyState.js b/src/pages/settings/Wallet/WalletEmptyState.js
index 8eacd322d695..f2235dfafef2 100644
--- a/src/pages/settings/Wallet/WalletEmptyState.js
+++ b/src/pages/settings/Wallet/WalletEmptyState.js
@@ -36,7 +36,7 @@ function WalletEmptyState({onAddPaymentMethod}) {
     const {translate} = useLocalize();
     return (
         <IllustratedHeaderPageLayout
-            backgroundColor={theme.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.WALLET]}
+            backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.WALLET].backgroundColor}
             illustration={LottieAnimations.FastMoney}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             title={translate('common.wallet')}
diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
index 4ef540f91eef..6f452eed3629 100644
--- a/src/pages/settings/Wallet/WalletPage/WalletPage.js
+++ b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -25,7 +25,6 @@ import compose from '@libs/compose';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
-import Permissions from '@libs/Permissions';
 import PaymentMethodList from '@pages/settings/Wallet/PaymentMethodList';
 import WalletEmptyState from '@pages/settings/Wallet/WalletEmptyState';
 import useTheme from '@styles/themes/useTheme';
@@ -38,7 +37,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {defaultProps, propTypes} from './walletPagePropTypes';
 
-function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymentMethods, network, shouldListenForResize, userWallet, walletTerms}) {
+function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethods, network, shouldListenForResize, userWallet, walletTerms}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -202,7 +201,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
             return;
         }
 
-        if (paymentType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
+        if (paymentType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT || paymentType === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
             BankAccounts.openPersonalBankAccountSetupView();
             return;
         }
@@ -224,7 +223,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
     const makeDefaultPaymentMethod = useCallback(() => {
         const paymentCardList = fundList || {};
         // Find the previous default payment method so we can revert if the MakeDefaultPaymentMethod command errors
-        const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, paymentCardList);
+        const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, paymentCardList, styles);
 
         const previousPaymentMethod = _.find(paymentMethods, (method) => method.isDefault);
         const currentPaymentMethod = _.find(paymentMethods, (method) => method.methodID === paymentMethod.methodID);
@@ -240,6 +239,7 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
         paymentMethod.selectedPaymentMethodType,
         bankAccountList,
         fundList,
+        styles,
     ]);
 
     const deletePaymentMethod = useCallback(() => {
@@ -309,7 +309,6 @@ function WalletPage({bankAccountList, betas, cardList, fundList, isLoadingPaymen
 
     const shouldShowMakeDefaultButton =
         !paymentMethod.isSelectedPaymentMethodDefault &&
-        Permissions.canUseWallet(betas) &&
         !(paymentMethod.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT && paymentMethod.selectedPaymentMethod.type === CONST.BANK_ACCOUNT.TYPE.BUSINESS);
 
     // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens
@@ -565,9 +564,6 @@ WalletPage.displayName = 'WalletPage';
 export default compose(
     withNetwork(),
     withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         cardList: {
             key: ONYXKEYS.CARD_LIST,
         },
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index e48446360605..e7ac249582a9 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import {parsePhoneNumber} from 'awesome-phonenumber';
 import Str from 'expensify-common/lib/str';
 import PropTypes from 'prop-types';
@@ -14,7 +15,6 @@ import GoogleSignIn from '@components/SignInButtons/GoogleSignIn';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withNavigationFocus from '@components/withNavigationFocus';
 import withToggleVisibilityView from '@components/withToggleVisibilityView';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
@@ -75,9 +75,6 @@ const propTypes = {
 
     isVisible: PropTypes.bool.isRequired,
 
-    /** Whether navigation is focused */
-    isFocused: PropTypes.bool.isRequired,
-
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -101,6 +98,7 @@ function LoginForm(props) {
     const [formError, setFormError] = useState(false);
     const prevIsVisible = usePrevious(props.isVisible);
     const firstBlurred = useRef(false);
+    const isFocused = useIsFocused();
 
     const {translate} = props;
 
@@ -204,10 +202,11 @@ function LoginForm(props) {
     useEffect(() => {
         // Just call clearAccountMessages on the login page (home route), because when the user is in the transition route and not yet authenticated,
         // this component will also be mounted, resetting account.isLoading will cause the app to briefly display the session expiration page.
-        if (props.isFocused && props.isVisible) {
+
+        if (isFocused && props.isVisible) {
             Session.clearAccountMessages();
         }
-        if (!canFocusInputOnScreenFocus() || !input.current || !props.isVisible) {
+        if (!canFocusInputOnScreenFocus() || !input.current || !props.isVisible || !isFocused) {
             return;
         }
         let focusTimeout;
@@ -346,7 +345,6 @@ const LoginFormWithRef = forwardRef((props, ref) => (
 LoginFormWithRef.displayName = 'LoginFormWithRef';
 
 export default compose(
-    withNavigationFocus,
     withOnyx({
         account: {key: ONYXKEYS.ACCOUNT},
         credentials: {key: ONYXKEYS.CREDENTIALS},
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 406625dbb8e9..e7499e2aef01 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -5,6 +5,8 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import _ from 'underscore';
+import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
+import CustomStatusBar from '@components/CustomStatusBar';
 import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
@@ -14,6 +16,8 @@ import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
 import Performance from '@libs/Performance';
 import * as StyleUtils from '@styles/StyleUtils';
+import ThemeProvider from '@styles/themes/ThemeProvider';
+import ThemeStylesProvider from '@styles/ThemeStylesProvider';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as App from '@userActions/App';
 import * as Session from '@userActions/Session';
@@ -135,7 +139,7 @@ function getRenderOptions({hasLogin, hasValidateCode, account, isPrimaryLogin, i
     };
 }
 
-function SignInPage({credentials, account, isInModal, activeClients, preferredLocale}) {
+function SignInPageInner({credentials, account, isInModal, activeClients, preferredLocale}) {
     const styles = useThemeStyles();
     const {translate, formatPhoneNumber} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -269,18 +273,33 @@ function SignInPage({credentials, account, isInModal, activeClients, preferredLo
         </View>
     );
 }
+SignInPageInner.propTypes = propTypes;
+SignInPageInner.defaultProps = defaultProps;
+SignInPageInner.displayName = 'SignInPage';
 
-SignInPage.propTypes = propTypes;
-SignInPage.defaultProps = defaultProps;
-SignInPage.displayName = 'SignInPage';
+function SignInPage(props) {
+    return (
+        <ThemeProvider theme={CONST.THEME.DARK}>
+            <ThemeStylesProvider>
+                <ColorSchemeWrapper>
+                    <CustomStatusBar isNested />
+                    <SignInPageInner
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...props}
+                    />
+                </ColorSchemeWrapper>
+            </ThemeStylesProvider>
+        </ThemeProvider>
+    );
+}
 
 export default withOnyx({
     account: {key: ONYXKEYS.ACCOUNT},
     credentials: {key: ONYXKEYS.CREDENTIALS},
-    /** 
-  This variable is only added to make sure the component is re-rendered 
-  whenever the activeClients change, so that we call the 
-  ActiveClientManager.isClientTheLeader function 
+    /**
+  This variable is only added to make sure the component is re-rendered
+  whenever the activeClients change, so that we call the
+  ActiveClientManager.isClientTheLeader function
   everytime the leader client changes.
   We use that function to prevent repeating code that checks which client is the leader.
   */
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index 1b5ac55c9da2..b6c82fc843cd 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
+import React, {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import SignInGradient from '@assets/images/home-fade-gradient.svg';
@@ -93,6 +93,8 @@ function SignInPageLayout(props) {
         scrollPageToTop();
     }, [props.welcomeHeader, props.welcomeText, prevPreferredLocale, props.preferredLocale]);
 
+    const scrollViewStyles = useMemo(() => scrollViewContentContainerStyles(styles), [styles]);
+
     return (
         <View style={containerStyles}>
             {!props.shouldShowSmallScreen ? (
@@ -152,7 +154,7 @@ function SignInPageLayout(props) {
                 </View>
             ) : (
                 <ScrollView
-                    contentContainerStyle={scrollViewContentContainerStyles}
+                    contentContainerStyle={scrollViewStyles}
                     keyboardShouldPersistTaps="handled"
                     ref={scrollViewRef}
                 >
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
index b058c78aca86..ac9b7b66851a 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.js
@@ -1,6 +1,4 @@
-import styles from '@styles/styles';
-
 // On web, we can use flex to fit the content to fit the viewport within a ScrollView.
-const scrollViewContentContainerStyles = styles.flex1;
+const scrollViewContentContainerStyles = (styles) => styles.flex1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
index 76f847f638b9..1c474ab6c722 100644
--- a/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
+++ b/src/pages/signin/SignInPageLayout/signInPageStyles/index.native.js
@@ -1,7 +1,5 @@
-import styles from '@styles/styles';
-
 // Using flexGrow on mobile allows the ScrollView container to grow to fit the content.
 // This is necessary because making the sign-in content fit exactly the viewheight causes the scroll to stop working on mobile.
-const scrollViewContentContainerStyles = styles.flexGrow1;
+const scrollViewContentContainerStyles = (styles) => styles.flexGrow1;
 
 export default scrollViewContentContainerStyles;
diff --git a/src/pages/signin/Terms.js b/src/pages/signin/Terms.js
index 13af9829305d..44e024208fc8 100644
--- a/src/pages/signin/Terms.js
+++ b/src/pages/signin/Terms.js
@@ -1,15 +1,22 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import styles from '@styles/styles';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 
-const linkStyles = [styles.textExtraSmallSupporting, styles.link];
-
 function Terms(props) {
+    const styles = useThemeStyles();
+    const [linkStyles, containerStyles] = useMemo(
+        () => [
+            [styles.textExtraSmallSupporting, styles.link],
+            [styles.textExtraSmallSupporting, styles.mb4],
+        ],
+        [styles],
+    );
+
     return (
-        <Text style={[styles.textExtraSmallSupporting, styles.mb4]}>
+        <Text style={containerStyles}>
             {props.translate('termsOfUse.phrase1')}
             <TextLink
                 style={linkStyles}
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
index f5651e45aeb8..e409836005c4 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js
@@ -383,7 +383,7 @@ function BaseValidateCodeForm(props) {
                                 role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                                 accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
                             >
-                                <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>
+                                <Text style={[StyleUtils.getDisabledLinkStyles(theme, styles, shouldDisableResendValidateCode)]}>
                                     {hasError ? props.translate('validateCodeForm.requestNewCodeAfterErrorOccurred') : props.translate('validateCodeForm.magicCodeNotReceived')}
                                 </Text>
                             </PressableWithFeedback>
diff --git a/src/pages/tasks/NewTaskDescriptionPage.js b/src/pages/tasks/NewTaskDescriptionPage.js
index e571edce39e9..002ca2944e52 100644
--- a/src/pages/tasks/NewTaskDescriptionPage.js
+++ b/src/pages/tasks/NewTaskDescriptionPage.js
@@ -13,7 +13,6 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
@@ -22,9 +21,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** Grab the Share description of the Task */
     task: PropTypes.shape({
         /** Description of the Task */
@@ -35,7 +31,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    betas: [],
     task: {
         description: '',
     },
@@ -52,10 +47,6 @@ function NewTaskDescriptionPage(props) {
         Navigation.goBack(ROUTES.NEW_TASK);
     };
 
-    if (!Permissions.canUseTasks(props.betas)) {
-        Navigation.dismissModal();
-        return null;
-    }
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -105,9 +96,6 @@ NewTaskDescriptionPage.defaultProps = defaultProps;
 
 export default compose(
     withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         task: {
             key: ONYXKEYS.TASK,
         },
diff --git a/src/pages/tasks/NewTaskDetailsPage.js b/src/pages/tasks/NewTaskDetailsPage.js
index 4d0040e01107..aa4f86d40268 100644
--- a/src/pages/tasks/NewTaskDetailsPage.js
+++ b/src/pages/tasks/NewTaskDetailsPage.js
@@ -14,7 +14,6 @@ import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
@@ -22,9 +21,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** Task title and description data */
     task: PropTypes.shape({
         title: PropTypes.string,
@@ -35,7 +31,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    betas: [],
     task: {},
 };
 
@@ -75,10 +70,6 @@ function NewTaskDetailsPage(props) {
         Navigation.navigate(ROUTES.NEW_TASK);
     }
 
-    if (!Permissions.canUseTasks(props.betas)) {
-        Navigation.dismissModal();
-        return null;
-    }
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -109,6 +100,7 @@ function NewTaskDetailsPage(props) {
                         accessibilityLabel={props.translate('task.title')}
                         value={taskTitle}
                         onValueChange={(value) => setTaskTitle(value)}
+                        autoCorrect={false}
                     />
                 </View>
                 <View style={styles.mb5}>
@@ -139,9 +131,6 @@ NewTaskDetailsPage.defaultProps = defaultProps;
 
 export default compose(
     withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         task: {
             key: ONYXKEYS.TASK,
         },
diff --git a/src/pages/tasks/NewTaskPage.js b/src/pages/tasks/NewTaskPage.js
index cedbbc67db47..24bdb39d5bff 100644
--- a/src/pages/tasks/NewTaskPage.js
+++ b/src/pages/tasks/NewTaskPage.js
@@ -15,7 +15,6 @@ import compose from '@libs/compose';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import Permissions from '@libs/Permissions';
 import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -33,9 +32,6 @@ const propTypes = {
         parentReportID: PropTypes.string,
     }),
 
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** All of the personal details for everyone */
     personalDetails: PropTypes.objectOf(
         PropTypes.shape({
@@ -57,7 +53,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    betas: [],
     task: {},
     personalDetails: {},
     reports: {},
@@ -140,11 +135,6 @@ function NewTaskPage(props) {
         );
     }
 
-    if (!Permissions.canUseTasks(props.betas)) {
-        Navigation.dismissModal();
-        return null;
-    }
-
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
@@ -231,9 +221,6 @@ NewTaskPage.defaultProps = defaultProps;
 
 export default compose(
     withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         task: {
             key: ONYXKEYS.TASK,
         },
diff --git a/src/pages/tasks/NewTaskTitlePage.js b/src/pages/tasks/NewTaskTitlePage.js
index 37681e7b7832..f1c583e4aa2a 100644
--- a/src/pages/tasks/NewTaskTitlePage.js
+++ b/src/pages/tasks/NewTaskTitlePage.js
@@ -12,7 +12,6 @@ import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import Permissions from '@libs/Permissions';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
@@ -20,9 +19,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {
-    /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
-
     /** Grab the Share title of the Task */
     task: PropTypes.shape({
         /** Title of the Task */
@@ -33,7 +29,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    betas: [],
     task: {
         title: '',
     },
@@ -65,10 +60,6 @@ function NewTaskTitlePage(props) {
         Navigation.goBack(ROUTES.NEW_TASK);
     }
 
-    if (!Permissions.canUseTasks(props.betas)) {
-        Navigation.dismissModal();
-        return null;
-    }
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -111,9 +102,6 @@ NewTaskTitlePage.defaultProps = defaultProps;
 
 export default compose(
     withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
         task: {
             key: ONYXKEYS.TASK,
         },
diff --git a/src/pages/tasks/TaskAssigneeSelectorModal.js b/src/pages/tasks/TaskAssigneeSelectorModal.js
index a817b4f94e9b..c61990b1c347 100644
--- a/src/pages/tasks/TaskAssigneeSelectorModal.js
+++ b/src/pages/tasks/TaskAssigneeSelectorModal.js
@@ -7,6 +7,7 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
 import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
@@ -16,7 +17,6 @@ import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
 import reportPropTypes from '@pages/reportPropTypes';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Task from '@userActions/Task';
@@ -28,9 +28,6 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** All of the personal details for everyone */
-    personalDetails: PropTypes.objectOf(personalDetailsPropType),
-
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
@@ -65,7 +62,6 @@ const propTypes = {
 
 const defaultProps = {
     betas: [],
-    personalDetails: {},
     reports: {},
     session: {},
     route: {},
@@ -81,13 +77,14 @@ function TaskAssigneeSelectorModal(props) {
     const [filteredUserToInvite, setFilteredUserToInvite] = useState(null);
     const [filteredCurrentUserOption, setFilteredCurrentUserOption] = useState(null);
     const [isLoading, setIsLoading] = React.useState(true);
+    const allPersonalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
 
     const {inputCallbackRef} = useAutoFocusInput();
 
     const updateOptions = useCallback(() => {
         const {recentReports, personalDetails, userToInvite, currentUserOption} = OptionsListUtils.getFilteredOptions(
             props.reports,
-            props.personalDetails,
+            allPersonalDetails,
             props.betas,
             searchValue.trim(),
             [],
@@ -112,7 +109,7 @@ function TaskAssigneeSelectorModal(props) {
         if (isLoading) {
             setIsLoading(false);
         }
-    }, [props, searchValue, isLoading]);
+    }, [props, searchValue, allPersonalDetails, isLoading]);
 
     useEffect(() => {
         const debouncedSearch = _.debounce(updateOptions, 200);
@@ -196,10 +193,13 @@ function TaskAssigneeSelectorModal(props) {
 
         // Check to see if we're editing a task and if so, update the assignee
         if (report) {
-            const assigneeChatReport = Task.setAssigneeValue(option.login, option.accountID, props.route.params.reportID, OptionsListUtils.isCurrentUser(option));
+            if (option.accountID !== report.managerID) {
+                const assigneeChatReport = Task.setAssigneeValue(option.login, option.accountID, props.route.params.reportID, OptionsListUtils.isCurrentUser(option));
 
-            // Pass through the selected assignee
-            Task.editTaskAssigneeAndNavigate(report, props.session.accountID, option.login, option.accountID, assigneeChatReport);
+                // Pass through the selected assignee
+                Task.editTaskAssignee(report, props.session.accountID, option.login, option.accountID, assigneeChatReport);
+            }
+            return Navigation.dismissModal(report.reportID);
         }
     };
 
@@ -250,9 +250,6 @@ export default compose(
         reports: {
             key: ONYXKEYS.COLLECTION.REPORT,
         },
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
         betas: {
             key: ONYXKEYS.BETAS,
         },
diff --git a/src/pages/tasks/TaskDescriptionPage.js b/src/pages/tasks/TaskDescriptionPage.js
index 9069c7acdb68..6901f2562ee3 100644
--- a/src/pages/tasks/TaskDescriptionPage.js
+++ b/src/pages/tasks/TaskDescriptionPage.js
@@ -15,6 +15,7 @@ import * as Browser from '@libs/Browser';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
 import updateMultilineInputRange from '@libs/UpdateMultilineInputRange';
 import withReportOrNotFound from '@pages/home/report/withReportOrNotFound';
 import reportPropTypes from '@pages/reportPropTypes';
@@ -42,9 +43,14 @@ function TaskDescriptionPage(props) {
 
     const submit = useCallback(
         (values) => {
-            // Set the description of the report in the store and then call Task.editTaskReport
-            // to update the description of the report on the server
-            Task.editTaskAndNavigate(props.report, {description: values.description});
+            // props.report.description might contain CRLF from the server
+            if (StringUtils.normalizeCRLF(values.description) !== StringUtils.normalizeCRLF(props.report.description)) {
+                // Set the description of the report in the store and then call EditTask API
+                // to update the description of the report on the server
+                Task.editTask(props.report, {description: values.description});
+            }
+
+            Navigation.dismissModal(props.report.reportID);
         },
         [props],
     );
diff --git a/src/pages/tasks/TaskTitlePage.js b/src/pages/tasks/TaskTitlePage.js
index a7e762e277e1..0e6326b21e7b 100644
--- a/src/pages/tasks/TaskTitlePage.js
+++ b/src/pages/tasks/TaskTitlePage.js
@@ -51,9 +51,13 @@ function TaskTitlePage(props) {
 
     const submit = useCallback(
         (values) => {
-            // Set the title of the report in the store and then call Task.editTaskReport
-            // to update the title of the report on the server
-            Task.editTaskAndNavigate(props.report, {title: values.title});
+            if (values.title !== props.report.reportName) {
+                // Set the title of the report in the store and then call EditTask API
+                // to update the title of the report on the server
+                Task.editTask(props.report, {title: values.title});
+            }
+
+            Navigation.dismissModal(props.report.reportID);
         },
         [props],
     );
diff --git a/src/pages/wallet/WalletStatementPage.js b/src/pages/wallet/WalletStatementPage.js
index 0d33be70f1b7..e79a2add5213 100644
--- a/src/pages/wallet/WalletStatementPage.js
+++ b/src/pages/wallet/WalletStatementPage.js
@@ -87,8 +87,8 @@ function WalletStatementPage(props) {
 
     const year = yearMonth.substring(0, 4) || getYear(new Date());
     const month = yearMonth.substring(4) || getMonth(new Date());
-    const monthName = format(new Date(year, month), CONST.DATE.MONTH_FORMAT);
-    const title = `${monthName} ${year} statement`;
+    const monthName = format(new Date(year, month - 1), CONST.DATE.MONTH_FORMAT);
+    const title = props.translate('statementPage.title', year, monthName);
     const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${yearMonth}`;
 
     return (
diff --git a/src/pages/workspace/WorkspaceInviteMessagePage.js b/src/pages/workspace/WorkspaceInviteMessagePage.js
index 85dd65377dcf..c0a12c9208bf 100644
--- a/src/pages/workspace/WorkspaceInviteMessagePage.js
+++ b/src/pages/workspace/WorkspaceInviteMessagePage.js
@@ -1,3 +1,4 @@
+import {isEmpty} from 'lodash';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -76,8 +77,11 @@ class WorkspaceInviteMessagePage extends React.Component {
         this.sendInvitation = this.sendInvitation.bind(this);
         this.validate = this.validate.bind(this);
         this.openPrivacyURL = this.openPrivacyURL.bind(this);
+        this.debouncedSaveDraf = _.debounce((newDraft) => {
+            Policy.setWorkspaceInviteMessageDraft(this.props.route.params.policyID, newDraft);
+        }, 2000);
         this.state = {
-            welcomeNote: this.props.savedWelcomeMessage || this.getDefaultWelcomeNote(),
+            welcomeNote: this.props.workspaceInviteMessageDraft || this.getDefaultWelcomeNote(),
         };
     }
 
@@ -229,8 +233,10 @@ class WorkspaceInviteMessagePage extends React.Component {
                                 containerStyles={[this.props.themeStyles.autoGrowHeightMultilineInput]}
                                 defaultValue={this.state.welcomeNote}
                                 value={this.state.welcomeNote}
-                                onChangeText={(text) => this.setState({welcomeNote: text})}
-                                shouldSaveDraft
+                                onChangeText={(text) => {
+                                    this.debouncedSaveDraf(text);
+                                    this.setState({welcomeNote: text});
+                                }}
                             />
                         </View>
                     </Form>
@@ -254,9 +260,9 @@ export default compose(
         invitedEmailsToAccountIDsDraft: {
             key: ({route}) => `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT}${route.params.policyID.toString()}`,
         },
-        savedWelcomeMessage: {
-            key: `${ONYXKEYS.FORMS.WORKSPACE_INVITE_MESSAGE_FORM}Draft`,
-            selector: (draft) => (draft ? draft.welcomeMessage : ''),
+        workspaceInviteMessageDraft: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MESSAGE_DRAFT}${route.params.policyID.toString()}`,
+            selector: (draft) => (isEmpty(draft) ? '' : draft),
         },
     }),
     withNavigationFocus,
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index df78539bf665..2abc6c3d13fa 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -4,7 +4,8 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import OfflineIndicator from '@components/OfflineIndicator';
 import RoomNameInput from '@components/RoomNameInput';
@@ -181,7 +182,7 @@ function WorkspaceNewRoomPage(props) {
                         // This is because when wrapping whole screen the screen was freezing when changing Tabs.
                         keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                     >
-                        <Form
+                        <FormProvider
                             formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
                             submitButtonText={translate('newRoomPage.createRoom')}
                             style={[styles.mh5, styles.flexGrow1]}
@@ -199,7 +200,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={styles.mb5}>
-                                <TextInput
+                                <InputWrapper
+                                    InputComponent={TextInput}
                                     inputID="welcomeMessage"
                                     label={translate('welcomeMessagePage.welcomeMessageOptional')}
                                     accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
@@ -212,7 +214,8 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <View style={[styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="policyID"
                                     label={translate('workspace.common.workspace')}
                                     items={workspaceOptions}
@@ -221,7 +224,8 @@ function WorkspaceNewRoomPage(props) {
                             </View>
                             {isPolicyAdmin && (
                                 <View style={styles.mhn5}>
-                                    <ValuePicker
+                                    <InputWrapper
+                                        InputComponent={ValuePicker}
                                         inputID="writeCapability"
                                         label={translate('writeCapabilityPage.label')}
                                         items={writeCapabilityOptions}
@@ -231,7 +235,8 @@ function WorkspaceNewRoomPage(props) {
                                 </View>
                             )}
                             <View style={[styles.mb1, styles.mhn5]}>
-                                <ValuePicker
+                                <InputWrapper
+                                    InputComponent={ValuePicker}
                                     inputID="visibility"
                                     label={translate('newRoomPage.visibility')}
                                     items={visibilityOptions}
@@ -240,7 +245,7 @@ function WorkspaceNewRoomPage(props) {
                                 />
                             </View>
                             <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                        </Form>
+                        </FormProvider>
                         {isSmallScreenWidth && <OfflineIndicator />}
                     </KeyboardAvoidingView>
                 )}
diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
index dc0c6d8b3043..cf258b462285 100755
--- a/src/pages/workspace/WorkspacesListPage.js
+++ b/src/pages/workspace/WorkspacesListPage.js
@@ -12,7 +12,6 @@ import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
-import usePermissions from '@hooks/usePermissions';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -112,14 +111,13 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
-    const {canUseWallet} = usePermissions();
 
     /**
      * @param {Boolean} isPaymentItem whether the item being rendered is the payments menu item
-     * @returns {Number} the user wallet balance
+     * @returns {String|undefined} the user's wallet balance
      */
     function getWalletBalance(isPaymentItem) {
-        return isPaymentItem && canUseWallet ? CurrencyUtils.convertToDisplayString(userWallet.currentBalance) : undefined;
+        return isPaymentItem ? CurrencyUtils.convertToDisplayString(userWallet.currentBalance) : undefined;
     }
 
     /**
@@ -185,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/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 8db093ec24d0..8e6a67ce5ee7 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -116,3 +116,4 @@ export default function <TProps extends WithPolicyProps, TRef>(WrappedComponent:
 }
 
 export {policyPropTypes, policyDefaultProps};
+export type {WithPolicyOnyxProps, WithPolicyProps};
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js
deleted file mode 100644
index 2911eadccf5f..000000000000
--- a/src/pages/workspace/withPolicyAndFullscreenLoading.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-import omit from 'lodash/omit';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import compose from '@libs/compose';
-import getComponentDisplayName from '@libs/getComponentDisplayName';
-import ONYXKEYS from '@src/ONYXKEYS';
-import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy';
-
-export default function (WrappedComponent) {
-    const propTypes = {
-        /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component.
-         * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */
-        forwardedRef: PropTypes.func,
-
-        /** Indicated whether the report data is loading */
-        isLoadingReportData: PropTypes.bool,
-
-        ...policyPropTypes,
-    };
-
-    const defaultProps = {
-        forwardedRef: () => {},
-        isLoadingReportData: true,
-        ...policyDefaultProps,
-    };
-
-    function WithPolicyAndFullscreenLoading(props) {
-        if (props.isLoadingReportData && isEmpty(props.policy) && isEmpty(props.policyDraft)) {
-            return <FullscreenLoadingIndicator />;
-        }
-
-        const rest = omit(props, ['forwardedRef']);
-        return (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...rest}
-                ref={props.forwardedRef}
-            />
-        );
-    }
-
-    WithPolicyAndFullscreenLoading.propTypes = propTypes;
-    WithPolicyAndFullscreenLoading.defaultProps = defaultProps;
-    WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading(${getComponentDisplayName(WrappedComponent)})`;
-
-    const WithPolicyAndFullscreenLoadingWithRef = React.forwardRef((props, ref) => (
-        <WithPolicyAndFullscreenLoading
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    ));
-
-    WithPolicyAndFullscreenLoadingWithRef.displayName = 'WithPolicyAndFullscreenLoadingWithRef';
-
-    return compose(
-        withPolicy,
-        withOnyx({
-            isLoadingReportData: {
-                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-            },
-        }),
-    )(WithPolicyAndFullscreenLoadingWithRef);
-}
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx
new file mode 100644
index 000000000000..3e8bd3bdddb4
--- /dev/null
+++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx
@@ -0,0 +1,62 @@
+import isEmpty from 'lodash/isEmpty';
+import React, {ComponentType, ForwardedRef, forwardRef, RefAttributes} from 'react';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import compose from '@libs/compose';
+import ONYXKEYS from '@src/ONYXKEYS';
+import withPolicy, {policyDefaultProps, WithPolicyOnyxProps, WithPolicyProps} from './withPolicy';
+
+type WithPolicyAndFullscreenLoadingOnyxProps = {
+    /** Indicated whether the report data is loading */
+    isLoadingReportData: OnyxEntry<boolean>;
+};
+
+type WithPolicyAndFullscreenLoadingProps = WithPolicyProps & WithPolicyAndFullscreenLoadingOnyxProps;
+
+type ComponentWithPolicyAndFullscreenLoading<TProps extends WithPolicyAndFullscreenLoadingProps, TRef> = ComponentType<
+    Omit<Omit<TProps & RefAttributes<TRef>, keyof WithPolicyAndFullscreenLoadingOnyxProps>, keyof WithPolicyOnyxProps>
+>;
+
+export default function withPolicyAndFullscreenLoading<TProps extends WithPolicyAndFullscreenLoadingProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): ComponentWithPolicyAndFullscreenLoading<TProps, TRef> {
+    function WithPolicyAndFullscreenLoading(
+        {
+            isLoadingReportData = true,
+            policy = policyDefaultProps.policy,
+            policyDraft = policyDefaultProps.policyDraft,
+            policyMembers = policyDefaultProps.policyMembers,
+            policyMembersDraft = policyDefaultProps.policyMembersDraft,
+            ...rest
+        }: TProps,
+        ref: ForwardedRef<TRef>,
+    ) {
+        if (isLoadingReportData && isEmpty(policy) && isEmpty(policyDraft)) {
+            return <FullscreenLoadingIndicator />;
+        }
+
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(rest as TProps)}
+                isLoadingReportData={isLoadingReportData}
+                policy={policy}
+                policyDraft={policyDraft}
+                policyMembers={policyMembers}
+                policyMembersDraft={policyMembersDraft}
+                ref={ref}
+            />
+        );
+    }
+
+    WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading`;
+
+    return compose(
+        withOnyx<TProps & RefAttributes<TRef>, WithPolicyAndFullscreenLoadingOnyxProps>({
+            isLoadingReportData: {
+                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+            },
+        }),
+        withPolicy,
+    )(forwardRef(WithPolicyAndFullscreenLoading));
+}
diff --git a/src/stories/Datepicker.stories.js b/src/stories/Datepicker.stories.js
deleted file mode 100644
index 65bbec9d7f39..000000000000
--- a/src/stories/Datepicker.stories.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import DatePicker from '@components/DatePicker';
-
-/**
- * We use the Component Story Format for writing stories. Follow the docs here:
- *
- * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
- */
-export default {
-    title: 'Components/Datepicker',
-    component: DatePicker,
-    argTypes: {
-        onChange: {action: 'date changed'},
-    },
-    args: {
-        defaultValue: '',
-        label: 'Select Date',
-        placeholder: 'Date Placeholder',
-        errorText: '',
-        hasError: false,
-    },
-};
-
-function Template(args) {
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    return <DatePicker {...args} />;
-}
-
-// Arguments can be passed to the component by binding
-// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
-const PreFilled = Template.bind({});
-Default.args = {
-    label: 'Select Date',
-};
-
-PreFilled.args = {
-    label: 'Select Date',
-    defaultValue: new Date(2018, 7, 21),
-};
-
-export {Default, PreFilled};
diff --git a/src/stories/Form.stories.js b/src/stories/Form.stories.js
index e09ec755b68d..6b73ce6d38fb 100644
--- a/src/stories/Form.stories.js
+++ b/src/stories/Form.stories.js
@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import AddressSearch from '@components/AddressSearch';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
-import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import Picker from '@components/Picker';
@@ -30,7 +29,6 @@ const story = {
         CheckboxWithLabel,
         Picker,
         StatePicker,
-        DatePicker,
     },
 };
 
@@ -69,12 +67,6 @@ function Template(args) {
                 containerStyles={[styles.mt4]}
                 hint="No PO box"
             />
-            <InputWrapper
-                InputComponent={DatePicker}
-                label="Date of birth"
-                inputID="dob"
-                containerStyles={[styles.mt4]}
-            />
             <View>
                 <InputWrapper
                     InputComponent={Picker}
diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts
index 1443717d046e..4cb62b930632 100644
--- a/src/styles/StyleUtils.ts
+++ b/src/styles/StyleUtils.ts
@@ -8,8 +8,8 @@ import CONST from '@src/CONST';
 import {Transaction} from '@src/types/onyx';
 import colors from './colors';
 import fontFamily from './fontFamily';
-import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeStyles} from './styles';
+import {ThemeColors} from './themes/types';
 import cursor from './utilities/cursor';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
@@ -46,7 +46,6 @@ type AvatarSizeValue = ValueOf<
     >
 >;
 type ButtonSizeValue = ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
-type EmptyAvatarSizeName = ValueOf<Pick<typeof CONST.AVATAR_SIZE, 'SMALL' | 'MEDIUM' | 'LARGE'>>;
 type ButtonStateName = ValueOf<typeof CONST.BUTTON_STATES>;
 type AvatarSize = {width: number};
 
@@ -74,6 +73,7 @@ type AvatarBorderStyleParams = {
     isPressed: boolean;
     isInReportAction: boolean;
     shouldUseCardBackground: boolean;
+    theme: ThemeColors;
 };
 
 type GetBaseAutoCompleteSuggestionContainerStyleParams = {
@@ -152,12 +152,6 @@ const avatarSizes: Record<AvatarSizeName, AvatarSizeValue> = {
     [CONST.AVATAR_SIZE.SMALL_NORMAL]: variables.avatarSizeSmallNormal,
 };
 
-const emptyAvatarStyles: Record<EmptyAvatarSizeName, ViewStyle> = {
-    [CONST.AVATAR_SIZE.SMALL]: styles.emptyAvatarSmall,
-    [CONST.AVATAR_SIZE.MEDIUM]: styles.emptyAvatarMedium,
-    [CONST.AVATAR_SIZE.LARGE]: styles.emptyAvatarLarge,
-};
-
 const avatarFontSizes: Partial<Record<AvatarSizeName, number>> = {
     [CONST.AVATAR_SIZE.DEFAULT]: variables.fontSizeNormal,
     [CONST.AVATAR_SIZE.SMALL_SUBSCRIPT]: variables.fontSizeExtraSmall,
@@ -192,17 +186,10 @@ function getAvatarSize(size: AvatarSizeName): number {
 /**
  * Return the height of magic code input container
  */
-function getHeightOfMagicCodeInput(): ViewStyle {
+function getHeightOfMagicCodeInput(styles: ThemeStyles): ViewStyle {
     return {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth};
 }
 
-/**
- * Return the style from an empty avatar size constant
- */
-function getEmptyAvatarStyle(size: EmptyAvatarSizeName): ViewStyle | undefined {
-    return emptyAvatarStyles[size];
-}
-
 /**
  * Return the width style from an avatar size constant
  */
@@ -216,13 +203,13 @@ function getAvatarWidthStyle(size: AvatarSizeName): ViewStyle {
 /**
  * Return the style from an avatar size constant
  */
-function getAvatarStyle(size: AvatarSizeName): AvatarStyle {
+function getAvatarStyle(theme: ThemeColors, size: AvatarSizeName): AvatarStyle {
     const avatarSize = getAvatarSize(size);
     return {
         height: avatarSize,
         width: avatarSize,
         borderRadius: avatarSize,
-        backgroundColor: themeColors.offline,
+        backgroundColor: theme.offline,
     };
 }
 
@@ -320,7 +307,7 @@ function getSafeAreaMargins(insets?: EdgeInsets): ViewStyle {
     return {marginBottom: (insets?.bottom ?? 0) * variables.safeInsertPercentage};
 }
 
-function getZoomCursorStyle(isZoomed: boolean, isDragging: boolean): ViewStyle {
+function getZoomCursorStyle(styles: ThemeStyles, isZoomed: boolean, isDragging: boolean): ViewStyle {
     if (!isZoomed) {
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -401,7 +388,7 @@ function getWidthStyle(width: number): ViewStyle {
 /**
  * Returns auto grow height text input style
  */
-function getAutoGrowHeightInputStyle(textInputHeight: number, maxHeight: number): ViewStyle {
+function getAutoGrowHeightInputStyle(styles: ThemeStyles, textInputHeight: number, maxHeight: number): ViewStyle {
     if (textInputHeight > maxHeight) {
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -462,7 +449,7 @@ function getBorderColorStyle(borderColor: string): ViewStyle {
 /**
  * Returns the width style for the wordmark logo on the sign in page
  */
-function getSignInWordmarkWidthStyle(isSmallScreenWidth: boolean, environment?: ValueOf<typeof CONST.ENVIRONMENT>): ViewStyle {
+function getSignInWordmarkWidthStyle(isSmallScreenWidth: boolean, environment: ValueOf<typeof CONST.ENVIRONMENT>): ViewStyle {
     if (environment === CONST.ENVIRONMENT.DEV) {
         return isSmallScreenWidth ? {width: variables.signInLogoWidthPill} : {width: variables.signInLogoWidthLargeScreenPill};
     }
@@ -507,7 +494,7 @@ function getBackgroundColorWithOpacityStyle(backgroundColor: string, opacity: nu
 /**
  * Generate a style for the background color of the Badge
  */
-function getBadgeColorStyle(isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false): ViewStyle {
+function getBadgeColorStyle(styles: ThemeStyles, isSuccess: boolean, isError: boolean, isPressed = false, isAdHoc = false): ViewStyle {
     if (isSuccess) {
         if (isAdHoc) {
             // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
@@ -532,12 +519,12 @@ function getBadgeColorStyle(isSuccess: boolean, isError: boolean, isPressed = fa
  * @param buttonState - One of {'default', 'hovered', 'pressed'}
  * @param isMenuItem - whether this button is apart of a list
  */
-function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle {
+function getButtonBackgroundColorStyle(theme: ThemeColors, buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuItem = false): ViewStyle {
     switch (buttonState) {
         case CONST.BUTTON_STATES.PRESSED:
-            return {backgroundColor: themeColors.buttonPressedBG};
+            return {backgroundColor: theme.buttonPressedBG};
         case CONST.BUTTON_STATES.ACTIVE:
-            return isMenuItem ? {backgroundColor: themeColors.border} : {backgroundColor: themeColors.buttonHoveredBG};
+            return isMenuItem ? {backgroundColor: theme.border} : {backgroundColor: theme.buttonHoveredBG};
         case CONST.BUTTON_STATES.DISABLED:
         case CONST.BUTTON_STATES.DEFAULT:
         default:
@@ -551,20 +538,20 @@ function getButtonBackgroundColorStyle(buttonState: ButtonStateName = CONST.BUTT
  * @param buttonState - One of {'default', 'hovered', 'pressed'}
  * @param isMenuIcon - whether this icon is apart of a list
  */
-function getIconFillColor(buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuIcon = false): string {
+function getIconFillColor(theme: ThemeColors, buttonState: ButtonStateName = CONST.BUTTON_STATES.DEFAULT, isMenuIcon = false): string {
     switch (buttonState) {
         case CONST.BUTTON_STATES.ACTIVE:
         case CONST.BUTTON_STATES.PRESSED:
-            return themeColors.iconHovered;
+            return theme.iconHovered;
         case CONST.BUTTON_STATES.COMPLETE:
-            return themeColors.iconSuccessFill;
+            return theme.iconSuccessFill;
         case CONST.BUTTON_STATES.DEFAULT:
         case CONST.BUTTON_STATES.DISABLED:
         default:
             if (isMenuIcon) {
-                return themeColors.iconMenu;
+                return theme.iconMenu;
             }
-            return themeColors.icon;
+            return theme.icon;
     }
 }
 
@@ -661,16 +648,16 @@ function getEmojiPickerStyle(isSmallScreenWidth: boolean): ViewStyle {
 /**
  * Generate the styles for the ReportActionItem wrapper view.
  */
-function getReportActionItemStyle(isHovered = false): ViewStyle {
+function getReportActionItemStyle(theme: ThemeColors, styles: ThemeStyles, isHovered = false): ViewStyle {
     // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
         display: 'flex',
         justifyContent: 'space-between',
         backgroundColor: isHovered
-            ? themeColors.hoverComponentBG
+            ? theme.hoverComponentBG
             : // Warning: Setting this to a non-transparent color will cause unread indicator to break on Android
-              themeColors.transparent,
+              theme.transparent,
         opacity: 1,
         ...styles.cursorInitial,
     };
@@ -679,7 +666,7 @@ function getReportActionItemStyle(isHovered = false): ViewStyle {
 /**
  * Generate the wrapper styles for the mini ReportActionContextMenu.
  */
-function getMiniReportActionContextMenuWrapperStyle(isReportActionItemGrouped: boolean): ViewStyle {
+function getMiniReportActionContextMenuWrapperStyle(styles: ThemeStyles, isReportActionItemGrouped: boolean): ViewStyle {
     // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
@@ -761,11 +748,11 @@ function extractValuesFromRGB(color: string): number[] | null {
  * @param bgColor - theme background color
  * @returns The theme color as an RGB value.
  */
-function getThemeBackgroundColor(bgColor: string = themeColors.appBG): string {
+function getThemeBackgroundColor(theme: ThemeColors, bgColor: string): string {
     const backdropOpacity = variables.overlayOpacity;
 
     const [backgroundRed, backgroundGreen, backgroundBlue] = extractValuesFromRGB(bgColor) ?? hexadecimalToRGBArray(bgColor) ?? [];
-    const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.overlay) ?? [];
+    const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(theme.overlay) ?? [];
     const normalizedBackdropRGB = convertRGBToUnitValues(backdropRed, backdropGreen, backdropBlue);
     const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue);
     const [red, green, blue] = convertRGBAToRGB(normalizedBackdropRGB, normalizedBackgroundRGB, backdropOpacity);
@@ -870,15 +857,15 @@ function fade(fadeAnimation: Animated.Value): Animated.WithAnimatedValue<ViewSty
     };
 }
 
-function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false}: AvatarBorderStyleParams): ViewStyle {
-    let borderColor = shouldUseCardBackground ? themeColors.cardBG : themeColors.appBG;
+function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false, theme}: AvatarBorderStyleParams): ViewStyle {
+    let borderColor = shouldUseCardBackground ? theme.cardBG : theme.appBG;
 
     if (isHovered) {
-        borderColor = isInReportAction ? themeColors.highlightBG : themeColors.border;
+        borderColor = isInReportAction ? theme.highlightBG : theme.border;
     }
 
     if (isPressed) {
-        borderColor = isInReportAction ? themeColors.highlightBG : themeColors.buttonPressedBG;
+        borderColor = isInReportAction ? theme.highlightBG : theme.buttonPressedBG;
     }
 
     return {borderColor};
@@ -907,9 +894,9 @@ function getHorizontalStackedOverlayAvatarStyle(oneAvatarSize: AvatarSize, oneAv
     };
 }
 
-function getErrorPageContainerStyle(safeAreaPaddingBottom = 0): ViewStyle {
+function getErrorPageContainerStyle(theme: ThemeColors, safeAreaPaddingBottom = 0): ViewStyle {
     return {
-        backgroundColor: themeColors.componentBG,
+        backgroundColor: theme.componentBG,
         paddingBottom: 40 + safeAreaPaddingBottom,
     };
 }
@@ -992,13 +979,13 @@ function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean, isMoneyRepo
 /**
  * Gets styles for AutoCompleteSuggestion row
  */
-function getAutoCompleteSuggestionItemStyle(highlightedEmojiIndex: number, rowHeight: number, isHovered: boolean, currentEmojiIndex: number): ViewStyle[] {
+function getAutoCompleteSuggestionItemStyle(theme: ThemeColors, highlightedEmojiIndex: number, rowHeight: number, isHovered: boolean, currentEmojiIndex: number): ViewStyle[] {
     let backgroundColor;
 
     if (currentEmojiIndex === highlightedEmojiIndex) {
-        backgroundColor = themeColors.activeComponentBG;
+        backgroundColor = theme.activeComponentBG;
     } else if (isHovered) {
-        backgroundColor = themeColors.hoverComponentBG;
+        backgroundColor = theme.hoverComponentBG;
     }
 
     return [
@@ -1048,19 +1035,19 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle
 /**
  * Select the correct color for text.
  */
-function getColoredBackgroundStyle(isColored: boolean): StyleProp<TextStyle> {
-    return {backgroundColor: isColored ? themeColors.link : undefined};
+function getColoredBackgroundStyle(theme: ThemeColors, isColored: boolean): StyleProp<TextStyle> {
+    return {backgroundColor: isColored ? theme.link : undefined};
 }
 
-function getEmojiReactionBubbleStyle(isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle {
-    let backgroundColor = themeColors.border;
+function getEmojiReactionBubbleStyle(theme: ThemeColors, isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle {
+    let backgroundColor = theme.border;
 
     if (isHovered) {
-        backgroundColor = themeColors.buttonHoveredBG;
+        backgroundColor = theme.buttonHoveredBG;
     }
 
     if (hasUserReacted) {
-        backgroundColor = themeColors.reactionActiveBackground;
+        backgroundColor = theme.reactionActiveBackground;
     }
 
     if (isContextMenu) {
@@ -1092,12 +1079,12 @@ function getEmojiReactionBubbleTextStyle(isContextMenu = false): TextStyle {
     };
 }
 
-function getEmojiReactionCounterTextStyle(hasUserReacted: boolean): TextStyle {
+function getEmojiReactionCounterTextStyle(theme: ThemeColors, hasUserReacted: boolean): TextStyle {
     if (hasUserReacted) {
-        return {color: themeColors.reactionActiveText};
+        return {color: theme.reactionActiveText};
     }
 
-    return {color: themeColors.text};
+    return {color: theme.text};
 }
 
 /**
@@ -1120,7 +1107,7 @@ function displayIfTrue(condition: boolean): ViewStyle {
     return {display: condition ? 'flex' : 'none'};
 }
 
-function getGoogleListViewStyle(shouldDisplayBorder: boolean): ViewStyle {
+function getGoogleListViewStyle(styles: ThemeStyles, shouldDisplayBorder: boolean): ViewStyle {
     if (shouldDisplayBorder) {
         // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -1160,8 +1147,8 @@ function getEmojiPickerListHeight(hasAdditionalSpace: boolean, windowHeight: num
 /**
  * Returns style object for the user mention component based on whether the mention is ours or not.
  */
-function getMentionStyle(isOurMention: boolean): ViewStyle {
-    const backgroundColor = isOurMention ? themeColors.ourMentionBG : themeColors.mentionBG;
+function getMentionStyle(theme: ThemeColors, isOurMention: boolean): ViewStyle {
+    const backgroundColor = isOurMention ? theme.ourMentionBG : theme.mentionBG;
     return {
         backgroundColor,
         borderRadius: variables.componentBorderRadiusSmall,
@@ -1172,8 +1159,8 @@ function getMentionStyle(isOurMention: boolean): ViewStyle {
 /**
  * Returns text color for the user mention text based on whether the mention is ours or not.
  */
-function getMentionTextColor(isOurMention: boolean): string {
-    return isOurMention ? themeColors.ourMentionText : themeColors.mentionText;
+function getMentionTextColor(theme: ThemeColors, isOurMention: boolean): string {
+    return isOurMention ? theme.ourMentionText : theme.mentionText;
 }
 
 /**
@@ -1225,9 +1212,9 @@ function getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu: boolean): Vie
 /**
  * Returns link styles based on whether the link is disabled or not
  */
-function getDisabledLinkStyles(isDisabled = false): ViewStyle {
+function getDisabledLinkStyles(theme: ThemeColors, styles: ThemeStyles, isDisabled = false): ViewStyle {
     const disabledLinkStyles = {
-        color: themeColors.textSupporting,
+        color: theme.textSupporting,
         ...cursor.cursorDisabled,
     };
 
@@ -1262,12 +1249,12 @@ function getCheckboxPressableStyle(borderRadius = 6): ViewStyle {
 /**
  * Returns the checkbox container style
  */
-function getCheckboxContainerStyle(size: number, borderRadius = 4): ViewStyle {
+function getCheckboxContainerStyle(theme: ThemeColors, size: number, borderRadius = 4): ViewStyle {
     return {
-        backgroundColor: themeColors.componentBG,
+        backgroundColor: theme.componentBG,
         height: size,
         width: size,
-        borderColor: themeColors.borderLighter,
+        borderColor: theme.borderLighter,
         borderWidth: 2,
         justifyContent: 'center',
         alignItems: 'center',
@@ -1353,7 +1340,7 @@ function getAmountFontSizeAndLineHeight(isSmallScreenWidth: boolean, windowWidth
 /**
  * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar
  */
-function getContainerStyles(size: string, isInReportAction = false): ViewStyle[] {
+function getContainerStyles(styles: ThemeStyles, size: string, isInReportAction = false): ViewStyle[] {
     let containerStyles: ViewStyle[];
 
     switch (size) {
@@ -1386,7 +1373,7 @@ function getTransparentColor(color: string) {
 /**
  * Get the styles of the text next to dot indicators
  */
-function getDotIndicatorTextStyles(isErrorText = true): TextStyle {
+function getDotIndicatorTextStyles(styles: ThemeStyles, isErrorText = true): TextStyle {
     return isErrorText ? {...styles.offlineFeedback.text, color: styles.formError.color} : {...styles.offlineFeedback.text};
 }
 
@@ -1443,7 +1430,6 @@ export {
     getEmojiReactionBubbleStyle,
     getEmojiReactionBubbleTextStyle,
     getEmojiReactionCounterTextStyle,
-    getEmptyAvatarStyle,
     getErrorPageContainerStyle,
     getFontFamilyMonospace,
     getCodeFontSize,
diff --git a/src/styles/ThemeStylesProvider.tsx b/src/styles/ThemeStylesProvider.tsx
index af5fe815c9d9..1a60d61c4ea5 100644
--- a/src/styles/ThemeStylesProvider.tsx
+++ b/src/styles/ThemeStylesProvider.tsx
@@ -3,9 +3,7 @@ import {stylesGenerator} from './styles';
 import useTheme from './themes/useTheme';
 import ThemeStylesContext from './ThemeStylesContext';
 
-type ThemeStylesProviderProps = {
-    children: React.ReactNode;
-};
+type ThemeStylesProviderProps = React.PropsWithChildren;
 
 function ThemeStylesProvider({children}: ThemeStylesProviderProps) {
     const theme = useTheme();
diff --git a/src/styles/addOutlineWidth/index.ts b/src/styles/addOutlineWidth/index.ts
index 5d99e369b79a..7063d610cf11 100644
--- a/src/styles/addOutlineWidth/index.ts
+++ b/src/styles/addOutlineWidth/index.ts
@@ -2,17 +2,16 @@
  * Web and desktop platforms support the "addOutlineWidth" property, so it
  * can be added to the object
  */
-import themeDefault from '@styles/themes/default';
 import AddOutlineWidth from './types';
 
 /**
  * Adds the addOutlineWidth property to an object to be used when styling
  */
-const addOutlineWidth: AddOutlineWidth = (obj, val, hasError = false) => ({
+const addOutlineWidth: AddOutlineWidth = (obj, theme, val, hasError = false) => ({
     ...obj,
     outlineWidth: val,
     outlineStyle: val ? 'auto' : 'none',
-    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? themeDefault.danger : themeDefault.borderFocus}` : 'none',
+    boxShadow: val !== 0 ? `0px 0px 0px ${val}px ${hasError ? theme?.danger : theme?.borderFocus}` : 'none',
 });
 
 export default addOutlineWidth;
diff --git a/src/styles/addOutlineWidth/types.ts b/src/styles/addOutlineWidth/types.ts
index 7a3a86506959..35b6bc97a631 100644
--- a/src/styles/addOutlineWidth/types.ts
+++ b/src/styles/addOutlineWidth/types.ts
@@ -1,5 +1,6 @@
 import {TextStyle} from 'react-native';
+import {ThemeColors} from '@styles/themes/types';
 
-type AddOutlineWidth = (obj: TextStyle, val?: number, hasError?: boolean) => TextStyle;
+type AddOutlineWidth = (obj: TextStyle, theme?: ThemeColors, val?: number, hasError?: boolean) => TextStyle;
 
 export default AddOutlineWidth;
diff --git a/src/styles/containerComposeStyles/index.native.ts b/src/styles/containerComposeStyles/index.native.ts
index 9e1398b8176f..3104b6878b2a 100644
--- a/src/styles/containerComposeStyles/index.native.ts
+++ b/src/styles/containerComposeStyles/index.native.ts
@@ -1,6 +1,5 @@
-import styles from '@styles/styles';
 import ContainerComposeStyles from './types';
 
-const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing];
+const containerComposeStyles: ContainerComposeStyles = (styles) => [styles.textInputComposeSpacing];
 
 export default containerComposeStyles;
diff --git a/src/styles/containerComposeStyles/index.ts b/src/styles/containerComposeStyles/index.ts
index 0e40adda571e..c6161fd2d9df 100644
--- a/src/styles/containerComposeStyles/index.ts
+++ b/src/styles/containerComposeStyles/index.ts
@@ -1,7 +1,6 @@
-import styles from '@styles/styles';
 import ContainerComposeStyles from './types';
 
 // We need to set paddingVertical = 0 on web to avoid displaying a normal pointer on some parts of compose box when not in focus
-const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing, {paddingVertical: 0}];
+const containerComposeStyles: ContainerComposeStyles = (styles) => [styles.textInputComposeSpacing, {paddingVertical: 0}];
 
 export default containerComposeStyles;
diff --git a/src/styles/containerComposeStyles/types.ts b/src/styles/containerComposeStyles/types.ts
index 278039691b8a..0b2305f52b56 100644
--- a/src/styles/containerComposeStyles/types.ts
+++ b/src/styles/containerComposeStyles/types.ts
@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import themeStyles from '@styles/styles';
 
-type ContainerComposeStyles = ViewStyle[];
+type ContainerComposeStyles = (styles: typeof themeStyles) => ViewStyle[];
 
 export default ContainerComposeStyles;
diff --git a/src/styles/getContextMenuItemStyles/index.native.ts b/src/styles/getContextMenuItemStyles/index.native.ts
index 798e64fb348c..c8c1a828a0f3 100644
--- a/src/styles/getContextMenuItemStyles/index.native.ts
+++ b/src/styles/getContextMenuItemStyles/index.native.ts
@@ -1,6 +1,5 @@
-import styles from '@styles/styles';
 import GetContextMenuItemStyle from './types';
 
-const getContextMenuItemStyle: GetContextMenuItemStyle = () => [styles.popoverMenuItem];
+const getContextMenuItemStyles: GetContextMenuItemStyle = (styles) => [styles.popoverMenuItem];
 
-export default getContextMenuItemStyle;
+export default getContextMenuItemStyles;
diff --git a/src/styles/getContextMenuItemStyles/index.ts b/src/styles/getContextMenuItemStyles/index.ts
index 3f5a8049d31d..42635033a244 100644
--- a/src/styles/getContextMenuItemStyles/index.ts
+++ b/src/styles/getContextMenuItemStyles/index.ts
@@ -1,12 +1,11 @@
-import styles from '@styles/styles';
 import variables from '@styles/variables';
 import GetContextMenuItemStyle from './types';
 
-const GetContextMenuItemStyles: GetContextMenuItemStyle = (windowWidth) => {
+const getContextMenuItemStyles: GetContextMenuItemStyle = (styles, windowWidth) => {
     if (windowWidth && windowWidth > variables.mobileResponsiveWidthBreakpoint) {
         return [styles.popoverMenuItem, styles.contextMenuItemPopoverMaxWidth];
     }
     return [styles.popoverMenuItem];
 };
 
-export default GetContextMenuItemStyles;
+export default getContextMenuItemStyles;
diff --git a/src/styles/getContextMenuItemStyles/types.ts b/src/styles/getContextMenuItemStyles/types.ts
index 102f63575bd9..6a101fdae413 100644
--- a/src/styles/getContextMenuItemStyles/types.ts
+++ b/src/styles/getContextMenuItemStyles/types.ts
@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import {ThemeStyles} from '@styles/styles';
 
-type GetContextMenuItemStyle = (windowWidth?: number) => ViewStyle[];
+type GetContextMenuItemStyle = (themeStyles: ThemeStyles, windowWidth?: number) => ViewStyle[];
 
 export default GetContextMenuItemStyle;
diff --git a/src/styles/getModalStyles.ts b/src/styles/getModalStyles.ts
index c250bdf9498d..1c28de3bb5e2 100644
--- a/src/styles/getModalStyles.ts
+++ b/src/styles/getModalStyles.ts
@@ -2,11 +2,11 @@ import {ViewStyle} from 'react-native';
 import {ModalProps} from 'react-native-modal';
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
-import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeStyles} from './styles';
+import {ThemeColors} from './themes/types';
 import variables from './variables';
 
-function getCenteredModalStyles(windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
+function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmallScreenWidth: boolean, isFullScreenWhenSmall = false): ViewStyle {
     const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall);
 
     return {
@@ -39,6 +39,8 @@ type GetModalStyles = {
 export default function getModalStyles(
     type: ModalType | undefined,
     windowDimensions: WindowDimensions,
+    theme: ThemeColors,
+    styles: ThemeStyles,
     popoverAnchorPosition: ViewStyle = {},
     innerContainerStyle: ViewStyle = {},
     outerStyle: ViewStyle = {},
@@ -101,7 +103,7 @@ export default function getModalStyles(
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth),
+                ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth),
             };
 
             // Allow this modal to be dismissed with a swipe down or swipe right
@@ -128,7 +130,7 @@ export default function getModalStyles(
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth, true),
+                ...getCenteredModalStyles(styles, windowWidth, isSmallScreenWidth, true),
             };
             swipeDirection = undefined;
             animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';
@@ -196,7 +198,7 @@ export default function getModalStyles(
             modalContainerStyle = {
                 borderRadius: 12,
                 borderWidth: 1,
-                borderColor: themeColors.border,
+                borderColor: theme.border,
                 justifyContent: 'center',
                 overflow: 'hidden',
                 boxShadow: variables.popoverMenuShadow,
diff --git a/src/styles/getReportActionContextMenuStyles.ts b/src/styles/getReportActionContextMenuStyles.ts
index cd3843169a43..781d0cc11549 100644
--- a/src/styles/getReportActionContextMenuStyles.ts
+++ b/src/styles/getReportActionContextMenuStyles.ts
@@ -1,42 +1,40 @@
 import {ViewStyle} from 'react-native';
-import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeStyles} from './styles';
+import {ThemeColors} from './themes/types';
 import variables from './variables';
 
-const defaultWrapperStyle: ViewStyle = {
-    backgroundColor: themeColors.componentBG,
-};
+const getDefaultWrapperStyle = (theme: ThemeColors): ViewStyle => ({
+    backgroundColor: theme.componentBG,
+});
 
-const miniWrapperStyle: ViewStyle[] = [
+const getMiniWrapperStyle = (theme: ThemeColors, styles: ThemeStyles): ViewStyle[] => [
     styles.flexRow,
-    defaultWrapperStyle,
+    getDefaultWrapperStyle(theme),
     {
         borderRadius: variables.buttonBorderRadius,
         borderWidth: 1,
-        borderColor: themeColors.border,
+        borderColor: theme.border,
         // In Safari, when welcome messages use a code block (triple backticks), they would overlap the context menu below when there is no scrollbar without the transform style.
         // NOTE: asserting "transform" to a valid type, because it isn't possible to augment "transform".
         transform: 'translateZ(0)' as unknown as ViewStyle['transform'],
     },
 ];
 
-const bigWrapperStyle: ViewStyle[] = [styles.flexColumn, defaultWrapperStyle];
-
 /**
  * Generate the wrapper styles for the ReportActionContextMenu.
  *
  * @param isMini
  * @param isSmallScreenWidth
+ * @param theme
  */
-function getReportActionContextMenuStyles(isMini: boolean, isSmallScreenWidth: boolean): ViewStyle[] {
+function getReportActionContextMenuStyles(styles: ThemeStyles, isMini: boolean, isSmallScreenWidth: boolean, theme: ThemeColors): ViewStyle[] {
     if (isMini) {
-        return miniWrapperStyle;
+        return getMiniWrapperStyle(theme, styles);
     }
 
-    // TODO: Remove this "eslint-disable-next" once the theme switching migration is done and styles are fully typed (GH Issue: https://github.com/Expensify/App/issues/27337)
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return [
-        ...bigWrapperStyle,
+        styles.flexColumn,
+        getDefaultWrapperStyle(theme),
 
         // Small screens use a bottom-docked modal that already has vertical padding.
         isSmallScreenWidth ? {} : styles.pv3,
diff --git a/src/styles/getTooltipStyles.ts b/src/styles/getTooltipStyles.ts
index 5c90027e10fd..c47659c4f80c 100644
--- a/src/styles/getTooltipStyles.ts
+++ b/src/styles/getTooltipStyles.ts
@@ -1,8 +1,8 @@
 import {TextStyle, View, ViewStyle} from 'react-native';
 import fontFamily from './fontFamily';
 import roundToNearestMultipleOfFour from './roundToNearestMultipleOfFour';
-import styles from './styles';
-import themeColors from './themes/default';
+import {ThemeStyles} from './styles';
+import {ThemeColors} from './themes/types';
 import positioning from './utilities/positioning';
 import spacing from './utilities/spacing';
 import variables from './variables';
@@ -101,6 +101,23 @@ type TooltipStyles = {
     pointerStyle: ViewStyle;
 };
 
+type TooltipParams = {
+    tooltip: View | HTMLDivElement;
+    currentSize: number;
+    windowWidth: number;
+    xOffset: number;
+    yOffset: number;
+    tooltipTargetWidth: number;
+    tooltipTargetHeight: number;
+    maxWidth: number;
+    tooltipContentWidth: number;
+    tooltipWrapperHeight: number;
+    theme: ThemeColors;
+    themeStyles: ThemeStyles;
+    manualShiftHorizontal?: number;
+    manualShiftVertical?: number;
+};
+
 /**
  * Generate styles for the tooltip component.
  *
@@ -122,20 +139,22 @@ type TooltipStyles = {
  * @param [manualShiftVertical] - Any additional amount to manually shift the tooltip up or down.
  *                                       A positive value shifts it down, and a negative value shifts it up.
  */
-export default function getTooltipStyles(
-    tooltip: View | HTMLDivElement,
-    currentSize: number,
-    windowWidth: number,
-    xOffset: number,
-    yOffset: number,
-    tooltipTargetWidth: number,
-    tooltipTargetHeight: number,
-    maxWidth: number,
-    tooltipContentWidth: number,
-    tooltipWrapperHeight: number,
+export default function getTooltipStyles({
+    tooltip,
+    currentSize,
+    windowWidth,
+    xOffset,
+    yOffset,
+    tooltipTargetWidth,
+    tooltipTargetHeight,
+    maxWidth,
+    tooltipContentWidth,
+    tooltipWrapperHeight,
+    theme,
+    themeStyles,
     manualShiftHorizontal = 0,
     manualShiftVertical = 0,
-): TooltipStyles {
+}: TooltipParams): TooltipStyles {
     const tooltipVerticalPadding = spacing.pv1;
 
     // We calculate tooltip width based on the tooltip's content width
@@ -226,7 +245,7 @@ export default function getTooltipStyles(
         //      at the center of the hovered component.
         pointerWrapperLeft = horizontalShiftPointer + (tooltipWidth / 2 - POINTER_WIDTH / 2);
 
-        pointerAdditionalStyle = shouldShowBelow ? styles.flipUpsideDown : {};
+        pointerAdditionalStyle = shouldShowBelow ? themeStyles.flipUpsideDown : {};
     }
 
     return {
@@ -238,7 +257,7 @@ export default function getTooltipStyles(
         },
         rootWrapperStyle: {
             ...positioning.pFixed,
-            backgroundColor: themeColors.heading,
+            backgroundColor: theme.heading,
             borderRadius: variables.componentBorderRadiusSmall,
             ...tooltipVerticalPadding,
             ...spacing.ph2,
@@ -249,11 +268,11 @@ export default function getTooltipStyles(
             left: rootWrapperLeft,
 
             // We are adding this to prevent the tooltip text from being selected and copied on CTRL + A.
-            ...styles.userSelectNone,
-            ...styles.pointerEventsNone,
+            ...themeStyles.userSelectNone,
+            ...themeStyles.pointerEventsNone,
         },
         textStyle: {
-            color: themeColors.textReversed,
+            color: theme.textReversed,
             fontFamily: fontFamily.EXP_NEUE,
             fontSize: variables.fontSizeSmall,
             overflow: 'hidden',
@@ -268,14 +287,14 @@ export default function getTooltipStyles(
         pointerStyle: {
             width: 0,
             height: 0,
-            backgroundColor: themeColors.transparent,
+            backgroundColor: theme.transparent,
             borderStyle: 'solid',
             borderLeftWidth: POINTER_WIDTH / 2,
             borderRightWidth: POINTER_WIDTH / 2,
             borderTopWidth: POINTER_HEIGHT,
-            borderLeftColor: themeColors.transparent,
-            borderRightColor: themeColors.transparent,
-            borderTopColor: themeColors.heading,
+            borderLeftColor: theme.transparent,
+            borderRightColor: theme.transparent,
+            borderTopColor: theme.heading,
             ...pointerAdditionalStyle,
         },
     };
diff --git a/src/styles/illustrations/ThemeIllustrationsContext.ts b/src/styles/illustrations/ThemeIllustrationsContext.ts
new file mode 100644
index 000000000000..e4956e6c0479
--- /dev/null
+++ b/src/styles/illustrations/ThemeIllustrationsContext.ts
@@ -0,0 +1,7 @@
+import React from 'react';
+import DarkIllustrations from './dark';
+import {Illustrations} from './types';
+
+const ThemeIllustrationsContext = React.createContext<Illustrations>(DarkIllustrations);
+
+export default ThemeIllustrationsContext;
diff --git a/src/styles/illustrations/ThemeIllustrationsProvider.tsx b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
new file mode 100644
index 000000000000..423e0c1866b1
--- /dev/null
+++ b/src/styles/illustrations/ThemeIllustrationsProvider.tsx
@@ -0,0 +1,21 @@
+import React, {useMemo} from 'react';
+import useThemePreference from '@styles/themes/useThemePreference';
+import DarkIllustrations from './dark';
+import LightIllustrations from './light';
+import ThemeIllustrationsContext from './ThemeIllustrationsContext';
+
+type ThemeIllustrationsProviderProps = {
+    children: React.ReactNode;
+};
+
+function ThemeIllustrationsProvider({children}: ThemeIllustrationsProviderProps) {
+    const themePreference = useThemePreference();
+
+    const illustrations = useMemo(() => (themePreference === 'dark' ? DarkIllustrations : LightIllustrations), [themePreference]);
+
+    return <ThemeIllustrationsContext.Provider value={illustrations}>{children}</ThemeIllustrationsContext.Provider>;
+}
+
+ThemeIllustrationsProvider.displayName = 'ThemeIllustrationsProvider';
+
+export default ThemeIllustrationsProvider;
diff --git a/src/styles/illustrations/dark.ts b/src/styles/illustrations/dark.ts
new file mode 100644
index 000000000000..6bee85cdedbd
--- /dev/null
+++ b/src/styles/illustrations/dark.ts
@@ -0,0 +1,8 @@
+import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-dark.png';
+import {Illustrations} from './types';
+
+const illustrations = {
+    EmptyStateBackgroundImage,
+} satisfies Illustrations;
+
+export default illustrations;
diff --git a/src/styles/illustrations/light.ts b/src/styles/illustrations/light.ts
new file mode 100644
index 000000000000..376a6d332f79
--- /dev/null
+++ b/src/styles/illustrations/light.ts
@@ -0,0 +1,8 @@
+import EmptyStateBackgroundImage from '@assets/images/empty-state_background-fade-light.png';
+import {Illustrations} from './types';
+
+const illustrations = {
+    EmptyStateBackgroundImage,
+} satisfies Illustrations;
+
+export default illustrations;
diff --git a/src/styles/illustrations/types.ts b/src/styles/illustrations/types.ts
new file mode 100644
index 000000000000..aebf01428994
--- /dev/null
+++ b/src/styles/illustrations/types.ts
@@ -0,0 +1,8 @@
+import {ImageSourcePropType} from 'react-native';
+
+type Illustrations = {
+    EmptyStateBackgroundImage: ImageSourcePropType;
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export {type Illustrations};
diff --git a/src/styles/illustrations/useThemeIllustrations.ts b/src/styles/illustrations/useThemeIllustrations.ts
new file mode 100644
index 000000000000..32f986dc655a
--- /dev/null
+++ b/src/styles/illustrations/useThemeIllustrations.ts
@@ -0,0 +1,14 @@
+import {useContext} from 'react';
+import ThemeIllustrationsContext from './ThemeIllustrationsContext';
+
+function useThemeIllustrations() {
+    const illustrations = useContext(ThemeIllustrationsContext);
+
+    if (!illustrations) {
+        throw new Error('ThemeIllustrationsContext was null! Are you sure that you wrapped the component under a <ThemeIllustrationsProvider>?');
+    }
+
+    return illustrations;
+}
+
+export default useThemeIllustrations;
diff --git a/src/styles/optionRowStyles/index.native.ts b/src/styles/optionRowStyles/index.native.ts
index 6198def8219a..334017ba3374 100644
--- a/src/styles/optionRowStyles/index.native.ts
+++ b/src/styles/optionRowStyles/index.native.ts
@@ -1,4 +1,3 @@
-import styles from '@styles/styles';
 import CompactContentContainerStyles from './types';
 
 /**
@@ -7,7 +6,7 @@ import CompactContentContainerStyles from './types';
  *  keeping compactContentContainerStyles as it is.
  *  https://github.com/Expensify/App/issues/14148
  */
-const compactContentContainerStyles: CompactContentContainerStyles = styles.alignItemsCenter;
+const compactContentContainerStyles: CompactContentContainerStyles = (styles) => styles.alignItemsCenter;
 
 export {
     // eslint-disable-next-line import/prefer-default-export
diff --git a/src/styles/optionRowStyles/index.ts b/src/styles/optionRowStyles/index.ts
index d0351be24553..ce8f542a13ca 100644
--- a/src/styles/optionRowStyles/index.ts
+++ b/src/styles/optionRowStyles/index.ts
@@ -1,7 +1,6 @@
-import styles from '@styles/styles';
 import CompactContentContainerStyles from './types';
 
-const compactContentContainerStyles: CompactContentContainerStyles = styles.alignItemsBaseline;
+const compactContentContainerStyles: CompactContentContainerStyles = (styles) => styles.alignItemsBaseline;
 
 export {
     // eslint-disable-next-line import/prefer-default-export
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts
index fcce41f6bc28..68eb91975f8e 100644
--- a/src/styles/optionRowStyles/types.ts
+++ b/src/styles/optionRowStyles/types.ts
@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import {ThemeStyles} from '@styles/styles';
 
-type CompactContentContainerStyles = ViewStyle;
+type CompactContentContainerStyles = (themeStyles: ThemeStyles) => ViewStyle;
 
 export default CompactContentContainerStyles;
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index c1b78a224eb3..983f1ba82caa 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -40,6 +40,9 @@ import wordBreak from './utilities/wordBreak';
 import writingDirection from './utilities/writingDirection';
 import variables from './variables';
 
+type ColorScheme = (typeof CONST.COLOR_SCHEME)[keyof typeof CONST.COLOR_SCHEME];
+type StatusBarStyle = (typeof CONST.STATUS_BAR_STYLE)[keyof typeof CONST.STATUS_BAR_STYLE];
+
 type AnchorPosition = {
     horizontal: number;
     vertical: number;
@@ -1013,7 +1016,7 @@ const styles = (theme: ThemeColors) =>
             flexDirection: 'row',
         },
 
-        textInputDesktop: addOutlineWidth({}, 0),
+        textInputDesktop: addOutlineWidth({}, theme, 0),
 
         textInputIconContainer: {
             paddingHorizontal: 11,
@@ -1130,7 +1133,7 @@ const styles = (theme: ThemeColors) =>
             color: theme.icon,
         },
 
-        noOutline: addOutlineWidth({}, 0),
+        noOutline: addOutlineWidth({}, theme, 0),
 
         textLabelSupporting: {
             fontFamily: fontFamily.EXP_NEUE,
@@ -1796,6 +1799,7 @@ const styles = (theme: ThemeColors) =>
                 alignSelf: 'center',
                 verticalAlign: 'middle',
             },
+            theme,
             0,
         ),
 
@@ -1806,6 +1810,11 @@ const styles = (theme: ThemeColors) =>
             verticalAlign: 'top',
         },
 
+        textInputCollapseCompose: {
+            maxHeight: '100%',
+            flex: 4,
+        },
+
         // composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669
         textInputComposeSpacing: {
             paddingVertical: 5,
@@ -2617,6 +2626,7 @@ const styles = (theme: ThemeColors) =>
                 padding: 0,
                 lineHeight: undefined,
             },
+            theme,
             0,
         ),
 
@@ -3979,10 +3989,14 @@ const styles = (theme: ThemeColors) =>
         singleOptionSelectorCircle: {
             borderColor: theme.icon,
         },
+
+        colorSchemeStyle: (colorScheme: ColorScheme) => ({colorScheme}),
     } satisfies Styles);
 
+type ThemeStyles = ReturnType<typeof styles>;
+
 const stylesGenerator = styles;
 const defaultStyles = styles(defaultTheme);
 
 export default defaultStyles;
-export {stylesGenerator, type Styles};
+export {stylesGenerator, type Styles, type ThemeStyles, type StatusBarStyle, type ColorScheme};
diff --git a/src/styles/themes/ThemeProvider.tsx b/src/styles/themes/ThemeProvider.tsx
index 50bfb3b045f4..20f97025c36a 100644
--- a/src/styles/themes/ThemeProvider.tsx
+++ b/src/styles/themes/ThemeProvider.tsx
@@ -1,23 +1,26 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
-import CONST from '@src/CONST';
-import darkTheme from './default';
-import lightTheme from './light';
 import ThemeContext from './ThemeContext';
-import useThemePreference from './useThemePreference';
+import Themes from './Themes';
+import {ThemePreferenceWithoutSystem} from './types';
+import useThemePreferenceWithStaticOverride from './useThemePreferenceWithStaticOverride';
 
 const propTypes = {
     /** Rendered child component */
     children: PropTypes.node.isRequired,
 };
 
-function ThemeProvider(props: React.PropsWithChildren) {
-    const themePreference = useThemePreference();
+type ThemeProviderProps = React.PropsWithChildren & {
+    theme?: ThemePreferenceWithoutSystem;
+};
+
+function ThemeProvider({children, theme: staticThemePreference}: ThemeProviderProps) {
+    const themePreference = useThemePreferenceWithStaticOverride(staticThemePreference);
 
-    const theme = useMemo(() => (themePreference === CONST.THEME.LIGHT ? lightTheme : darkTheme), [themePreference]);
+    const theme = useMemo(() => Themes[themePreference], [themePreference]);
 
-    return <ThemeContext.Provider value={theme}>{props.children}</ThemeContext.Provider>;
+    return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
 }
 
 ThemeProvider.propTypes = propTypes;
diff --git a/src/styles/themes/Themes.ts b/src/styles/themes/Themes.ts
new file mode 100644
index 000000000000..a87407790502
--- /dev/null
+++ b/src/styles/themes/Themes.ts
@@ -0,0 +1,11 @@
+import CONST from '@src/CONST';
+import darkTheme from './default';
+import lightTheme from './light';
+import {ThemeColors, ThemePreferenceWithoutSystem} from './types';
+
+const Themes = {
+    [CONST.THEME.LIGHT]: lightTheme,
+    [CONST.THEME.DARK]: darkTheme,
+} satisfies Record<ThemePreferenceWithoutSystem, ThemeColors>;
+
+export default Themes;
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 8dd76a4776a4..519e818054e0 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -1,4 +1,5 @@
 import colors from '@styles/colors';
+import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
 import {ThemeColors} from './types';
 
@@ -89,16 +90,47 @@ const darkTheme = {
     // Note that it needs to be a screen name, not a route url.
     // The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
     // The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
-    PAGE_BACKGROUND_COLORS: {
-        [SCREENS.HOME]: colors.darkHighlightBackground,
-        [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
-        [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
-        [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-        [SCREENS.SETTINGS.WALLET]: colors.darkAppBackground,
-        [SCREENS.SETTINGS.SECURITY]: colors.ice500,
-        [SCREENS.SETTINGS.STATUS]: colors.green700,
-        [SCREENS.SETTINGS.ROOT]: colors.darkHighlightBackground,
+    PAGE_THEMES: {
+        [SCREENS.HOME]: {
+            backgroundColor: colors.darkHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.REPORT]: {
+            backgroundColor: colors.darkAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SAVE_THE_WORLD.ROOT]: {
+            backgroundColor: colors.tangerine800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.PREFERENCES]: {
+            backgroundColor: colors.blue500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WORKSPACES]: {
+            backgroundColor: colors.pink800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WALLET]: {
+            backgroundColor: colors.darkAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.SECURITY]: {
+            backgroundColor: colors.ice500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.SETTINGS.STATUS]: {
+            backgroundColor: colors.green700,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.ROOT]: {
+            backgroundColor: colors.darkHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
     },
+
+    statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+    colorScheme: CONST.COLOR_SCHEME.DARK,
 } satisfies ThemeColors;
 
 export default darkTheme;
diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts
index cbaadcf196ba..2f6eda2f70dc 100644
--- a/src/styles/themes/light.ts
+++ b/src/styles/themes/light.ts
@@ -1,4 +1,5 @@
 import colors from '@styles/colors';
+import CONST from '@src/CONST';
 import SCREENS from '@src/SCREENS';
 import {ThemeColors} from './types';
 
@@ -89,16 +90,47 @@ const lightTheme = {
     // Note that it needs to be a screen name, not a route url.
     // The route urls from ROUTES.ts are only used for deep linking and configuring URLs on web.
     // The screen name (see SCREENS.ts) is the name of the screen as far as react-navigation is concerned, and the linkingConfig maps screen names to URLs
-    PAGE_BACKGROUND_COLORS: {
-        [SCREENS.HOME]: colors.lightHighlightBackground,
-        [SCREENS.SAVE_THE_WORLD.ROOT]: colors.tangerine800,
-        [SCREENS.SETTINGS.PREFERENCES]: colors.blue500,
-        [SCREENS.SETTINGS.WORKSPACES]: colors.pink800,
-        [SCREENS.SETTINGS.WALLET]: colors.darkAppBackground,
-        [SCREENS.SETTINGS.SECURITY]: colors.ice500,
-        [SCREENS.SETTINGS.STATUS]: colors.green700,
-        [SCREENS.SETTINGS.ROOT]: colors.lightHighlightBackground,
+    PAGE_THEMES: {
+        [SCREENS.HOME]: {
+            backgroundColor: colors.lightHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.REPORT]: {
+            backgroundColor: colors.lightAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.SAVE_THE_WORLD.ROOT]: {
+            backgroundColor: colors.tangerine800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.PREFERENCES]: {
+            backgroundColor: colors.blue500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WORKSPACES]: {
+            backgroundColor: colors.pink800,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.WALLET]: {
+            backgroundColor: colors.darkAppBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.SECURITY]: {
+            backgroundColor: colors.ice500,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
+        [SCREENS.SETTINGS.STATUS]: {
+            backgroundColor: colors.green700,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.LIGHT_CONTENT,
+        },
+        [SCREENS.SETTINGS.ROOT]: {
+            backgroundColor: colors.lightHighlightBackground,
+            statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+        },
     },
+
+    statusBarStyle: CONST.STATUS_BAR_STYLE.DARK_CONTENT,
+    colorScheme: CONST.COLOR_SCHEME.LIGHT,
 } satisfies ThemeColors;
 
 export default lightTheme;
diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts
index 4064dd289650..c674b6057d0f 100644
--- a/src/styles/themes/types.ts
+++ b/src/styles/themes/types.ts
@@ -1,5 +1,11 @@
+import {type ColorScheme, type StatusBarStyle} from '@styles/styles';
+import CONST from '@src/CONST';
+
 type Color = string;
 
+type ThemePreference = (typeof CONST.THEME)[keyof typeof CONST.THEME];
+type ThemePreferenceWithoutSystem = Exclude<ThemePreference, 'system'>;
+
 type ThemeColors = {
     // Figma keys
     appBG: Color;
@@ -83,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 ThemeColors, type Color};
+export {type ThemePreference, type ThemePreferenceWithoutSystem, type ThemeColors, type Color};
diff --git a/src/styles/themes/useThemePreference.ts b/src/styles/themes/useThemePreference.ts
index ac6ac02933c7..ac87e2488b31 100644
--- a/src/styles/themes/useThemePreference.ts
+++ b/src/styles/themes/useThemePreference.ts
@@ -2,11 +2,10 @@ import {useContext, useEffect, useState} from 'react';
 import {Appearance, ColorSchemeName} from 'react-native';
 import {PreferredThemeContext} from '@components/OnyxProvider';
 import CONST from '@src/CONST';
-
-type ThemePreference = typeof CONST.THEME.LIGHT | typeof CONST.THEME.DARK;
+import {ThemePreferenceWithoutSystem} from './types';
 
 function useThemePreference() {
-    const [themePreference, setThemePreference] = useState<ThemePreference>(CONST.THEME.DEFAULT);
+    const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.DEFAULT);
     const [systemTheme, setSystemTheme] = useState<ColorSchemeName>();
     const preferredThemeFromStorage = useContext(PreferredThemeContext);
 
diff --git a/src/styles/themes/useThemePreferenceWithStaticOverride.ts b/src/styles/themes/useThemePreferenceWithStaticOverride.ts
new file mode 100644
index 000000000000..b447740a0de1
--- /dev/null
+++ b/src/styles/themes/useThemePreferenceWithStaticOverride.ts
@@ -0,0 +1,14 @@
+import {ThemePreferenceWithoutSystem} from './types';
+import useThemePreference from './useThemePreference';
+
+const useThemePreferenceWithStaticOverride = (staticThemePreference: ThemePreferenceWithoutSystem | undefined) => {
+    const dynamicThemePreference = useThemePreference();
+
+    // If the "theme" prop is provided, we'll want to use a hardcoded/static theme instead of the currently selected dynamic theme
+    // This is used for example on the "SignInPage", because it should always display in dark mode.
+    const themePreference = staticThemePreference ?? dynamicThemePreference;
+
+    return themePreference;
+};
+
+export default useThemePreferenceWithStaticOverride;
diff --git a/src/styles/useThemeStyles.ts b/src/styles/useThemeStyles.ts
index 69ba43692f49..06a4f7f5d626 100644
--- a/src/styles/useThemeStyles.ts
+++ b/src/styles/useThemeStyles.ts
@@ -8,8 +8,6 @@ function useThemeStyles() {
         throw new Error('ThemeStylesContext was null! Are you sure that you wrapped the component under a <ThemeStylesProvider>?');
     }
 
-    // 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 themeStyles;
 }
 
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/modules/react-navigation.d.ts b/src/types/modules/react-navigation.d.ts
new file mode 100644
index 000000000000..1ac35c937116
--- /dev/null
+++ b/src/types/modules/react-navigation.d.ts
@@ -0,0 +1,8 @@
+import {RootStackParamList} from '@libs/Navigation/types';
+
+declare global {
+    namespace ReactNavigation {
+        // eslint-disable-next-line
+        interface RootParamList extends RootStackParamList {}
+    }
+}
diff --git a/src/types/onyx/AccountData.ts b/src/types/onyx/AccountData.ts
index 79484e7886af..601e82cde836 100644
--- a/src/types/onyx/AccountData.ts
+++ b/src/types/onyx/AccountData.ts
@@ -1,10 +1,11 @@
+import {BankName} from './Bank';
 import * as OnyxCommon from './OnyxCommon';
 
 type AdditionalData = {
     isP2PDebitCard?: boolean;
     beneficialOwners?: string[];
     currency?: string;
-    bankName?: string;
+    bankName?: BankName;
     fieldsType?: string;
     country?: string;
 };
diff --git a/src/types/onyx/Bank.ts b/src/types/onyx/Bank.ts
new file mode 100644
index 000000000000..b6312e039079
--- /dev/null
+++ b/src/types/onyx/Bank.ts
@@ -0,0 +1,18 @@
+import {CSSProperties} from 'react';
+import {ViewStyle} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+
+type BankIcon = {
+    icon: React.FC<SvgProps>;
+    iconSize?: number;
+    iconHeight?: number;
+    iconWidth?: number;
+    iconStyles?: Array<ViewStyle | CSSProperties>;
+};
+
+type BankName = ValueOf<typeof CONST.BANK_NAMES>;
+type BankNameKey = keyof typeof CONST.BANK_NAMES;
+
+export type {BankIcon, BankName, BankNameKey};
diff --git a/src/types/onyx/BankAccount.ts b/src/types/onyx/BankAccount.ts
index 2b2bee7df6b0..4dd46c82f800 100644
--- a/src/types/onyx/BankAccount.ts
+++ b/src/types/onyx/BankAccount.ts
@@ -2,6 +2,15 @@ import CONST from '@src/CONST';
 import AccountData from './AccountData';
 import * as OnyxCommon from './OnyxCommon';
 
+type AdditionalData = {
+    isP2PDebitCard?: boolean;
+    beneficialOwners?: string[];
+    currency?: string;
+    bankName?: string;
+    fieldsType?: string;
+    country?: string;
+};
+
 type BankAccount = {
     /** The bank account type */
     accountType?: typeof CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT;
@@ -11,6 +20,12 @@ type BankAccount = {
 
     isDefault?: boolean;
 
+    /* Determines if the bank account is a savings account */
+    isSavings?: boolean;
+
+    /** Date when the 3 micro amounts for validation were supposed to reach the bank account. */
+    validateCodeExpectedDate?: string;
+
     /** string like 'bankAccount-{<bankAccountID>}' where <bankAccountID> is the bankAccountID */
     key?: string;
 
@@ -31,4 +46,4 @@ type BankAccount = {
 };
 
 export default BankAccount;
-export type {AccountData};
+export type {AccountData, AdditionalData};
diff --git a/src/types/onyx/Fund.ts b/src/types/onyx/Fund.ts
index 4e6cbc695a8d..82c15c5089d7 100644
--- a/src/types/onyx/Fund.ts
+++ b/src/types/onyx/Fund.ts
@@ -1,4 +1,5 @@
 import CONST from '@src/CONST';
+import {BankName} from './Bank';
 import * as OnyxCommon from './OnyxCommon';
 
 type AdditionalData = {
@@ -21,7 +22,7 @@ type AccountData = {
     created?: string;
     currency?: string;
     fundID?: number;
-    bank?: string;
+    bank?: BankName;
 };
 
 type Fund = {
diff --git a/src/types/onyx/OnyxCommon.ts b/src/types/onyx/OnyxCommon.ts
index e432a6c00c18..956e9ff36b24 100644
--- a/src/types/onyx/OnyxCommon.ts
+++ b/src/types/onyx/OnyxCommon.ts
@@ -23,7 +23,7 @@ type Icon = {
     name: string;
 
     /** Avatar id */
-    id: number | string;
+    id?: number | string;
 
     /** A fallback avatar icon to display when there is an error on loading avatar from remote URL. */
     fallbackIcon?: AvatarSource;
diff --git a/src/types/onyx/OriginalMessage.ts b/src/types/onyx/OriginalMessage.ts
index b5e4b25a6508..f76fbd5ffd7d 100644
--- a/src/types/onyx/OriginalMessage.ts
+++ b/src/types/onyx/OriginalMessage.ts
@@ -3,7 +3,23 @@ import CONST from '@src/CONST';
 import DeepValueOf from '@src/types/utils/DeepValueOf';
 
 type ActionName = DeepValueOf<typeof CONST.REPORT.ACTIONS.TYPE>;
-
+type OriginalMessageActionName =
+    | 'ADDCOMMENT'
+    | 'APPROVED'
+    | 'CHRONOSOOOLIST'
+    | 'CLOSED'
+    | 'CREATED'
+    | 'IOU'
+    | 'MODIFIEDEXPENSE'
+    | 'REIMBURSEMENTQUEUED'
+    | 'RENAMED'
+    | 'REPORTPREVIEW'
+    | 'SUBMITTED'
+    | 'TASKCANCELLED'
+    | 'TASKCOMPLETED'
+    | 'TASKEDITED'
+    | 'TASKREOPENED'
+    | ValueOf<typeof CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG>;
 type OriginalMessageApproved = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.APPROVED;
     originalMessage: unknown;
@@ -15,24 +31,23 @@ type IOUDetails = {
     currency: string;
 };
 
+type IOUMessage = {
+    /** The ID of the iou transaction */
+    IOUTransactionID?: string;
+    IOUReportID?: string;
+    amount: number;
+    comment?: string;
+    currency: string;
+    lastModified?: string;
+    participantAccountIDs?: number[];
+    type: ValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE>;
+    paymentType?: DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>;
+    /** Only exists when we are sending money */
+    IOUDetails?: IOUDetails;
+};
 type OriginalMessageIOU = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.IOU;
-    originalMessage: {
-        /** The ID of the iou transaction */
-        IOUTransactionID?: string;
-
-        IOUReportID?: number;
-
-        /** Only exists when we are sending money */
-        IOUDetails?: IOUDetails;
-
-        amount: number;
-        comment?: string;
-        currency: string;
-        lastModified?: string;
-        participantAccountIDs?: number[];
-        type: ValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE>;
-    };
+    originalMessage: IOUMessage;
 };
 
 type FlagSeverityName = ValueOf<
@@ -67,6 +82,14 @@ type Reaction = {
     users: User[];
 };
 
+type Closed = {
+    policyName: string;
+    reason: ValueOf<typeof CONST.REPORT.ARCHIVE_REASON>;
+    lastModified?: string;
+    newAccountID?: number;
+    oldAccountID?: number;
+};
+
 type OriginalMessageAddComment = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT;
     originalMessage: {
@@ -89,11 +112,7 @@ type OriginalMessageSubmitted = {
 
 type OriginalMessageClosed = {
     actionName: typeof CONST.REPORT.ACTIONS.TYPE.CLOSED;
-    originalMessage: {
-        policyName: string;
-        reason: ValueOf<typeof CONST.REPORT.ARCHIVE_REASON>;
-        lastModified?: string;
-    };
+    originalMessage: Closed;
 };
 
 type OriginalMessageCreated = {
@@ -118,6 +137,11 @@ type ChronosOOOTimestamp = {
     timezone_type: number;
 };
 
+type ChangeLog = {
+    targetAccountIDs?: number[];
+    roomName?: string;
+};
+
 type ChronosOOOEvent = {
     id: string;
     lengthInDays: number;
@@ -146,18 +170,12 @@ type OriginalMessageReportPreview = {
 
 type OriginalMessagePolicyChangeLog = {
     actionName: ValueOf<typeof CONST.REPORT.ACTIONS.TYPE.POLICYCHANGELOG>;
-    originalMessage: {
-        targetAccountIDs?: number[];
-        roomName?: string;
-    };
+    originalMessage: ChangeLog;
 };
 
 type OriginalMessageRoomChangeLog = {
     actionName: ValueOf<typeof CONST.REPORT.ACTIONS.TYPE.ROOMCHANGELOG>;
-    originalMessage: {
-        targetAccountIDs?: number[];
-        roomName?: string;
-    };
+    originalMessage: ChangeLog;
 };
 
 type OriginalMessagePolicyTask = {
@@ -179,6 +197,21 @@ 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: {
+        fromPolicyID: string;
+        toPolicyID: string;
+        newParentReportID: string;
+        movedReportID: string;
+    };
+};
+
 type OriginalMessage =
     | OriginalMessageApproved
     | OriginalMessageIOU
@@ -193,7 +226,9 @@ type OriginalMessage =
     | OriginalMessagePolicyChangeLog
     | OriginalMessagePolicyTask
     | OriginalMessageModifiedExpense
-    | OriginalMessageReimbursementQueued;
+    | OriginalMessageReimbursementQueued
+    | OriginalMessageReimbursementDequeued
+    | OriginalMessageMoved;
 
 export default OriginalMessage;
-export type {ChronosOOOEvent, Decision, Reaction, ActionName};
+export type {ChronosOOOEvent, Decision, Reaction, ActionName, IOUMessage, Closed, OriginalMessageActionName, ChangeLog};
diff --git a/src/types/onyx/PersonalDetails.ts b/src/types/onyx/PersonalDetails.ts
index 51c1601be1e0..af559eafd0a1 100644
--- a/src/types/onyx/PersonalDetails.ts
+++ b/src/types/onyx/PersonalDetails.ts
@@ -1,3 +1,4 @@
+import {AvatarSource} from '@libs/UserUtils';
 import TIMEZONES from '@src/TIMEZONES';
 import * as OnyxCommon from './OnyxCommon';
 
@@ -31,7 +32,7 @@ type PersonalDetails = {
     phoneNumber?: string;
 
     /** Avatar URL of the current user from their personal details */
-    avatar: string;
+    avatar: AvatarSource;
 
     /** Avatar thumbnail URL of the current user from their personal details */
     avatarThumbnail?: string;
@@ -53,6 +54,9 @@ type PersonalDetails = {
     /** Timezone of the current user from their personal details */
     timezone?: Timezone;
 
+    /** Flag for checking if data is from optimistic data */
+    isOptimisticPersonalDetail?: boolean;
+
     /** Whether we are loading the data via the API */
     isLoading?: boolean;
 
diff --git a/src/types/onyx/Report.ts b/src/types/onyx/Report.ts
index 4c37a87436eb..75c79358e510 100644
--- a/src/types/onyx/Report.ts
+++ b/src/types/onyx/Report.ts
@@ -1,6 +1,7 @@
 import {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import * as OnyxCommon from './OnyxCommon';
+import PersonalDetails from './PersonalDetails';
 
 type Report = {
     /** The specific type of chat */
@@ -40,13 +41,13 @@ type Report = {
     lastReadSequenceNumber?: number;
 
     /** The time of the last mention of the report */
-    lastMentionedTime?: string;
+    lastMentionedTime?: string | null;
 
     /** The current user's notification preference for this report */
     notificationPreference?: string | number;
 
     /** The policy name to use */
-    policyName?: string;
+    policyName?: string | null;
 
     /** The policy name to use for an archived report */
     oldPolicyName?: string;
@@ -91,7 +92,7 @@ type Report = {
     type?: string;
 
     /** The report visibility */
-    visibility?: string;
+    visibility?: ValueOf<typeof CONST.REPORT.VISIBILITY>;
 
     /** Report cached total */
     cachedTotal?: string;
@@ -111,10 +112,15 @@ type Report = {
     participantAccountIDs?: number[];
     total?: number;
     currency?: string;
+    parentReportActionIDs?: number[];
+    errorFields?: OnyxCommon.ErrorFields;
 
     /** 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;
 
@@ -132,6 +138,11 @@ type Report = {
 
     /** If the report contains nonreimbursable expenses, send the nonreimbursable total */
     nonReimbursableTotal?: number;
+    isHidden?: boolean;
+    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 2195c4e3ff0b..64e1eb0b7c88 100644
--- a/src/types/onyx/ReportAction.ts
+++ b/src/types/onyx/ReportAction.ts
@@ -1,5 +1,9 @@
+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';
+import {Receipt} from './Transaction';
 
 type Message = {
     /** The type of the action item fragment. Used to render a corresponding component */
@@ -81,26 +85,46 @@ 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[];
 
-    /** Report action child status number */
-    childStatusNum?: number;
+    avatar?: AvatarSource;
 
-    /** Report action child status name */
-    childStateNum?: number;
-
-    avatar?: string;
     automatic?: boolean;
+
     shouldShow?: boolean;
+
+    /** The ID of childReport */
     childReportID?: string;
+
+    /** Name of child report */
     childReportName?: string;
+
+    /** Type of child report  */
     childType?: string;
+
     childOldestFourEmails?: string;
     childOldestFourAccountIDs?: string;
     childCommenterCount?: number;
     childLastVisibleActionCreated?: string;
     childVisibleActionCount?: number;
+    parentReportID?: string;
+    childManagerAccountID?: number;
+
+    /** The status of the child report */
+    childStatusNum?: ValueOf<typeof CONST.REPORT.STATUS>;
+
+    /** Report action child status name */
+    childStateNum?: ValueOf<typeof CONST.REPORT.STATE_NUM>;
+    childLastReceiptTransactionIDs?: string;
+    childLastMoneyRequestComment?: string;
     timestamp?: number;
     reportActionTimestamp?: number;
     childMoneyRequestCount?: number;
+    isFirstItem?: boolean;
+
+    /** Informations about attachments of report action */
+    attachmentInfo?: (File & {source: string; uri: string}) | Record<string, never>;
+
+    /** Receipt tied to report action */
+    receipt?: Receipt;
 
     /** ISO-formatted datetime */
     lastModified?: string;
@@ -112,6 +136,8 @@ type ReportActionBase = {
     errors?: OnyxCommon.Errors;
 
     isAttachment?: boolean;
+    childRecentReceiptTransactionIDs?: Record<string, string>;
+    reportID?: string;
 };
 
 type ReportAction = ReportActionBase & OriginalMessage;
@@ -119,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/Transaction.ts b/src/types/onyx/Transaction.ts
index 295f5a1639e5..a9109cd9fac3 100644
--- a/src/types/onyx/Transaction.ts
+++ b/src/types/onyx/Transaction.ts
@@ -66,7 +66,7 @@ type Transaction = {
     modifiedMerchant?: string;
     modifiedWaypoints?: WaypointCollection;
     pendingAction: OnyxCommon.PendingAction;
-    receipt: Receipt;
+    receipt?: Receipt;
     reportID: string;
     routes?: Routes;
     transactionID: string;
diff --git a/src/types/onyx/UserLocation.ts b/src/types/onyx/UserLocation.ts
new file mode 100644
index 000000000000..b22802bfefb1
--- /dev/null
+++ b/src/types/onyx/UserLocation.ts
@@ -0,0 +1,3 @@
+type UserLocation = Pick<GeolocationCoordinates, 'latitude' | 'longitude'>;
+
+export default UserLocation;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 87cf24d6dec7..e7b9c7661c79 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -43,6 +43,7 @@ import Session from './Session';
 import Task from './Task';
 import Transaction from './Transaction';
 import User from './User';
+import UserLocation from './UserLocation';
 import UserWallet from './UserWallet';
 import WalletAdditionalDetails from './WalletAdditionalDetails';
 import WalletOnfido from './WalletOnfido';
@@ -52,6 +53,7 @@ import WalletTransfer from './WalletTransfer';
 
 export type {
     Account,
+    UserLocation,
     AccountData,
     AddDebitCardForm,
     BankAccount,
diff --git a/src/types/utils/EmptyObject.ts b/src/types/utils/EmptyObject.ts
new file mode 100644
index 000000000000..9b9f3244a5f8
--- /dev/null
+++ b/src/types/utils/EmptyObject.ts
@@ -0,0 +1,15 @@
+import Falsy from './Falsy';
+
+type EmptyObject = Record<string, never>;
+
+// eslint-disable-next-line rulesdir/no-negated-variables
+function isNotEmptyObject<T extends Record<string, unknown> | Falsy>(arg: T | EmptyObject): arg is NonNullable<T> {
+    return Object.keys(arg ?? {}).length > 0;
+}
+
+function isEmptyObject<T>(obj: T): boolean {
+    return Object.keys(obj ?? {}).length === 0;
+}
+
+export {isNotEmptyObject, isEmptyObject};
+export type {EmptyObject};
diff --git a/src/types/utils/Falsy.ts b/src/types/utils/Falsy.ts
new file mode 100644
index 000000000000..c1bd7527a223
--- /dev/null
+++ b/src/types/utils/Falsy.ts
@@ -0,0 +1,3 @@
+type Falsy = undefined | null | false;
+
+export default Falsy;
diff --git a/src/types/utils/viewForwardedRef.ts b/src/types/utils/viewForwardedRef.ts
new file mode 100644
index 000000000000..3bc18495b153
--- /dev/null
+++ b/src/types/utils/viewForwardedRef.ts
@@ -0,0 +1,6 @@
+import {ForwardedRef} from 'react';
+import {View} from 'react-native';
+
+const viewForwardedRef = (ref: ForwardedRef<View | HTMLDivElement>) => ref as ForwardedRef<View>;
+
+export default viewForwardedRef;
diff --git a/tests/e2e/TestSpec.yml b/tests/e2e/TestSpec.yml
index c53010ec02fd..a234ef67b8a6 100644
--- a/tests/e2e/TestSpec.yml
+++ b/tests/e2e/TestSpec.yml
@@ -6,14 +6,16 @@ phases:
       # Install correct version of node
       - export NVM_DIR=$HOME/.nvm
       - . $NVM_DIR/nvm.sh
-      - nvm install 20.9.0
-      - nvm use 20.9.0
+      # Note: Node v16 is the latest supported version of node for AWS Device Farm
+      # using v20 will not work!
+      - nvm install 16
+      - nvm use --delete-prefix 16
 
       # Reverse ports using AWS magic
       - PORT=4723
       - IP_ADDRESS=$(ip -4 addr show eth0 | grep -Po "(?<=inet\s)\d+(\.\d+){3}")
       - reverse_values="{\"ip_address\":\"$IP_ADDRESS\",\"local_port\":\"$PORT\",\"remote_port\":\"$PORT\"}"
-      - "curl -H \"Content-Type: application/json\" -X POST -d \"$reverse_values\" http://localhost:31007/reverse_forward_tcp"
+      - 'curl -H "Content-Type: application/json" -X POST -d "$reverse_values" http://localhost:31007/reverse_forward_tcp'
       - adb reverse tcp:$PORT tcp:$PORT
 
   test:
@@ -23,4 +25,4 @@ phases:
       - node e2e/testRunner.js -- --skipInstallDeps --buildMode "skip" --skipCheckout --mainAppPath app-e2eRelease.apk --deltaAppPath app-e2edeltaRelease.apk
 
 artifacts:
-- $WORKING_DIRECTORY
+  - $WORKING_DIRECTORY
diff --git a/tests/e2e/compare/math.js b/tests/e2e/compare/math.js
index c3edc6ba0495..a7dbe1c95a86 100644
--- a/tests/e2e/compare/math.js
+++ b/tests/e2e/compare/math.js
@@ -31,57 +31,57 @@ const computeZ = (baselineMean, baselineStdev, currentMean, runs) => {
  */
 const computeProbability = (z) => {
     // p 0.005: two sided < 0.01
-    if (z > 2.575_829) {
+    if (z > 2.575829) {
         return 0;
     }
 
     // p 0.010
-    if (z > 2.326_348) {
+    if (z > 2.326348) {
         return 0.01;
     }
 
     // p 0.015
-    if (z > 2.170_091) {
+    if (z > 2.170091) {
         return 0.02;
     }
 
     // p 0.020
-    if (z > 2.053_749) {
+    if (z > 2.053749) {
         return 0.03;
     }
 
     // p 0.025: two sided < 0.05
-    if (z > 1.959_964) {
+    if (z > 1.959964) {
         return 0.04;
     }
 
     // p 0.030
-    if (z > 1.880_793) {
+    if (z > 1.880793) {
         return 0.05;
     }
 
     // p 0.035
-    if (z > 1.811_91) {
+    if (z > 1.81191) {
         return 0.06;
     }
 
     // p 0.040
-    if (z > 1.750_686) {
+    if (z > 1.750686) {
         return 0.07;
     }
 
     // p 0.045
-    if (z > 1.695_397) {
+    if (z > 1.695397) {
         return 0.08;
     }
 
     // p 0.050: two sided < 0.10
-    if (z > 1.644_853) {
+    if (z > 1.644853) {
         return 0.09;
     }
 
     // p 0.100: two sided < 0.20
-    if (z > 1.281_551) {
+    if (z > 1.281551) {
         return 0.1;
     }
 
diff --git a/tests/e2e/compare/output/markdown.js b/tests/e2e/compare/output/markdown.js
index 6dcf5c78eaa8..2015d8de6cc3 100644
--- a/tests/e2e/compare/output/markdown.js
+++ b/tests/e2e/compare/output/markdown.js
@@ -1,6 +1,6 @@
 // From: https://raw.githubusercontent.com/callstack/reassure/main/packages/reassure-compare/src/output/markdown.ts
 
-const fs = require('fs/promises');
+const fs = require('node:fs/promises');
 const path = require('path');
 const _ = require('underscore');
 const markdownTable = require('./markdownTable');
diff --git a/tests/e2e/testRunner.js b/tests/e2e/testRunner.js
index 1e9a9a89caf0..1cedbf1abd76 100644
--- a/tests/e2e/testRunner.js
+++ b/tests/e2e/testRunner.js
@@ -80,8 +80,8 @@ if (args.includes('--config')) {
 }
 
 // Important set app path after correct config file has been set
-let mainAppPath = config.MAIN_APP_PATH;
-let deltaAppPath = config.DELTA_APP_PATH;
+let mainAppPath = args[args.indexOf('--mainAppPath') + 1] || config.MAIN_APP_PATH;
+let deltaAppPath = args[args.indexOf('--deltaAppPath') + 1] || config.DELTA_APP_PATH;
 
 // Create some variables after the correct config file has been loaded
 const OUTPUT_FILE = `${config.OUTPUT_DIR}/${label}.json`;
@@ -205,8 +205,8 @@ const runTests = async () => {
 
     let progressLog = Logger.progressInfo('Installing apps and reversing port');
 
-    await installApp('android', config.MAIN_APP_PACKAGE, defaultConfig.MAIN_APP_PATH);
-    await installApp('android', config.DELTA_APP_PACKAGE, defaultConfig.DELTA_APP_PATH);
+    await installApp('android', config.MAIN_APP_PACKAGE, mainAppPath);
+    await installApp('android', config.DELTA_APP_PACKAGE, deltaAppPath);
     await reversePort();
     progressLog.done();
 
diff --git a/tests/perf-test/ReportActionCompose.perf-test.js b/tests/perf-test/ReportActionCompose.perf-test.js
index 6419d8f895ef..05d2b5a4906a 100644
--- a/tests/perf-test/ReportActionCompose.perf-test.js
+++ b/tests/perf-test/ReportActionCompose.perf-test.js
@@ -22,10 +22,6 @@ jest.mock('react-native-reanimated', () => ({
     useAnimatedRef: jest.fn,
 }));
 
-jest.mock('../../src/libs/Permissions', () => ({
-    canUseTasks: jest.fn(() => true),
-}));
-
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual('@react-navigation/native');
     return {
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 f8a44b54cc39..b901888bba0f 100644
--- a/tests/perf-test/ReportScreen.perf-test.js
+++ b/tests/perf-test/ReportScreen.perf-test.js
@@ -54,7 +54,6 @@ jest.mock('../../src/hooks/useEnvironment', () =>
 );
 
 jest.mock('../../src/libs/Permissions', () => ({
-    canUseTasks: jest.fn(() => true),
     canUseLinkPreviews: jest.fn(() => true),
 }));
 
@@ -125,7 +124,7 @@ function ReportScreenWrapper(args) {
 
 const runs = CONST.PERFORMANCE_TESTS.RUNS;
 
-test.skip('should render ReportScreen with composer interactions', () => {
+test('should render ReportScreen with composer interactions', () => {
     const scenario = async () => {
         // Query for the report list
         await screen.findByTestId('report-actions-list');
@@ -156,7 +155,7 @@ test.skip('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()
@@ -176,7 +175,7 @@ test.skip('should render ReportScreen with composer interactions', () => {
         .then(() => measurePerformance(<ReportScreenWrapper route={mockRoute} />, {scenario, runs}));
 });
 
-test.skip('should press of the report item', () => {
+test('should press of the report item', () => {
     const scenario = async () => {
         // Query for the report list
         await screen.findByTestId('report-actions-list');
@@ -199,7 +198,7 @@ test.skip('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 ae0888c6f0ed..4e564b970832 100644
--- a/tests/unit/CalendarPickerTest.js
+++ b/tests/unit/CalendarPickerTest.js
@@ -1,5 +1,5 @@
 import {fireEvent, render, within} from '@testing-library/react-native';
-import {addYears, subYears} from 'date-fns';
+import {addMonths, addYears, subYears} from 'date-fns';
 import CalendarPicker from '../../src/components/NewDatePicker/CalendarPicker';
 import CONST from '../../src/CONST';
 import DateUtils from '../../src/libs/DateUtils';
@@ -64,7 +64,7 @@ describe('CalendarPicker', () => {
 
         fireEvent.press(getByTestId('next-month-arrow'));
 
-        const nextMonth = new Date().getMonth() + 1;
+        const nextMonth = addMonths(new Date(), 1).getMonth();
         expect(getByText(monthNames[nextMonth])).toBeTruthy();
     });
 
@@ -143,6 +143,19 @@ describe('CalendarPicker', () => {
         expect(getByTestId('next-month-arrow')).toBeDisabled();
     });
 
+    test('should allow navigating to the month of the max date when it has less days than the selected date', () => {
+        const maxDate = new Date('2003-11-27'); // This month has 30 days
+        const value = '2003-10-31';
+        const {getByTestId} = render(
+            <CalendarPicker
+                maxDate={maxDate}
+                value={value}
+            />,
+        );
+
+        expect(getByTestId('next-month-arrow')).not.toBeDisabled();
+    });
+
     test('should open the calendar on a month from max date if it is earlier than current month', () => {
         const onSelectedMock = jest.fn();
         const maxDate = new Date('2011-03-01');
@@ -217,7 +230,7 @@ describe('CalendarPicker', () => {
         expect(getByLabelText('16')).not.toBeDisabled();
     });
 
-    test('should not allow to press max date', () => {
+    test('should allow to press max date', () => {
         const value = '2003-02-17';
         const maxDate = new Date('2003-02-24');
         const {getByLabelText} = render(
diff --git a/tests/unit/MigrationTest.js b/tests/unit/MigrationTest.js
index f212dd75447d..ebffc71e4e0e 100644
--- a/tests/unit/MigrationTest.js
+++ b/tests/unit/MigrationTest.js
@@ -452,6 +452,56 @@ describe('Migrations', () => {
                         },
                     });
                 }));
+
+        it('Should remove any instances of ownerEmail found in a report', () =>
+            Onyx.multiSet({
+                [`${ONYXKEYS.COLLECTION.REPORT}1`]: {
+                    reportID: 1,
+                    ownerEmail: 'fake@test.com',
+                    ownerAccountID: 5,
+                },
+            })
+                .then(PersonalDetailsByAccountID)
+                .then(() => {
+                    expect(LogSpy).toHaveBeenCalledWith('[Migrate Onyx] PersonalDetailsByAccountID migration: removing ownerEmail from report 1');
+                    const connectionID = Onyx.connect({
+                        key: ONYXKEYS.COLLECTION.REPORT,
+                        waitForCollectionCallback: true,
+                        callback: (allReports) => {
+                            Onyx.disconnect(connectionID);
+                            const expectedReport = {
+                                reportID: 1,
+                                ownerAccountID: 5,
+                            };
+                            expect(allReports[`${ONYXKEYS.COLLECTION.REPORT}1`]).toMatchObject(expectedReport);
+                        },
+                    });
+                }));
+
+        it('Should remove any instances of managerEmail found in a report', () =>
+            Onyx.multiSet({
+                [`${ONYXKEYS.COLLECTION.REPORT}1`]: {
+                    reportID: 1,
+                    managerEmail: 'fake@test.com',
+                    managerID: 5,
+                },
+            })
+                .then(PersonalDetailsByAccountID)
+                .then(() => {
+                    expect(LogSpy).toHaveBeenCalledWith('[Migrate Onyx] PersonalDetailsByAccountID migration: removing managerEmail from report 1');
+                    const connectionID = Onyx.connect({
+                        key: ONYXKEYS.COLLECTION.REPORT,
+                        waitForCollectionCallback: true,
+                        callback: (allReports) => {
+                            Onyx.disconnect(connectionID);
+                            const expectedReport = {
+                                reportID: 1,
+                                managerID: 5,
+                            };
+                            expect(allReports[`${ONYXKEYS.COLLECTION.REPORT}1`]).toMatchObject(expectedReport);
+                        },
+                    });
+                }));
     });
 
     describe('CheckForPreviousReportActionID', () => {
diff --git a/tests/unit/ValidationUtilsTest.js b/tests/unit/ValidationUtilsTest.js
index bdc1f11948ae..45de052f714d 100644
--- a/tests/unit/ValidationUtilsTest.js
+++ b/tests/unit/ValidationUtilsTest.js
@@ -313,4 +313,18 @@ describe('ValidationUtils', () => {
             expect(ValidationUtils.isValidAccountRoute('123aaa')).toBe(false);
         });
     });
+
+    describe('ValidatePersonName', () => {
+        test('Valid person name', () => {
+            expect(ValidationUtils.isValidPersonName('test name')).toBe(true);
+            expect(ValidationUtils.isValidPersonName(`X Æ A test`)).toBe(true);
+            expect(ValidationUtils.isValidPersonName(`a hyphenated-name`)).toBe(true);
+        });
+
+        test('Invalid person name', () => {
+            expect(ValidationUtils.isValidPersonName('123 test')).toBe(false);
+            expect(ValidationUtils.isValidPersonName('test #$')).toBe(false);
+            expect(ValidationUtils.isValidPersonName('test123$')).toBe(false);
+        });
+    });
 });
diff --git a/tests/utils/ReportTestUtils.js b/tests/utils/ReportTestUtils.js
index 48e5ebfaa56d..910f2200876b 100644
--- a/tests/utils/ReportTestUtils.js
+++ b/tests/utils/ReportTestUtils.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 
-const actionNames = ['ADDCOMMENT', 'IOU', 'REPORTPREVIEW'];
+const actionNames = ['ADDCOMMENT', 'IOU', 'REPORTPREVIEW', 'CLOSED'];
 
 const getFakeReportAction = (index, actionName) => ({
     actionName,
@@ -47,7 +47,7 @@ const getFakeReportAction = (index, actionName) => ({
 
 const getMockedSortedReportActions = (length = 100) => Array.from({length}, (__, i) => getFakeReportAction(i));
 
-const getMockedReportsMap = (length = 100) => {
+const getMockedReportActionsMap = (length = 100) => {
     const mockReports = Array.from({length}, (__, i) => {
         const reportID = i + 1;
         const actionName = i === 0 ? 'CREATED' : actionNames[i % actionNames.length];
@@ -58,4 +58,4 @@ const getMockedReportsMap = (length = 100) => {
     return _.assign({}, ...mockReports);
 };
 
-export {getFakeReportAction, getMockedSortedReportActions, getMockedReportsMap};
+export {getFakeReportAction, getMockedSortedReportActions, getMockedReportActionsMap};
diff --git a/tests/utils/collections/createCollection.ts b/tests/utils/collections/createCollection.ts
index 565957b7649e..848ef8f81f47 100644
--- a/tests/utils/collections/createCollection.ts
+++ b/tests/utils/collections/createCollection.ts
@@ -1,4 +1,4 @@
-export default function createCollection<T>(createKey: (item: T, index: number) => string, createItem: (index: number) => T, length = 500): Record<string, T> {
+export default function createCollection<T>(createKey: (item: T, index: number) => string | number, createItem: (index: number) => T, length = 500): Record<string, T> {
     const map: Record<string, T> = {};
 
     for (let i = 0; i < length; i++) {
diff --git a/tests/utils/collections/personalDetails.ts b/tests/utils/collections/personalDetails.ts
new file mode 100644
index 000000000000..4fa8586aa08c
--- /dev/null
+++ b/tests/utils/collections/personalDetails.ts
@@ -0,0 +1,12 @@
+import {randAvatar, randEmail, randWord} from '@ngneat/falso';
+import type {PersonalDetails} from '@src/types/onyx';
+
+export default function createPersonalDetails(index: number): PersonalDetails {
+    return {
+        accountID: index,
+        avatar: randAvatar(),
+        displayName: randWord(),
+        lastName: randWord(),
+        login: randEmail(),
+    };
+}
diff --git a/tests/utils/collections/reportActions.ts b/tests/utils/collections/reportActions.ts
new file mode 100644
index 000000000000..abc83eb82abe
--- /dev/null
+++ b/tests/utils/collections/reportActions.ts
@@ -0,0 +1,72 @@
+import {rand, randAggregation, randBoolean, randPastDate, randWord} from '@ngneat/falso';
+import CONST from '@src/CONST';
+import {ReportAction} from '@src/types/onyx';
+
+type ActionType = keyof typeof CONST.REPORT.ACTIONS.TYPE;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const flattenActionNamesValues = (actionNames: any) => {
+    let result = [] as ActionType[];
+    Object.keys(actionNames).forEach((key) => {
+        if (typeof actionNames[key] === 'object') {
+            result = result.concat(flattenActionNamesValues(actionNames[key]));
+        } else {
+            result.push(actionNames[key]);
+        }
+    });
+    return result;
+};
+
+export default function createRandomReportAction(index: number): ReportAction {
+    return {
+        // we need to add any here because of the way we are generating random values
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        actionName: rand(flattenActionNamesValues(CONST.REPORT.ACTIONS.TYPE)) as any,
+        reportActionID: index.toString(),
+        previousReportActionID: index.toString(),
+        actorAccountID: index,
+        person: [
+            {
+                type: randWord(),
+                style: randWord(),
+                text: randWord(),
+            },
+        ],
+        created: randPastDate().toISOString(),
+        message: [
+            {
+                type: randWord(),
+                html: randWord(),
+                style: randWord(),
+                text: randWord(),
+                isEdited: randBoolean(),
+                isDeletedParentAction: randBoolean(),
+                whisperedTo: randAggregation(),
+                reactions: [
+                    {
+                        emoji: randWord(),
+                        users: [
+                            {
+                                accountID: index,
+                                skinTone: index,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        originalMessage: {
+            html: randWord(),
+            type: rand(Object.values(CONST.IOU.REPORT_ACTION_TYPE)),
+        },
+        whisperedToAccountIDs: randAggregation(),
+        avatar: randWord(),
+        automatic: randBoolean(),
+        shouldShow: randBoolean(),
+        lastModified: randPastDate().toISOString(),
+        pendingAction: rand(Object.values(CONST.RED_BRICK_ROAD_PENDING_ACTION)),
+        delegateAccountID: index.toString(),
+        errors: {},
+        isAttachment: randBoolean(),
+    };
+}
diff --git a/web/index.html b/web/index.html
index 6e5d0cd3c5d6..a7630b1a2cdc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -131,13 +131,23 @@
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, interactive-widget=resizes-content">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">
-    <% if (htmlWebpackPlugin.options.usePolyfillIO) { %>
+    <% if (htmlWebpackPlugin.options.isWeb) { %>
         <!-- polyfill.io is only needed on Web to support older browsers. It should not be loaded for desktop -->
         <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CResizeObserver&flags=gated"></script>
+        <% if (htmlWebpackPlugin.options.isProduction) { %>
+            <!-- Google Tag Manager - This was provided by our partner marketing agency -->
+            <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-N4M3FLJZ');</script>
+            <!-- End Google Tag Manager -->
+        <% } %>
     <% } %>
     <link rel="manifest" href="/manifest.json" />
 </head>
 <body>
+    <% if (htmlWebpackPlugin.options.isWeb && htmlWebpackPlugin.options.isProduction) { %>
+        <!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N4M3FLJZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+    <% } %>
     <div style="position: absolute; top: 0; left: 0; right: 0; height: 30px;" data-drag-area="true"></div>
     <div id="root"></div>
     <div id="splash">
diff --git a/workflow_tests/assertions/authorChecklistAssertions.js b/workflow_tests/assertions/authorChecklistAssertions.js
index c57fe922c754..256a3534951b 100644
--- a/workflow_tests/assertions/authorChecklistAssertions.js
+++ b/workflow_tests/assertions/authorChecklistAssertions.js
@@ -1,7 +1,10 @@
 const utils = require('../utils/utils');
 
 const assertChecklistJobExecuted = (workflowResult, didExecute = true) => {
-    const steps = [utils.createStepAssertion('authorChecklist.js', true, null, 'CHECKLIST', 'Running authorChecklist.js', [{key: 'GITHUB_TOKEN', value: '***'}], [])];
+    const steps = [
+        utils.createStepAssertion('Checkout', true, null, 'CHECKLIST', 'Checkout'),
+        utils.createStepAssertion('authorChecklist.js', true, null, 'CHECKLIST', 'Running authorChecklist.js', [{key: 'GITHUB_TOKEN', value: '***'}], []),
+    ];
 
     steps.forEach((expectedStep) => {
         if (didExecute) {
diff --git a/workflow_tests/assertions/cherryPickAssertions.js b/workflow_tests/assertions/cherryPickAssertions.js
index 42ecc3d64262..1fe1194cf7b6 100644
--- a/workflow_tests/assertions/cherryPickAssertions.js
+++ b/workflow_tests/assertions/cherryPickAssertions.js
@@ -76,7 +76,7 @@ const assertCherryPickJobExecuted = (workflowResult, user = 'Dummy Author', pull
             'CHERRYPICK',
             'Creating Pull Request to manually finish CP',
             [],
-            [{key: 'GITHUB_TOKEN', value: '***'}],
+            [{key: 'GITHUB_TOKEN', value: 'os_botify_api_token'}],
         ),
     ];
 
diff --git a/workflow_tests/assertions/createNewVersionAssertions.js b/workflow_tests/assertions/createNewVersionAssertions.js
index e4526ae59be2..27c54e924975 100644
--- a/workflow_tests/assertions/createNewVersionAssertions.js
+++ b/workflow_tests/assertions/createNewVersionAssertions.js
@@ -26,7 +26,19 @@ const assertCreateNewVersionJobExecuted = (workflowResult, semverLevel = 'BUILD'
             ],
             [],
         ),
-        utils.createStepAssertion('Setup git for OSBotify', true, null, 'CREATENEWVERSION', 'Setup git for OSBotify', [{key: 'GPG_PASSPHRASE', value: '***'}], []),
+        utils.createStepAssertion(
+            'Setup git for OSBotify',
+            true,
+            null,
+            'CREATENEWVERSION',
+            'Setup git for OSBotify',
+            [
+                {key: 'GPG_PASSPHRASE', value: '***'},
+                {key: 'OS_BOTIFY_APP_ID', value: '***'},
+                {key: 'OS_BOTIFY_PRIVATE_KEY', value: '***'},
+            ],
+            [],
+        ),
         utils.createStepAssertion(
             'Generate version',
             true,
@@ -34,7 +46,7 @@ const assertCreateNewVersionJobExecuted = (workflowResult, semverLevel = 'BUILD'
             'CREATENEWVERSION',
             'Generate version',
             [
-                {key: 'GITHUB_TOKEN', value: '***'},
+                {key: 'GITHUB_TOKEN', value: 'os_botify_api_token'},
                 {key: 'SEMVER_LEVEL', value: semverLevel},
             ],
             [],
diff --git a/workflow_tests/assertions/deployAssertions.js b/workflow_tests/assertions/deployAssertions.js
index bff99298bde5..ce0907e84be8 100644
--- a/workflow_tests/assertions/deployAssertions.js
+++ b/workflow_tests/assertions/deployAssertions.js
@@ -6,7 +6,11 @@ const assertDeployStagingJobExecuted = (workflowResult, didExecute = true) => {
             {key: 'ref', value: 'staging'},
             {key: 'token', value: '***'},
         ]),
-        utils.createStepAssertion('Setup git for OSBotify', true, null, 'DEPLOY_STAGING', 'Setting up git for OSBotify', [{key: 'GPG_PASSPHRASE', value: '***'}]),
+        utils.createStepAssertion('Setup git for OSBotify', true, null, 'DEPLOY_STAGING', 'Setting up git for OSBotify', [
+            {key: 'GPG_PASSPHRASE', value: '***'},
+            {key: 'OS_BOTIFY_APP_ID', value: '***'},
+            {key: 'OS_BOTIFY_PRIVATE_KEY', value: '***'},
+        ]),
         utils.createStepAssertion('Tag version', true, null, 'DEPLOY_STAGING', 'Tagging new version'),
         utils.createStepAssertion('🚀 Push tags to trigger staging deploy 🚀', true, null, 'DEPLOY_STAGING', 'Pushing tag to trigger staging deploy'),
     ];
@@ -26,11 +30,15 @@ const assertDeployProductionJobExecuted = (workflowResult, didExecute = true) =>
             {key: 'ref', value: 'production'},
             {key: 'token', value: '***'},
         ]),
-        utils.createStepAssertion('Setup git for OSBotify', true, null, 'DEPLOY_PRODUCTION', 'Setting up git for OSBotify', [{key: 'GPG_PASSPHRASE', value: '***'}]),
+        utils.createStepAssertion('Setup git for OSBotify', true, null, 'DEPLOY_PRODUCTION', 'Setting up git for OSBotify', [
+            {key: 'GPG_PASSPHRASE', value: '***'},
+            {key: 'OS_BOTIFY_APP_ID', value: '***'},
+            {key: 'OS_BOTIFY_PRIVATE_KEY', value: '***'},
+        ]),
         utils.createStepAssertion('Get current app version', true, null, 'DEPLOY_PRODUCTION', 'Getting current app version'),
         utils.createStepAssertion('Get Release Pull Request List', true, null, 'DEPLOY_PRODUCTION', 'Getting release PR list', [
             {key: 'TAG', value: '1.2.3'},
-            {key: 'GITHUB_TOKEN', value: '***'},
+            {key: 'GITHUB_TOKEN', value: 'os_botify_api_token'},
             {key: 'IS_PRODUCTION_DEPLOY', value: 'true'},
         ]),
         utils.createStepAssertion('Generate Release Body', true, null, 'DEPLOY_PRODUCTION', 'Generating release body', [{key: 'PR_LIST', value: '[1.2.1, 1.2.2]'}]),
@@ -44,7 +52,7 @@ const assertDeployProductionJobExecuted = (workflowResult, didExecute = true) =>
                 {key: 'tag_name', value: '1.2.3'},
                 {key: 'body', value: 'Release body'},
             ],
-            [{key: 'GITHUB_TOKEN', value: '***'}],
+            [{key: 'GITHUB_TOKEN', value: 'os_botify_api_token'}],
         ),
     ];
 
diff --git a/workflow_tests/assertions/deployBlockerAssertions.js b/workflow_tests/assertions/deployBlockerAssertions.js
index 8d2d6039960e..78a3fea116b4 100644
--- a/workflow_tests/assertions/deployBlockerAssertions.js
+++ b/workflow_tests/assertions/deployBlockerAssertions.js
@@ -1,56 +1,43 @@
 const utils = require('../utils/utils');
 
-const assertDeployBlockerJobExecuted = (workflowResult, issueTitle, issueNumber, didExecute = true, isSuccessful = true) => {
+const assertUpdateChecklistJobExecuted = (workflowResult, didExecute = true, isSuccessful = true) => {
+    const steps = [utils.createStepAssertion('updateChecklist', true, null, 'UPDATECHECKLIST', 'Run updateChecklist')];
+
+    steps.forEach((expectedStep) => {
+        if (didExecute) {
+            if (isSuccessful) {
+                expect(workflowResult).toEqual(expect.arrayContaining([expectedStep]));
+            }
+        } else {
+            expect(workflowResult).not.toEqual(expect.arrayContaining([expectedStep]));
+        }
+    });
+};
+
+const assertDeployBlockerJobExecuted = (workflowResult, didExecute = true, isSuccessful = true, failsAt = -1) => {
     const steps = [
-        utils.createStepAssertion('Checkout', true, null, 'DEPLOYBLOCKER', 'Checkout', [{key: 'token', value: '***'}], []),
-        utils.createStepAssertion(
-            'Get URL, title, & number of new deploy blocker (issue)',
-            true,
-            null,
-            'DEPLOYBLOCKER',
-            'Get URL, title and number of new deploy blocker - issue',
-            [],
-            [{key: 'TITLE', value: issueTitle}],
-        ),
-        utils.createStepAssertion(
-            'Update StagingDeployCash with new deploy blocker',
-            true,
-            null,
-            'DEPLOYBLOCKER',
-            'Update StagingDeployCash with new deploy blocker',
-            [{key: 'GITHUB_TOKEN', value: '***'}],
-            [],
-        ),
+        utils.createStepAssertion('Checkout', true, null, 'DEPLOYBLOCKER', 'Checkout'),
         utils.createStepAssertion(
             'Give the issue/PR the Hourly, Engineering labels',
             true,
             null,
             'DEPLOYBLOCKER',
             'Give the issue/PR the Hourly, Engineering labels',
-            [
-                {key: 'add-labels', value: 'Hourly, Engineering'},
-                {key: 'remove-labels', value: 'Daily, Weekly, Monthly'},
-            ],
-            [],
-        ),
-        utils.createStepAssertion(
-            'Comment on deferred PR',
-            true,
-            null,
-            'DEPLOYBLOCKER',
-            'Comment on deferred PR',
-            [
-                {key: 'github_token', value: '***'},
-                {key: 'number', value: issueNumber},
-            ],
             [],
+            [{key: 'GITHUB_TOKEN', value: '***'}],
         ),
+        utils.createStepAssertion('Comment on deploy blocker', true, null, 'DEPLOYBLOCKER', 'Comment on deploy blocker', [], [{key: 'GITHUB_TOKEN', value: '***'}]),
     ];
 
-    steps.forEach((expectedStep) => {
+    steps.forEach((expectedStep, i) => {
         if (didExecute) {
-            if (isSuccessful) {
+            if (failsAt === -1 || i < failsAt) {
+                expect(workflowResult).toEqual(expect.arrayContaining([expectedStep]));
+            } else if (i === failsAt) {
+                steps[i].status = 1;
                 expect(workflowResult).toEqual(expect.arrayContaining([expectedStep]));
+            } else {
+                expect(workflowResult).not.toEqual(expect.arrayContaining([expectedStep]));
             }
         } else {
             expect(workflowResult).not.toEqual(expect.arrayContaining([expectedStep]));
@@ -94,5 +81,6 @@ const assertDeployBlockerJobExecuted = (workflowResult, issueTitle, issueNumber,
 };
 
 module.exports = {
+    assertUpdateChecklistJobExecuted,
     assertDeployBlockerJobExecuted,
 };
diff --git a/workflow_tests/assertions/finishReleaseCycleAssertions.js b/workflow_tests/assertions/finishReleaseCycleAssertions.js
index 12a8b9f2b05d..16db65b4afe7 100644
--- a/workflow_tests/assertions/finishReleaseCycleAssertions.js
+++ b/workflow_tests/assertions/finishReleaseCycleAssertions.js
@@ -1,7 +1,18 @@
 const utils = require('../utils/utils');
 
 const assertValidateJobExecuted = (workflowResult, issueNumber = '', didExecute = true, isTeamMember = true, hasBlockers = false, isSuccessful = true) => {
-    const steps = [utils.createStepAssertion('Validate actor is deployer', true, null, 'VALIDATE', 'Validating if actor is deployer', [], [{key: 'GITHUB_TOKEN', value: '***'}])];
+    const steps = [
+        utils.createStepAssertion('Checkout', true, null, 'VALIDATE', 'Checkout', [
+            {key: 'ref', value: 'main'},
+            {key: 'token', value: '***'},
+        ]),
+        utils.createStepAssertion('Setup git for OSBotify', true, null, 'VALIDATE', 'Setup git for OSBotify', [
+            {key: 'GPG_PASSPHRASE', value: '***'},
+            {key: 'OS_BOTIFY_APP_ID', value: '***'},
+            {key: 'OS_BOTIFY_PRIVATE_KEY', value: '***'},
+        ]),
+        utils.createStepAssertion('Validate actor is deployer', true, null, 'VALIDATE', 'Validating if actor is deployer', [], [{key: 'GITHUB_TOKEN', value: 'os_botify_api_token'}]),
+    ];
     if (isTeamMember) {
         steps.push(
             utils.createStepAssertion(
@@ -11,7 +22,7 @@ const assertValidateJobExecuted = (workflowResult, issueNumber = '', didExecute
                 'VALIDATE',
                 'Checking for deploy blockers',
                 [
-                    {key: 'GITHUB_TOKEN', value: '***'},
+                    {key: 'GITHUB_TOKEN', value: 'os_botify_api_token'},
                     {key: 'ISSUE_NUMBER', value: issueNumber},
                 ],
                 [],
@@ -36,7 +47,7 @@ const assertValidateJobExecuted = (workflowResult, issueNumber = '', didExecute
             'VALIDATE',
             'Reopening issue - not a team member',
             [
-                {key: 'GITHUB_TOKEN', value: '***'},
+                {key: 'GITHUB_TOKEN', value: 'os_botify_api_token'},
                 {key: 'ISSUE_NUMBER', value: issueNumber},
                 {key: 'COMMENT', value: 'Sorry, only members of @Expensify/Mobile-Deployers can close deploy checklists.\nReopening!'},
             ],
@@ -60,7 +71,7 @@ const assertValidateJobExecuted = (workflowResult, issueNumber = '', didExecute
             'VALIDATE',
             'Reopening issue - blockers',
             [
-                {key: 'GITHUB_TOKEN', value: '***'},
+                {key: 'GITHUB_TOKEN', value: 'os_botify_api_token'},
                 {key: 'ISSUE_NUMBER', value: issueNumber},
             ],
             [],
@@ -102,7 +113,7 @@ const assertUpdateProductionJobExecuted = (workflowResult, didExecute = true, is
             ],
             [],
         ),
-        utils.createStepAssertion('Setup Git for OSBotify', true, null, 'UPDATEPRODUCTION', 'Setup Git for OSBotify', [{key: 'GPG_PASSPHRASE', value: '***'}], []),
+        utils.createStepAssertion('Setup git for OSBotify', true, null, 'UPDATEPRODUCTION', 'Setup git for OSBotify', [{key: 'GPG_PASSPHRASE', value: '***'}], []),
         utils.createStepAssertion('Update production branch', true, null, 'UPDATEPRODUCTION', 'Updating production branch', [], []),
     ];
 
@@ -153,7 +164,7 @@ const assertUpdateStagingJobExecuted = (workflowResult, didExecute = true, isSuc
             ],
             [],
         ),
-        utils.createStepAssertion('Setup Git for OSBotify', true, null, 'UPDATESTAGING', 'Setup Git for OSBotify', [{key: 'GPG_PASSPHRASE', value: '***'}], []),
+        utils.createStepAssertion('Setup git for OSBotify', true, null, 'UPDATESTAGING', 'Setup git for OSBotify', [{key: 'GPG_PASSPHRASE', value: '***'}], []),
         utils.createStepAssertion('Update staging branch to trigger staging deploy', true, null, 'UPDATESTAGING', 'Updating staging branch', [], []),
     ];
 
diff --git a/workflow_tests/assertions/lintAssertions.js b/workflow_tests/assertions/lintAssertions.js
index 938f9b383464..1253bae2e258 100644
--- a/workflow_tests/assertions/lintAssertions.js
+++ b/workflow_tests/assertions/lintAssertions.js
@@ -5,7 +5,8 @@ const assertLintJobExecuted = (workflowResult, didExecute = true) => {
         utils.createStepAssertion('Checkout', true, null, 'LINT', 'Checkout', [], []),
         utils.createStepAssertion('Setup Node', true, null, 'LINT', 'Setup Node', [], []),
         utils.createStepAssertion('Lint JavaScript and Typescript with ESLint', true, null, 'LINT', 'Lint JavaScript with ESLint', [], [{key: 'CI', value: 'true'}]),
-        utils.createStepAssertion('Lint shell scripts with ShellCheck', true, null, 'LINT', 'Lint shell scripts with ShellCheck', [], []),
+        utils.createStepAssertion("Verify there's no Prettier diff", true, null, 'LINT', 'Verify theres no Prettier diff', [], []),
+        utils.createStepAssertion('Run unused style searcher', true, null, 'LINT', 'Run unused style searcher', [], []),
     ];
 
     steps.forEach((expectedStep) => {
diff --git a/workflow_tests/assertions/platformDeployAssertions.js b/workflow_tests/assertions/platformDeployAssertions.js
index 35242cd24d31..458899581687 100644
--- a/workflow_tests/assertions/platformDeployAssertions.js
+++ b/workflow_tests/assertions/platformDeployAssertions.js
@@ -13,15 +13,7 @@ const assertVerifyActorJobExecuted = (workflowResult, username, didExecute = tru
 };
 
 const assertDeployChecklistJobExecuted = (workflowResult, didExecute = true) => {
-    const steps = [
-        utils.createStepAssertion('Checkout', true, null, 'DEPLOY_CHECKLIST', 'Checkout'),
-        utils.createStepAssertion('Setup Node', true, null, 'DEPLOY_CHECKLIST', 'Setup Node'),
-        utils.createStepAssertion('Set version', true, null, 'DEPLOY_CHECKLIST', 'Set version'),
-        utils.createStepAssertion('Create or update staging deploy', true, null, 'DEPLOY_CHECKLIST', 'Create or update staging deploy', [
-            {key: 'GITHUB_TOKEN', value: '***'},
-            {key: 'NPM_VERSION', value: '1.2.3'},
-        ]),
-    ];
+    const steps = [utils.createStepAssertion('deployChecklist', true, null, 'DEPLOY_CHECKLIST', 'Run deployChecklist')];
 
     steps.forEach((expectedStep) => {
         if (didExecute) {
@@ -37,6 +29,18 @@ const assertAndroidJobExecuted = (workflowResult, didExecute = true, isProductio
         utils.createStepAssertion('Checkout', true, null, 'ANDROID', 'Checking out'),
         utils.createStepAssertion('Configure MapBox SDK', true, null, 'ANDROID', 'Configure MapBox SDK'),
         utils.createStepAssertion('Setup Node', true, null, 'ANDROID', 'Setting up Node'),
+        utils.createStepAssertion(
+            'Setup Java',
+            true,
+            null,
+            'ANDROID',
+            'Setup Java',
+            [
+                {key: 'distribution', value: 'oracle'},
+                {key: 'java-version', value: '17'},
+            ],
+            [],
+        ),
         utils.createStepAssertion('Setup Ruby', true, null, 'ANDROID', 'Setting up Ruby', [
             {key: 'ruby-version', value: '2.7'},
             {key: 'bundler-cache', value: 'true'},
@@ -63,6 +67,10 @@ const assertAndroidJobExecuted = (workflowResult, didExecute = true, isProductio
     );
     if (!isProduction) {
         steps.push(
+            utils.createStepAssertion('Upload Android version to GitHub artifacts', true, null, 'ANDROID', 'Upload Android version to GitHub artifacts', [
+                {key: 'name', value: 'app-production-release.aab'},
+                {key: 'path', value: 'android/app/build/outputs/bundle/productionRelease/app-production-release.aab'},
+            ]),
             utils.createStepAssertion('Upload Android version to Browser Stack', true, null, 'ANDROID', 'Uploading Android version to Browser Stack', null, [
                 {key: 'BROWSERSTACK', value: '***'},
             ]),
@@ -183,7 +191,13 @@ const assertIOSJobExecuted = (workflowResult, didExecute = true, isProduction =
         ]),
     );
     if (!isProduction) {
-        steps.push(utils.createStepAssertion('Upload iOS version to Browser Stack', true, null, 'IOS', 'Uploading version to Browser Stack', null, [{key: 'BROWSERSTACK', value: '***'}]));
+        steps.push(
+            utils.createStepAssertion('Upload iOS version to GitHub artifacts', true, null, 'IOS', 'Upload iOS version to GitHub artifacts', [
+                {key: 'name', value: 'New Expensify.ipa'},
+                {key: 'path', value: '/Users/runner/work/App/App/New Expensify.ipa'},
+            ]),
+            utils.createStepAssertion('Upload iOS version to Browser Stack', true, null, 'IOS', 'Uploading version to Browser Stack', null, [{key: 'BROWSERSTACK', value: '***'}]),
+        );
     } else {
         steps.push(
             utils.createStepAssertion('Set iOS version in ENV', true, null, 'IOS', 'Setting iOS version'),
diff --git a/workflow_tests/assertions/preDeployAssertions.js b/workflow_tests/assertions/preDeployAssertions.js
index 90d6f9febb75..1ed7d52bd53f 100644
--- a/workflow_tests/assertions/preDeployAssertions.js
+++ b/workflow_tests/assertions/preDeployAssertions.js
@@ -36,91 +36,6 @@ const assertTestJobExecuted = (workflowResult, didExecute = true) => {
     });
 };
 
-const assertIsExpensifyEmployeeJobExecuted = (workflowResult, didExecute = true) => {
-    const steps = [
-        utils.createStepAssertion('Get merged pull request', true, null, 'IS_EXPENSIFY_EMPLOYEE', 'Getting merged pull request', [{key: 'github_token', value: '***'}]),
-        utils.createStepAssertion(
-            'Check whether the PR author is member of Expensify/expensify team',
-            true,
-            null,
-            'IS_EXPENSIFY_EMPLOYEE',
-            'Checking actors Expensify membership',
-            [],
-            [{key: 'GITHUB_TOKEN', value: '***'}],
-        ),
-    ];
-
-    steps.forEach((expectedStep) => {
-        if (didExecute) {
-            expect(workflowResult).toEqual(expect.arrayContaining([expectedStep]));
-        } else {
-            expect(workflowResult).not.toEqual(expect.arrayContaining([expectedStep]));
-        }
-    });
-};
-
-const assertNewContributorWelcomeMessageJobExecuted = (workflowResult, didExecute = true, isOsBotify = false, isFirstPr = false) => {
-    const steps = [
-        utils.createStepAssertion('Checkout', true, null, 'NEW_CONTRIBUTOR_WELCOME_MESSAGE', 'Checking out', [{key: 'token', value: '***'}]),
-        utils.createStepAssertion('Get merged pull request', true, null, 'NEW_CONTRIBUTOR_WELCOME_MESSAGE', 'Getting merged pull request', [{key: 'github_token', value: '***'}]),
-        utils.createStepAssertion(isOsBotify ? 'Get PR count for OSBotify' : 'Get PR count for Dummy Author', true, null, 'NEW_CONTRIBUTOR_WELCOME_MESSAGE', 'Getting PR count', [
-            {key: 'GITHUB_TOKEN', value: '***'},
-        ]),
-    ];
-    const osBotifyBody =
-        '@OSBotify, Great job getting your first Expensify/App pull request over the finish line! ' +
-        ":tada:\n\nI know there's a lot of information in our " +
-        '[contributing guidelines](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md), ' +
-        'so here are some points to take note of :memo::\n\n1. Now that your first PR has been merged, you can be ' +
-        "hired for another issue. Once you've completed a few issues, you may be eligible to work on more than one " +
-        'job at a time.\n2. Once your PR is deployed to our staging servers, it will undergo quality assurance (QA) ' +
-        "testing. If we find that it doesn't work as expected or causes a regression, you'll be responsible for " +
-        'fixing it. Typically, we would revert this PR and give you another chance to create a similar PR without ' +
-        'causing a regression.\n3. Once your PR is deployed to _production_, we start a 7-day timer :alarm_clock:. ' +
-        'After it has been on production for 7 days without causing any regressions, then we pay out the Upwork job. ' +
-        ":moneybag:\n\nSo it might take a while before you're paid for your work, but we typically post multiple " +
-        "new jobs every day, so there's plenty of opportunity. I hope you've had a positive experience " +
-        'contributing to this repo! :blush:';
-    const userBody =
-        '@Dummy Author, Great job getting your first Expensify/App pull request over the finish ' +
-        "line! :tada:\n\nI know there's a lot of information in our " +
-        '[contributing guidelines](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md), ' +
-        'so here are some points to take note of :memo::\n\n1. Now that your first PR has been merged, you can be ' +
-        "hired for another issue. Once you've completed a few issues, you may be eligible to work on more than one " +
-        'job at a time.\n2. Once your PR is deployed to our staging servers, it will undergo quality assurance (QA) ' +
-        "testing. If we find that it doesn't work as expected or causes a regression, you'll be responsible for " +
-        'fixing it. Typically, we would revert this PR and give you another chance to create a similar PR without ' +
-        'causing a regression.\n3. Once your PR is deployed to _production_, we start a 7-day timer :alarm_clock:. ' +
-        'After it has been on production for 7 days without causing any regressions, then we pay out the Upwork ' +
-        "job. :moneybag:\n\nSo it might take a while before you're paid for your work, but we typically post " +
-        "multiple new jobs every day, so there's plenty of opportunity. I hope you've had a positive experience " +
-        'contributing to this repo! :blush:';
-    if (isFirstPr) {
-        steps.push(
-            utils.createStepAssertion(
-                isOsBotify ? "Comment on OSBotify\\'s first pull request!" : "Comment on Dummy Author\\'s first pull request!",
-                true,
-                null,
-                'NEW_CONTRIBUTOR_WELCOME_MESSAGE',
-                'Creating comment',
-                [
-                    {key: 'github_token', value: '***'},
-                    {key: 'number', value: '12345'},
-                    {key: 'body', value: isOsBotify ? osBotifyBody : userBody},
-                ],
-            ),
-        );
-    }
-
-    steps.forEach((expectedStep) => {
-        if (didExecute) {
-            expect(workflowResult).toEqual(expect.arrayContaining([expectedStep]));
-        } else {
-            expect(workflowResult).not.toEqual(expect.arrayContaining([expectedStep]));
-        }
-    });
-};
-
 const assertChooseDeployActionsJobExecuted = (workflowResult, didExecute = true) => {
     const steps = [
         utils.createStepAssertion('Get merged pull request', true, null, 'CHOOSE_DEPLOY_ACTIONS', 'Getting merged pull request', [{key: 'github_token', value: '***'}]),
@@ -209,8 +124,6 @@ module.exports = {
     assertTypecheckJobExecuted,
     assertLintJobExecuted,
     assertTestJobExecuted,
-    assertIsExpensifyEmployeeJobExecuted,
-    assertNewContributorWelcomeMessageJobExecuted,
     assertChooseDeployActionsJobExecuted,
     assertSkipDeployJobExecuted,
     assertCreateNewVersionJobExecuted,
diff --git a/workflow_tests/assertions/testBuildAssertions.js b/workflow_tests/assertions/testBuildAssertions.js
index a4f7a46259ad..781e6bac20a2 100644
--- a/workflow_tests/assertions/testBuildAssertions.js
+++ b/workflow_tests/assertions/testBuildAssertions.js
@@ -60,6 +60,18 @@ const assertAndroidJobExecuted = (workflowResult, ref = '', didExecute = true, f
             [],
         ),
         utils.createStepAssertion('Setup Node', true, null, 'ANDROID', 'Setup Node', [], []),
+        utils.createStepAssertion(
+            'Setup Java',
+            true,
+            null,
+            'ANDROID',
+            'Setup Java',
+            [
+                {key: 'distribution', value: 'oracle'},
+                {key: 'java-version', value: '17'},
+            ],
+            [],
+        ),
         utils.createStepAssertion(
             'Setup Ruby',
             true,
@@ -365,7 +377,7 @@ const assertPostGithubCommentJobExecuted = (
             'maintain-comment',
             [
                 {key: 'token', value: '***'},
-                {key: 'body-include', value: 'Use the links below to test this build in android and iOS. Happy testing!'},
+                {key: 'body-include', value: 'Use the links below to test this adhoc build in Android, iOS, Desktop, and Web. Happy testing!'},
                 {key: 'number', value: pullRequestNumber},
                 {key: 'delete', value: true},
             ],
diff --git a/workflow_tests/authorChecklist.test.js b/workflow_tests/authorChecklist.test.js
index 64a25c8fe1b8..831e7f695ba4 100644
--- a/workflow_tests/authorChecklist.test.js
+++ b/workflow_tests/authorChecklist.test.js
@@ -41,12 +41,11 @@ describe('test workflow authorChecklist', () => {
         await mockGithub.teardown();
     });
     describe('pull request opened', () => {
-        const event = 'pull_request';
+        const event = 'pull_request_target';
         const eventOptions = {
             action: 'opened',
         };
         describe('actor is not OSBotify', () => {
-            const actor = 'Dummy Author';
             it('executes workflow', async () => {
                 const repoPath = mockGithub.repo.getPath('testAuthorChecklistWorkflowRepo') || '';
                 const workflowPath = path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml');
@@ -58,7 +57,7 @@ describe('test workflow authorChecklist', () => {
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml'),
                     mockSteps: testMockSteps,
-                    actor,
+                    actor: 'Dummy Author',
                     logFile: utils.getLogFilePath('authorChecklist', expect.getState().currentTestName),
                 });
 
@@ -66,7 +65,6 @@ describe('test workflow authorChecklist', () => {
             });
         });
         describe('actor is OSBotify', () => {
-            const actor = 'OSBotify';
             it('does not execute workflow', async () => {
                 const repoPath = mockGithub.repo.getPath('testAuthorChecklistWorkflowRepo') || '';
                 const workflowPath = path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml');
@@ -78,7 +76,7 @@ describe('test workflow authorChecklist', () => {
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml'),
                     mockSteps: testMockSteps,
-                    actor,
+                    actor: 'OSBotify',
                     logFile: utils.getLogFilePath('authorChecklist', expect.getState().currentTestName),
                 });
 
@@ -87,12 +85,11 @@ describe('test workflow authorChecklist', () => {
         });
     });
     describe('pull request edited', () => {
-        const event = 'pull_request';
+        const event = 'pull_request_target';
         const eventOptions = {
             action: 'edited',
         };
         describe('actor is not OSBotify', () => {
-            const actor = 'Dummy Author';
             it('executes workflow', async () => {
                 const repoPath = mockGithub.repo.getPath('testAuthorChecklistWorkflowRepo') || '';
                 const workflowPath = path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml');
@@ -104,7 +101,7 @@ describe('test workflow authorChecklist', () => {
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml'),
                     mockSteps: testMockSteps,
-                    actor,
+                    actor: 'Dummy Author',
                     logFile: utils.getLogFilePath('authorChecklist', expect.getState().currentTestName),
                 });
 
@@ -112,7 +109,6 @@ describe('test workflow authorChecklist', () => {
             });
         });
         describe('actor is OSBotify', () => {
-            const actor = 'OSBotify';
             it('does not execute workflow', async () => {
                 const repoPath = mockGithub.repo.getPath('testAuthorChecklistWorkflowRepo') || '';
                 const workflowPath = path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml');
@@ -124,7 +120,7 @@ describe('test workflow authorChecklist', () => {
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml'),
                     mockSteps: testMockSteps,
-                    actor,
+                    actor: 'OSBotify',
                     logFile: utils.getLogFilePath('authorChecklist', expect.getState().currentTestName),
                 });
 
@@ -133,12 +129,11 @@ describe('test workflow authorChecklist', () => {
         });
     });
     describe('pull request reopened', () => {
-        const event = 'pull_request';
+        const event = 'pull_request_target';
         const eventOptions = {
             action: 'reopened',
         };
         describe('actor is not OSBotify', () => {
-            const actor = 'Dummy Author';
             it('executes workflow', async () => {
                 const repoPath = mockGithub.repo.getPath('testAuthorChecklistWorkflowRepo') || '';
                 const workflowPath = path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml');
@@ -150,7 +145,7 @@ describe('test workflow authorChecklist', () => {
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml'),
                     mockSteps: testMockSteps,
-                    actor,
+                    actor: 'Dummy Author',
                     logFile: utils.getLogFilePath('authorChecklist', expect.getState().currentTestName),
                 });
 
@@ -158,7 +153,6 @@ describe('test workflow authorChecklist', () => {
             });
         });
         describe('actor is OSBotify', () => {
-            const actor = 'OSBotify';
             it('does not execute workflow', async () => {
                 const repoPath = mockGithub.repo.getPath('testAuthorChecklistWorkflowRepo') || '';
                 const workflowPath = path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml');
@@ -170,7 +164,7 @@ describe('test workflow authorChecklist', () => {
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'authorChecklist.yml'),
                     mockSteps: testMockSteps,
-                    actor,
+                    actor: 'OSBotify',
                     logFile: utils.getLogFilePath('authorChecklist', expect.getState().currentTestName),
                 });
 
diff --git a/workflow_tests/createNewVersion.test.js b/workflow_tests/createNewVersion.test.js
index 259e06450325..dca1afbd9a41 100644
--- a/workflow_tests/createNewVersion.test.js
+++ b/workflow_tests/createNewVersion.test.js
@@ -46,8 +46,10 @@ describe('test workflow createNewVersion', () => {
         };
         const secrets = {
             LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-            OS_BOTIFY_TOKEN: 'dummy_osbotify_token',
+            OS_BOTIFY_COMMIT_TOKEN: 'dummy_osbotify_commit_token',
             SLACK_WEBHOOK: 'dummy_webhook',
+            OS_BOTIFY_APP_ID: 'os_botify_app_id',
+            OS_BOTIFY_PRIVATE_KEY: 'os_botify_private_key',
         };
         const githubToken = 'dummy_github_token';
 
diff --git a/workflow_tests/deploy.test.js b/workflow_tests/deploy.test.js
index a2ccdebc0b31..b15a167d4702 100644
--- a/workflow_tests/deploy.test.js
+++ b/workflow_tests/deploy.test.js
@@ -39,6 +39,13 @@ describe('test workflow deploy', () => {
     afterEach(async () => {
         await mockGithub.teardown();
     });
+
+    const secrets = {
+        OS_BOTIFY_TOKEN: 'dummy_token',
+        LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
+        OS_BOTIFY_APP_ID: 'os_botify_app_id',
+        OS_BOTIFY_PRIVATE_KEY: 'os_botify_private_key',
+    };
     describe('push', () => {
         it('to main - nothing triggered', async () => {
             const repoPath = mockGithub.repo.getPath('testDeployWorkflowRepo') || '';
@@ -50,10 +57,7 @@ describe('test workflow deploy', () => {
                 {
                     ref: 'refs/heads/main',
                 },
-                {
-                    OS_BOTIFY_TOKEN: 'dummy_token',
-                    LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                },
+                secrets,
                 'dummy_github_token',
             );
             const testMockSteps = {
@@ -80,10 +84,7 @@ describe('test workflow deploy', () => {
                 {
                     ref: 'refs/heads/staging',
                 },
-                {
-                    OS_BOTIFY_TOKEN: 'dummy_token',
-                    LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                },
+                secrets,
                 'dummy_github_token',
             );
             const testMockSteps = {
@@ -110,10 +111,7 @@ describe('test workflow deploy', () => {
                 {
                     ref: 'refs/heads/production',
                 },
-                {
-                    OS_BOTIFY_TOKEN: 'dummy_token',
-                    LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                },
+                secrets,
                 'dummy_github_token',
             );
             const testMockSteps = {
@@ -141,16 +139,7 @@ describe('test workflow deploy', () => {
         };
 
         // pull_request
-        act = utils.setUpActParams(
-            act,
-            'pull_request',
-            {head: {ref: 'main'}},
-            {
-                OS_BOTIFY_TOKEN: 'dummy_token',
-                LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-            },
-            'dummy_github_token',
-        );
+        act = utils.setUpActParams(act, 'pull_request', {head: {ref: 'main'}}, secrets, 'dummy_github_token');
         let result = await act.runEvent('pull_request', {
             workflowFile: path.join(repoPath, '.github', 'workflows', 'deploy.yml'),
             mockSteps: testMockSteps,
@@ -161,16 +150,7 @@ describe('test workflow deploy', () => {
         assertions.assertDeployProductionJobExecuted(result, false);
 
         // workflow_dispatch
-        act = utils.setUpActParams(
-            act,
-            'workflow_dispatch',
-            {},
-            {
-                OS_BOTIFY_TOKEN: 'dummy_token',
-                LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-            },
-            'dummy_github_token',
-        );
+        act = utils.setUpActParams(act, 'workflow_dispatch', {}, secrets, 'dummy_github_token');
         result = await act.runEvent('workflow_dispatch', {
             workflowFile: path.join(repoPath, '.github', 'workflows', 'deploy.yml'),
             mockSteps: testMockSteps,
diff --git a/workflow_tests/deployBlocker.test.js b/workflow_tests/deployBlocker.test.js
index 1cfca11c90f5..2fee3d01915a 100644
--- a/workflow_tests/deployBlocker.test.js
+++ b/workflow_tests/deployBlocker.test.js
@@ -71,14 +71,22 @@ describe('test workflow deployBlocker', () => {
                 const testMockSteps = {
                     deployBlocker: mocks.DEPLOYBLOCKER__DEPLOYBLOCKER__STEP_MOCKS,
                 };
+                const testMockJobs = {
+                    updateChecklist: {
+                        steps: mocks.DEPLOYBLOCKER__UPDATECHECKLIST__STEP_MOCKS,
+                        runsOn: 'ubuntu-latest',
+                    },
+                };
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'deployBlocker.yml'),
                     mockSteps: testMockSteps,
                     actor,
                     logFile: utils.getLogFilePath('deployBlocker', expect.getState().currentTestName),
+                    mockJobs: testMockJobs,
                 });
 
-                assertions.assertDeployBlockerJobExecuted(result, 'Labeled issue title', '1234');
+                assertions.assertUpdateChecklistJobExecuted(result);
+                assertions.assertDeployBlockerJobExecuted(result);
             });
             describe('one step fails', () => {
                 it('announces failure on Slack', async () => {
@@ -89,24 +97,32 @@ describe('test workflow deployBlocker', () => {
                     const testMockSteps = {
                         deployBlocker: utils.deepCopy(mocks.DEPLOYBLOCKER__DEPLOYBLOCKER__STEP_MOCKS),
                     };
-                    testMockSteps.deployBlocker[2] = utils.createMockStep(
-                        'Update StagingDeployCash with new deploy blocker',
-                        'Update StagingDeployCash with new deploy blocker',
+                    testMockSteps.deployBlocker[1] = utils.createMockStep(
+                        'Give the issue/PR the Hourly, Engineering labels',
+                        'Give the issue/PR the Hourly, Engineering labels',
                         'DEPLOYBLOCKER',
-                        ['GITHUB_TOKEN'],
                         [],
-                        {},
-                        {},
+                        ['GITHUB_TOKEN'],
+                        null,
+                        null,
                         false,
                     );
+                    const testMockJobs = {
+                        updateChecklist: {
+                            steps: mocks.DEPLOYBLOCKER__UPDATECHECKLIST__STEP_MOCKS,
+                            runsOn: 'ubuntu-latest',
+                        },
+                    };
                     const result = await act.runEvent(event, {
                         workflowFile: path.join(repoPath, '.github', 'workflows', 'deployBlocker.yml'),
                         mockSteps: testMockSteps,
                         actor,
                         logFile: utils.getLogFilePath('deployBlocker', expect.getState().currentTestName),
+                        mockJobs: testMockJobs,
                     });
 
-                    assertions.assertDeployBlockerJobExecuted(result, 'Labeled issue title', '1234', true, false);
+                    assertions.assertUpdateChecklistJobExecuted(result);
+                    assertions.assertDeployBlockerJobExecuted(result, true, false, 1);
                 });
             });
         });
@@ -121,14 +137,22 @@ describe('test workflow deployBlocker', () => {
                 const testMockSteps = {
                     deployBlocker: mocks.DEPLOYBLOCKER__DEPLOYBLOCKER__STEP_MOCKS,
                 };
+                const testMockJobs = {
+                    updateChecklist: {
+                        steps: mocks.DEPLOYBLOCKER__UPDATECHECKLIST__STEP_MOCKS,
+                        runsOn: 'ubuntu-latest',
+                    },
+                };
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'deployBlocker.yml'),
                     mockSteps: testMockSteps,
                     actor,
                     logFile: utils.getLogFilePath('deployBlocker', expect.getState().currentTestName),
+                    mockJobs: testMockJobs,
                 });
 
-                assertions.assertDeployBlockerJobExecuted(result, '', '', false);
+                assertions.assertUpdateChecklistJobExecuted(result, false);
+                assertions.assertDeployBlockerJobExecuted(result, false);
             });
         });
     });
diff --git a/workflow_tests/finishReleaseCycle.test.js b/workflow_tests/finishReleaseCycle.test.js
index 7c17ca8d4122..26b4d2f60afc 100644
--- a/workflow_tests/finishReleaseCycle.test.js
+++ b/workflow_tests/finishReleaseCycle.test.js
@@ -38,6 +38,13 @@ describe('test workflow finishReleaseCycle', () => {
     afterEach(async () => {
         await mockGithub.teardown();
     });
+    const secrets = {
+        OS_BOTIFY_TOKEN: 'dummy_token',
+        LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
+        SLACK_WEBHOOK: 'dummy_slack_webhook',
+        OS_BOTIFY_APP_ID: 'os_botify_app_id',
+        OS_BOTIFY_PRIVATE_KEY: 'os_botify_private_key',
+    };
     describe('issue closed', () => {
         describe('issue has StagingDeployCash', () => {
             describe('actor is a team member', () => {
@@ -57,11 +64,7 @@ describe('test workflow finishReleaseCycle', () => {
                                     number: '1234',
                                 },
                             },
-                            {
-                                OS_BOTIFY_TOKEN: 'dummy_token',
-                                LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                                SLACK_WEBHOOK: 'dummy_slack_webhook',
-                            },
+                            secrets,
                         );
                         const testMockSteps = {
                             validate: mocks.FINISHRELEASECYCLE__VALIDATE__TEAM_MEMBER_NO_BLOCKERS__STEP_MOCKS,
@@ -107,11 +110,7 @@ describe('test workflow finishReleaseCycle', () => {
                                     number: '1234',
                                 },
                             },
-                            {
-                                OS_BOTIFY_TOKEN: 'dummy_token',
-                                LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                                SLACK_WEBHOOK: 'dummy_slack_webhook',
-                            },
+                            secrets,
                         );
                         const testMockSteps = {
                             validate: mocks.FINISHRELEASECYCLE__VALIDATE__TEAM_MEMBER_BLOCKERS__STEP_MOCKS,
@@ -158,11 +157,7 @@ describe('test workflow finishReleaseCycle', () => {
                                 number: '1234',
                             },
                         },
-                        {
-                            OS_BOTIFY_TOKEN: 'dummy_token',
-                            LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                            SLACK_WEBHOOK: 'dummy_slack_webhook',
-                        },
+                        secrets,
                     );
                     const testMockSteps = {
                         validate: mocks.FINISHRELEASECYCLE__VALIDATE__NOT_TEAM_MEMBER_NO_BLOCKERS__STEP_MOCKS,
@@ -209,11 +204,7 @@ describe('test workflow finishReleaseCycle', () => {
                             number: '1234',
                         },
                     },
-                    {
-                        OS_BOTIFY_TOKEN: 'dummy_token',
-                        LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                        SLACK_WEBHOOK: 'dummy_slack_webhook',
-                    },
+                    secrets,
                 );
                 const testMockSteps = {
                     validate: mocks.FINISHRELEASECYCLE__VALIDATE__TEAM_MEMBER_NO_BLOCKERS__STEP_MOCKS,
diff --git a/workflow_tests/mocks/authorChecklistMocks.js b/workflow_tests/mocks/authorChecklistMocks.js
index db211f5ec1e6..b0fda86815db 100644
--- a/workflow_tests/mocks/authorChecklistMocks.js
+++ b/workflow_tests/mocks/authorChecklistMocks.js
@@ -1,8 +1,9 @@
 const utils = require('../utils/utils');
 
 // checklist
+const AUTHORCHECKLIST__CHECKLIST__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'CHECKLIST');
 const AUTHORCHECKLIST__CHECKLIST__AUTHORCHECKLIST_JS__STEP_MOCK = utils.createMockStep('authorChecklist.js', 'Running authorChecklist.js', 'CHECKLIST', ['GITHUB_TOKEN'], []);
-const AUTHORCHECKLIST__CHECKLIST__STEP_MOCKS = [AUTHORCHECKLIST__CHECKLIST__AUTHORCHECKLIST_JS__STEP_MOCK];
+const AUTHORCHECKLIST__CHECKLIST__STEP_MOCKS = [AUTHORCHECKLIST__CHECKLIST__CHECKOUT__STEP_MOCK, AUTHORCHECKLIST__CHECKLIST__AUTHORCHECKLIST_JS__STEP_MOCK];
 
 module.exports = {
     AUTHORCHECKLIST__CHECKLIST__STEP_MOCKS,
diff --git a/workflow_tests/mocks/cherryPickMocks.js b/workflow_tests/mocks/cherryPickMocks.js
index 778e6fd48ded..5ce9b2ecccfb 100644
--- a/workflow_tests/mocks/cherryPickMocks.js
+++ b/workflow_tests/mocks/cherryPickMocks.js
@@ -36,7 +36,9 @@ const CHERRYPICK__CREATENEWVERSION__STEP_MOCKS = [CHERRYPICK__CREATENEWVERSION__
 
 // cherrypick
 const CHERRYPICK__CHERRYPICK__CHECKOUT_STAGING_BRANCH__STEP_MOCK = utils.createMockStep('Checkout staging branch', 'Checking out staging branch', 'CHERRYPICK', ['ref', 'token'], []);
-const CHERRYPICK__CHERRYPICK__SET_UP_GIT_FOR_OSBOTIFY__STEP_MOCK = utils.createMockStep('Set up git for OSBotify', 'Setting up git for OSBotify', 'CHERRYPICK', ['GPG_PASSPHRASE'], []);
+const CHERRYPICK__CHERRYPICK__SET_UP_GIT_FOR_OSBOTIFY__STEP_MOCK = utils.createMockStep('Set up git for OSBotify', 'Setting up git for OSBotify', 'CHERRYPICK', ['GPG_PASSPHRASE'], [], {
+    OS_BOTIFY_API_TOKEN: 'os_botify_api_token',
+});
 const CHERRYPICK__CHERRYPICK__GET_PREVIOUS_APP_VERSION__STEP_MOCK = utils.createMockStep('Get previous app version', 'Get previous app version', 'CHERRYPICK', ['SEMVER_LEVEL']);
 const CHERRYPICK__CHERRYPICK__FETCH_HISTORY_OF_RELEVANT_REFS__STEP_MOCK = utils.createMockStep('Fetch history of relevant refs', 'Fetch history of relevant refs', 'CHERRYPICK');
 const CHERRYPICK__CHERRYPICK__GET_VERSION_BUMP_COMMIT__STEP_MOCK = utils.createMockStep('Get version bump commit', 'Get version bump commit', 'CHERRYPICK', [], [], {
diff --git a/workflow_tests/mocks/createNewVersionMocks.js b/workflow_tests/mocks/createNewVersionMocks.js
index a1f601aef47f..5e82e2102ef0 100644
--- a/workflow_tests/mocks/createNewVersionMocks.js
+++ b/workflow_tests/mocks/createNewVersionMocks.js
@@ -21,8 +21,9 @@ const CREATENEWVERSION__CREATENEWVERSION__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK = ut
     'Setup git for OSBotify',
     'Setup git for OSBotify',
     'CREATENEWVERSION',
-    ['GPG_PASSPHRASE'],
+    ['GPG_PASSPHRASE', 'OS_BOTIFY_APP_ID', 'OS_BOTIFY_PRIVATE_KEY'],
     [],
+    {OS_BOTIFY_API_TOKEN: 'os_botify_api_token'},
 );
 const CREATENEWVERSION__CREATENEWVERSION__GENERATE_VERSION__STEP_MOCK = utils.createMockStep(
     'Generate version',
diff --git a/workflow_tests/mocks/deployBlockerMocks.js b/workflow_tests/mocks/deployBlockerMocks.js
index fbfc676f7701..4f74e0b91ebb 100644
--- a/workflow_tests/mocks/deployBlockerMocks.js
+++ b/workflow_tests/mocks/deployBlockerMocks.js
@@ -1,36 +1,17 @@
 const utils = require('../utils/utils');
 
+// updateChecklist
+const DEPLOYBLOCKER__UPDATECHECKLIST__STEP_MOCK = utils.createMockStep('updateChecklist', 'Run updateChecklist', 'UPDATECHECKLIST');
+const DEPLOYBLOCKER__UPDATECHECKLIST__STEP_MOCKS = [DEPLOYBLOCKER__UPDATECHECKLIST__STEP_MOCK];
+
 // deployblocker
-const DEPLOYBLOCKER__DEPLOYBLOCKER__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'DEPLOYBLOCKER', ['token'], []);
-const DEPLOYBLOCKER__DEPLOYBLOCKER__GET_URL_TITLE_AND_NUMBER_OF_NEW_DEPLOY_BLOCKER_ISSUE__STEP_MOCK = utils.createMockStep(
-    'Get URL, title, & number of new deploy blocker (issue)',
-    'Get URL, title and number of new deploy blocker - issue',
-    'DEPLOYBLOCKER',
-    [],
-    ['TITLE'],
-    {},
-    {
-        // eslint-disable-next-line no-template-curly-in-string
-        DEPLOY_BLOCKER_URL: '${{ github.event.issue.html_url }}',
-        // eslint-disable-next-line no-template-curly-in-string
-        DEPLOY_BLOCKER_NUMBER: '${{ github.event.issue.number }}',
-        // eslint-disable-next-line no-template-curly-in-string
-        DEPLOY_BLOCKER_TITLE: '${{ github.event.issue.title }}',
-    },
-);
-const DEPLOYBLOCKER__DEPLOYBLOCKER__UPDATE_STAGINGDEPLOYCASH_WITH_NEW_DEPLOY_BLOCKER__STEP_MOCK = utils.createMockStep(
-    'Update StagingDeployCash with new deploy blocker',
-    'Update StagingDeployCash with new deploy blocker',
-    'DEPLOYBLOCKER',
-    ['GITHUB_TOKEN'],
-    [],
-);
-const DEPLOYBLOCKER__DEPLOYBLOCKER__GIVE_THE_ISSUE_OR_PR_THE_HOURLY_ENGINEERING_LABELS__STEP_MOCK = utils.createMockStep(
+const DEPLOYBLOCKER__DEPLOYBLOCKER__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'DEPLOYBLOCKER');
+const DEPLOYBLOCKER__DEPLOYBLOCKER__GIVE_LABELS__STEP_MOCK = utils.createMockStep(
     'Give the issue/PR the Hourly, Engineering labels',
     'Give the issue/PR the Hourly, Engineering labels',
     'DEPLOYBLOCKER',
-    ['add-labels', 'remove-labels'],
     [],
+    ['GITHUB_TOKEN'],
 );
 const DEPLOYBLOCKER__DEPLOYBLOCKER__POST_THE_ISSUE_IN_THE_EXPENSIFY_OPEN_SOURCE_SLACK_ROOM__STEP_MOCK = utils.createMockStep(
     'Post the issue in the #expensify-open-source slack room',
@@ -39,12 +20,12 @@ const DEPLOYBLOCKER__DEPLOYBLOCKER__POST_THE_ISSUE_IN_THE_EXPENSIFY_OPEN_SOURCE_
     ['status'],
     ['GITHUB_TOKEN', 'SLACK_WEBHOOK_URL'],
 );
-const DEPLOYBLOCKER__DEPLOYBLOCKER__COMMENT_ON_DEFERRED_PR__STEP_MOCK = utils.createMockStep(
-    'Comment on deferred PR',
-    'Comment on deferred PR',
+const DEPLOYBLOCKER__DEPLOYBLOCKER__COMMENT_ON_DEPLOY_BLOCKER__STEP_MOCK = utils.createMockStep(
+    'Comment on deploy blocker',
+    'Comment on deploy blocker',
     'DEPLOYBLOCKER',
-    ['github_token', 'number'],
     [],
+    ['GITHUB_TOKEN'],
 );
 const DEPLOYBLOCKER__DEPLOYBLOCKER__ANNOUNCE_FAILED_WORKFLOW_IN_SLACK__STEP_MOCK = utils.createMockStep(
     'Announce failed workflow in Slack',
@@ -55,14 +36,13 @@ const DEPLOYBLOCKER__DEPLOYBLOCKER__ANNOUNCE_FAILED_WORKFLOW_IN_SLACK__STEP_MOCK
 );
 const DEPLOYBLOCKER__DEPLOYBLOCKER__STEP_MOCKS = [
     DEPLOYBLOCKER__DEPLOYBLOCKER__CHECKOUT__STEP_MOCK,
-    DEPLOYBLOCKER__DEPLOYBLOCKER__GET_URL_TITLE_AND_NUMBER_OF_NEW_DEPLOY_BLOCKER_ISSUE__STEP_MOCK,
-    DEPLOYBLOCKER__DEPLOYBLOCKER__UPDATE_STAGINGDEPLOYCASH_WITH_NEW_DEPLOY_BLOCKER__STEP_MOCK,
-    DEPLOYBLOCKER__DEPLOYBLOCKER__GIVE_THE_ISSUE_OR_PR_THE_HOURLY_ENGINEERING_LABELS__STEP_MOCK,
+    DEPLOYBLOCKER__DEPLOYBLOCKER__GIVE_LABELS__STEP_MOCK,
     DEPLOYBLOCKER__DEPLOYBLOCKER__POST_THE_ISSUE_IN_THE_EXPENSIFY_OPEN_SOURCE_SLACK_ROOM__STEP_MOCK,
-    DEPLOYBLOCKER__DEPLOYBLOCKER__COMMENT_ON_DEFERRED_PR__STEP_MOCK,
+    DEPLOYBLOCKER__DEPLOYBLOCKER__COMMENT_ON_DEPLOY_BLOCKER__STEP_MOCK,
     DEPLOYBLOCKER__DEPLOYBLOCKER__ANNOUNCE_FAILED_WORKFLOW_IN_SLACK__STEP_MOCK,
 ];
 
 module.exports = {
+    DEPLOYBLOCKER__UPDATECHECKLIST__STEP_MOCKS,
     DEPLOYBLOCKER__DEPLOYBLOCKER__STEP_MOCKS,
 };
diff --git a/workflow_tests/mocks/deployMocks.js b/workflow_tests/mocks/deployMocks.js
index dfec48ca7dc3..9e8b978f05ac 100644
--- a/workflow_tests/mocks/deployMocks.js
+++ b/workflow_tests/mocks/deployMocks.js
@@ -1,13 +1,24 @@
 const utils = require('../utils/utils');
 
 const DEPLOY_STAGING__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout staging branch', 'Checking out staging branch', 'DEPLOY_STAGING', ['ref', 'token']);
-const DEPLOY_STAGING__SETUP_GIT__STEP_MOCK = utils.createMockStep('Setup git for OSBotify', 'Setting up git for OSBotify', 'DEPLOY_STAGING', ['GPG_PASSPHRASE']);
+const DEPLOY_STAGING__SETUP_GIT__STEP_MOCK = utils.createMockStep('Setup git for OSBotify', 'Setting up git for OSBotify', 'DEPLOY_STAGING', [
+    'GPG_PASSPHRASE',
+    'OS_BOTIFY_APP_ID',
+    'OS_BOTIFY_PRIVATE_KEY',
+]);
 const DEPLOY_STAGING__TAG_VERSION__STEP_MOCK = utils.createMockStep('Tag version', 'Tagging new version', 'DEPLOY_STAGING');
 const DEPLOY_STAGING__PUSH_TAG__STEP_MOCK = utils.createMockStep('🚀 Push tags to trigger staging deploy 🚀', 'Pushing tag to trigger staging deploy', 'DEPLOY_STAGING');
 const DEPLOY_STAGING_STEP_MOCKS = [DEPLOY_STAGING__CHECKOUT__STEP_MOCK, DEPLOY_STAGING__SETUP_GIT__STEP_MOCK, DEPLOY_STAGING__TAG_VERSION__STEP_MOCK, DEPLOY_STAGING__PUSH_TAG__STEP_MOCK];
 
 const DEPLOY_PRODUCTION__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checking out', 'DEPLOY_PRODUCTION', ['ref', 'token']);
-const DEPLOY_PRODUCTION__SETUP_GIT__STEP_MOCK = utils.createMockStep('Setup git for OSBotify', 'Setting up git for OSBotify', 'DEPLOY_PRODUCTION', ['GPG_PASSPHRASE']);
+const DEPLOY_PRODUCTION__SETUP_GIT__STEP_MOCK = utils.createMockStep(
+    'Setup git for OSBotify',
+    'Setting up git for OSBotify',
+    'DEPLOY_PRODUCTION',
+    ['GPG_PASSPHRASE', 'OS_BOTIFY_APP_ID', 'OS_BOTIFY_PRIVATE_KEY'],
+    null,
+    {OS_BOTIFY_API_TOKEN: 'os_botify_api_token'},
+);
 const DEPLOY_PRODUCTION__CURRENT_APP_VERSION__STEP_MOCK = utils.createMockStep('Get current app version', 'Getting current app version', 'DEPLOY_PRODUCTION', null, null, null, {
     PRODUCTION_VERSION: '1.2.3',
 });
diff --git a/workflow_tests/mocks/finishReleaseCycleMocks.js b/workflow_tests/mocks/finishReleaseCycleMocks.js
index e1bb0d112429..29e0842852dc 100644
--- a/workflow_tests/mocks/finishReleaseCycleMocks.js
+++ b/workflow_tests/mocks/finishReleaseCycleMocks.js
@@ -1,6 +1,15 @@
 const utils = require('../utils/utils');
 
 // validate
+const FINISHRELEASECYCLE__VALIDATE__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'VALIDATE', ['ref', 'token']);
+const FINISHRELEASECYCLE__VALIDATE__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK = utils.createMockStep(
+    'Setup git for OSBotify',
+    'Setup git for OSBotify',
+    'VALIDATE',
+    ['GPG_PASSPHRASE', 'OS_BOTIFY_APP_ID', 'OS_BOTIFY_PRIVATE_KEY'],
+    [],
+    {OS_BOTIFY_API_TOKEN: 'os_botify_api_token'},
+);
 const FINISHRELEASECYCLE__VALIDATE__VALIDATE_ACTOR_IS_DEPLOYER_TRUE__STEP_MOCK = utils.createMockStep(
     'Validate actor is deployer',
     'Validating if actor is deployer',
@@ -56,6 +65,8 @@ const FINISHRELEASECYCLE__VALIDATE__ANNOUNCE_FAILED_WORKFLOW_IN_SLACK__STEP_MOCK
     [],
 );
 const FINISHRELEASECYCLE__VALIDATE__TEAM_MEMBER_NO_BLOCKERS__STEP_MOCKS = [
+    FINISHRELEASECYCLE__VALIDATE__CHECKOUT__STEP_MOCK,
+    FINISHRELEASECYCLE__VALIDATE__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__VALIDATE_ACTOR_IS_DEPLOYER_TRUE__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__REOPEN_AND_COMMENT_ON_ISSUE_NOT_A_TEAM_MEMBER__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__CHECK_FOR_ANY_DEPLOY_BLOCKERS_FALSE__STEP_MOCK,
@@ -63,6 +74,8 @@ const FINISHRELEASECYCLE__VALIDATE__TEAM_MEMBER_NO_BLOCKERS__STEP_MOCKS = [
     FINISHRELEASECYCLE__VALIDATE__ANNOUNCE_FAILED_WORKFLOW_IN_SLACK__STEP_MOCK,
 ];
 const FINISHRELEASECYCLE__VALIDATE__TEAM_MEMBER_BLOCKERS__STEP_MOCKS = [
+    FINISHRELEASECYCLE__VALIDATE__CHECKOUT__STEP_MOCK,
+    FINISHRELEASECYCLE__VALIDATE__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__VALIDATE_ACTOR_IS_DEPLOYER_TRUE__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__REOPEN_AND_COMMENT_ON_ISSUE_NOT_A_TEAM_MEMBER__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__CHECK_FOR_ANY_DEPLOY_BLOCKERS_TRUE__STEP_MOCK,
@@ -71,6 +84,8 @@ const FINISHRELEASECYCLE__VALIDATE__TEAM_MEMBER_BLOCKERS__STEP_MOCKS = [
 ];
 // eslint-disable-next-line rulesdir/no-negated-variables
 const FINISHRELEASECYCLE__VALIDATE__NOT_TEAM_MEMBER_NO_BLOCKERS__STEP_MOCKS = [
+    FINISHRELEASECYCLE__VALIDATE__CHECKOUT__STEP_MOCK,
+    FINISHRELEASECYCLE__VALIDATE__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__VALIDATE_ACTOR_IS_DEPLOYER_FALSE__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__REOPEN_AND_COMMENT_ON_ISSUE_NOT_A_TEAM_MEMBER__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__CHECK_FOR_ANY_DEPLOY_BLOCKERS_FALSE__STEP_MOCK,
@@ -79,6 +94,8 @@ const FINISHRELEASECYCLE__VALIDATE__NOT_TEAM_MEMBER_NO_BLOCKERS__STEP_MOCKS = [
 ];
 // eslint-disable-next-line rulesdir/no-negated-variables
 const FINISHRELEASECYCLE__VALIDATE__NOT_TEAM_MEMBER_BLOCKERS__STEP_MOCKS = [
+    FINISHRELEASECYCLE__VALIDATE__CHECKOUT__STEP_MOCK,
+    FINISHRELEASECYCLE__VALIDATE__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__VALIDATE_ACTOR_IS_DEPLOYER_FALSE__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__REOPEN_AND_COMMENT_ON_ISSUE_NOT_A_TEAM_MEMBER__STEP_MOCK,
     FINISHRELEASECYCLE__VALIDATE__CHECK_FOR_ANY_DEPLOY_BLOCKERS_TRUE__STEP_MOCK,
@@ -89,8 +106,8 @@ const FINISHRELEASECYCLE__VALIDATE__NOT_TEAM_MEMBER_BLOCKERS__STEP_MOCKS = [
 // updateproduction
 const FINISHRELEASECYCLE__UPDATEPRODUCTION__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'UPDATEPRODUCTION', ['ref', 'token'], []);
 const FINISHRELEASECYCLE__UPDATEPRODUCTION__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK = utils.createMockStep(
-    'Setup Git for OSBotify',
-    'Setup Git for OSBotify',
+    'Setup git for OSBotify',
+    'Setup git for OSBotify',
     'UPDATEPRODUCTION',
     ['GPG_PASSPHRASE'],
     [],
@@ -127,8 +144,8 @@ const FINISHRELEASECYCLE__CREATENEWPATCHVERSION__STEP_MOCKS = [FINISHRELEASECYCL
 // updatestaging
 const FINISHRELEASECYCLE__UPDATESTAGING__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'UPDATESTAGING', ['ref', 'token'], []);
 const FINISHRELEASECYCLE__UPDATESTAGING__SETUP_GIT_FOR_OSBOTIFY__STEP_MOCK = utils.createMockStep(
-    'Setup Git for OSBotify',
-    'Setup Git for OSBotify',
+    'Setup git for OSBotify',
+    'Setup git for OSBotify',
     'UPDATESTAGING',
     ['GPG_PASSPHRASE'],
     [],
diff --git a/workflow_tests/mocks/lintMocks.js b/workflow_tests/mocks/lintMocks.js
index ecf11074e20f..1fc5dbfd526f 100644
--- a/workflow_tests/mocks/lintMocks.js
+++ b/workflow_tests/mocks/lintMocks.js
@@ -4,12 +4,14 @@ const utils = require('../utils/utils');
 const LINT__LINT__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'LINT', [], []);
 const LINT__LINT__SETUP_NODE__STEP_MOCK = utils.createMockStep('Setup Node', 'Setup Node', 'LINT', [], []);
 const LINT__LINT__LINT_JAVASCRIPT_WITH_ESLINT__STEP_MOCK = utils.createMockStep('Lint JavaScript and Typescript with ESLint', 'Lint JavaScript with ESLint', 'LINT', [], ['CI']);
-const LINT__LINT__LINT_SHELL_SCRIPTS_WITH_SHELLCHECK__STEP_MOCK = utils.createMockStep('Lint shell scripts with ShellCheck', 'Lint shell scripts with ShellCheck', 'LINT', [], []);
+const LINT__LINT__VERIFY_NO_PRETTIER__STEP_MOCK = utils.createMockStep("Verify there's no Prettier diff", 'Verify theres no Prettier diff', 'LINT');
+const LINT__LINT__RUN_UNUSED_SEARCHER__STEP_MOCK = utils.createMockStep('Run unused style searcher', 'Run unused style searcher', 'LINT');
 const LINT__LINT__STEP_MOCKS = [
     LINT__LINT__CHECKOUT__STEP_MOCK,
     LINT__LINT__SETUP_NODE__STEP_MOCK,
     LINT__LINT__LINT_JAVASCRIPT_WITH_ESLINT__STEP_MOCK,
-    LINT__LINT__LINT_SHELL_SCRIPTS_WITH_SHELLCHECK__STEP_MOCK,
+    LINT__LINT__VERIFY_NO_PRETTIER__STEP_MOCK,
+    LINT__LINT__RUN_UNUSED_SEARCHER__STEP_MOCK,
 ];
 
 module.exports = {
diff --git a/workflow_tests/mocks/platformDeployMocks.js b/workflow_tests/mocks/platformDeployMocks.js
index 9e0b91b29156..0d75a5fd74ee 100644
--- a/workflow_tests/mocks/platformDeployMocks.js
+++ b/workflow_tests/mocks/platformDeployMocks.js
@@ -21,26 +21,14 @@ const PLATFORM_DEPLOY__VALIDATE_ACTOR__TEAM_MEMBER__STEP_MOCKS = [PLATFORM_DEPLO
 const PLATFORM_DEPLOY__VALIDATE_ACTOR__OUTSIDER__STEP_MOCKS = [PLATFORM_DEPLOY__VALIDATE_ACTOR__CHECK_USER_DEPLOYER__OUTSIDER__STEP_MOCK];
 
 // deployChecklist
-const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checkout', 'DEPLOY_CHECKLIST');
-const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__SETUP_NODE__STEP_MOCK = utils.createMockStep('Setup Node', 'Setup Node', 'DEPLOY_CHECKLIST');
-const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__SET_VERSION__STEP_MOCK = utils.createMockStep('Set version', 'Set version', 'DEPLOY_CHECKLIST', [], [], {VERSION: '1.2.3'});
-const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__CREATE_OR_UPDATE_STAGING_DEPLOY__STEP_MOCK = utils.createMockStep(
-    'Create or update staging deploy',
-    'Create or update staging deploy',
-    'DEPLOY_CHECKLIST',
-    ['GITHUB_TOKEN', 'NPM_VERSION'],
-);
-const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS = [
-    PLATFORM_DEPLOY__DEPLOY_CHECKLIST__CHECKOUT__STEP_MOCK,
-    PLATFORM_DEPLOY__DEPLOY_CHECKLIST__SETUP_NODE__STEP_MOCK,
-    PLATFORM_DEPLOY__DEPLOY_CHECKLIST__SET_VERSION__STEP_MOCK,
-    PLATFORM_DEPLOY__DEPLOY_CHECKLIST__CREATE_OR_UPDATE_STAGING_DEPLOY__STEP_MOCK,
-];
+const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCK = utils.createMockStep('deployChecklist', 'Run deployChecklist', 'DEPLOY_CHECKLIST');
+const PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS = [PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCK];
 
 // android
 const PLATFORM_DEPLOY__ANDROID__CHECKOUT__STEP_MOCK = utils.createMockStep('Checkout', 'Checking out', 'ANDROID');
 const PLATFORM_DEPLOY__ANDROID__CONFIGURE_MAPBOX_SDK__STEP_MOCK = utils.createMockStep('Configure MapBox SDK', 'Configure MapBox SDK', 'ANDROID');
 const PLATFORM_DEPLOY__ANDROID__SETUP_NODE__STEP_MOCK = utils.createMockStep('Setup Node', 'Setting up Node', 'ANDROID');
+const PLATFORM_DEPLOY__ANDROID__SETUP_JAVA__STEP_MOCK = utils.createMockStep('Setup Java', 'Setup Java', 'ANDROID', ['distribution', 'java-version'], []);
 const PLATFORM_DEPLOY__ANDROID__SETUP_RUBY__STEP_MOCK = utils.createMockStep('Setup Ruby', 'Setting up Ruby', 'ANDROID', ['ruby-version', 'bundler-cache']);
 const PLATFORM_DEPLOY__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK = utils.createMockStep('Decrypt keystore', 'Decrypting keystore', 'ANDROID', null, ['LARGE_SECRET_PASSPHRASE']);
 const PLATFORM_DEPLOY__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK = utils.createMockStep('Decrypt json key', 'Decrypting JSON key', 'ANDROID', null, ['LARGE_SECRET_PASSPHRASE']);
@@ -51,6 +39,12 @@ const PLATFORM_DEPLOY__ANDROID__FASTLANE_BETA__STEP_MOCK = utils.createMockStep(
 ]);
 const PLATFORM_DEPLOY__ANDROID__FASTLANE_PRODUCTION__STEP_MOCK = utils.createMockStep('Run Fastlane production', 'Running Fastlane production', 'ANDROID', null, ['VERSION']);
 const PLATFORM_DEPLOY__ANDROID__ARCHIVE_SOURCEMAPS__STEP_MOCK = utils.createMockStep('Archive Android sourcemaps', 'Archiving Android sourcemaps', 'ANDROID', ['name', 'path']);
+const PLATFORM_DEPLOY__ANDROID__UPLOAD_ANDROID_VERSION_TO_GITHUB_ARTIFACTS__STEP_MOCK = utils.createMockStep(
+    'Upload Android version to GitHub artifacts',
+    'Upload Android version to GitHub artifacts',
+    'ANDROID',
+    ['name', 'path'],
+);
 const PLATFORM_DEPLOY__ANDROID__UPLOAD_TO_BROWSER_STACK__STEP_MOCK = utils.createMockStep(
     'Upload Android version to Browser Stack',
     'Uploading Android version to Browser Stack',
@@ -69,6 +63,7 @@ const PLATFORM_DEPLOY__ANDROID__STEP_MOCKS = [
     PLATFORM_DEPLOY__ANDROID__CHECKOUT__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__CONFIGURE_MAPBOX_SDK__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__SETUP_NODE__STEP_MOCK,
+    PLATFORM_DEPLOY__ANDROID__SETUP_JAVA__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__SETUP_RUBY__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK,
@@ -76,6 +71,7 @@ const PLATFORM_DEPLOY__ANDROID__STEP_MOCKS = [
     PLATFORM_DEPLOY__ANDROID__FASTLANE_BETA__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__FASTLANE_PRODUCTION__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__ARCHIVE_SOURCEMAPS__STEP_MOCK,
+    PLATFORM_DEPLOY__ANDROID__UPLOAD_ANDROID_VERSION_TO_GITHUB_ARTIFACTS__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__UPLOAD_TO_BROWSER_STACK__STEP_MOCK,
     PLATFORM_DEPLOY__ANDROID__WARN_DEPLOYERS__STEP_MOCK,
 ];
@@ -139,6 +135,12 @@ const PLATFORM_DEPLOY__IOS__FASTLANE__STEP_MOCK = utils.createMockStep('Run Fast
     'APPLE_DEMO_PASSWORD',
 ]);
 const PLATFORM_DEPLOY__IOS__ARCHIVE_SOURCEMAPS__STEP_MOCK = utils.createMockStep('Archive iOS sourcemaps', 'Archiving sourcemaps', 'IOS', ['name', 'path']);
+const PLATFORM_DEPLOY__IOS__UPLOAD_IOS_VERSION_TO_GITHUB_ARTIFACTS__STEP_MOCK = utils.createMockStep(
+    'Upload iOS version to GitHub artifacts',
+    'Upload iOS version to GitHub artifacts',
+    'IOS',
+    ['name', 'path'],
+);
 const PLATFORM_DEPLOY__IOS__UPLOAD_BROWSERSTACK__STEP_MOCK = utils.createMockStep('Upload iOS version to Browser Stack', 'Uploading version to Browser Stack', 'IOS', null, ['BROWSERSTACK']);
 const PLATFORM_DEPLOY__IOS__SET_VERSION__STEP_MOCK = utils.createMockStep('Set iOS version in ENV', 'Setting iOS version', 'IOS', null, null, null, {IOS_VERSION: '1.2.3'});
 const PLATFORM_DEPLOY__IOS__RELEASE_FASTLANE__STEP_MOCK = utils.createMockStep('Run Fastlane for App Store release', 'Running Fastlane for release', 'IOS', null, ['VERSION']);
@@ -162,6 +164,7 @@ const PLATFORM_DEPLOY__IOS__STEP_MOCKS = [
     PLATFORM_DEPLOY__IOS__DECRYPT_APP_STORE_API_KEY__STEP_MOCK,
     PLATFORM_DEPLOY__IOS__FASTLANE__STEP_MOCK,
     PLATFORM_DEPLOY__IOS__ARCHIVE_SOURCEMAPS__STEP_MOCK,
+    PLATFORM_DEPLOY__IOS__UPLOAD_IOS_VERSION_TO_GITHUB_ARTIFACTS__STEP_MOCK,
     PLATFORM_DEPLOY__IOS__UPLOAD_BROWSERSTACK__STEP_MOCK,
     PLATFORM_DEPLOY__IOS__SET_VERSION__STEP_MOCK,
     PLATFORM_DEPLOY__IOS__RELEASE_FASTLANE__STEP_MOCK,
diff --git a/workflow_tests/mocks/preDeployMocks.js b/workflow_tests/mocks/preDeployMocks.js
index 3dc67a904cf9..daadf3d0c743 100644
--- a/workflow_tests/mocks/preDeployMocks.js
+++ b/workflow_tests/mocks/preDeployMocks.js
@@ -86,99 +86,6 @@ const UPDATE_STAGING_JOB_MOCK_STEPS = [
     ANNOUNCE_FAILED_WORKFLOW_IN_SLACK_MOCK_STEP,
 ];
 
-// is_expensify_employee
-const GET_MERGED_PULL_REQUEST_MOCK_STEP__IS_EXPENSIFY_EMPLOYEE = utils.createMockStep(
-    'Get merged pull request',
-    'Getting merged pull request',
-    'IS_EXPENSIFY_EMPLOYEE',
-    ['github_token'],
-    null,
-    {author: 'Dummy Author'},
-);
-const CHECK_TEAM_MEMBERSHIP_MOCK_STEP__TRUE = utils.createMockStep(
-    'Check whether the PR author is member of Expensify/expensify team',
-    'Checking actors Expensify membership',
-    'IS_EXPENSIFY_EMPLOYEE',
-    [],
-    ['GITHUB_TOKEN'],
-    {IS_EXPENSIFY_EMPLOYEE: true},
-);
-const IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE = [GET_MERGED_PULL_REQUEST_MOCK_STEP__IS_EXPENSIFY_EMPLOYEE, CHECK_TEAM_MEMBERSHIP_MOCK_STEP__TRUE];
-const CHECK_TEAM_MEMBERSHIP_MOCK_STEP__FALSE = utils.createMockStep(
-    'Check whether the PR author is member of Expensify/expensify team',
-    'Checking actors Expensify membership',
-    'IS_EXPENSIFY_EMPLOYEE',
-    [],
-    ['GITHUB_TOKEN'],
-    {IS_EXPENSIFY_EMPLOYEE: false},
-);
-const IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__FALSE = [GET_MERGED_PULL_REQUEST_MOCK_STEP__IS_EXPENSIFY_EMPLOYEE, CHECK_TEAM_MEMBERSHIP_MOCK_STEP__FALSE];
-
-// new_contributor_welcome_message
-const CHECKOUT_MOCK_STEP = utils.createMockStep('Checkout', 'Checking out', 'NEW_CONTRIBUTOR_WELCOME_MESSAGE', ['token'], null, {author: 'Dummy Author'});
-const CHECKOUT_MOCK_STEP__OSBOTIFY = utils.createMockStep('Checkout', 'Checking out', 'NEW_CONTRIBUTOR_WELCOME_MESSAGE', ['token'], null, {author: 'OSBotify'});
-const GET_MERGED_PULL_REQUEST_MOCK_STEP__WELCOME_MESSAGE = utils.createMockStep(
-    'Get merged pull request',
-    'Getting merged pull request',
-    'NEW_CONTRIBUTOR_WELCOME_MESSAGE',
-    ['github_token'],
-    null,
-    {number: '12345', author: 'Dummy Author'},
-);
-const GET_MERGED_PULL_REQUEST_MOCK_STEP__WELCOME_MESSAGE__OSBOTIFY = utils.createMockStep(
-    'Get merged pull request',
-    'Getting merged pull request',
-    'NEW_CONTRIBUTOR_WELCOME_MESSAGE',
-    ['github_token'],
-    null,
-    {number: '12345', author: 'OSBotify'},
-);
-const GET_PR_COUNT_MOCK_STEP__1 = utils.createMockStep(
-    // eslint-disable-next-line no-template-curly-in-string
-    'Get PR count for ${{ steps.getMergedPullRequest.outputs.author }}',
-    'Getting PR count',
-    'NEW_CONTRIBUTOR_WELCOME_MESSAGE',
-    null,
-    ['GITHUB_TOKEN'],
-    null,
-    {PR_COUNT: '1'},
-);
-const GET_PR_COUNT_MOCK_STEP__10 = utils.createMockStep(
-    // eslint-disable-next-line no-template-curly-in-string
-    'Get PR count for ${{ steps.getMergedPullRequest.outputs.author }}',
-    'Getting PR count',
-    'NEW_CONTRIBUTOR_WELCOME_MESSAGE',
-    null,
-    ['GITHUB_TOKEN'],
-    null,
-    {PR_COUNT: '10'},
-);
-const COMMENT_ON_FIRST_PULL_REQUEST_MOCK_STEP = utils.createMockStep(
-    // eslint-disable-next-line no-template-curly-in-string
-    "Comment on ${{ steps.getMergedPullRequest.outputs.author }}\\'s first pull request!",
-    'Creating comment',
-    'NEW_CONTRIBUTOR_WELCOME_MESSAGE',
-    ['github_token', 'number', 'body'],
-);
-const NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS = [
-    CHECKOUT_MOCK_STEP,
-    GET_MERGED_PULL_REQUEST_MOCK_STEP__WELCOME_MESSAGE,
-    GET_PR_COUNT_MOCK_STEP__10,
-    COMMENT_ON_FIRST_PULL_REQUEST_MOCK_STEP,
-];
-const NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__ONE_PR = [
-    CHECKOUT_MOCK_STEP,
-    GET_MERGED_PULL_REQUEST_MOCK_STEP__WELCOME_MESSAGE,
-    GET_PR_COUNT_MOCK_STEP__1,
-    COMMENT_ON_FIRST_PULL_REQUEST_MOCK_STEP,
-];
-const NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__OSBOTIFY = [
-    CHECKOUT_MOCK_STEP__OSBOTIFY,
-    GET_MERGED_PULL_REQUEST_MOCK_STEP__WELCOME_MESSAGE__OSBOTIFY,
-    GET_PR_COUNT_MOCK_STEP__10,
-    COMMENT_ON_FIRST_PULL_REQUEST_MOCK_STEP,
-];
-
 const PREDEPLOY__E2EPERFORMANCETESTS__PERFORM_E2E_TESTS__MOCK_STEP = utils.createMockStep('Perform E2E tests', 'Perform E2E tests', 'E2EPERFORMANCETESTS');
 const PREDEPLOY__E2EPERFORMANCETESTS__MOCK_STEPS = [PREDEPLOY__E2EPERFORMANCETESTS__PERFORM_E2E_TESTS__MOCK_STEP];
 
@@ -192,10 +99,5 @@ module.exports = {
     SKIP_DEPLOY_JOB_MOCK_STEPS,
     CREATE_NEW_VERSION_JOB_MOCK_STEPS,
     UPDATE_STAGING_JOB_MOCK_STEPS,
-    IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-    IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__FALSE,
-    NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
-    NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__ONE_PR,
-    NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__OSBOTIFY,
     PREDEPLOY__E2EPERFORMANCETESTS__MOCK_STEPS,
 };
diff --git a/workflow_tests/mocks/testBuildMocks.js b/workflow_tests/mocks/testBuildMocks.js
index bdff0ac57ae1..d7ae9abdb8e7 100644
--- a/workflow_tests/mocks/testBuildMocks.js
+++ b/workflow_tests/mocks/testBuildMocks.js
@@ -62,6 +62,7 @@ const TESTBUILD__ANDROID__CREATE_ENV_ADHOC__STEP_MOCK = utils.createMockStep(
     [],
 );
 const TESTBUILD__ANDROID__SETUP_NODE__STEP_MOCK = utils.createMockStep('Setup Node', 'Setup Node', 'ANDROID', [], []);
+const TESTBUILD__ANDROID__SETUP_JAVA__STEP_MOCK = utils.createMockStep('Setup Java', 'Setup Java', 'ANDROID', ['distribution', 'java-version'], []);
 const TESTBUILD__ANDROID__SETUP_RUBY__STEP_MOCK = utils.createMockStep('Setup Ruby', 'Setup Ruby', 'ANDROID', ['ruby-version', 'bundler-cache'], []);
 const TESTBUILD__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK = utils.createMockStep('Decrypt keystore', 'Decrypt keystore', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE']);
 const TESTBUILD__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK = utils.createMockStep('Decrypt json key', 'Decrypt json key', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE']);
@@ -85,6 +86,7 @@ const TESTBUILD__ANDROID__STEP_MOCKS = [
     TESTBUILD__ANDROID__CHECKOUT__STEP_MOCK,
     TESTBUILD__ANDROID__CREATE_ENV_ADHOC__STEP_MOCK,
     TESTBUILD__ANDROID__SETUP_NODE__STEP_MOCK,
+    TESTBUILD__ANDROID__SETUP_JAVA__STEP_MOCK,
     TESTBUILD__ANDROID__SETUP_RUBY__STEP_MOCK,
     TESTBUILD__ANDROID__DECRYPT_KEYSTORE__STEP_MOCK,
     TESTBUILD__ANDROID__DECRYPT_JSON_KEY__STEP_MOCK,
diff --git a/workflow_tests/platformDeploy.test.js b/workflow_tests/platformDeploy.test.js
index e74b8e873001..6bcd5ff5b896 100644
--- a/workflow_tests/platformDeploy.test.js
+++ b/workflow_tests/platformDeploy.test.js
@@ -90,7 +90,6 @@ describe('test workflow platformDeploy', () => {
                 );
                 const testMockSteps = {
                     validateActor: mocks.PLATFORM_DEPLOY__VALIDATE_ACTOR__TEAM_MEMBER__STEP_MOCKS,
-                    deployChecklist: mocks.PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS,
                     android: mocks.PLATFORM_DEPLOY__ANDROID__STEP_MOCKS,
                     desktop: mocks.PLATFORM_DEPLOY__DESKTOP__STEP_MOCKS,
                     iOS: mocks.PLATFORM_DEPLOY__IOS__STEP_MOCKS,
@@ -99,11 +98,18 @@ describe('test workflow platformDeploy', () => {
                     postSlackMessageOnSuccess: mocks.PLATFORM_DEPLOY__POST_SLACK_SUCCESS__STEP_MOCKS,
                     postGithubComment: mocks.PLATFORM_DEPLOY__POST_GITHUB_COMMENT__STEP_MOCKS,
                 };
+                const testMockJobs = {
+                    deployChecklist: {
+                        steps: mocks.PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS,
+                        runsOn: 'ubuntu-latest',
+                    },
+                };
                 const result = await act.runEvent('push', {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'platformDeploy.yml'),
                     mockSteps: testMockSteps,
                     actor: 'Dummy Author',
                     logFile: utils.getLogFilePath('platformDeploy', expect.getState().currentTestName),
+                    mockJobs: testMockJobs,
                 });
 
                 assertions.assertVerifyActorJobExecuted(result, 'Dummy Author');
@@ -166,7 +172,6 @@ describe('test workflow platformDeploy', () => {
                 );
                 const testMockSteps = {
                     validateActor: mocks.PLATFORM_DEPLOY__VALIDATE_ACTOR__OUTSIDER__STEP_MOCKS,
-                    deployChecklist: mocks.PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS,
                     android: mocks.PLATFORM_DEPLOY__ANDROID__STEP_MOCKS,
                     desktop: mocks.PLATFORM_DEPLOY__DESKTOP__STEP_MOCKS,
                     iOS: mocks.PLATFORM_DEPLOY__IOS__STEP_MOCKS,
@@ -175,11 +180,18 @@ describe('test workflow platformDeploy', () => {
                     postSlackMessageOnSuccess: mocks.PLATFORM_DEPLOY__POST_SLACK_SUCCESS__STEP_MOCKS,
                     postGithubComment: mocks.PLATFORM_DEPLOY__POST_GITHUB_COMMENT__STEP_MOCKS,
                 };
+                const testMockJobs = {
+                    deployChecklist: {
+                        steps: mocks.PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS,
+                        runsOn: 'ubuntu-latest',
+                    },
+                };
                 const result = await act.runEvent('push', {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'platformDeploy.yml'),
                     mockSteps: testMockSteps,
                     actor: 'OSBotify',
                     logFile: utils.getLogFilePath('platformDeploy', expect.getState().currentTestName),
+                    mockJobs: testMockJobs,
                 });
 
                 assertions.assertVerifyActorJobExecuted(result, 'OSBotify');
@@ -242,7 +254,6 @@ describe('test workflow platformDeploy', () => {
                 );
                 const testMockSteps = {
                     validateActor: mocks.PLATFORM_DEPLOY__VALIDATE_ACTOR__OUTSIDER__STEP_MOCKS,
-                    deployChecklist: mocks.PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS,
                     android: mocks.PLATFORM_DEPLOY__ANDROID__STEP_MOCKS,
                     desktop: mocks.PLATFORM_DEPLOY__DESKTOP__STEP_MOCKS,
                     iOS: mocks.PLATFORM_DEPLOY__IOS__STEP_MOCKS,
@@ -251,11 +262,18 @@ describe('test workflow platformDeploy', () => {
                     postSlackMessageOnSuccess: mocks.PLATFORM_DEPLOY__POST_SLACK_SUCCESS__STEP_MOCKS,
                     postGithubComment: mocks.PLATFORM_DEPLOY__POST_GITHUB_COMMENT__STEP_MOCKS,
                 };
+                const testMockJobs = {
+                    deployChecklist: {
+                        steps: mocks.PLATFORM_DEPLOY__DEPLOY_CHECKLIST__STEP_MOCKS,
+                        runsOn: 'ubuntu-latest',
+                    },
+                };
                 const result = await act.runEvent('push', {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'platformDeploy.yml'),
                     mockSteps: testMockSteps,
                     actor: 'Dummy Author',
                     logFile: utils.getLogFilePath('platformDeploy', expect.getState().currentTestName),
+                    mockJobs: testMockJobs,
                 });
 
                 assertions.assertVerifyActorJobExecuted(result, 'Dummy Author');
diff --git a/workflow_tests/preDeploy.test.js b/workflow_tests/preDeploy.test.js
index 4a4d9dcc82bb..0d5b126b4430 100644
--- a/workflow_tests/preDeploy.test.js
+++ b/workflow_tests/preDeploy.test.js
@@ -68,8 +68,6 @@ describe('test workflow preDeploy', () => {
             chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
             skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
             updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-            isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-            newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
         };
         const testMockJobs = {
             typecheck: {
@@ -112,7 +110,6 @@ describe('test workflow preDeploy', () => {
         assertions.assertTypecheckJobExecuted(result);
         assertions.assertLintJobExecuted(result);
         assertions.assertTestJobExecuted(result);
-        assertions.assertIsExpensifyEmployeeJobExecuted(result);
         assertions.assertChooseDeployActionsJobExecuted(result);
         assertions.assertSkipDeployJobExecuted(result, false);
         assertions.assertCreateNewVersionJobExecuted(result);
@@ -128,8 +125,6 @@ describe('test workflow preDeploy', () => {
             chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
             skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
             updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-            isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-            newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
         };
         const testMockJobs = {
             typecheck: {
@@ -180,7 +175,6 @@ describe('test workflow preDeploy', () => {
         assertions.assertTypecheckJobExecuted(result, false);
         assertions.assertLintJobExecuted(result, false);
         assertions.assertTestJobExecuted(result, false);
-        assertions.assertIsExpensifyEmployeeJobExecuted(result, false);
         assertions.assertChooseDeployActionsJobExecuted(result, false);
         assertions.assertSkipDeployJobExecuted(result, false);
         assertions.assertCreateNewVersionJobExecuted(result, false);
@@ -208,7 +202,6 @@ describe('test workflow preDeploy', () => {
         assertions.assertTypecheckJobExecuted(result, false);
         assertions.assertLintJobExecuted(result, false);
         assertions.assertTestJobExecuted(result, false);
-        assertions.assertIsExpensifyEmployeeJobExecuted(result, false);
         assertions.assertChooseDeployActionsJobExecuted(result, false);
         assertions.assertSkipDeployJobExecuted(result, false);
         assertions.assertCreateNewVersionJobExecuted(result, false);
@@ -236,8 +229,6 @@ describe('test workflow preDeploy', () => {
                 chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
                 skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                 updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
             };
             const testMockJobs = {
                 typecheck: {
@@ -277,7 +268,6 @@ describe('test workflow preDeploy', () => {
             );
             assertions.assertLintJobExecuted(result);
             assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
             expect(result).toEqual(
                 expect.arrayContaining([
                     utils.createStepAssertion('Announce failed workflow in Slack', true, null, 'CONFIRM_PASSING_BUILD', 'Announcing failed workflow in slack', [
@@ -312,8 +302,6 @@ describe('test workflow preDeploy', () => {
                 chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
                 skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                 updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
             };
             const testMockJobs = {
                 typecheck: {
@@ -351,7 +339,6 @@ describe('test workflow preDeploy', () => {
             assertions.assertTypecheckJobExecuted(result);
             expect(result).toEqual(expect.arrayContaining([utils.createStepAssertion('Run lint workflow', false, null, 'LINT', 'Running lint workflow - Lint workflow failed')]));
             assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
             expect(result).toEqual(
                 expect.arrayContaining([
                     utils.createStepAssertion('Announce failed workflow in Slack', true, null, 'CONFIRM_PASSING_BUILD', 'Announcing failed workflow in slack', [
@@ -386,8 +373,6 @@ describe('test workflow preDeploy', () => {
                 chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
                 skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                 updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
             };
             const testMockJobs = {
                 typecheck: {
@@ -425,7 +410,6 @@ describe('test workflow preDeploy', () => {
             assertions.assertTypecheckJobExecuted(result);
             assertions.assertLintJobExecuted(result);
             expect(result).toEqual(expect.arrayContaining([utils.createStepAssertion('Run test workflow', false, null, 'TEST', 'Running test workflow - Test workflow failed')]));
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
             expect(result).toEqual(
                 expect.arrayContaining([
                     utils.createStepAssertion('Announce failed workflow in Slack', true, null, 'CONFIRM_PASSING_BUILD', 'Announcing failed workflow in slack', [
@@ -460,8 +444,6 @@ describe('test workflow preDeploy', () => {
                 chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
                 skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                 updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
             };
             const testMockJobs = {
                 typecheck: {
@@ -499,7 +481,6 @@ describe('test workflow preDeploy', () => {
             assertions.assertTypecheckJobExecuted(result);
             assertions.assertLintJobExecuted(result);
             assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
             assertions.assertChooseDeployActionsJobExecuted(result);
             assertions.assertSkipDeployJobExecuted(result, false);
             assertions.assertCreateNewVersionJobExecuted(result);
@@ -507,264 +488,6 @@ describe('test workflow preDeploy', () => {
         });
     });
 
-    describe('new contributor welcome message', () => {
-        it('actor is OSBotify - no comment left', async () => {
-            const repoPath = mockGithub.repo.getPath('testPreDeployWorkflowRepo') || '';
-            const workflowPath = path.join(repoPath, '.github', 'workflows', 'preDeploy.yml');
-            let act = new eAct.ExtendedAct(repoPath, workflowPath);
-            act = utils.setUpActParams(
-                act,
-                'push',
-                {ref: 'refs/heads/main'},
-                {
-                    OS_BOTIFY_TOKEN: 'dummy_token',
-                    SLACK_WEBHOOK: 'dummy_slack_webhook',
-                    LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                },
-                'dummy_github_token',
-            );
-            const testMockSteps = {
-                confirmPassingBuild: mocks.CONFIRM_PASSING_BUILD_JOB_MOCK_STEPS,
-                chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
-                skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
-                updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__FALSE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__OSBOTIFY,
-            };
-            const testMockJobs = {
-                typecheck: {
-                    steps: mocks.TYPECHECK_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                lint: {
-                    steps: mocks.LINT_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                test: {
-                    steps: mocks.TEST_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                createNewVersion: {
-                    steps: mocks.CREATE_NEW_VERSION_JOB_MOCK_STEPS,
-                    outputs: {
-                        // eslint-disable-next-line no-template-curly-in-string
-                        NEW_VERSION: '${{ steps.createNewVersion.outputs.NEW_VERSION }}',
-                    },
-                    runsOn: 'ubuntu-latest',
-                },
-                e2ePerformanceTests: {
-                    steps: mocks.PREDEPLOY__E2EPERFORMANCETESTS__MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-            };
-            const result = await act.runEvent('push', {
-                workflowFile: path.join(repoPath, '.github', 'workflows', 'preDeploy.yml'),
-                mockSteps: testMockSteps,
-                actor: 'OSBotify',
-                logFile: utils.getLogFilePath('preDeploy', expect.getState().currentTestName),
-                mockJobs: testMockJobs,
-            });
-            assertions.assertTypecheckJobExecuted(result);
-            assertions.assertLintJobExecuted(result);
-            assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
-            assertions.assertChooseDeployActionsJobExecuted(result);
-            assertions.assertNewContributorWelcomeMessageJobExecuted(result, false);
-        });
-
-        it('actor is Expensify employee - no comment left', async () => {
-            const repoPath = mockGithub.repo.getPath('testPreDeployWorkflowRepo') || '';
-            const workflowPath = path.join(repoPath, '.github', 'workflows', 'preDeploy.yml');
-            let act = new eAct.ExtendedAct(repoPath, workflowPath);
-            act = utils.setUpActParams(
-                act,
-                'push',
-                {ref: 'refs/heads/main'},
-                {
-                    OS_BOTIFY_TOKEN: 'dummy_token',
-                    SLACK_WEBHOOK: 'dummy_slack_webhook',
-                    LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                },
-                'dummy_github_token',
-            );
-            const testMockSteps = {
-                confirmPassingBuild: mocks.CONFIRM_PASSING_BUILD_JOB_MOCK_STEPS,
-                chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
-                skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
-                updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
-            };
-            const testMockJobs = {
-                typecheck: {
-                    steps: mocks.TYPECHECK_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                lint: {
-                    steps: mocks.LINT_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                test: {
-                    steps: mocks.TEST_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                createNewVersion: {
-                    steps: mocks.CREATE_NEW_VERSION_JOB_MOCK_STEPS,
-                    outputs: {
-                        // eslint-disable-next-line no-template-curly-in-string
-                        NEW_VERSION: '${{ steps.createNewVersion.outputs.NEW_VERSION }}',
-                    },
-                    runsOn: 'ubuntu-latest',
-                },
-                e2ePerformanceTests: {
-                    steps: mocks.PREDEPLOY__E2EPERFORMANCETESTS__MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-            };
-            const result = await act.runEvent('push', {
-                workflowFile: path.join(repoPath, '.github', 'workflows', 'preDeploy.yml'),
-                mockSteps: testMockSteps,
-                actor: 'Dummy Tester',
-                logFile: utils.getLogFilePath('preDeploy', expect.getState().currentTestName),
-                mockJobs: testMockJobs,
-            });
-            assertions.assertTypecheckJobExecuted(result);
-            assertions.assertLintJobExecuted(result);
-            assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
-            assertions.assertChooseDeployActionsJobExecuted(result);
-            assertions.assertNewContributorWelcomeMessageJobExecuted(result, false);
-        });
-
-        it('actor is not Expensify employee, its not their first PR - job triggers, but no comment left', async () => {
-            const repoPath = mockGithub.repo.getPath('testPreDeployWorkflowRepo') || '';
-            const workflowPath = path.join(repoPath, '.github', 'workflows', 'preDeploy.yml');
-            let act = new eAct.ExtendedAct(repoPath, workflowPath);
-            act = utils.setUpActParams(
-                act,
-                'push',
-                {ref: 'refs/heads/main'},
-                {
-                    OS_BOTIFY_TOKEN: 'dummy_token',
-                    SLACK_WEBHOOK: 'dummy_slack_webhook',
-                    LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                },
-                'dummy_github_token',
-            );
-            const testMockSteps = {
-                confirmPassingBuild: mocks.CONFIRM_PASSING_BUILD_JOB_MOCK_STEPS,
-                chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
-                skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
-                updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__FALSE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
-            };
-            const testMockJobs = {
-                typecheck: {
-                    steps: mocks.TYPECHECK_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                lint: {
-                    steps: mocks.LINT_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                test: {
-                    steps: mocks.TEST_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                createNewVersion: {
-                    steps: mocks.CREATE_NEW_VERSION_JOB_MOCK_STEPS,
-                    outputs: {
-                        // eslint-disable-next-line no-template-curly-in-string
-                        NEW_VERSION: '${{ steps.createNewVersion.outputs.NEW_VERSION }}',
-                    },
-                    runsOn: 'ubuntu-latest',
-                },
-                e2ePerformanceTests: {
-                    steps: mocks.PREDEPLOY__E2EPERFORMANCETESTS__MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-            };
-            const result = await act.runEvent('push', {
-                workflowFile: path.join(repoPath, '.github', 'workflows', 'preDeploy.yml'),
-                mockSteps: testMockSteps,
-                actor: 'Dummy Tester',
-                logFile: utils.getLogFilePath('preDeploy', expect.getState().currentTestName),
-                mockJobs: testMockJobs,
-            });
-            assertions.assertTypecheckJobExecuted(result);
-            assertions.assertLintJobExecuted(result);
-            assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
-            assertions.assertChooseDeployActionsJobExecuted(result);
-            assertions.assertNewContributorWelcomeMessageJobExecuted(result, true, false, false);
-        });
-
-        it('actor is not Expensify employee, and its their first PR - job triggers and comment left', async () => {
-            const repoPath = mockGithub.repo.getPath('testPreDeployWorkflowRepo') || '';
-            const workflowPath = path.join(repoPath, '.github', 'workflows', 'preDeploy.yml');
-            let act = new eAct.ExtendedAct(repoPath, workflowPath);
-            act = utils.setUpActParams(
-                act,
-                'push',
-                {ref: 'refs/heads/main'},
-                {
-                    OS_BOTIFY_TOKEN: 'dummy_token',
-                    SLACK_WEBHOOK: 'dummy_slack_webhook',
-                    LARGE_SECRET_PASSPHRASE: '3xtr3m3ly_53cr3t_p455w0rd',
-                },
-                'dummy_github_token',
-            );
-            const testMockSteps = {
-                confirmPassingBuild: mocks.CONFIRM_PASSING_BUILD_JOB_MOCK_STEPS,
-                chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
-                skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
-                updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__FALSE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__ONE_PR,
-            };
-            const testMockJobs = {
-                typecheck: {
-                    steps: mocks.TYPECHECK_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                lint: {
-                    steps: mocks.LINT_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                test: {
-                    steps: mocks.TEST_JOB_MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-                createNewVersion: {
-                    steps: mocks.CREATE_NEW_VERSION_JOB_MOCK_STEPS,
-                    outputs: {
-                        // eslint-disable-next-line no-template-curly-in-string
-                        NEW_VERSION: '${{ steps.createNewVersion.outputs.NEW_VERSION }}',
-                    },
-                    runsOn: 'ubuntu-latest',
-                },
-                e2ePerformanceTests: {
-                    steps: mocks.PREDEPLOY__E2EPERFORMANCETESTS__MOCK_STEPS,
-                    runsOn: 'ubuntu-latest',
-                },
-            };
-            const result = await act.runEvent('push', {
-                workflowFile: path.join(repoPath, '.github', 'workflows', 'preDeploy.yml'),
-                mockSteps: testMockSteps,
-                actor: 'Dummy Tester',
-                logFile: utils.getLogFilePath('preDeploy', expect.getState().currentTestName),
-                mockJobs: testMockJobs,
-            });
-            assertions.assertTypecheckJobExecuted(result);
-            assertions.assertLintJobExecuted(result);
-            assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
-            assertions.assertChooseDeployActionsJobExecuted(result);
-            assertions.assertNewContributorWelcomeMessageJobExecuted(result, true, false, true);
-        });
-    });
-
     describe('choose deploy actions', () => {
         describe('staging locked', () => {
             it('not automated PR - deploy skipped and comment left', async () => {
@@ -777,8 +500,6 @@ describe('test workflow preDeploy', () => {
                     chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_LOCKED,
                     skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                     updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                    isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                    newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
                 };
                 const testMockJobs = {
                     typecheck: {
@@ -816,7 +537,6 @@ describe('test workflow preDeploy', () => {
                 assertions.assertTypecheckJobExecuted(result);
                 assertions.assertLintJobExecuted(result);
                 assertions.assertTestJobExecuted(result);
-                assertions.assertIsExpensifyEmployeeJobExecuted(result);
                 assertions.assertChooseDeployActionsJobExecuted(result);
                 assertions.assertSkipDeployJobExecuted(result);
                 assertions.assertCreateNewVersionJobExecuted(result, false);
@@ -834,8 +554,6 @@ describe('test workflow preDeploy', () => {
                     chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_LOCKED,
                     skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                     updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                    isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                    newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__OSBOTIFY,
                 };
                 const testMockJobs = {
                     typecheck: {
@@ -873,7 +591,6 @@ describe('test workflow preDeploy', () => {
                 assertions.assertTypecheckJobExecuted(result);
                 assertions.assertLintJobExecuted(result);
                 assertions.assertTestJobExecuted(result);
-                assertions.assertIsExpensifyEmployeeJobExecuted(result);
                 assertions.assertChooseDeployActionsJobExecuted(result);
                 assertions.assertSkipDeployJobExecuted(result, false);
                 assertions.assertCreateNewVersionJobExecuted(result, false);
@@ -903,8 +620,6 @@ describe('test workflow preDeploy', () => {
                     chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
                     skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                     updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                    isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                    newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
                 };
                 const testMockJobs = {
                     typecheck: {
@@ -942,7 +657,6 @@ describe('test workflow preDeploy', () => {
                 assertions.assertTypecheckJobExecuted(result);
                 assertions.assertLintJobExecuted(result);
                 assertions.assertTestJobExecuted(result);
-                assertions.assertIsExpensifyEmployeeJobExecuted(result);
                 assertions.assertChooseDeployActionsJobExecuted(result);
                 assertions.assertSkipDeployJobExecuted(result, false);
                 assertions.assertCreateNewVersionJobExecuted(result);
@@ -969,8 +683,6 @@ describe('test workflow preDeploy', () => {
                     chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
                     skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                     updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                    isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                    newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__OSBOTIFY,
                 };
                 const testMockJobs = {
                     typecheck: {
@@ -1008,7 +720,6 @@ describe('test workflow preDeploy', () => {
                 assertions.assertTypecheckJobExecuted(result);
                 assertions.assertLintJobExecuted(result);
                 assertions.assertTestJobExecuted(result);
-                assertions.assertIsExpensifyEmployeeJobExecuted(result);
                 assertions.assertChooseDeployActionsJobExecuted(result);
                 assertions.assertSkipDeployJobExecuted(result, false);
                 assertions.assertCreateNewVersionJobExecuted(result, false);
@@ -1037,8 +748,6 @@ describe('test workflow preDeploy', () => {
                 chooseDeployActions: mocks.CHOOSE_DEPLOY_ACTIONS_JOB_MOCK_STEPS__STAGING_UNLOCKED,
                 skipDeploy: mocks.SKIP_DEPLOY_JOB_MOCK_STEPS,
                 updateStaging: mocks.UPDATE_STAGING_JOB_MOCK_STEPS,
-                isExpensifyEmployee: mocks.IS_EXPENSIFY_EMPLOYEE_JOB_MOCK_STEPS__TRUE,
-                newContributorWelcomeMessage: mocks.NEW_CONTRIBUTOR_WELCOME_MESSAGE_JOB_MOCK_STEPS__MANY_PRS,
             };
             testMockSteps.updateStaging[3].mockWith = 'exit 1';
             const testMockJobs = {
@@ -1077,7 +786,6 @@ describe('test workflow preDeploy', () => {
             assertions.assertTypecheckJobExecuted(result);
             assertions.assertLintJobExecuted(result);
             assertions.assertTestJobExecuted(result);
-            assertions.assertIsExpensifyEmployeeJobExecuted(result);
             assertions.assertChooseDeployActionsJobExecuted(result);
             assertions.assertSkipDeployJobExecuted(result, false);
             assertions.assertCreateNewVersionJobExecuted(result);
diff --git a/workflow_tests/testBuild.test.js b/workflow_tests/testBuild.test.js
index 4288ea236ab2..f50032f0c54a 100644
--- a/workflow_tests/testBuild.test.js
+++ b/workflow_tests/testBuild.test.js
@@ -201,7 +201,7 @@ describe('test workflow testBuild', () => {
                     web: mocks.TESTBUILD__WEB__STEP_MOCKS,
                     postGithubComment: mocks.TESTBUILD__POSTGITHUBCOMMENT__STEP_MOCKS,
                 };
-                testMockSteps.android[4] = utils.createMockStep('Decrypt keystore', 'Decrypt keystore', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE'], {}, {}, false);
+                testMockSteps.android[5] = utils.createMockStep('Decrypt keystore', 'Decrypt keystore', 'ANDROID', [], ['LARGE_SECRET_PASSPHRASE'], {}, {}, false);
                 const result = await act.runEvent(event, {
                     workflowFile: path.join(repoPath, '.github', 'workflows', 'testBuild.yml'),
                     mockSteps: testMockSteps,
@@ -211,7 +211,7 @@ describe('test workflow testBuild', () => {
 
                 assertions.assertValidateActorJobExecuted(result, '1234');
                 assertions.assertGetBranchRefJobExecuted(result);
-                assertions.assertAndroidJobExecuted(result, 'test-ref', true, 4);
+                assertions.assertAndroidJobExecuted(result, 'test-ref', true, 5);
                 assertions.assertIOSJobExecuted(result, 'test-ref');
                 assertions.assertDesktopJobExecuted(result, 'test-ref');
                 assertions.assertWebJobExecuted(result, 'test-ref');