diff --git a/.github/workflows/testBuild.yml b/.github/workflows/testBuild.yml
index 7c11b1448a1..3abcf583799 100644
--- a/.github/workflows/testBuild.yml
+++ b/.github/workflows/testBuild.yml
@@ -17,38 +17,33 @@ jobs:
   validateActor:
     runs-on: ubuntu-latest
     outputs:
-      READY_TO_BUILD: ${{steps.readyToBuild.outputs.READY_TO_BUILD}}
+      READY_TO_BUILD: ${{ fromJSON(steps.isUserTeamMember.outputs.isTeamMember) && fromJSON(steps.hasReadyToBuildLabel.outputs.HAS_READY_TO_BUILD_LABEL) }}
     steps:
       - id: isUserTeamMember
         uses: tspascoal/get-user-teams-membership@baf2e6adf4c3b897bd65a7e3184305c165aec872
         with:
           GITHUB_TOKEN: ${{ secrets.OS_BOTIFY_TOKEN }}
           username: ${{ github.actor }}
-          team: expensify-expensify
-      - name: Remove label if it was added by an unauthorized user
-        if: ${{ !fromJSON(steps.isUserTeamMember.outputs.isTeamMember) && github.event.label.name == 'Ready To Build' }}
-        uses: actions-ecosystem/action-remove-labels@v1
-        with:
-          labels: 'Ready To Build'
-      - name: Throw exception if label was added by an unauthorized user
-        if: ${{ !fromJSON(steps.isUserTeamMember.outputs.isTeamMember) && github.event.label.name == 'Ready To Build' }}
-        run: |
-          echo "The 'Ready To Build' label was added by an unauthorized user"
-          exit 1
-      - id: readyToBuild
-        name: Set READY_TO_BUILD flag
-        run: echo "READY_TO_BUILD=${{ fromJSON(steps.isUserTeamMember.outputs.isTeamMember) || contains(github.event.pull_request.labels.*.name, 'Ready To Build') }}" >> "$GITHUB_OUTPUT"
+          team: 'Expensify/expensify'
+
+      - id: hasReadyToBuildLabel
+        name: Set HAS_READY_TO_BUILD_LABEL flag
+        run: echo "HAS_READY_TO_BUILD_LABEL=$(gh pr view "${{ env.PULL_REQUEST_NUMBER }}" --repo Expensify/App --json labels --jq '.labels[].name' | grep -q 'Ready To Build' && echo 'true')" >> "$GITHUB_OUTPUT"
+        env:
+          PULL_REQUEST_NUMBER: ${{ github.event.number || github.event.inputs.PULL_REQUEST_NUMBER }}
+          GITHUB_TOKEN: ${{ github.token }}
 
   getBranchRef:
     runs-on: ubuntu-latest
     needs: validateActor
-    if: ${{ needs.validateActor.outputs.READY_TO_BUILD == 'true' }}
+    if: ${{ fromJSON(needs.validateActor.outputs.READY_TO_BUILD) }}
     outputs:
       REF: ${{steps.getHeadRef.outputs.REF}}
     steps:
       - name: Checkout
         if: ${{ github.event_name == 'workflow_dispatch' }}
         uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8
+
       - name: Check if pull request number is correct
         if: ${{ github.event_name == 'workflow_dispatch' }}
         id: getHeadRef
@@ -62,7 +57,7 @@ jobs:
   android:
     name: Build and deploy Android for testing
     needs: [validateActor, getBranchRef]
-    if: ${{ needs.validateActor.outputs.READY_TO_BUILD == 'true' }}
+    if: ${{ fromJSON(needs.validateActor.outputs.READY_TO_BUILD) }}
     runs-on: ubuntu-latest
     env:
       PULL_REQUEST_NUMBER: ${{ github.event.number || github.event.inputs.PULL_REQUEST_NUMBER }}
@@ -112,7 +107,7 @@ jobs:
   iOS:
     name: Build and deploy iOS for testing
     needs: [validateActor, getBranchRef]
-    if: ${{ needs.validateActor.outputs.READY_TO_BUILD == 'true' }}
+    if: ${{ fromJSON(needs.validateActor.outputs.READY_TO_BUILD) }}
     env:
       PULL_REQUEST_NUMBER: ${{ github.event.number || github.event.inputs.PULL_REQUEST_NUMBER }}
     runs-on: macos-12
@@ -168,7 +163,7 @@ jobs:
   desktop:
     name: Build and deploy Desktop for testing
     needs: [validateActor, getBranchRef]
-    if: ${{ needs.validateActor.outputs.READY_TO_BUILD == 'true' }}
+    if: ${{ fromJSON(needs.validateActor.outputs.READY_TO_BUILD) }}
     env:
       PULL_REQUEST_NUMBER: ${{ github.event.number || github.event.inputs.PULL_REQUEST_NUMBER }}
     runs-on: macos-12
@@ -205,7 +200,7 @@ jobs:
   web:
     name: Build and deploy Web
     needs: [validateActor, getBranchRef]
-    if: ${{ needs.validateActor.outputs.READY_TO_BUILD == 'true' }}
+    if: ${{ fromJSON(needs.validateActor.outputs.READY_TO_BUILD) }}
     env:
       PULL_REQUEST_NUMBER: ${{ github.event.number || github.event.inputs.PULL_REQUEST_NUMBER }}
     runs-on: ubuntu-latest
@@ -214,7 +209,9 @@ jobs:
         with:
           fetch-depth: 0
           ref: ${{ github.event.pull_request.head.sha || needs.getBranchRef.outputs.REF }}
+
       - uses: Expensify/App/.github/actions/composite/setupNode@main
+
       - name: Configure AWS Credentials
         uses: Expensify/App/.github/actions/composite/configureAwsCredentials@main
         with:
diff --git a/android/app/build.gradle b/android/app/build.gradle
index d9113769a1d..5acdfa130aa 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -156,8 +156,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001024600
-        versionName "1.2.46-0"
+        versionCode 1001024700
+        versionName "1.2.47-0"
         buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
 
         if (isNewArchitectureEnabled()) {
diff --git a/android/app/src/main/java/com/expensify/chat/MainApplication.java b/android/app/src/main/java/com/expensify/chat/MainApplication.java
index fd203ecc675..523b2404905 100644
--- a/android/app/src/main/java/com/expensify/chat/MainApplication.java
+++ b/android/app/src/main/java/com/expensify/chat/MainApplication.java
@@ -3,6 +3,7 @@
 import android.content.Context;
 import android.database.CursorWindow;
 
+import androidx.appcompat.app.AppCompatDelegate;
 import androidx.multidex.MultiDexApplication;
 
 import com.expensify.chat.bootsplash.BootSplashPackage;
@@ -64,6 +65,10 @@ public ReactNativeHost getReactNativeHost() {
   @Override
   public void onCreate() {
       super.onCreate();
+
+      // Use night (dark) mode so native UI defaults to dark theme.
+      AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
+      
       // If you opted-in for the New Architecture, we enable the TurboModule system
       ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
       SoLoader.init(this, /* native exopackage */ false);
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index 9057ea9c1cc..a804c14abb5 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -4,7 +4,7 @@
     <style name="AppTheme" parent="BaseAppTheme"/>
 
     <!-- Base application theme. Applied to all Android versions -->
-    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="BaseAppTheme" parent="Theme.AppCompat.NoActionBar">
         <item name="android:textColor">@color/dark</item>
         <item name="android:colorEdgeEffect">@color/gray4</item>
         <item name="android:statusBarColor">#061B09</item>
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 7f282a292bd..4719cf8b7f6 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2.46</string>
+	<string>1.2.47</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.2.46.0</string>
+	<string>1.2.47.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
@@ -111,6 +111,8 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 	</array>
+	<key>UIUserInterfaceStyle</key>
+	<string>Dark</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index 96a59774077..282f27e95d2 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.2.46</string>
+	<string>1.2.47</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.2.46.0</string>
+	<string>1.2.47.0</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index a3ac89f9a68..e983274b85a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.2.46-0",
+  "version": "1.2.47-0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.2.46-0",
+      "version": "1.2.47-0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index c589aa337ed..99c530b174c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.2.46-0",
+  "version": "1.2.47-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.",
diff --git a/src/CONST.js b/src/CONST.js
index ae375f27ae5..46c40add7b4 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -32,6 +32,11 @@ const CONST = {
     // Minimum width and height size in px for a selected image
     AVATAR_MIN_WIDTH_PX: 80,
     AVATAR_MIN_HEIGHT_PX: 80,
+
+    // Maximum width and height size in px for a selected image
+    AVATAR_MAX_WIDTH_PX: 4096,
+    AVATAR_MAX_HEIGHT_PX: 4096,
+
     NEW_EXPENSIFY_URL: ACTIVE_EXPENSIFY_URL,
     APP_DOWNLOAD_LINKS: {
         ANDROID: `https://play.google.com/store/apps/details?id=${ANDROID_PACKAGE_NAME}`,
@@ -455,7 +460,7 @@ const CONST = {
 
     EMOJI_FREQUENT_ROW_COUNT: 3,
 
-    EMOJI_INVISIBLE_CODEPOINTS: ['fe0f', '200d'],
+    INVISIBLE_CODEPOINTS: ['fe0f', '200d', '2066'],
 
     TOOLTIP_MAX_LINES: 3,
 
@@ -754,8 +759,7 @@ const CONST = {
         HYPERLINK: /^(?:(?:(?:https?|ftp):\/\/)?)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z0-9\u00a1-\uffff][a-z0-9\u00a1-\uffff_-]{0,62})?[a-z0-9\u00a1-\uffff]\.)+(?:[a-z\u00a1-\uffff]{2,}\.?))(?::\d{2,5})?(?:[/?#]\S*)?$/i,
 
         // eslint-disable-next-line max-len, no-misleading-character-class
-        EMOJIS: /(?:\uD83D(?:\uDC41\u200D\uD83D\uDDE8|\uDC68\u200D\uD83D[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uDC69\u200D\uD83D\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c\ude32-\ude3a]|[\ud83c\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/g,
-
+        EMOJIS: /[\p{Extended_Pictographic}\u200d\u{1f1e6}-\u{1f1ff}\u{1f3fb}-\u{1f3ff}\u{e0020}-\u{e007f}\u20E3\uFE0F]|[#*0-9]\uFE0F?\u20E3/gu,
         TAX_ID: /^\d{9}$/,
         NON_NUMERIC: /\D/g,
 
@@ -765,6 +769,7 @@ const CONST = {
         EMOJI_NAME: /:[\w+-]+:/g,
         EMOJI_SUGGESTIONS: /:[a-zA-Z]{1,20}(\s[a-zA-Z]{0,20})?$/,
         AFTER_FIRST_LINE_BREAK: /\n.*/g,
+        CODE_2FA: /^\d{6}$/,
     },
 
     PRONOUNS: {
diff --git a/src/Expensify.js b/src/Expensify.js
index 93224dfd932..25ac4b22fdc 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -24,6 +24,10 @@ import * as User from './libs/actions/User';
 import NetworkConnection from './libs/NetworkConnection';
 import Navigation from './libs/Navigation/Navigation';
 
+// This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
+// eslint-disable-next-line no-unused-vars
+import UnreadIndicatorUpdater from './libs/UnreadIndicatorUpdater';
+
 Onyx.registerLogger(({level, message}) => {
     if (level === 'alert') {
         Log.alert(message);
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js
index 418be07b819..6944f75fd2c 100644
--- a/src/components/AttachmentPicker/index.native.js
+++ b/src/components/AttachmentPicker/index.native.js
@@ -74,6 +74,8 @@ function getDataForUpload(fileData) {
     const fileResult = {
         name: fileName,
         type: fileData.type,
+        width: fileData.width,
+        height: fileData.height,
         uri: fileData.fileCopyUri || fileData.uri,
         size: fileData.fileSize || fileData.size,
     };
diff --git a/src/components/AutoUpdateTime.js b/src/components/AutoUpdateTime.js
new file mode 100644
index 00000000000..97f71b2caa4
--- /dev/null
+++ b/src/components/AutoUpdateTime.js
@@ -0,0 +1,106 @@
+/**
+ * Displays the user's local time and updates it every minute.
+ * The time auto-update logic is extracted to this component to avoid re-rendering a more complex component, e.g. DetailsPage.
+ */
+import {View} from 'react-native';
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import styles from '../styles/styles';
+import DateUtils from '../libs/DateUtils';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import Text from './Text';
+
+const propTypes = {
+    /** Timezone of the user from their personal details */
+    timezone: PropTypes.shape({
+        /** Value of selected timezone */
+        selected: PropTypes.string,
+
+        /** Whether timezone is automatically set */
+        automatic: PropTypes.bool,
+    }).isRequired,
+    ...withLocalizePropTypes,
+};
+
+class AutoUpdateTime extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.getCurrentUserLocalTime = this.getCurrentUserLocalTime.bind(this);
+        this.updateCurrentTime = this.updateCurrentTime.bind(this);
+        this.getTimezoneName = this.getTimezoneName.bind(this);
+        this.state = {
+            currentUserLocalTime: this.getCurrentUserLocalTime(),
+        };
+    }
+
+    componentDidMount() {
+        this.updateCurrentTime();
+    }
+
+    componentDidUpdate() {
+        // Make sure the interval is up to date every time the component updates
+        this.updateCurrentTime();
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timer);
+    }
+
+    /**
+     * @returns {moment} Returns the locale moment object
+     */
+    getCurrentUserLocalTime() {
+        return DateUtils.getLocalMomentFromDatetime(
+            this.props.preferredLocale,
+            null,
+            this.props.timezone.selected,
+        );
+    }
+
+    /**
+     * @returns {string} Returns the timezone name in string, e.g.: GMT +07
+     */
+    getTimezoneName() {
+        // With non-GMT timezone, moment.zoneAbbr() will return the name of that timezone, so we can use it directly.
+        if (Number.isNaN(Number(this.state.currentUserLocalTime.zoneAbbr()))) {
+            return this.state.currentUserLocalTime.zoneAbbr();
+        }
+
+        // With GMT timezone, moment.zoneAbbr() will return a number, so we need to display it as GMT {abbreviations} format, e.g.: GMT +07
+        return `GMT ${this.state.currentUserLocalTime.zoneAbbr()}`;
+    }
+
+    /**
+     * Update the user's local time at the top of every minute
+     */
+    updateCurrentTime() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        const millisecondsUntilNextMinute = (60 - this.state.currentUserLocalTime.seconds()) * 1000;
+        this.timer = setTimeout(() => {
+            this.setState({
+                currentUserLocalTime: this.getCurrentUserLocalTime(),
+            });
+        }, millisecondsUntilNextMinute);
+    }
+
+    render() {
+        return (
+            <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
+                <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
+                    {this.props.translate('detailsPage.localTime')}
+                </Text>
+                <Text numberOfLines={1}>
+                    {this.state.currentUserLocalTime.format('LT')}
+                    {' '}
+                    {this.getTimezoneName()}
+                </Text>
+            </View>
+        );
+    }
+}
+
+AutoUpdateTime.propTypes = propTypes;
+export default withLocalize(AutoUpdateTime);
diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index 4d47a0f405e..7065f23aede 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -1,8 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {
-    Pressable, View, Image,
-} from 'react-native';
+import {Pressable, View} from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import Avatar from './Avatar';
@@ -21,6 +19,7 @@ import SpinningIndicatorAnimation from '../styles/animation/SpinningIndicatorAni
 import Tooltip from './Tooltip';
 import stylePropTypes from '../styles/stylePropTypes';
 import * as FileUtils from '../libs/fileDownload/FileUtils';
+import getImageResolution from '../libs/fileDownload/getImageResolution';
 
 const propTypes = {
     /** Avatar URL to display */
@@ -148,17 +147,16 @@ class AvatarWithImagePicker extends React.Component {
     }
 
     /**
-     * Check if the attachment resolution is bigger than required.
+     * Check if the attachment resolution matches constraints.
      *
-     * @param {String} imageUri
+     * @param {Object} image
      * @returns {Promise}
      */
-    isValidResolution(imageUri) {
-        return new Promise((resolve) => {
-            Image.getSize(imageUri, (width, height) => {
-                resolve(height >= CONST.AVATAR_MIN_HEIGHT_PX && width >= CONST.AVATAR_MIN_WIDTH_PX);
-            });
-        });
+    isValidResolution(image) {
+        return getImageResolution(image).then(resolution => (
+            (resolution.height >= CONST.AVATAR_MIN_HEIGHT_PX && resolution.width >= CONST.AVATAR_MIN_WIDTH_PX)
+            && (resolution.height <= CONST.AVATAR_MAX_HEIGHT_PX && resolution.width <= CONST.AVATAR_MAX_WIDTH_PX)
+        ));
     }
 
     /**
@@ -182,14 +180,16 @@ class AvatarWithImagePicker extends React.Component {
             return;
         }
 
-        this.isValidResolution(image.uri)
+        this.isValidResolution(image)
             .then((isValidResolution) => {
                 if (!isValidResolution) {
                     this.showErrorModal(
                         this.props.translate('avatarWithImagePicker.imageUploadFailed'),
-                        this.props.translate('avatarWithImagePicker.tooSmallResolution', {
+                        this.props.translate('avatarWithImagePicker.resolutionConstraints', {
                             minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX,
                             minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX,
+                            maxHeightInPx: CONST.AVATAR_MAX_HEIGHT_PX,
+                            maxWidthInPx: CONST.AVATAR_MAX_WIDTH_PX,
                         }),
                     );
                     return;
diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js
index 96f85fb25d9..4c7123bd24d 100644
--- a/src/components/CheckboxWithLabel.js
+++ b/src/components/CheckboxWithLabel.js
@@ -5,6 +5,7 @@ import styles from '../styles/styles';
 import Checkbox from './Checkbox';
 import Text from './Text';
 import FormHelpMessage from './FormHelpMessage';
+import variables from '../styles/variables';
 
 const requiredPropsCheck = (props) => {
     if (!props.label && !props.LabelComponent) {
@@ -99,6 +100,7 @@ class CheckboxWithLabel extends React.Component {
                     <TouchableOpacity
                         focusable={false}
                         onPress={this.toggleCheckbox}
+                        activeOpacity={variables.checkboxLabelActiveOpacity}
                         style={[
                             styles.ml3,
                             styles.pr2,
diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
index 9fe27122646..795edcaac7d 100755
--- a/src/components/UnreadActionIndicator.js
+++ b/src/components/UnreadActionIndicator.js
@@ -5,7 +5,7 @@ import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const UnreadActionIndicator = props => (
-    <View accessibilityLabel="New message line indicator" data-sequence-number={props.sequenceNumber} style={styles.unreadIndicatorContainer}>
+    <View accessibilityLabel="New message line indicator" data-action-id={props.reportActionID} style={styles.unreadIndicatorContainer}>
         <View style={styles.unreadIndicatorLine} />
         <Text style={styles.unreadIndicatorText}>
             {props.translate('common.new')}
diff --git a/src/languages/en.js b/src/languages/en.js
index d849ce04ee1..83f897fb3b6 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -284,7 +284,9 @@ export default {
         imageUploadFailed: 'Image upload failed',
         deleteWorkspaceError: 'Sorry, there was an unexpected problem deleting your workspace avatar.',
         sizeExceeded: ({maxUploadSizeInMB}) => `The selected image exceeds the maximum upload size of ${maxUploadSizeInMB}MB.`,
-        tooSmallResolution: ({minHeightInPx, minWidthInPx}) => `Please upload an image larger than ${minHeightInPx}x${minWidthInPx} pixels`,
+        resolutionConstraints: ({
+            minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx,
+        }) => `Please upload an image larger than ${minHeightInPx}x${minWidthInPx} pixels and smaller than ${maxHeightInPx}x${maxWidthInPx} pixels`,
         notAllowedExtension: ({allowedExtensions}) => `Profile picture must be one of the following types: ${allowedExtensions.join(', ')}.`,
     },
     profilePage: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 889b0ab8c6b..3e77b4c059b 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -284,7 +284,9 @@ export default {
         imageUploadFailed: 'Error al cargar la imagen',
         deleteWorkspaceError: 'Lo sentimos, hubo un problema eliminando el avatar de su espacio de trabajo.',
         sizeExceeded: ({maxUploadSizeInMB}) => `La imagen supera el tamaño máximo de ${maxUploadSizeInMB}MB.`,
-        tooSmallResolution: ({minHeightInPx, minWidthInPx}) => `Por favor elige una imagen mas grande que ${minHeightInPx}x${minWidthInPx} píxeles`,
+        resolutionConstraints: ({
+            minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx,
+        }) => `Por favor, elige una imagen más grande que ${minHeightInPx}x${minWidthInPx} píxeles y más pequeña que ${maxHeightInPx}x${maxWidthInPx} píxeles`,
         notAllowedExtension: ({allowedExtensions}) => `La foto de perfil debe ser de uno de los siguientes tipos: ${allowedExtensions.join(', ')}.`,
     },
     profilePage: {
diff --git a/src/libs/DateUtils.js b/src/libs/DateUtils.js
index 56e406ba0ca..6fc5aa83902 100644
--- a/src/libs/DateUtils.js
+++ b/src/libs/DateUtils.js
@@ -175,6 +175,16 @@ function getDBTime(timestamp = '') {
         .replace('Z', '');
 }
 
+/**
+ * @param {String} dateTime
+ * @param {Number} milliseconds
+ * @returns {String}
+ */
+function subtractMillisecondsFromDateTime(dateTime, milliseconds) {
+    const newTimestamp = moment.utc(dateTime).subtract(milliseconds, 'milliseconds').valueOf();
+    return getDBTime(newTimestamp);
+}
+
 /**
  * @namespace DateUtils
  */
@@ -188,6 +198,7 @@ const DateUtils = {
     setTimezoneUpdated,
     getMicroseconds,
     getDBTime,
+    subtractMillisecondsFromDateTime,
 };
 
 export default DateUtils;
diff --git a/src/libs/EmojiUtils.js b/src/libs/EmojiUtils.js
index 617c624b2c5..b7fa88aefac 100644
--- a/src/libs/EmojiUtils.js
+++ b/src/libs/EmojiUtils.js
@@ -69,7 +69,7 @@ function containsOnlyEmojis(message) {
 
     const codes = [];
     _.map(match, emoji => _.map(getEmojiUnicode(emoji).split(' '), (code) => {
-        if (!CONST.EMOJI_INVISIBLE_CODEPOINTS.includes(code)) {
+        if (!CONST.INVISIBLE_CODEPOINTS.includes(code)) {
             codes.push(code);
         }
         return code;
@@ -77,7 +77,7 @@ function containsOnlyEmojis(message) {
 
     // Emojis are stored as multiple characters, so we're using spread operator
     // to iterate over the actual emojis, not just characters that compose them
-    const messageCodes = _.filter(_.map([...trimmedMessage], char => getEmojiUnicode(char)), string => string.length > 0 && !CONST.EMOJI_INVISIBLE_CODEPOINTS.includes(string));
+    const messageCodes = _.filter(_.map([...trimmedMessage], char => getEmojiUnicode(char)), string => string.length > 0 && !CONST.INVISIBLE_CODEPOINTS.includes(string));
     return codes.length === messageCodes.length;
 }
 
@@ -184,11 +184,13 @@ function addToFrequentlyUsedEmojis(frequentlyUsedEmojis, newEmoji) {
 }
 
 /**
- * Replace any emoji name in a text with the emoji icon
+ * Replace any emoji name in a text with the emoji icon.
+ * If we're on mobile, we also add a space after the emoji granted there's no text after it.
  * @param {String} text
+ * @param {Boolean} isSmallScreenWidth
  * @returns {String}
  */
-function replaceEmojis(text) {
+function replaceEmojis(text, isSmallScreenWidth = false) {
     let newText = text;
     const emojiData = text.match(CONST.REGEX.EMOJI_NAME);
     if (!emojiData || emojiData.length === 0) {
@@ -201,7 +203,7 @@ function replaceEmojis(text) {
 
             // If this is the last emoji in the message and it's the end of the message so far,
             // add a space after it so the user can keep typing easily.
-            if (i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
+            if (isSmallScreenWidth && i === emojiData.length - 1 && text.endsWith(emojiData[i])) {
                 emojiReplacement += ' ';
             }
             newText = newText.replace(emojiData[i], emojiReplacement);
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
index 09aec059ff1..1a6e8d0f554 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.js
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -10,7 +10,6 @@ import compose from '../../compose';
 import * as PersonalDetails from '../../actions/PersonalDetails';
 import * as Pusher from '../../Pusher/pusher';
 import PusherConnectionManager from '../../PusherConnectionManager';
-import UnreadIndicatorUpdater from '../../UnreadIndicatorUpdater';
 import ROUTES from '../../../ROUTES';
 import ONYXKEYS from '../../../ONYXKEYS';
 import Timing from '../../actions/Timing';
@@ -101,8 +100,6 @@ class AuthScreens extends React.Component {
             User.subscribeToUserEvents();
         });
 
-        // Listen for report changes and fetch some data we need on initialization
-        UnreadIndicatorUpdater.listenForReportChanges();
         App.openApp();
         App.setUpPoliciesAndNavigate(this.props.session);
         Timing.end(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 2c8b4bf5f55..7dea3a743bf 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -8,7 +8,6 @@ import AppNavigator from './AppNavigator';
 import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
-import UnreadIndicatorUpdater from '../UnreadIndicatorUpdater';
 import Log from '../Log';
 
 // https://reactnavigation.org/docs/themes
@@ -46,7 +45,6 @@ function parseAndLogRoute(state) {
         Log.info('Navigating to route', false, {path: currentPath});
     }
 
-    UnreadIndicatorUpdater.throttledUpdatePageTitleAndUnreadCount();
     Navigation.setIsNavigationReady();
 }
 
diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js
index 9c3bfcec031..c91d5f55d84 100644
--- a/src/libs/ReportActionsUtils.js
+++ b/src/libs/ReportActionsUtils.js
@@ -137,59 +137,34 @@ function isConsecutiveActionMadeByPreviousActor(reportActions, actionIndex) {
 }
 
 /**
- * Get the message text for the last action that was not deleted
  * @param {String} reportID
  * @param {Object} [actionsToMerge]
- * @return {String}
+ * @return {Object}
  */
-function getLastVisibleMessageText(reportID, actionsToMerge = {}) {
-    const parser = new ExpensiMark();
+function getLastVisibleAction(reportID, actionsToMerge = {}) {
     const actions = _.toArray(lodashMerge({}, allReportActions[reportID], actionsToMerge));
-    const sortedActions = getSortedReportActions(actions);
-    const lastMessageIndex = _.findLastIndex(sortedActions, action => (
-        !isDeletedAction(action)
-    ));
-    if (lastMessageIndex < 0) {
-        return '';
-    }
-
-    const htmlText = lodashGet(sortedActions, [lastMessageIndex, 'message', 0, 'html'], '');
-    const messageText = parser.htmlToText(htmlText);
-    return ReportUtils.formatReportLastMessageText(messageText);
+    const visibleActions = _.filter(actions, action => (!isDeletedAction(action)));
+    return _.max(visibleActions, action => moment.utc(action.created).valueOf());
 }
 
 /**
  * @param {String} reportID
  * @param {Object} [actionsToMerge]
- * @param {Number} deletedSequenceNumber
- * @param {Number} lastReadSequenceNumber
- * @return {Number}
+ * @return {String}
  */
-function getOptimisticLastReadSequenceNumberForDeletedAction(reportID, actionsToMerge = {}, deletedSequenceNumber, lastReadSequenceNumber) {
-    // If the action we are deleting is unread then just return the current last read sequence number
-    if (deletedSequenceNumber > lastReadSequenceNumber) {
-        return lastReadSequenceNumber;
-    }
-
-    // Otherwise, we must find the first previous index of an action that is not deleted and less than the lastReadSequenceNumber
-    const actions = _.toArray(lodashMerge({}, allReportActions[reportID], actionsToMerge));
-    const sortedActions = getSortedReportActions(actions);
-    const lastMessageIndex = _.findLastIndex(sortedActions, action => (
-        !isDeletedAction(action) && action.sequenceNumber <= lastReadSequenceNumber
-    ));
-
-    // It's possible we won't find any and in that case the last read should be reset
-    if (lastMessageIndex < 0) {
-        return 0;
-    }
+function getLastVisibleMessageText(reportID, actionsToMerge = {}) {
+    const lastVisibleAction = getLastVisibleAction(reportID, actionsToMerge);
+    const htmlText = lodashGet(lastVisibleAction, 'message[0].html', '');
 
-    return sortedActions[lastMessageIndex].sequenceNumber;
+    const parser = new ExpensiMark();
+    const messageText = parser.htmlToText(htmlText);
+    return ReportUtils.formatReportLastMessageText(messageText);
 }
 
 export {
     getSortedReportActions,
     filterReportActionsForDisplay,
-    getOptimisticLastReadSequenceNumberForDeletedAction,
+    getLastVisibleAction,
     getLastVisibleMessageText,
     getMostRecentIOUReportActionID,
     isDeletedAction,
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 1a261262e46..37bf41b57cf 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -109,7 +109,7 @@ function sortReportsByLastRead(reports) {
     return _.chain(reports)
         .toArray()
         .filter(report => report && report.reportID && !isIOUReport(report))
-        .sortBy('lastReadTimestamp')
+        .sortBy('lastReadTime')
         .value();
 }
 
@@ -242,9 +242,7 @@ function hasExpensifyGuidesEmails(emails) {
 }
 
 /**
- * Given a collection of reports returns the most recently accessed one
- *
- * @param {Record<String, {lastReadTimestamp, reportID}>|Array<{lastReadTimestamp, reportID}>} reports
+ * @param {Record<String, {lastReadTime, reportID}>|Array<{lastReadTime, reportID}>} reports
  * @param {Boolean} [ignoreDefaultRooms]
  * @param {Object} policies
  * @returns {Object}
@@ -895,7 +893,7 @@ function buildOptimisticChatReport(
         lastMessageText: null,
         lastReadSequenceNumber: 0,
         lastActionCreated: DateUtils.getDBTime(),
-        lastReadTimestamp: 0,
+        lastReadTime: '',
         maxSequenceNumber: 0,
         notificationPreference,
         oldPolicyName,
@@ -1014,9 +1012,14 @@ function buildOptimisticWorkspaceChats(policyID, policyName) {
  * @returns {Boolean}
  */
 function isUnread(report) {
-    const lastReadSequenceNumber = report.lastReadSequenceNumber || 0;
-    const maxSequenceNumber = report.maxSequenceNumber || 0;
-    return lastReadSequenceNumber < maxSequenceNumber;
+    if (!report) {
+        return false;
+    }
+
+    // lastActionCreated and lastReadTime are both datetime strings and can be compared directly
+    const lastActionCreated = report.lastActionCreated || '';
+    const lastReadTime = report.lastReadTime || '';
+    return lastReadTime < lastActionCreated;
 }
 
 /**
@@ -1181,6 +1184,27 @@ function chatIncludesChronos(report) {
                 && _.contains(report.participants, CONST.EMAIL.CHRONOS);
 }
 
+/**
+ * @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}
+ */
+function getNewMarkerReportActionID(report, sortedAndFilteredReportActions) {
+    if (!isUnread(report)) {
+        return '';
+    }
+
+    const newMarkerIndex = _.findLastIndex(sortedAndFilteredReportActions, reportAction => (
+        (reportAction.created || '') > report.lastReadTime
+    ));
+
+    return _.has(sortedAndFilteredReportActions[newMarkerIndex], 'reportActionID')
+        ? sortedAndFilteredReportActions[newMarkerIndex].reportActionID
+        : '';
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
@@ -1228,4 +1252,5 @@ export {
     getDisplayNameForParticipant,
     isIOUReport,
     chatIncludesChronos,
+    getNewMarkerReportActionID,
 };
diff --git a/src/libs/UnreadIndicatorUpdater/index.js b/src/libs/UnreadIndicatorUpdater/index.js
index 4cf82b19d37..09fa8261231 100644
--- a/src/libs/UnreadIndicatorUpdater/index.js
+++ b/src/libs/UnreadIndicatorUpdater/index.js
@@ -1,54 +1,14 @@
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
-import updateUnread from './updateUnread';
+import updateUnread from './updateUnread/index';
 import * as ReportUtils from '../ReportUtils';
 
-const reports = {};
-
-/**
- * Updates the title and favicon of the current browser tab and Mac OS or iOS dock icon with an unread indicator.
- * Note: We are throttling this since listening for report changes can trigger many updates depending on how many reports
- * a user has and how often they are updated.
- */
-const throttledUpdatePageTitleAndUnreadCount = _.throttle(() => {
-    const totalCount = _.filter(reports, ReportUtils.isUnread).length;
-    updateUnread(totalCount);
-}, 100, {leading: false});
-
-let connectionID;
-
-/**
- * Bind to the report collection key and update
- * the title and unread count indicators
- */
-function listenForReportChanges() {
-    connectionID = Onyx.connect({
-        key: ONYXKEYS.COLLECTION.REPORT,
-        callback: (report) => {
-            if (!report || !report.reportID) {
-                return;
-            }
-
-            reports[report.reportID] = report;
-            throttledUpdatePageTitleAndUnreadCount();
-        },
-    });
-}
-
-/**
- * Remove the subscription callback when we no longer need it.
- */
-function stopListeningForReportChanges() {
-    if (!connectionID) {
-        return;
-    }
-
-    Onyx.disconnect(connectionID);
-}
-
-export default {
-    listenForReportChanges,
-    stopListeningForReportChanges,
-    throttledUpdatePageTitleAndUnreadCount,
-};
+Onyx.connect({
+    key: ONYXKEYS.COLLECTION.REPORT,
+    waitForCollectionCallback: true,
+    callback: (reportsFromOnyx) => {
+        const unreadReports = _.filter(reportsFromOnyx, ReportUtils.isUnread);
+        updateUnread(_.size(unreadReports));
+    },
+});
diff --git a/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js b/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js
index c39afe29551..244eaf805d1 100644
--- a/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js
+++ b/src/libs/UnreadIndicatorUpdater/updateUnread/index.website.js
@@ -11,11 +11,15 @@ import CONFIG from '../../../CONFIG';
 function updateUnread(totalCount) {
     const hasUnread = totalCount !== 0;
 
-    // There is a Chrome browser bug that causes the title to revert back to the previous when we are navigating back. Setting the title to an empty string
-    // seems to improve this issue.
-    document.title = '';
-    document.title = hasUnread ? `(${totalCount}) ${CONFIG.SITE_TITLE}` : CONFIG.SITE_TITLE;
-    document.getElementById('favicon').href = hasUnread ? CONFIG.FAVICON.UNREAD : CONFIG.FAVICON.DEFAULT;
+    // This setTimeout is required because due to how react rendering messes with the DOM, the document title can't be modified synchronously, and we must wait until all JS is done
+    // running before setting the title.
+    setTimeout(() => {
+        // There is a Chrome browser bug that causes the title to revert back to the previous when we are navigating back. Setting the title to an empty string
+        // seems to improve this issue.
+        document.title = '';
+        document.title = hasUnread ? `(${totalCount}) ${CONFIG.SITE_TITLE}` : CONFIG.SITE_TITLE;
+        document.getElementById('favicon').href = hasUnread ? CONFIG.FAVICON.UNREAD : CONFIG.FAVICON.DEFAULT;
+    }, 0);
 }
 
 export default updateUnread;
diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js
index da0abf746fc..b496860a3d8 100644
--- a/src/libs/ValidationUtils.js
+++ b/src/libs/ValidationUtils.js
@@ -274,6 +274,14 @@ function isValidPassword(password) {
     return password.match(CONST.PASSWORD_COMPLEXITY_REGEX_STRING);
 }
 
+/**
+ * @param {String} code
+ * @returns {Boolean}
+ */
+function isValidTwoFactorCode(code) {
+    return Boolean(code.match(CONST.REGEX.CODE_2FA));
+}
+
 /**
  * @param {String} input
  * @returns {Boolean}
@@ -409,6 +417,7 @@ export {
     isValidURL,
     validateIdentity,
     isValidPassword,
+    isValidTwoFactorCode,
     isPositiveInteger,
     isNumericWithSpecialChars,
     isValidPaypalUsername,
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 5d1846cc55c..dbe2d613141 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -65,7 +65,7 @@ function requestMoney(report, amount, currency, recipientEmail, participant, com
         isNewChat = true;
     }
     let iouReport;
-    if (chatReport.hasOutstandingIOU && chatReport.iouReportID) {
+    if (chatReport.iouReportID) {
         iouReport = IOUUtils.updateIOUOwnerAndTotal(
             iouReports[`${ONYXKEYS.COLLECTION.REPORT}${chatReport.iouReportID}`],
             recipientEmail,
@@ -96,7 +96,7 @@ function requestMoney(report, amount, currency, recipientEmail, participant, com
             key: `${ONYXKEYS.COLLECTION.REPORT}${chatReport.reportID}`,
             value: {
                 ...chatReport,
-                lastReadTimestamp: Date.now(),
+                lastReadTime: DateUtils.getDBTime(),
                 lastReadSequenceNumber: newSequenceNumber,
                 maxSequenceNumber: newSequenceNumber,
                 lastMessageText: optimisticReportAction.message[0].text,
@@ -264,7 +264,7 @@ function createSplitsAndOnyxData(participants, currentUserLogin, amount, comment
 
     groupChatReport.maxSequenceNumber = groupChatReportMaxSequenceNumber + 1;
     groupChatReport.lastReadSequenceNumber = groupChatReportMaxSequenceNumber + 1;
-    groupChatReport.lastReadTimestamp = Date.now();
+    groupChatReport.lastReadTime = DateUtils.getDBTime();
     groupChatReport.lastMessageText = groupIOUReportAction.message[0].text;
     groupChatReport.lastMessageHtml = groupIOUReportAction.message[0].html;
 
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index e9d1662f49b..1c8306fc797 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -40,14 +40,6 @@ const allReports = {};
 let conciergeChatReportID;
 const typingWatchTimers = {};
 
-/**
- * @param {String} reportID
- * @returns {Number}
- */
-function getLastReadSequenceNumber(reportID) {
-    return lodashGet(allReports, [reportID, 'lastReadSequenceNumber'], 0);
-}
-
 /**
  * @param {String} reportID
  * @returns {Number}
@@ -214,14 +206,16 @@ function addActions(reportID, text = '', file) {
     // Our report needs a new maxSequenceNumber that is n larger than the current depending on how many actions we are adding.
     const actionCount = text && file ? 2 : 1;
     const newSequenceNumber = highestSequenceNumber + actionCount;
+    const currentTime = DateUtils.getDBTime();
 
     // Update the report in Onyx to have the new sequence number
     const optimisticReport = {
         maxSequenceNumber: newSequenceNumber,
-        lastActionCreated: DateUtils.getDBTime(),
+        lastActionCreated: currentTime,
         lastMessageText: ReportUtils.formatReportLastMessageText(lastAction.message[0].text),
         lastActorEmail: currentUserEmail,
         lastReadSequenceNumber: newSequenceNumber,
+        lastReadTime: currentTime,
     };
 
     // Optimistically add the new actions to the store before waiting to save them to the server. We use the clientID
@@ -312,7 +306,7 @@ function openReport(reportID, participantList = [], newReportObject = {}) {
             value: {
                 isLoadingReportActions: true,
                 isLoadingMoreReportActions: false,
-                lastReadTimestamp: Date.now(),
+                lastReadTime: DateUtils.getDBTime(),
                 lastReadSequenceNumber: getMaxSequenceNumber(reportID),
                 reportName: lodashGet(allReports, [reportID, 'reportName'], CONST.REPORT.DEFAULT_REPORT_NAME),
             },
@@ -489,52 +483,45 @@ function openPaymentDetailsPage(chatReportID, iouReportID) {
  * Marks the new report actions as read
  *
  * @param {String} reportID
- * @param {String} createdDate
  */
-function readNewestAction(reportID, createdDate) {
-    const sequenceNumber = getMaxSequenceNumber(reportID);
+function readNewestAction(reportID) {
     API.write('ReadNewestAction',
         {
             reportID,
-            createdDate,
-            sequenceNumber,
         },
         {
             optimisticData: [{
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
                 value: {
-                    lastReadSequenceNumber: sequenceNumber,
-                    lastReadTimestamp: Date.now(),
+                    lastReadTime: DateUtils.getDBTime(),
                 },
             }],
         });
 }
 
 /**
- * Sets the last read comment on a report
+ * Sets the last read time on a report
  *
  * @param {String} reportID
- * @param {String} createdDate
- * @param {Number} sequenceNumber
+ * @param {String} reportActionCreated
  */
-function markCommentAsUnread(reportID, createdDate, sequenceNumber) {
-    const newLastReadSequenceNumber = sequenceNumber - 1;
+function markCommentAsUnread(reportID, reportActionCreated) {
+    // We subtract 1 millisecond so that the lastReadTime is updated to just before a given reportAction's created date
+    // For example, if we want to mark a report action with ID 100 and created date '2014-04-01 16:07:02.999' unread, we set the lastReadTime to '2014-04-01 16:07:02.998'
+    // Since the report action with ID 100 will be the first with a timestamp above '2014-04-01 16:07:02.998', it's the first one that will be shown as unread
+    const lastReadTime = DateUtils.subtractMillisecondsFromDateTime(reportActionCreated, 1);
     API.write('MarkAsUnread',
         {
             reportID,
-
-            // We subtract 1 millisecond so that the lastRead is updated to just before this reportAction's created date
-            createdDate: DateUtils.getDBTime(moment.utc(createdDate).valueOf() - 1),
-            sequenceNumber,
+            lastReadTime,
         },
         {
             optimisticData: [{
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
                 value: {
-                    lastReadSequenceNumber: newLastReadSequenceNumber,
-                    lastReadTimestamp: Date.now(),
+                    lastReadTime,
                 },
             }],
         });
@@ -651,18 +638,12 @@ function deleteReportComment(reportID, reportAction) {
     };
 
     // If we are deleting the last visible message, let's find the previous visible one and update the lastMessageText in the LHN.
-    // Similarly, if we are deleting the last read comment we will want to update the lastReadSequenceNumber and maxSequenceNumber to use the previous visible message.
+    // Similarly, if we are deleting the last read comment we will want to update the lastActionCreated to use the previous visible message.
     const lastMessageText = ReportActionsUtils.getLastVisibleMessageText(reportID, optimisticReportActions);
-    const lastReadSequenceNumber = ReportActionsUtils.getOptimisticLastReadSequenceNumberForDeletedAction(
-        reportID,
-        optimisticReportActions,
-        reportAction.sequenceNumber,
-        getLastReadSequenceNumber(reportID),
-    );
+    const lastActionCreated = ReportActionsUtils.getLastVisibleAction(reportID, optimisticReportActions).created;
     const optimisticReport = {
         lastMessageText,
-        lastReadSequenceNumber,
-        maxSequenceNumber: lastReadSequenceNumber,
+        lastActionCreated,
     };
 
     // If the API call fails we must show the original message again, so we revert the message content back to how it was
@@ -1094,38 +1075,21 @@ function subscribeToNewActionEvent(reportID, callback) {
  * @param {String} reportID
  * @param {Object} action
  */
-function viewNewReportAction(reportID, action) {
-    const isFromCurrentUser = action.actorAccountID === currentUserAccountID;
-    const updatedReportObject = {};
-
-    // When handling an action from the current user we can assume that their last read actionID has been updated in the server,
-    // but not necessarily reflected locally so we will update the lastReadSequenceNumber to mark the report as read.
-    updatedReportObject.maxSequenceNumber = action.sequenceNumber;
-    if (isFromCurrentUser) {
-        updatedReportObject.lastReadTimestamp = Date.now();
-        updatedReportObject.lastReadSequenceNumber = action.sequenceNumber;
-    }
-
-    if (reportID === newActionSubscriber.reportID) {
-        newActionSubscriber.callback(isFromCurrentUser, updatedReportObject.maxSequenceNumber);
-    }
-
-    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, updatedReportObject);
-
-    const notificationPreference = lodashGet(allReports, [reportID, 'notificationPreference'], CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS);
+function showReportActionNotification(reportID, action) {
     if (!ActiveClientManager.isClientTheLeader()) {
         Log.info('[LOCAL_NOTIFICATION] Skipping notification because this client is not the leader');
         return;
     }
 
     // We don't want to send a local notification if the user preference is daily or mute
+    const notificationPreference = lodashGet(allReports, [reportID, 'notificationPreference'], CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS);
     if (notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.MUTE || notificationPreference === CONST.REPORT.NOTIFICATION_PREFERENCE.DAILY) {
         Log.info(`[LOCAL_NOTIFICATION] No notification because user preference is to be notified: ${notificationPreference}`);
         return;
     }
 
     // If this comment is from the current user we don't want to parrot whatever they wrote back to them.
-    if (isFromCurrentUser) {
+    if (action.actorAccountID === currentUserAccountID) {
         Log.info('[LOCAL_NOTIFICATION] No notification because comment is from the currently logged in user');
         return;
     }
@@ -1198,7 +1162,13 @@ Onyx.connect({
                 return;
             }
 
-            viewNewReportAction(reportID, action);
+            // Notify the ReportActionsView that a new comment has arrived
+            if (reportID === newActionSubscriber.reportID) {
+                const isFromCurrentUser = action.actorAccountID === currentUserAccountID;
+                newActionSubscriber.callback(isFromCurrentUser, action.reportActionID);
+            }
+
+            showReportActionNotification(reportID, action);
             handledReportActions[reportID] = handledReportActions[reportID] || {};
             handledReportActions[reportID][action.sequenceNumber] = true;
         });
diff --git a/src/libs/actions/Session/index.js b/src/libs/actions/Session/index.js
index fd72ef0dac1..b564efd5e7b 100644
--- a/src/libs/actions/Session/index.js
+++ b/src/libs/actions/Session/index.js
@@ -9,7 +9,6 @@ import PushNotification from '../../Notification/PushNotification';
 import Timing from '../Timing';
 import CONST from '../../../CONST';
 import * as Localize from '../../Localize';
-import UnreadIndicatorUpdater from '../../UnreadIndicatorUpdater';
 import Timers from '../../Timers';
 import * as Pusher from '../../Pusher/pusher';
 import * as Authentication from '../../Authentication';
@@ -310,8 +309,6 @@ function clearSignInData() {
  * Put any logic that needs to run when we are signed out here. This can be triggered when the current tab or another tab signs out.
  */
 function cleanupSession() {
-    // We got signed out in this tab or another so clean up any subscriptions and timers
-    UnreadIndicatorUpdater.stopListeningForReportChanges();
     PushNotification.deregister();
     PushNotification.clearNotifications();
     Pusher.disconnect();
diff --git a/src/libs/fileDownload/getImageResolution.js b/src/libs/fileDownload/getImageResolution.js
new file mode 100644
index 00000000000..2f9a6d4fbdb
--- /dev/null
+++ b/src/libs/fileDownload/getImageResolution.js
@@ -0,0 +1,33 @@
+/**
+ * Get image resolution
+ * File object is returned as a result of a user selecting image using the <input type="file" />
+ * We need to create a new Image object and get dimensions from it
+ * Opposite to native where we already have width and height properties coming from library
+ *
+ * new Image() is used specifically for performance reasons, opposed to using FileReader (5ms vs +100ms)
+ * because FileReader is slow and causes a noticeable delay in the UI when selecting an image.
+ *
+ * @param {*} file Picked file blob
+ * @returns {Promise}
+ */
+function getImageResolution(file) {
+    if (!(file instanceof File)) {
+        return Promise.reject(new Error('Object is not an instance of File'));
+    }
+
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const objectUrl = URL.createObjectURL(file);
+        image.onload = function () {
+            resolve({
+                width: this.naturalWidth,
+                height: this.naturalHeight,
+            });
+            URL.revokeObjectURL(objectUrl);
+        };
+        image.onerror = reject;
+        image.src = objectUrl;
+    });
+}
+
+export default getImageResolution;
diff --git a/src/libs/fileDownload/getImageResolution.native.js b/src/libs/fileDownload/getImageResolution.native.js
new file mode 100644
index 00000000000..f291886f466
--- /dev/null
+++ b/src/libs/fileDownload/getImageResolution.native.js
@@ -0,0 +1,14 @@
+/**
+ * Get image resolution
+ * Image object is returned as a result of a user selecting image using the react-native-image-picker
+ * Image already has width and height properties coming from library so we just need to return them on native
+ * Opposite to web where we need to create a new Image object and get dimensions from it
+ *
+ * @param {*} file Picked file blob
+ * @returns {Promise}
+ */
+function getImageResolution(file) {
+    return Promise.resolve({width: file.width, height: file.height});
+}
+
+export default getImageResolution;
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index ce2ea1f4c28..1c0ebe9d178 100755
--- a/src/pages/DetailsPage.js
+++ b/src/pages/DetailsPage.js
@@ -18,12 +18,12 @@ import CommunicationsLink from '../components/CommunicationsLink';
 import Tooltip from '../components/Tooltip';
 import CONST from '../CONST';
 import * as ReportUtils from '../libs/ReportUtils';
-import DateUtils from '../libs/DateUtils';
 import * as Expensicons from '../components/Icon/Expensicons';
 import MenuItem from '../components/MenuItem';
 import AttachmentModal from '../components/AttachmentModal';
 import PressableWithoutFocus from '../components/PressableWithoutFocus';
 import * as Report from '../libs/actions/Report';
+import AutoUpdateTime from '../components/AutoUpdateTime';
 
 const matchType = PropTypes.shape({
     params: PropTypes.shape({
@@ -95,11 +95,7 @@ class DetailsPage extends React.PureComponent {
         // If we have a reportID param this means that we
         // arrived here via the ParticipantsPage and should be allowed to navigate back to it
         const shouldShowBackButton = Boolean(this.props.route.params.reportID);
-        const timezone = details.timezone ? DateUtils.getLocalMomentFromDatetime(this.props.preferredLocale, null, details.timezone.selected) : null;
-        const GMTTime = timezone ? `${timezone.toString().split(/[+-]/)[0].slice(-3)} ${timezone.zoneAbbr()}` : '';
-        const currentTime = (timezone && Number.isNaN(Number(timezone.zoneAbbr()))) ? timezone.zoneAbbr() : GMTTime;
-        const shouldShowLocalTime = !ReportUtils.hasExpensifyEmails([details.login]);
-
+        const shouldShowLocalTime = !ReportUtils.hasExpensifyEmails([details.login]) && details.timezone;
         let pronouns = details.pronouns;
 
         if (pronouns && pronouns.startsWith(CONST.PRONOUNS.PREFIX)) {
@@ -176,18 +172,7 @@ class DetailsPage extends React.PureComponent {
                                         </Text>
                                     </View>
                                 ) : null}
-                                {shouldShowLocalTime && details.timezone ? (
-                                    <View style={[styles.mb6, styles.detailsPageSectionContainer]}>
-                                        <Text style={[styles.formLabel, styles.mb2]} numberOfLines={1}>
-                                            {this.props.translate('detailsPage.localTime')}
-                                        </Text>
-                                        <Text numberOfLines={1}>
-                                            {timezone.format('LT')}
-                                            {' '}
-                                            {currentTime}
-                                        </Text>
-                                    </View>
-                                ) : null}
+                                {shouldShowLocalTime && <AutoUpdateTime timezone={details.timezone} />}
                             </View>
                             {details.login !== this.props.session.email && (
                                 <MenuItem
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js b/src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js
index 98cbd1fdc0d..b37186e8c13 100644
--- a/src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js
+++ b/src/pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes.js
@@ -20,7 +20,7 @@ export default PropTypes.shape({
     website: PropTypes.string,
     companyTaxID: PropTypes.string,
     incorporationType: PropTypes.string,
-    incorporationDate: PropTypes.string,
+    incorporationDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
     incorporationState: PropTypes.string,
     hasNoConnectionToCannabis: PropTypes.bool,
 
@@ -31,7 +31,7 @@ export default PropTypes.shape({
     requestorAddressCity: PropTypes.string,
     requestorAddressState: PropTypes.string,
     requestorAddressZipCode: PropTypes.string,
-    dob: PropTypes.string,
+    dob: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
     ssnLast4: PropTypes.string,
     isControllingOfficer: PropTypes.bool,
     isOnfidoSetupComplete: PropTypes.bool,
@@ -49,7 +49,7 @@ export default PropTypes.shape({
             city: PropTypes.string,
             state: PropTypes.string,
             zipCode: PropTypes.string,
-            dob: PropTypes.string,
+            dob: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
             ssnLast4: PropTypes.string,
         }),
     ),
diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
index c4075aa5fbb..b9e7208d0fd 100644
--- a/src/pages/home/report/ContextMenu/ContextMenuActions.js
+++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -152,7 +152,7 @@ export default [
         successIcon: Expensicons.Checkmark,
         shouldShow: type => type === CONTEXT_MENU_TYPES.REPORT_ACTION,
         onPress: (closePopover, {reportAction, reportID}) => {
-            Report.markCommentAsUnread(reportID, reportAction.created, reportAction.sequenceNumber);
+            Report.markCommentAsUnread(reportID, reportAction.created);
             if (closePopover) {
                 hideContextMenu(true, ReportActionComposeFocusManager.focus);
             }
diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js
index da1c83348f5..2f174ce5ccf 100644
--- a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js
+++ b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js
@@ -4,6 +4,7 @@ import {
 } from 'react-native';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
 import * as Report from '../../../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import PopoverWithMeasuredContent from '../../../../components/PopoverWithMeasuredContent';
@@ -72,9 +73,12 @@ class PopoverReportActionContextMenu extends React.Component {
     }
 
     shouldComponentUpdate(nextProps, nextState) {
+        const previousLocale = lodashGet(this.props, 'preferredLocale', 'en');
+        const nextLocale = lodashGet(nextProps, 'preferredLocale', 'en');
         return this.state.isPopoverVisible !== nextState.isPopoverVisible
             || this.state.popoverAnchorPosition !== nextState.popoverAnchorPosition
-            || this.state.isDeleteCommentConfirmModalVisible !== nextState.isDeleteCommentConfirmModalVisible;
+            || this.state.isDeleteCommentConfirmModalVisible !== nextState.isDeleteCommentConfirmModalVisible
+            || previousLocale !== nextLocale;
     }
 
     componentWillUnmount() {
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 271132da004..58d280455a9 100644
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -329,13 +329,12 @@ class ReportActionCompose extends React.Component {
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
         const newComment = this.comment.slice(0, this.state.selection.start)
-            + emojiWithSpace + this.comment.slice(this.state.selection.end, this.comment.length);
+            + emoji + this.comment.slice(this.state.selection.end, this.comment.length);
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
             },
         }));
         this.updateComment(newComment);
@@ -391,7 +390,7 @@ class ReportActionCompose extends React.Component {
      * @param {Boolean} shouldDebounceSaveComment
      */
     updateComment(comment, shouldDebounceSaveComment) {
-        const newComment = EmojiUtils.replaceEmojis(comment);
+        const newComment = EmojiUtils.replaceEmojis(comment, this.props.isSmallScreenWidth);
         this.setState((prevState) => {
             const newState = {
                 isCommentEmpty: !!newComment.match(/^(\s|`)*$/),
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 7158f15f37b..b1a1b3790b0 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -51,8 +51,8 @@ const propTypes = {
     /** Whether there is an outstanding amount in IOU */
     hasOutstandingIOU: PropTypes.bool,
 
-    /** Should we display the new indicator on top of the comment? */
-    shouldDisplayNewIndicator: PropTypes.bool.isRequired,
+    /** Should we display the new marker on top of the comment? */
+    shouldDisplayNewMarker: PropTypes.bool.isRequired,
 
     /** Position index of the report action in the overall report FlatList view */
     index: PropTypes.number.isRequired,
@@ -85,7 +85,7 @@ class ReportActionItem extends Component {
             || this.props.draftMessage !== nextProps.draftMessage
             || this.props.isMostRecentIOUReportAction !== nextProps.isMostRecentIOUReportAction
             || this.props.hasOutstandingIOU !== nextProps.hasOutstandingIOU
-            || this.props.shouldDisplayNewIndicator !== nextProps.shouldDisplayNewIndicator
+            || this.props.shouldDisplayNewMarker !== nextProps.shouldDisplayNewMarker
             || !_.isEqual(this.props.action, nextProps.action)
             || this.state.isContextMenuActive !== nextState.isContextMenuActive;
     }
@@ -187,8 +187,8 @@ class ReportActionItem extends Component {
                 <Hoverable>
                     {hovered => (
                         <View accessibilityLabel="Chat message">
-                            {this.props.shouldDisplayNewIndicator && (
-                                <UnreadActionIndicator sequenceNumber={this.props.action.sequenceNumber} />
+                            {this.props.shouldDisplayNewMarker && (
+                                <UnreadActionIndicator reportActionID={this.props.action.reportActionID} />
                             )}
                             <View
                                 style={StyleUtils.getReportActionItemStyle(
diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
index 0f65c363402..97fffebebcd 100644
--- a/src/pages/home/report/ReportActionItemMessageEdit.js
+++ b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -99,7 +99,7 @@ class ReportActionItemMessageEdit extends React.Component {
      * @param {String} draft
      */
     updateDraft(draft) {
-        const newDraft = EmojiUtils.replaceEmojis(draft);
+        const newDraft = EmojiUtils.replaceEmojis(draft, this.props.isSmallScreenWidth);
         this.setState((prevState) => {
             const newState = {draft: newDraft};
             if (draft !== newDraft) {
@@ -183,13 +183,12 @@ class ReportActionItemMessageEdit extends React.Component {
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
-        const emojiWithSpace = `${emoji} `;
         const newComment = this.state.draft.slice(0, this.state.selection.start)
-            + emojiWithSpace + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
+            + emoji + this.state.draft.slice(this.state.selection.end, this.state.draft.length);
         this.setState(prevState => ({
             selection: {
-                start: prevState.selection.start + emojiWithSpace.length,
-                end: prevState.selection.start + emojiWithSpace.length,
+                start: prevState.selection.start + emoji.length,
+                end: prevState.selection.start + emoji.length,
             },
         }));
         this.updateDraft(newComment);
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 5a4e51722aa..36638f521dc 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -23,7 +23,7 @@ import networkPropTypes from '../../../components/networkPropTypes';
 
 const propTypes = {
     /** Position of the "New" line marker */
-    newMarkerSequenceNumber: PropTypes.number.isRequired,
+    newMarkerReportActionID: PropTypes.string,
 
     /** Personal details of all the users */
     personalDetails: PropTypes.objectOf(participantPropTypes),
@@ -57,6 +57,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    newMarkerReportActionID: '',
     personalDetails: {},
     mostRecentIOUReportActionID: '',
     isLoadingMoreReportActions: false,
@@ -126,17 +127,14 @@ class ReportActionsList extends React.Component {
         item: reportAction,
         index,
     }) {
-        // When the new indicator should not be displayed we explicitly set it to 0. The marker should never be shown above the
-        // created action (which will have sequenceNumber of 0) so we use 0 to indicate "hidden".
-        const shouldDisplayNewIndicator = this.props.newMarkerSequenceNumber > 0
-            && reportAction.sequenceNumber === this.props.newMarkerSequenceNumber
-            && !ReportActionsUtils.isDeletedAction(reportAction);
+        // When the new indicator should not be displayed we explicitly set it to null
+        const shouldDisplayNewMarker = reportAction.reportActionID === this.props.newMarkerReportActionID;
         return (
             <ReportActionItem
                 report={this.props.report}
                 action={reportAction}
                 displayAsGroup={ReportActionsUtils.isConsecutiveActionMadeByPreviousActor(this.props.sortedReportActions, index)}
-                shouldDisplayNewIndicator={shouldDisplayNewIndicator}
+                shouldDisplayNewMarker={shouldDisplayNewMarker}
                 isMostRecentIOUReportAction={reportAction.reportActionID === this.props.mostRecentIOUReportActionID}
                 hasOutstandingIOU={this.props.report.hasOutstandingIOU}
                 index={index}
@@ -147,7 +145,7 @@ class ReportActionsList extends React.Component {
     render() {
         // Native mobile does not render updates flatlist the changes even though component did update called.
         // To notify there something changes we can use extraData prop to flatlist
-        const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.newMarkerSequenceNumber : undefined;
+        const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.newMarkerReportActionID : undefined;
         const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report);
         return (
             <Animated.View style={[StyleUtils.fade(this.state.fadeInAnimation), styles.flex1]}>
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index bccb119da3a..a621bddfbc0 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -63,18 +63,17 @@ class ReportActionsView extends React.Component {
 
         this.didLayout = false;
         this.didSubscribeToReportTypingEvents = false;
-
         this.unsubscribeVisibilityListener = null;
 
+        // We need this.sortedAndFilteredReportActions to be set before this.state is initialized because the function to calculate the newMarkerReportActionID uses the sorted report actions
+        this.sortedAndFilteredReportActions = this.getSortedReportActionsForDisplay(props.reportActions);
+
         this.state = {
             isFloatingMessageCounterVisible: false,
-            newMarkerSequenceNumber: ReportUtils.isUnread(props.report)
-                ? props.report.lastReadSequenceNumber + 1
-                : 0,
+            newMarkerReportActionID: ReportUtils.getNewMarkerReportActionID(this.props.report, this.sortedAndFilteredReportActions),
         };
 
         this.currentScrollOffset = 0;
-        this.sortedReportActions = this.getSortedReportActionsForDisplay(props.reportActions);
         this.mostRecentIOUReportActionID = ReportActionsUtils.getMostRecentIOUReportActionID(props.reportActions);
         this.trackScroll = this.trackScroll.bind(this);
         this.toggleFloatingMessageCounter = this.toggleFloatingMessageCounter.bind(this);
@@ -93,7 +92,7 @@ class ReportActionsView extends React.Component {
             // If the app user becomes active and they have no unread actions we clear the new marker to sync their device
             // e.g. they could have read these messages on another device and only just become active here
             this.openReportIfNecessary();
-            this.setState({newMarkerSequenceNumber: 0});
+            this.setState({newMarkerReportActionID: ''});
         });
 
         if (this.getIsReportFullyVisible()) {
@@ -102,35 +101,37 @@ class ReportActionsView extends React.Component {
 
         // This callback is triggered when a new action arrives via Pusher and the event is emitted from Report.js. This allows us to maintain
         // a single source of truth for the "new action" event instead of trying to derive that a new action has appeared from looking at props.
-        this.unsubscribeFromNewActionEvent = Report.subscribeToNewActionEvent(this.props.report.reportID, (isFromCurrentUser, currentLastSequenceNumber) => {
+        this.unsubscribeFromNewActionEvent = Report.subscribeToNewActionEvent(this.props.report.reportID, (isFromCurrentUser, newActionID) => {
+            const isNewMarkerReportActionIDSet = !_.isEmpty(this.state.newMarkerReportActionID);
+
             // If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
             // they are now in the list.
             if (isFromCurrentUser) {
                 ReportScrollManager.scrollToBottom();
 
                 // If the current user sends a new message in the chat we clear the new marker since they have "read" the report
-                this.setState({newMarkerSequenceNumber: 0});
+                this.setState({newMarkerReportActionID: ''});
             } else if (this.getIsReportFullyVisible()) {
                 // We use the scroll position to determine whether the report should be marked as read and the new line indicator reset.
                 // If the user is scrolled up and no new line marker is set we will set it otherwise we will do nothing so the new marker
                 // stays in it's previous position.
                 if (this.currentScrollOffset === 0) {
-                    Report.readNewestAction(this.props.report.reportID, _.last(_.toArray(this.props.reportActions)).created);
-                    this.setState({newMarkerSequenceNumber: 0});
-                } else if (this.state.newMarkerSequenceNumber === 0) {
-                    this.setState({newMarkerSequenceNumber: currentLastSequenceNumber});
+                    Report.readNewestAction(this.props.report.reportID);
+                    this.setState({newMarkerReportActionID: ''});
+                } else if (!isNewMarkerReportActionIDSet) {
+                    this.setState({newMarkerReportActionID: newActionID});
                 }
-            } else if (this.state.newMarkerSequenceNumber === 0) {
+            } else if (!isNewMarkerReportActionIDSet) {
                 // The report is not in view and we received a comment from another user while the new marker is not set
                 // so we will set the new marker now.
-                this.setState({newMarkerSequenceNumber: currentLastSequenceNumber});
+                this.setState({newMarkerReportActionID: newActionID});
             }
         });
     }
 
     shouldComponentUpdate(nextProps, nextState) {
         if (!_.isEqual(nextProps.reportActions, this.props.reportActions)) {
-            this.sortedReportActions = this.getSortedReportActionsForDisplay(nextProps.reportActions);
+            this.sortedAndFilteredReportActions = this.getSortedReportActionsForDisplay(nextProps.reportActions);
             this.mostRecentIOUReportActionID = ReportActionsUtils.getMostRecentIOUReportActionID(nextProps.reportActions);
             return true;
         }
@@ -147,7 +148,7 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
-        if (nextProps.report.lastReadSequenceNumber !== this.props.report.lastReadSequenceNumber) {
+        if (nextProps.report.lastReadTime !== this.props.report.lastReadTime) {
             return true;
         }
 
@@ -155,7 +156,7 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
-        if (nextState.newMarkerSequenceNumber !== this.state.newMarkerSequenceNumber) {
+        if (nextState.newMarkerReportActionID !== this.state.newMarkerReportActionID) {
             return true;
         }
 
@@ -200,9 +201,9 @@ class ReportActionsView extends React.Component {
         const didReportBecomeVisible = isReportFullyVisible && (didSidebarClose || didScreenSizeIncrease);
         if (didReportBecomeVisible) {
             this.setState({
-                newMarkerSequenceNumber: !ReportUtils.isUnread(this.props.report)
-                    ? 0
-                    : this.props.report.lastReadSequenceNumber + 1,
+                newMarkerReportActionID: ReportUtils.isUnread(this.props.report)
+                    ? ReportUtils.getNewMarkerReportActionID(this.props.report, this.sortedAndFilteredReportActions)
+                    : '',
             });
             this.openReportIfNecessary();
         }
@@ -212,15 +213,15 @@ class ReportActionsView extends React.Component {
         const didSidebarOpen = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
         const didUserNavigateToSidebarAfterReadingReport = didSidebarOpen && !ReportUtils.isUnread(this.props.report);
         if (didUserNavigateToSidebarAfterReadingReport) {
-            this.setState({newMarkerSequenceNumber: 0});
+            this.setState({newMarkerReportActionID: ''});
         }
 
-        // Checks to see if a report comment has been manually "marked as unread". All other times when the lastReadSequenceNumber
+        // Checks to see if a report comment has been manually "marked as unread". All other times when the lastReadTime
         // changes it will be because we marked the entire report as read.
-        const didManuallyMarkReportAsUnread = (prevProps.report.lastReadSequenceNumber !== this.props.report.lastReadSequenceNumber)
+        const didManuallyMarkReportAsUnread = (prevProps.report.lastReadTime !== this.props.report.lastReadTime)
             && ReportUtils.isUnread(this.props.report);
         if (didManuallyMarkReportAsUnread) {
-            this.setState({newMarkerSequenceNumber: this.props.report.lastReadSequenceNumber + 1});
+            this.setState({newMarkerReportActionID: ReportUtils.getNewMarkerReportActionID(this.props.report, this.sortedAndFilteredReportActions)});
         }
 
         // Ensures subscription event succeeds when the report/workspace room is created optimistically.
@@ -283,7 +284,7 @@ class ReportActionsView extends React.Component {
 
     scrollToBottomAndMarkReportAsRead() {
         ReportScrollManager.scrollToBottom();
-        Report.readNewestAction(this.props.report.reportID, _.last(_.toArray(this.props.reportActions)).created);
+        Report.readNewestAction(this.props.report.reportID);
     }
 
     /**
@@ -340,18 +341,18 @@ class ReportActionsView extends React.Component {
                 {!this.props.isComposerFullSize && (
                     <>
                         <FloatingMessageCounter
-                            isActive={this.state.isFloatingMessageCounterVisible && this.state.newMarkerSequenceNumber > 0}
+                            isActive={this.state.isFloatingMessageCounterVisible && !_.isEmpty(this.state.newMarkerReportActionID)}
                             onClick={this.scrollToBottomAndMarkReportAsRead}
                         />
                         <ReportActionsList
                             report={this.props.report}
                             onScroll={this.trackScroll}
                             onLayout={this.recordTimeToMeasureItemLayout}
-                            sortedReportActions={this.sortedReportActions}
+                            sortedReportActions={this.sortedAndFilteredReportActions}
                             mostRecentIOUReportActionID={this.mostRecentIOUReportActionID}
                             isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
                             loadMoreChats={this.loadMoreChats}
-                            newMarkerSequenceNumber={this.state.newMarkerSequenceNumber}
+                            newMarkerReportActionID={this.state.newMarkerReportActionID}
                         />
                         <PopoverReportActionContextMenu
                             ref={ReportActionContextMenu.contextMenuRef}
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index f0a23f51592..00b0424844b 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.js
@@ -216,6 +216,7 @@ const chatReportSelector = (report) => {
         },
         maxSequenceNumber: report.maxSequenceNumber,
         lastReadSequenceNumber: report.lastReadSequenceNumber,
+        lastReadTime: report.lastReadTime,
         lastMessageText: report.lastMessageText,
         lastActionCreated: report.lastActionCreated,
         iouReportID: report.iouReportID,
diff --git a/src/pages/reportPropTypes.js b/src/pages/reportPropTypes.js
index c020f81d2ec..1514d5e3e16 100644
--- a/src/pages/reportPropTypes.js
+++ b/src/pages/reportPropTypes.js
@@ -38,7 +38,7 @@ export default PropTypes.shape({
     lastReadSequenceNumber: PropTypes.number,
 
     /** The last time the report was visited */
-    lastReadTimestamp: PropTypes.number,
+    lastReadTime: PropTypes.string,
 
     /** The largest sequenceNumber on this report */
     maxSequenceNumber: PropTypes.number,
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js
index 260820710cd..a9624450177 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.js
@@ -49,28 +49,30 @@ const TimezoneInitialPage = (props) => {
                 onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PROFILE)}
                 onCloseButtonPress={() => Navigation.dismissModal(true)}
             />
-            <View style={[styles.ph5]}>
-                <Text style={[styles.mb5]}>
-                    {props.translate('timezonePage.isShownOnProfile')}
-                </Text>
-                <View style={[styles.flexRow, styles.mb5, styles.alignItemsCenter, styles.justifyContentBetween]}>
-                    <Text>
-                        {props.translate('timezonePage.getLocationAutomatically')}
+            <View style={styles.flex1}>
+                <View style={[styles.ph5]}>
+                    <Text style={[styles.mb5]}>
+                        {props.translate('timezonePage.isShownOnProfile')}
                     </Text>
-                    <Switch
-                        isOn={timezone.automatic}
-                        onToggle={updateAutomaticTimezone}
-                    />
+                    <View style={[styles.flexRow, styles.mb5, styles.alignItemsCenter, styles.justifyContentBetween]}>
+                        <Text>
+                            {props.translate('timezonePage.getLocationAutomatically')}
+                        </Text>
+                        <Switch
+                            isOn={timezone.automatic}
+                            onToggle={updateAutomaticTimezone}
+                        />
+                    </View>
                 </View>
+                <MenuItemWithTopDescription
+                    title={timezone.selected}
+                    description={props.translate('timezonePage.timezone')}
+                    shouldShowRightIcon
+                    wrapperStyle={[styles.ph2, styles.mb3]}
+                    disabled={timezone.automatic}
+                    onPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_SELECT)}
+                />
             </View>
-            <MenuItemWithTopDescription
-                title={timezone.selected}
-                description={props.translate('timezonePage.timezone')}
-                shouldShowRightIcon
-                wrapperStyle={[styles.ph2, styles.mb3]}
-                disabled={timezone.automatic}
-                onPress={() => Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_SELECT)}
-            />
         </ScreenWrapper>
     );
 };
diff --git a/src/pages/signin/PasswordForm.js b/src/pages/signin/PasswordForm.js
index 0ae644469d6..d984e6fd27b 100755
--- a/src/pages/signin/PasswordForm.js
+++ b/src/pages/signin/PasswordForm.js
@@ -114,31 +114,40 @@ class PasswordForm extends React.Component {
      * Check that all the form fields are valid, then trigger the submit callback
      */
     validateAndSubmitForm() {
-        if (!this.state.password.trim() && this.props.account.requiresTwoFactorAuth && !this.state.twoFactorAuthCode.trim()) {
+        const password = this.state.password.trim();
+        const twoFactorCode = this.state.twoFactorAuthCode.trim();
+        const requiresTwoFactorAuth = this.props.account.requiresTwoFactorAuth;
+
+        if (!password && requiresTwoFactorAuth && !twoFactorCode) {
             this.setState({formError: 'passwordForm.pleaseFillOutAllFields'});
             return;
         }
 
-        if (!this.state.password.trim()) {
+        if (!password) {
             this.setState({formError: 'passwordForm.pleaseFillPassword'});
             return;
         }
 
-        if (!ValidationUtils.isValidPassword(this.state.password)) {
+        if (!ValidationUtils.isValidPassword(password)) {
             this.setState({formError: 'passwordForm.error.incorrectPassword'});
             return;
         }
 
-        if (this.props.account.requiresTwoFactorAuth && !this.state.twoFactorAuthCode.trim()) {
+        if (requiresTwoFactorAuth && !twoFactorCode) {
             this.setState({formError: 'passwordForm.pleaseFillTwoFactorAuth'});
             return;
         }
 
+        if (requiresTwoFactorAuth && !ValidationUtils.isValidTwoFactorCode(twoFactorCode)) {
+            this.setState({formError: 'passwordForm.error.incorrect2fa'});
+            return;
+        }
+
         this.setState({
             formError: null,
         });
 
-        Session.signIn(this.state.password, this.state.twoFactorAuthCode);
+        Session.signIn(password, twoFactorCode);
     }
 
     render() {
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
index 60788b07210..659bc9357fd 100644
--- a/src/pages/signin/SignInPage.js
+++ b/src/pages/signin/SignInPage.js
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
-import updateUnread from '../../libs/UnreadIndicatorUpdater/updateUnread/index';
 import compose from '../../libs/compose';
 import SignInPageLayout from './SignInPageLayout';
 import LoginForm from './LoginForm';
@@ -44,9 +43,6 @@ const defaultProps = {
 
 class SignInPage extends Component {
     componentDidMount() {
-        // Always reset the unread counter to zero on this page
-        // NOTE: We need to wait for the next tick to ensure that the unread indicator is updated
-        setTimeout(() => updateUnread(0), 0);
         Performance.measureTTI();
     }
 
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 58cfdc62df2..290ab6c7cb1 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2760,7 +2760,7 @@ const styles = {
         overflow: 'hidden',
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: themeColors.shadow,
+        backgroundColor: themeColors.imageCropBackgroundColor,
         cursor: 'move',
     },
 
diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js
index f569ae0912b..6fab7de7997 100644
--- a/src/styles/themes/default.js
+++ b/src/styles/themes/default.js
@@ -60,6 +60,7 @@ const darkTheme = {
     dropTransparentOverlay: 'rgba(255,255,255,0)',
     checkBox: colors.green,
     pickerOptionsTextColor: colors.midnight,
+    imageCropBackgroundColor: colors.greenIcons,
 };
 
 const oldTheme = {
diff --git a/src/styles/variables.js b/src/styles/variables.js
index 86f0141b507..7d818f8be20 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -82,4 +82,5 @@ export default {
     INACTIVE_LABEL_TRANSLATE_Y: getValueUsingPixelRatio(16, 21),
     sliderBarHeight: 8,
     sliderKnobSize: 26,
+    checkboxLabelActiveOpacity: 0.7,
 };
diff --git a/tests/actions/ReportTest.js b/tests/actions/ReportTest.js
index c6691266881..0ab2f7f2f63 100644
--- a/tests/actions/ReportTest.js
+++ b/tests/actions/ReportTest.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import Onyx from 'react-native-onyx';
 import lodashGet from 'lodash/get';
+import moment from 'moment';
 import {
     beforeEach, beforeAll, afterEach, jest, describe, it, expect,
 } from '@jest/globals';
@@ -207,6 +208,7 @@ describe('actions/Report', () => {
         const REPORT_ID = 1;
         let report;
         let reportActionCreatedDate;
+        let currentTime;
         Onyx.connect({
             key: `${ONYXKEYS.COLLECTION.REPORT}${REPORT_ID}`,
             callback: val => report = val,
@@ -242,10 +244,11 @@ describe('actions/Report', () => {
                             reportID: REPORT_ID,
                             maxSequenceNumber: 1,
                             notificationPreference: 'always',
-                            lastActionCreated: '2022-11-22 03:48:27.267',
                             lastMessageText: 'Comment 1',
                             lastActorEmail: USER_2_LOGIN,
                             lastReadSequenceNumber: 0,
+                            lastActionCreated: reportActionCreatedDate,
+                            lastReadTime: DateUtils.subtractMillisecondsFromDateTime(reportActionCreatedDate, 1),
                         },
                     },
                     {
@@ -263,6 +266,7 @@ describe('actions/Report', () => {
                                 sequenceNumber: 1,
                                 shouldShow: true,
                                 created: reportActionCreatedDate,
+                                reportActionID: '1',
                             },
                         },
                     },
@@ -274,49 +278,55 @@ describe('actions/Report', () => {
                 expect(ReportUtils.isUnread(report)).toBe(true);
 
                 // When the user visits the report
+                currentTime = DateUtils.getDBTime();
                 Report.openReport(REPORT_ID);
                 return waitForPromisesToResolve();
             })
             .then(() => {
                 // The report will be read
                 expect(ReportUtils.isUnread(report)).toBe(false);
+                expect(moment.utc(report.lastReadTime).valueOf()).toBeGreaterThanOrEqual(moment.utc(currentTime).valueOf());
 
                 // When the user manually marks a message as "unread"
-                Report.markCommentAsUnread(REPORT_ID, reportActionCreatedDate, 1);
+                Report.markCommentAsUnread(REPORT_ID, reportActionCreatedDate);
                 return waitForPromisesToResolve();
             })
             .then(() => {
                 // Then the report will be unread
                 expect(ReportUtils.isUnread(report)).toBe(true);
+                expect(report.lastReadTime).toBe(DateUtils.subtractMillisecondsFromDateTime(reportActionCreatedDate, 1));
 
                 // When a new comment is added by the current user
+                currentTime = DateUtils.getDBTime();
                 Report.addComment(REPORT_ID, 'Current User Comment 1');
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                // The report will be read and the lastReadSequenceNumber incremented
+                // The report will be read and the lastReadTime updated
                 expect(ReportUtils.isUnread(report)).toBe(false);
-                expect(report.lastReadSequenceNumber).toBe(2);
+                expect(moment.utc(report.lastReadTime).valueOf()).toBeGreaterThanOrEqual(moment.utc(currentTime).valueOf());
                 expect(report.lastMessageText).toBe('Current User Comment 1');
 
                 // When another comment is added by the current user
+                currentTime = DateUtils.getDBTime();
                 Report.addComment(REPORT_ID, 'Current User Comment 2');
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                // The report will be read and the lastReadSequenceNumber incremented
+                // The report will be read and the lastReadTime updated
                 expect(ReportUtils.isUnread(report)).toBe(false);
-                expect(report.lastReadSequenceNumber).toBe(3);
+                expect(moment.utc(report.lastReadTime).valueOf()).toBeGreaterThanOrEqual(moment.utc(currentTime).valueOf());
                 expect(report.lastMessageText).toBe('Current User Comment 2');
 
                 // When another comment is added by the current user
+                currentTime = DateUtils.getDBTime();
                 Report.addComment(REPORT_ID, 'Current User Comment 3');
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                // The report will be read and the lastReadSequenceNumber incremented
+                // The report will be read and the lastReadTime updated
                 expect(ReportUtils.isUnread(report)).toBe(false);
-                expect(report.lastReadSequenceNumber).toBe(4);
+                expect(moment.utc(report.lastReadTime).valueOf()).toBeGreaterThanOrEqual(moment.utc(currentTime).valueOf());
                 expect(report.lastMessageText).toBe('Current User Comment 3');
 
                 const USER_1_BASE_ACTION = {
@@ -327,8 +337,8 @@ describe('actions/Report', () => {
                     avatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_3.png',
                     person: [{type: 'TEXT', style: 'strong', text: 'Test User'}],
                     shouldShow: true,
-                    created: DateUtils.getDBTime(),
-                    reportActionID: 'derp',
+                    created: DateUtils.getDBTime(Date.now() - 3),
+                    reportActionID: 'derp1',
                 };
 
                 const optimisticReportActions = {
@@ -341,20 +351,23 @@ describe('actions/Report', () => {
                         2: {
                             ...USER_1_BASE_ACTION,
                             message: [{type: 'COMMENT', html: 'Current User Comment 1', text: 'Current User Comment 1'}],
-                            created: DateUtils.getDBTime(),
+                            created: DateUtils.getDBTime(Date.now() - 2),
                             sequenceNumber: 2,
+                            reportActionID: 'derp2',
                         },
                         3: {
                             ...USER_1_BASE_ACTION,
                             message: [{type: 'COMMENT', html: 'Current User Comment 2', text: 'Current User Comment 2'}],
-                            created: DateUtils.getDBTime(),
+                            created: DateUtils.getDBTime(Date.now() - 1),
                             sequenceNumber: 3,
+                            reportActionID: 'derp3',
                         },
                         4: {
                             ...USER_1_BASE_ACTION,
                             message: [{type: 'COMMENT', html: 'Current User Comment 3', text: 'Current User Comment 3'}],
                             created: DateUtils.getDBTime(),
                             sequenceNumber: 4,
+                            reportActionID: 'derp4',
                         },
                     },
                 };
@@ -370,10 +383,11 @@ describe('actions/Report', () => {
                             reportID: REPORT_ID,
                             maxSequenceNumber: 4,
                             notificationPreference: 'always',
-                            lastActionCreated: '2022-11-22 03:48:27.267',
                             lastMessageText: 'Current User Comment 3',
                             lastActorEmail: 'test@test.com',
                             lastReadSequenceNumber: 4,
+                            lastActionCreated: reportActionCreatedDate,
+                            lastReadTime: reportActionCreatedDate,
                         },
                     },
                     optimisticReportActions,
@@ -388,19 +402,19 @@ describe('actions/Report', () => {
             })
             .then(() => {
                 // Then no change will occur
-                expect(report.lastReadSequenceNumber).toBe(4);
+                expect(report.lastReadTime).toBe(reportActionCreatedDate);
                 expect(ReportUtils.isUnread(report)).toBe(false);
 
                 // When the user manually marks a message as "unread"
-                Report.markCommentAsUnread(REPORT_ID, reportActionCreatedDate, 3);
+                Report.markCommentAsUnread(REPORT_ID, reportActionCreatedDate);
                 return waitForPromisesToResolve();
             })
             .then(() => {
                 // Then we should expect the report to be to be unread
                 expect(ReportUtils.isUnread(report)).toBe(true);
-                expect(report.lastReadSequenceNumber).toBe(2);
+                expect(report.lastReadTime).toBe(DateUtils.subtractMillisecondsFromDateTime(reportActionCreatedDate, 1));
 
-                // If the user deletes the last comment after the last read the lastMessageText will reflect the new last comment
+                // If the user deletes the last comment after the lastReadTime the lastMessageText will reflect the new last comment
                 Report.deleteReportComment(REPORT_ID, {...reportActions[4], sequenceNumber: 4, clientID: null});
                 return waitForPromisesToResolve();
             })
diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js
index cb777bcd61e..cf29023c79c 100644
--- a/tests/ui/UnreadIndicatorsTest.js
+++ b/tests/ui/UnreadIndicatorsTest.js
@@ -138,7 +138,8 @@ function signInAndGetAppWithUnreadChat() {
                 reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
                 maxSequenceNumber: 9,
                 lastReadSequenceNumber: 1,
-                lastActionCreated: DateUtils.getDBTime(MOMENT_TEN_MINUTES_AGO.clone().utc().valueOf()),
+                lastReadTime: reportAction3CreatedDate,
+                lastActionCreated: reportAction9CreatedDate,
                 lastMessageText: 'Test',
                 participants: [USER_B_EMAIL],
             });
@@ -162,15 +163,15 @@ function signInAndGetAppWithUnreadChat() {
                         },
                     ],
                 },
-                1: TestHelper.buildTestReportComment(USER_B_EMAIL, 1, MOMENT_TEN_MINUTES_AGO.clone().add(10, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID),
-                2: TestHelper.buildTestReportComment(USER_B_EMAIL, 2, MOMENT_TEN_MINUTES_AGO.clone().add(20, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID),
-                3: TestHelper.buildTestReportComment(USER_B_EMAIL, 3, reportAction3CreatedDate, USER_B_ACCOUNT_ID),
-                4: TestHelper.buildTestReportComment(USER_B_EMAIL, 4, MOMENT_TEN_MINUTES_AGO.clone().add(40, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID),
-                5: TestHelper.buildTestReportComment(USER_B_EMAIL, 5, MOMENT_TEN_MINUTES_AGO.clone().add(50, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID),
-                6: TestHelper.buildTestReportComment(USER_B_EMAIL, 6, MOMENT_TEN_MINUTES_AGO.clone().add(60, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID),
-                7: TestHelper.buildTestReportComment(USER_B_EMAIL, 7, MOMENT_TEN_MINUTES_AGO.clone().add(70, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID),
-                8: TestHelper.buildTestReportComment(USER_B_EMAIL, 8, MOMENT_TEN_MINUTES_AGO.clone().add(80, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID),
-                9: TestHelper.buildTestReportComment(USER_B_EMAIL, 9, reportAction9CreatedDate, USER_B_ACCOUNT_ID),
+                1: TestHelper.buildTestReportComment(USER_B_EMAIL, 1, MOMENT_TEN_MINUTES_AGO.clone().add(10, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '1'),
+                2: TestHelper.buildTestReportComment(USER_B_EMAIL, 2, MOMENT_TEN_MINUTES_AGO.clone().add(20, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '2'),
+                3: TestHelper.buildTestReportComment(USER_B_EMAIL, 3, reportAction3CreatedDate, USER_B_ACCOUNT_ID, '3'),
+                4: TestHelper.buildTestReportComment(USER_B_EMAIL, 4, MOMENT_TEN_MINUTES_AGO.clone().add(40, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '4'),
+                5: TestHelper.buildTestReportComment(USER_B_EMAIL, 5, MOMENT_TEN_MINUTES_AGO.clone().add(50, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '5'),
+                6: TestHelper.buildTestReportComment(USER_B_EMAIL, 6, MOMENT_TEN_MINUTES_AGO.clone().add(60, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '6'),
+                7: TestHelper.buildTestReportComment(USER_B_EMAIL, 7, MOMENT_TEN_MINUTES_AGO.clone().add(70, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '7'),
+                8: TestHelper.buildTestReportComment(USER_B_EMAIL, 8, MOMENT_TEN_MINUTES_AGO.clone().add(80, 'seconds').format(MOMENT_FORMAT), USER_B_ACCOUNT_ID, '8'),
+                9: TestHelper.buildTestReportComment(USER_B_EMAIL, 9, reportAction9CreatedDate, USER_B_ACCOUNT_ID, '9'),
             });
             Onyx.merge(ONYXKEYS.PERSONAL_DETAILS, {
                 [USER_B_EMAIL]: TestHelper.buildPersonalDetails(USER_B_EMAIL, USER_B_ACCOUNT_ID, 'B'),
@@ -220,12 +221,12 @@ describe('Unread Indicators', () => {
                 const reportComments = renderedApp.queryAllByA11yLabel('Chat message');
                 expect(reportComments).toHaveLength(9);
 
-                // Since the last read sequenceNumber is 1 we should have an unread indicator above the next "unread" action which will
-                // have a sequenceNumber of 2
+                // Since the last read timestamp is the timestamp of action 3 we should have an unread indicator above the next "unread" action which will
+                // have actionID of 4
                 const unreadIndicator = renderedApp.queryAllByA11yLabel('New message line indicator');
                 expect(unreadIndicator).toHaveLength(1);
-                const sequenceNumber = lodashGet(unreadIndicator, [0, 'props', 'data-sequence-number']);
-                expect(sequenceNumber).toBe(2);
+                const reportActionID = lodashGet(unreadIndicator, [0, 'props', 'data-action-id']);
+                expect(reportActionID).toBe('4');
 
                 // Scroll up and verify that the "New messages" badge appears
                 scrollUpToRevealNewMessagesBadge(renderedApp);
@@ -278,14 +279,17 @@ describe('Unread Indicators', () => {
                 renderedApp = testInstance;
 
                 // Simulate a new report arriving via Pusher along with reportActions and personalDetails for the other participant
+                // We set the created moment 5 seconds in the past to ensure that time has passed when we open the report
                 const NEW_REPORT_ID = '2';
-                const NEW_REPORT_CREATED_MOMENT = moment();
+                const NEW_REPORT_CREATED_MOMENT = moment().subtract(5, 'seconds');
+                const NEW_REPORT_FIST_MESSAGE_CREATED_MOMENT = NEW_REPORT_CREATED_MOMENT.add(1, 'seconds');
                 Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${NEW_REPORT_ID}`, {
                     reportID: NEW_REPORT_ID,
                     reportName: CONST.REPORT.DEFAULT_REPORT_NAME,
                     maxSequenceNumber: 1,
                     lastReadSequenceNumber: 0,
-                    lastActionCreated: DateUtils.getDBTime(NEW_REPORT_CREATED_MOMENT.utc().valueOf()),
+                    lastReadTime: '',
+                    lastActionCreated: DateUtils.getDBTime(NEW_REPORT_FIST_MESSAGE_CREATED_MOMENT.utc().valueOf()),
                     lastMessageText: 'Comment 1',
                     participants: [USER_C_EMAIL],
                 });
@@ -303,7 +307,7 @@ describe('Unread Indicators', () => {
                         actorAccountID: USER_C_ACCOUNT_ID,
                         person: [{type: 'TEXT', style: 'strong', text: 'User C'}],
                         sequenceNumber: 1,
-                        created: NEW_REPORT_CREATED_MOMENT.add(5, 'seconds').format(MOMENT_FORMAT),
+                        created: NEW_REPORT_FIST_MESSAGE_CREATED_MOMENT.format(MOMENT_FORMAT),
                         message: [{type: 'COMMENT', html: 'Comment 1', text: 'Comment 1'}],
                         reportActionID: NumberUtils.rand64(),
                     },
@@ -350,7 +354,7 @@ describe('Unread Indicators', () => {
             });
     });
 
-    it('Manually marking a chat message as read shows the new line indicator and updates the LHN', () => {
+    it('Manually marking a chat message as unread shows the new line indicator and updates the LHN', () => {
         let renderedApp;
         return signInAndGetAppWithUnreadChat()
             .then((testInstance) => {
@@ -362,15 +366,15 @@ describe('Unread Indicators', () => {
             .then(() => {
                 // It's difficult to trigger marking a report comment as unread since we would have to mock the long press event and then
                 // another press on the context menu item so we will do it via the action directly and then test if the UI has updated properly
-                Report.markCommentAsUnread(REPORT_ID, reportAction3CreatedDate, 3);
+                Report.markCommentAsUnread(REPORT_ID, reportAction3CreatedDate);
                 return waitForPromisesToResolve();
             })
             .then(() => {
                 // Verify the indicator appears above the last action
                 const unreadIndicator = renderedApp.queryAllByA11yLabel('New message line indicator');
                 expect(unreadIndicator).toHaveLength(1);
-                const sequenceNumber = lodashGet(unreadIndicator, [0, 'props', 'data-sequence-number']);
-                expect(sequenceNumber).toBe(3);
+                const reportActionID = lodashGet(unreadIndicator, [0, 'props', 'data-action-id']);
+                expect(reportActionID).toBe('3');
 
                 // Scroll up and verify the new messages badge appears
                 scrollUpToRevealNewMessagesBadge(renderedApp);
@@ -471,7 +475,7 @@ describe('Unread Indicators', () => {
                 expect(unreadIndicator).toHaveLength(0);
 
                 // Mark a previous comment as unread and verify the unread action indicator returns
-                Report.markCommentAsUnread(REPORT_ID, reportAction9CreatedDate, 9);
+                Report.markCommentAsUnread(REPORT_ID, reportAction9CreatedDate);
                 return waitForPromisesToResolve();
             })
             .then(() => {
diff --git a/tests/unit/EmojiTest.js b/tests/unit/EmojiTest.js
index 387d716a1f0..25626872caf 100644
--- a/tests/unit/EmojiTest.js
+++ b/tests/unit/EmojiTest.js
@@ -76,11 +76,26 @@ describe('EmojiTest', () => {
 
         // Given an input when we check only multiple emojis with additional whitespace, then it should return false
         expect(EmojiUtils.containsOnlyEmojis('😄  👋')).toBe(true);
+
+        // Given an emoji with an LTR unicode, when we check if it contains only emoji, then it should return true
+        expect(EmojiUtils.containsOnlyEmojis('\u2066😄')).toBe(true);
+    });
+
+    it('will not match for non emoji', () => {
+        // Given a non-emoji input, when we check if it contains only emoji, then it should return false
+        expect(EmojiUtils.containsOnlyEmojis('1')).toBe(false);
+        expect(EmojiUtils.containsOnlyEmojis('a')).toBe(false);
+        expect(EmojiUtils.containsOnlyEmojis('~')).toBe(false);
+        expect(EmojiUtils.containsOnlyEmojis('𝕥𝕖𝕤𝕥')).toBe(false);
+        expect(EmojiUtils.containsOnlyEmojis('𝓣𝓮𝓼𝓽')).toBe(false);
+        expect(EmojiUtils.containsOnlyEmojis('𝕿𝖊𝖘𝖙')).toBe(false);
+        expect(EmojiUtils.containsOnlyEmojis('🆃🅴🆂🆃')).toBe(false);
+        expect(EmojiUtils.containsOnlyEmojis('🅃🄴🅂🅃')).toBe(false);
     });
 
-    it('replaces an emoji code with an emoji and a space', () => {
+    it('replaces an emoji code with an emoji and a space on mobile', () => {
         const text = 'Hi :smile:';
-        expect(EmojiUtils.replaceEmojis(text)).toBe('Hi 😄 ');
+        expect(EmojiUtils.replaceEmojis(text, true)).toBe('Hi 😄 ');
     });
 
     it('will not add a space after the last emoji if there is text after it', () => {
@@ -88,6 +103,16 @@ describe('EmojiTest', () => {
         expect(EmojiUtils.replaceEmojis(text)).toBe('Hi 😄👋no space after last emoji');
     });
 
+    it('will not add a space after the last emoji when there is text after it on mobile', () => {
+        const text = 'Hi :smile::wave:no space after last emoji';
+        expect(EmojiUtils.replaceEmojis(text, true)).toBe('Hi 😄👋no space after last emoji');
+    });
+
+    it('will not add a space after the last emoji if we\'re not on mobile', () => {
+        const text = 'Hi :smile:';
+        expect(EmojiUtils.replaceEmojis(text)).toBe('Hi 😄');
+    });
+
     it('suggests emojis when typing emojis prefix after colon', () => {
         const text = 'Hi :coffin';
         expect(EmojiUtils.suggestEmojis(text)).toEqual([{code: '⚰️', name: 'coffin'}]);
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index 502276723c3..01b4e53338b 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -11,7 +11,7 @@ describe('OptionsListUtils', () => {
     // Given a set of reports with both single participants and multiple participants some pinned and some not
     const REPORTS = {
         1: {
-            lastReadTimestamp: 1610666739295,
+            lastReadTime: '2021-01-14 11:25:39.295',
             lastActionCreated: '2022-11-22 03:26:02.015',
             isPinned: false,
             reportID: 1,
@@ -22,7 +22,7 @@ describe('OptionsListUtils', () => {
             hasDraft: true,
         },
         2: {
-            lastReadTimestamp: 1610666739296,
+            lastReadTime: '2021-01-14 11:25:39.296',
             lastActionCreated: '2022-11-22 03:26:02.016',
             isPinned: false,
             reportID: 2,
@@ -34,7 +34,7 @@ describe('OptionsListUtils', () => {
 
         // This is the only report we are pinning in this test
         3: {
-            lastReadTimestamp: 1610666739297,
+            lastReadTime: '2021-01-14 11:25:39.297',
             lastActionCreated: '2022-11-22 03:26:02.170',
             isPinned: true,
             reportID: 3,
@@ -44,7 +44,7 @@ describe('OptionsListUtils', () => {
             maxSequenceNumber: TEST_MAX_SEQUENCE_NUMBER,
         },
         4: {
-            lastReadTimestamp: 1610666739298,
+            lastReadTime: '2021-01-14 11:25:39.298',
             lastActionCreated: '2022-11-22 03:26:02.180',
             isPinned: false,
             reportID: 4,
@@ -54,7 +54,7 @@ describe('OptionsListUtils', () => {
             maxSequenceNumber: TEST_MAX_SEQUENCE_NUMBER,
         },
         5: {
-            lastReadTimestamp: 1610666739299,
+            lastReadTime: '2021-01-14 11:25:39.299',
             lastActionCreated: '2022-11-22 03:26:02.019',
             isPinned: false,
             reportID: 5,
@@ -64,7 +64,7 @@ describe('OptionsListUtils', () => {
             maxSequenceNumber: TEST_MAX_SEQUENCE_NUMBER,
         },
         6: {
-            lastReadTimestamp: 1610666739300,
+            lastReadTime: '2021-01-14 11:25:39.300',
             lastActionCreated: '2022-11-22 03:26:02.020',
             isPinned: false,
             reportID: 6,
@@ -76,7 +76,7 @@ describe('OptionsListUtils', () => {
 
         // Note: This report has the largest lastActionCreated
         7: {
-            lastReadTimestamp: 1610666739301,
+            lastReadTime: '2021-01-14 11:25:39.301',
             lastActionCreated: '2022-11-22 03:26:03.999',
             isPinned: false,
             reportID: 7,
@@ -88,7 +88,7 @@ describe('OptionsListUtils', () => {
 
         // Note: This report has no lastActionCreated
         8: {
-            lastReadTimestamp: 1610666739301,
+            lastReadTime: '2021-01-14 11:25:39.301',
             lastActionCreated: '2022-11-22 03:26:02.000',
             isPinned: false,
             reportID: 8,
@@ -100,7 +100,7 @@ describe('OptionsListUtils', () => {
 
         // Note: This report has an IOU
         9: {
-            lastReadTimestamp: 1610666739302,
+            lastReadTime: '2021-01-14 11:25:39.302',
             lastActionCreated: '2022-11-22 03:26:02.998',
             isPinned: false,
             reportID: 9,
@@ -114,7 +114,7 @@ describe('OptionsListUtils', () => {
 
         // This report is an archived room – it does not have a name and instead falls back on oldPolicyName
         10: {
-            lastReadTimestamp: 1610666739200,
+            lastReadTime: '2021-01-14 11:25:39.200',
             lastActionCreated: '2022-11-22 03:26:02.001',
             reportID: 10,
             isPinned: false,
@@ -179,7 +179,7 @@ describe('OptionsListUtils', () => {
         ...REPORTS,
 
         11: {
-            lastReadTimestamp: 1610666739302,
+            lastReadTime: '2021-01-14 11:25:39.302',
             lastActionCreated: '2022-11-22 03:26:02.022',
             isPinned: false,
             reportID: 11,
@@ -193,7 +193,7 @@ describe('OptionsListUtils', () => {
     const REPORTS_WITH_CHRONOS = {
         ...REPORTS,
         12: {
-            lastReadTimestamp: 1610666739302,
+            lastReadTime: '2021-01-14 11:25:39.302',
             lastActionCreated: '2022-11-22 03:26:02.022',
             isPinned: false,
             reportID: 12,
@@ -207,7 +207,7 @@ describe('OptionsListUtils', () => {
     const REPORTS_WITH_RECEIPTS = {
         ...REPORTS,
         13: {
-            lastReadTimestamp: 1610666739302,
+            lastReadTime: '2021-01-14 11:25:39.302',
             lastActionCreated: '2022-11-22 03:26:02.022',
             isPinned: false,
             reportID: 13,
diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js
index d3d8c85b99b..48b91067e89 100644
--- a/tests/unit/SidebarFilterTest.js
+++ b/tests/unit/SidebarFilterTest.js
@@ -313,14 +313,8 @@ describe('Sidebar', () => {
         it('hides unread chats', () => {
             // Given the sidebar is rendered in #focus mode (hides read chats)
             // with report 1 and 2 having unread actions
-            const report1 = {
-                ...LHNTestUtils.getFakeReport(['email1@test.com', 'email2@test.com']),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
-            const report2 = {
-                ...LHNTestUtils.getFakeReport(['email3@test.com', 'email4@test.com']),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
+            const report1 = LHNTestUtils.getFakeReport(['email1@test.com', 'email2@test.com'], 0, true);
+            const report2 = LHNTestUtils.getFakeReport(['email3@test.com', 'email4@test.com'], 0, true);
             const report3 = LHNTestUtils.getFakeReport(['email5@test.com', 'email6@test.com']);
             let sidebarLinks = LHNTestUtils.getDefaultRenderedSidebarLinks(report1.reportID);
 
@@ -344,7 +338,7 @@ describe('Sidebar', () => {
                 })
 
                 // When report3 becomes unread
-                .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report3.reportID}`, {lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1}))
+                .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report3.reportID}`, {lastActionCreated: DateUtils.getDBTime()}))
 
                 // Then all three chats are showing
                 .then(() => {
@@ -352,7 +346,7 @@ describe('Sidebar', () => {
                 })
 
                 // When report 1 becomes read (it's the active report)
-                .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report1.reportID}`, {lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER}))
+                .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report1.reportID}`, {lastReadTime: DateUtils.getDBTime()}))
 
                 // Then all three chats are still showing
                 .then(() => {
@@ -443,13 +437,13 @@ describe('Sidebar', () => {
 
                 // When they have unread messages
                 .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${archivedReport.reportID}`, {
-                    lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
+                    lastActionCreated: DateUtils.getDBTime(),
                 }))
                 .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${archivedPolicyRoomReport.reportID}`, {
-                    lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
+                    lastActionCreated: DateUtils.getDBTime(),
                 }))
                 .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${archivedUserCreatedPolicyRoomReport.reportID}`, {
-                    lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
+                    lastActionCreated: DateUtils.getDBTime(),
                 }))
 
                 // Then they are all visible
@@ -489,10 +483,10 @@ describe('Sidebar', () => {
 
                 // When they both have unread messages
                 .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${policyRoomReport.reportID}`, {
-                    lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
+                    lastActionCreated: DateUtils.getDBTime(),
                 }))
                 .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${userCreatedPolicyRoomReport.reportID}`, {
-                    lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
+                    lastActionCreated: DateUtils.getDBTime(),
                 }))
 
                 // Then both rooms are visible
@@ -647,7 +641,6 @@ describe('Sidebar', () => {
                 // Given an archived report that has all comments read
                 const report = {
                     ...LHNTestUtils.getFakeReport(),
-                    lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER,
                     statusNum: CONST.REPORT.STATUS.CLOSED,
                     stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
                 };
@@ -676,7 +669,7 @@ describe('Sidebar', () => {
                     })
 
                     // When the report has a new comment and is now unread
-                    .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1}))
+                    .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {lastActionCreated: DateUtils.getDBTime()}))
 
                     // Then the report is rendered in the LHN
                     .then(() => {
@@ -774,52 +767,6 @@ describe('Sidebar', () => {
                         expect(optionRows).toHaveLength(1);
                     });
             });
-
-            it('is hidden regardless of how many comments it has', () => {
-                const sidebarLinks = LHNTestUtils.getDefaultRenderedSidebarLinks();
-
-                // Given an archived report with no comments
-                const report = {
-                    ...LHNTestUtils.getFakeReport(),
-                    lastActionCreated: '2022-11-22 03:48:27.267',
-                    statusNum: CONST.REPORT.STATUS.CLOSED,
-                    stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
-                };
-
-                // Given the user is in all betas
-                const betas = [
-                    CONST.BETAS.DEFAULT_ROOMS,
-                    CONST.BETAS.POLICY_ROOMS,
-                    CONST.BETAS.POLICY_EXPENSE_CHAT,
-                ];
-
-                return waitForPromisesToResolve()
-
-                    // When Onyx is updated to contain that data and the sidebar re-renders
-                    .then(() => Onyx.multiSet({
-                        [ONYXKEYS.NVP_PRIORITY_MODE]: CONST.PRIORITY_MODE.GSD,
-                        [ONYXKEYS.BETAS]: betas,
-                        [ONYXKEYS.PERSONAL_DETAILS]: LHNTestUtils.fakePersonalDetails,
-                        [`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`]: report,
-                    }))
-
-                    // Then the report is not rendered in the LHN
-                    .then(() => {
-                        const optionRows = sidebarLinks.queryAllByA11yHint('Navigates to a chat');
-                        expect(optionRows).toHaveLength(0);
-                    })
-
-                    // When the report has comments
-                    .then(() => Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, {
-                        lastActionCreated: DateUtils.getDBTime(),
-                    }))
-
-                    // Then the report is not rendered in the LHN
-                    .then(() => {
-                        const optionRows = sidebarLinks.queryAllByA11yHint('Navigates to a chat');
-                        expect(optionRows).toHaveLength(0);
-                    });
-            });
         });
     });
 });
diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js
index 5414a9afdb5..b7d7ff87366 100644
--- a/tests/unit/SidebarOrderTest.js
+++ b/tests/unit/SidebarOrderTest.js
@@ -518,22 +518,10 @@ describe('Sidebar', () => {
         it('alphabetizes chats', () => {
             const sidebarLinks = LHNTestUtils.getDefaultRenderedSidebarLinks();
 
-            const report1 = {
-                ...LHNTestUtils.getFakeReport(['email1@test.com', 'email2@test.com'], 3),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
-            const report2 = {
-                ...LHNTestUtils.getFakeReport(['email3@test.com', 'email4@test.com'], 2),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
-            const report3 = {
-                ...LHNTestUtils.getFakeReport(['email5@test.com', 'email6@test.com'], 1),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
-            const report4 = {
-                ...LHNTestUtils.getFakeReport(['email7@test.com', 'email8@test.com'], 0),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
+            const report1 = LHNTestUtils.getFakeReport(['email1@test.com', 'email2@test.com'], 3, true);
+            const report2 = LHNTestUtils.getFakeReport(['email3@test.com', 'email4@test.com'], 2, true);
+            const report3 = LHNTestUtils.getFakeReport(['email5@test.com', 'email6@test.com'], 1, true);
+            const report4 = LHNTestUtils.getFakeReport(['email7@test.com', 'email8@test.com'], 0, true);
 
             return waitForPromisesToResolve()
 
@@ -573,20 +561,13 @@ describe('Sidebar', () => {
         it('puts archived chats last', () => {
             // Given three unread reports, with the first report being archived
             const report1 = {
-                ...LHNTestUtils.getFakeReport(['email1@test.com', 'email2@test.com'], 3),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
+                ...LHNTestUtils.getFakeReport(['email1@test.com', 'email2@test.com'], 3, true),
                 chatType: CONST.REPORT.CHAT_TYPE.POLICY_ROOM,
                 statusNum: CONST.REPORT.STATUS.CLOSED,
                 stateNum: CONST.REPORT.STATE_NUM.SUBMITTED,
             };
-            const report2 = {
-                ...LHNTestUtils.getFakeReport(['email3@test.com', 'email4@test.com'], 2),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
-            const report3 = {
-                ...LHNTestUtils.getFakeReport(['email5@test.com', 'email6@test.com'], 1),
-                lastReadSequenceNumber: LHNTestUtils.TEST_MAX_SEQUENCE_NUMBER - 1,
-            };
+            const report2 = LHNTestUtils.getFakeReport(['email3@test.com', 'email4@test.com'], 2, true);
+            const report3 = LHNTestUtils.getFakeReport(['email5@test.com', 'email6@test.com'], 1, true);
 
             // Given the user is in all betas
             const betas = [
diff --git a/tests/unit/ValidationUtilsTest.js b/tests/unit/ValidationUtilsTest.js
new file mode 100644
index 00000000000..82f28a37664
--- /dev/null
+++ b/tests/unit/ValidationUtilsTest.js
@@ -0,0 +1,25 @@
+const ValidationUtils = require('../../src/libs/ValidationUtils');
+
+describe('ValidationUtils', () => {
+    describe('isValidTwoFactorCode', () => {
+        test('numeric two factor code', () => {
+            expect(ValidationUtils.isValidTwoFactorCode('123456')).toBe(true);
+        });
+
+        test('numeric two factor code with leading zeroes', () => {
+            expect(ValidationUtils.isValidTwoFactorCode('000001')).toBe(true);
+        });
+
+        test('alphanumeric two factor code', () => {
+            expect(ValidationUtils.isValidTwoFactorCode('abc123')).toBe(false);
+        });
+
+        test('special characters two factor code', () => {
+            expect(ValidationUtils.isValidTwoFactorCode('!@#$%^')).toBe(false);
+        });
+
+        test('partial special characters two factor code', () => {
+            expect(ValidationUtils.isValidTwoFactorCode('123$%^')).toBe(false);
+        });
+    });
+});
diff --git a/tests/utils/LHNTestUtils.js b/tests/utils/LHNTestUtils.js
index aedd71d6ccd..8aee1b7502e 100644
--- a/tests/utils/LHNTestUtils.js
+++ b/tests/utils/LHNTestUtils.js
@@ -71,15 +71,18 @@ let lastFakeReportID = 0;
 /**
  * @param {String[]} participants
  * @param {Number} millisecondsInThePast the number of milliseconds in the past for the last message timestamp (to order reports by most recent messages)
+ * @param {boolean} isUnread
  * @returns {Object}
  */
-function getFakeReport(participants = ['email1@test.com', 'email2@test.com'], millisecondsInThePast = 0) {
+function getFakeReport(participants = ['email1@test.com', 'email2@test.com'], millisecondsInThePast = 0, isUnread = false) {
+    const lastActionCreated = DateUtils.getDBTime(Date.now() - millisecondsInThePast);
     return {
         reportID: `${++lastFakeReportID}`,
         reportName: 'Report',
         maxSequenceNumber: TEST_MAX_SEQUENCE_NUMBER,
         lastReadSequenceNumber: TEST_MAX_SEQUENCE_NUMBER,
-        lastActionCreated: DateUtils.getDBTime(Date.now() - millisecondsInThePast),
+        lastActionCreated,
+        lastReadTime: isUnread ? DateUtils.subtractMillisecondsFromDateTime(lastActionCreated, 1) : lastActionCreated,
         participants,
     };
 }
@@ -98,7 +101,7 @@ function getFakeReport(participants = ['email1@test.com', 'email2@test.com'], mi
  */
 function getAdvancedFakeReport(isArchived, isUserCreatedPolicyRoom, hasAddWorkspaceError, isUnread, isPinned, hasDraft) {
     return {
-        ...getFakeReport(),
+        ...getFakeReport(['email1@test.com', 'email2@test.com'], 0, isUnread),
         chatType: isUserCreatedPolicyRoom ? CONST.REPORT.CHAT_TYPE.POLICY_ROOM : CONST.REPORT.CHAT_TYPE.POLICY_ADMINS,
         statusNum: isArchived ? CONST.REPORT.STATUS.CLOSED : 0,
         stateNum: isArchived ? CONST.REPORT.STATE_NUM.SUBMITTED : 0,
diff --git a/tests/utils/TestHelper.js b/tests/utils/TestHelper.js
index 7b4f05c16e3..84fdea3f158 100644
--- a/tests/utils/TestHelper.js
+++ b/tests/utils/TestHelper.js
@@ -159,9 +159,11 @@ function setPersonalDetails(login, accountID) {
  * @param {Number} sequenceNumber
  * @param {String} created
  * @param {Number} actorAccountID
+ * @param {String} actionID
  * @returns {Object}
  */
-function buildTestReportComment(actorEmail, sequenceNumber, created, actorAccountID) {
+function buildTestReportComment(actorEmail, sequenceNumber, created, actorAccountID, actionID = null) {
+    const reportActionID = actionID || NumberUtils.rand64();
     return {
         actionName: CONST.REPORT.ACTIONS.TYPE.ADDCOMMENT,
         actorEmail,
@@ -169,7 +171,7 @@ function buildTestReportComment(actorEmail, sequenceNumber, created, actorAccoun
         sequenceNumber,
         created,
         message: [{type: 'COMMENT', html: `Comment ${sequenceNumber}`, text: `Comment ${sequenceNumber}`}],
-        reportActionID: NumberUtils.rand64(),
+        reportActionID,
         actorAccountID,
     };
 }
diff --git a/web/index.html b/web/index.html
index d7074a03d3b..3b43fc03d32 100644
--- a/web/index.html
+++ b/web/index.html
@@ -23,6 +23,9 @@
         #root > div > div {
             height: 100% !important;
         }
+        :root {
+            color-scheme: dark;
+        }
         #drag-area {
             -webkit-app-region: drag;
         }