diff --git a/android/app/build.gradle b/android/app/build.gradle
index a1a33b723a54..a61340620405 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001031603
-        versionName "1.3.16-3"
+        versionCode 1001031605
+        versionName "1.3.16-5"
     }
 
     splits {
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index 90b6ca439b3c..d66f9cfc3664 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.16.3</string>
+	<string>1.3.16.5</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index bb36de4efe79..0ccf71908353 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.16.3</string>
+	<string>1.3.16.5</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
index 1ad7842a24fa..b8f439f51bc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "new.expensify",
-  "version": "1.3.16-3",
+  "version": "1.3.16-5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "new.expensify",
-      "version": "1.3.16-3",
+      "version": "1.3.16-5",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 3c473532d291..28fe59d5f7b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.16-3",
+  "version": "1.3.16-5",
   "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.",
@@ -221,7 +221,15 @@
     "react-native": "$react-native"
   },
   "electronmon": {
-    "patterns": ["!node_modules", "!node_modules/**/*", "!**/*.map", "!ios/**", "!android/**", "*.test.*", "*.spec.*"]
+    "patterns": [
+      "!node_modules",
+      "!node_modules/**/*",
+      "!**/*.map",
+      "!ios/**",
+      "!android/**",
+      "*.test.*",
+      "*.spec.*"
+    ]
   },
   "engines": {
     "node": "16.15.1",
diff --git a/src/Expensify.js b/src/Expensify.js
index 638bb6119bb9..4fc000302ce7 100644
--- a/src/Expensify.js
+++ b/src/Expensify.js
@@ -90,7 +90,8 @@ function Expensify(props) {
     const [isSplashHidden, setIsSplashHidden] = useState(false);
 
     const isAuthenticated = useMemo(() => Boolean(lodashGet(props.session, 'authToken', null)), [props.session]);
-    const shouldHideSplash = isNavigationReady && !isSplashHidden && (!isAuthenticated || props.isSidebarLoaded);
+    const shouldInit = isNavigationReady && (!isAuthenticated || props.isSidebarLoaded);
+    const shouldHideSplash = shouldInit && !isSplashHidden;
 
     const initializeClient = () => {
         if (!Visibility.isVisible()) {
@@ -171,7 +172,7 @@ function Expensify(props) {
 
     return (
         <DeeplinkWrapper>
-            {shouldHideSplash && (
+            {shouldInit && (
                 <>
                     <KeyboardShortcutsModal />
                     <GrowlNotification ref={Growl.growlRef} />
diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js
index 7a9690e5fe1e..3f8a074e0bbb 100644
--- a/src/components/MoneyRequestHeader.js
+++ b/src/components/MoneyRequestHeader.js
@@ -84,8 +84,8 @@ const MoneyRequestHeader = (props) => {
         ? ReportUtils.getWorkspaceAvatar(moneyRequestReport)
         : ReportUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'avatar']), moneyRequestReport.managerEmail);
     const policy = props.policies[`${ONYXKEYS.COLLECTION.POLICY}${props.report.policyID}`];
-    const shouldShowSettlementButton =
-        !isSettled && (Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(props.report) && lodashGet(props.session, 'email', null) === props.report.managerEmail));
+    const isPayer = Policy.isAdminOfFreePolicy([policy]) || (ReportUtils.isMoneyRequestReport(props.report) && lodashGet(props.session, 'email', null) === props.report.managerEmail);
+    const shouldShowSettlementButton = !isSettled && !props.isSingleTransactionView && isPayer;
     return (
         <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}>
             <HeaderWithCloseButton
@@ -149,7 +149,7 @@ const MoneyRequestHeader = (props) => {
                                     currency={props.report.currency}
                                     policyID={props.report.policyID}
                                     shouldShowPaypal={Boolean(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'payPalMeAddress']))}
-                                    chatReportID={props.report.chatReportID}
+                                    chatReportID={props.chatReport.reportID}
                                     iouReport={props.report}
                                     onPress={(paymentType) => IOU.payMoneyRequest(paymentType, props.chatReport, props.report)}
                                     enablePaymentsRoute={ROUTES.BANK_ACCOUNT_NEW}
diff --git a/src/components/MultipleAvatars.js b/src/components/MultipleAvatars.js
index 31d4f9962b1f..0e85dba3337b 100644
--- a/src/components/MultipleAvatars.js
+++ b/src/components/MultipleAvatars.js
@@ -43,6 +43,9 @@ const propTypes = {
 
     /** Whether avatars are displayed within a reportAction */
     isInReportAction: PropTypes.bool,
+
+    /** Whether avatars are displayed within an IOUAction */
+    shouldUseCardBackground: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -56,6 +59,7 @@ const defaultProps = {
     isPressed: false,
     isFocusMode: false,
     isInReportAction: false,
+    shouldUseCardBackground: false,
 };
 
 const MultipleAvatars = (props) => {
@@ -107,42 +111,64 @@ const MultipleAvatars = (props) => {
             {props.shouldStackHorizontally ? (
                 <>
                     {_.map([...props.icons].splice(0, 4), (icon, index) => (
-                        <View
+                        <Tooltip
                             key={`stackedAvatars-${index}`}
-                            style={[
-                                styles.justifyContentCenter,
-                                styles.alignItemsCenter,
-                                StyleUtils.getHorizontalStackedAvatarBorderStyle(props.isHovered, props.isPressed, props.isInReportAction),
-                                StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize, oneAvatarBorderWidth, oneAvatarSize.width),
-                                icon.type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, icon.type) : {},
-                            ]}
+                            text={props.avatarTooltips[index]}
+                            absolute
                         >
-                            <Avatar
-                                source={icon.source || props.fallbackIcon}
-                                fill={themeColors.iconSuccessFill}
-                                size={props.size}
-                                name={icon.name}
-                                type={icon.type}
-                            />
-                        </View>
+                            <View
+                                style={[
+                                    styles.justifyContentCenter,
+                                    styles.alignItemsCenter,
+                                    StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                        isHovered: props.isHovered,
+                                        isPressed: props.isPressed,
+                                        isInReportAction: props.isInReportAction,
+                                        shouldUseCardBackground: props.shouldUseCardBackground,
+                                    }),
+                                    StyleUtils.getHorizontalStackedAvatarStyle(index, overlapSize, oneAvatarBorderWidth, oneAvatarSize.width),
+                                    icon.type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, icon.type) : {},
+                                ]}
+                            >
+                                <Avatar
+                                    source={icon.source || props.fallbackIcon}
+                                    fill={themeColors.iconSuccessFill}
+                                    size={props.size}
+                                    name={icon.name}
+                                    type={icon.type}
+                                />
+                            </View>
+                        </Tooltip>
                     ))}
                     {props.icons.length > 4 && (
-                        <View
-                            style={[
-                                styles.alignItemsCenter,
-                                styles.justifyContentCenter,
-                                StyleUtils.getHorizontalStackedAvatarBorderStyle(props.isHovered, props.isPressed, props.isInReportAction),
-
-                                // Set overlay background color with RGBA value so that the text will not inherit opacity
-                                StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
-                                StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
-                                props.icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[3].type) : {},
-                            ]}
+                        <Tooltip
+                            text={props.avatarTooltips.slice(3).join(', ')}
+                            absolute
                         >
-                            <View style={[styles.justifyContentCenter, styles.alignItemsCenter, StyleUtils.getHeight(oneAvatarSize.height), StyleUtils.getWidthStyle(oneAvatarSize.width)]}>
-                                <Text style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(props.size)]}>{`+${props.icons.length - 4}`}</Text>
+                            <View
+                                style={[
+                                    styles.alignItemsCenter,
+                                    styles.justifyContentCenter,
+                                    StyleUtils.getHorizontalStackedAvatarBorderStyle({
+                                        isHovered: props.isHovered,
+                                        isPressed: props.isPressed,
+                                        isInReportAction: props.isInReportAction,
+                                        shouldUseCardBackground: props.shouldUseCardBackground,
+                                    }),
+
+                                    // Set overlay background color with RGBA value so that the text will not inherit opacity
+                                    StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
+                                    StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
+                                    props.icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(props.size, props.icons[3].type) : {},
+                                ]}
+                            >
+                                <View
+                                    style={[styles.justifyContentCenter, styles.alignItemsCenter, StyleUtils.getHeight(oneAvatarSize.height), StyleUtils.getWidthStyle(oneAvatarSize.width)]}
+                                >
+                                    <Text style={[styles.avatarInnerTextSmall, StyleUtils.getAvatarExtraFontSizeStyle(props.size)]}>{`+${props.icons.length - 4}`}</Text>
+                                </View>
                             </View>
-                        </View>
+                        </Tooltip>
                     )}
                 </>
             ) : (
diff --git a/src/components/ReportActionItem/IOUPreview.js b/src/components/ReportActionItem/IOUPreview.js
index b9fb8f7432e8..9e8863fe9953 100644
--- a/src/components/ReportActionItem/IOUPreview.js
+++ b/src/components/ReportActionItem/IOUPreview.js
@@ -218,7 +218,10 @@ const IOUPreview = (props) => {
                             <View style={styles.iouPreviewBoxAvatar}>
                                 <MultipleAvatars
                                     icons={participantAvatars}
-                                    secondAvatarStyle={[styles.secondAvatarInline, props.isHovered ? styles.iouPreviewBoxAvatarHover : undefined]}
+                                    shouldStackHorizontally
+                                    size="small"
+                                    isHovered={props.isHovered}
+                                    shouldUseCardBackground
                                     avatarTooltips={participantEmails}
                                 />
                             </View>
diff --git a/src/components/ReportActionItem/ReportPreview.js b/src/components/ReportActionItem/ReportPreview.js
index 814a38dba5b5..f9aa62c5b7cd 100644
--- a/src/components/ReportActionItem/ReportPreview.js
+++ b/src/components/ReportActionItem/ReportPreview.js
@@ -100,7 +100,7 @@ const ReportPreview = (props) => {
     const isCurrentUserManager = managerEmail === lodashGet(props.session, 'email', null);
     return (
         <View style={[styles.chatItemMessage, styles.mt4]}>
-            {_.map(props.action.message, (index) => (
+            {_.map(props.action.message, (message, index) => (
                 <Pressable
                     key={`ReportPreview-${props.action.reportActionID}-${index}`}
                     onPress={() => {
@@ -114,10 +114,12 @@ const ReportPreview = (props) => {
                 >
                     <View style={[styles.flexShrink1]}>
                         {props.iouReport.hasOutstandingIOU ? (
-                            <Text style={[styles.chatItemMessage, styles.cursorPointer]}>{props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount})}</Text>
+                            <Text style={[styles.chatItemMessage, styles.cursorPointer]}>
+                                {lodashGet(message, 'html', props.translate('iou.payerOwesAmount', {payer: managerName, amount: reportAmount}))}
+                            </Text>
                         ) : (
                             <View style={[styles.flexRow]}>
-                                <Text style={[styles.chatItemMessage, styles.cursorPointer]}>{props.translate('iou.payerSettled', {amount: reportAmount})}</Text>
+                                <Text style={[styles.chatItemMessage, styles.cursorPointer]}>{lodashGet(message, 'html', props.translate('iou.payerSettled', {amount: reportAmount}))}</Text>
                                 {!props.iouReport.hasOutstandingIOU && (
                                     <Icon
                                         style={[styles.ml10]}
diff --git a/src/libs/ReportUtils.js b/src/libs/ReportUtils.js
index 8fca01bf8170..6122701476f7 100644
--- a/src/libs/ReportUtils.js
+++ b/src/libs/ReportUtils.js
@@ -1383,9 +1383,10 @@ function getIOUReportActionMessage(type, total, comment, currency, paymentType =
  * @param {String} [paymentType] - Only required if the IOUReportAction type is 'pay'. Can be oneOf(elsewhere, payPal, Expensify).
  * @param {String} [iouReportID] - Only required if the IOUReportActions type is oneOf(decline, cancel, pay). Generates a randomID as default.
  * @param {Boolean} [isSettlingUp] - Whether we are settling up an IOU.
+ * @param {Boolean} [isSendMoneyFlow] - Whether this is send money flow
  * @returns {Object}
  */
-function buildOptimisticIOUReportAction(type, amount, currency, comment, participants, transactionID, paymentType = '', iouReportID = '', isSettlingUp = false) {
+function buildOptimisticIOUReportAction(type, amount, currency, comment, participants, transactionID, paymentType = '', iouReportID = '', isSettlingUp = false, isSendMoneyFlow = false) {
     const IOUReportID = iouReportID || generateReportID();
     const parser = new ExpensiMark();
     const commentText = getParsedComment(comment);
@@ -1401,7 +1402,7 @@ function buildOptimisticIOUReportAction(type, amount, currency, comment, partici
     };
 
     // We store amount, comment, currency in IOUDetails when type = pay
-    if (type === CONST.IOU.REPORT_ACTION_TYPE.PAY) {
+    if (type === CONST.IOU.REPORT_ACTION_TYPE.PAY && isSendMoneyFlow) {
         _.each(['amount', 'comment', 'currency'], (key) => {
             delete originalMessage[key];
         });
@@ -2009,7 +2010,7 @@ function getNewMarkerReportActionID(report, sortedAndFilteredReportActions) {
         return '';
     }
 
-    const newMarkerIndex = _.findLastIndex(sortedAndFilteredReportActions, (reportAction) => (reportAction.actorAccountID !== currentUserAccountID) && (reportAction.created || '') > report.lastReadTime );
+    const newMarkerIndex = _.findLastIndex(sortedAndFilteredReportActions, (reportAction) => (reportAction.created || '') > report.lastReadTime);
 
     return _.has(sortedAndFilteredReportActions[newMarkerIndex], 'reportActionID') ? sortedAndFilteredReportActions[newMarkerIndex].reportActionID : '';
 }
diff --git a/src/libs/SidebarUtils.js b/src/libs/SidebarUtils.js
index 45e992be8889..93220ecf313b 100644
--- a/src/libs/SidebarUtils.js
+++ b/src/libs/SidebarUtils.js
@@ -15,25 +15,15 @@ import * as LocalePhoneNumber from './LocalePhoneNumber';
 // Note: It is very important that the keys subscribed to here are the same
 // keys that are connected to SidebarLinks withOnyx(). If there was a key missing from SidebarLinks and it's data was updated
 // for that key, then there would be no re-render and the options wouldn't reflect the new data because SidebarUtils.getOrderedReportIDs() wouldn't be triggered.
-// There are a couple of keys here which are OK to have stale data. iouReports for example, doesn't need to exist in withOnyx() because
-// when IOUs change, it also triggers a change on the reports collection. Having redundant subscriptions causes more re-renders which should be avoided.
+// There are a couple of keys here which are OK to have stale data. Having redundant subscriptions causes more re-renders which should be avoided.
 // Session also can remain stale because the only way for the current user to change is to sign out and sign in, which would clear out all the Onyx
 // data anyway and cause SidebarLinks to rerender.
 
-const chatReports = {};
-const moneyRequestReports = {};
+let allReports;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
-    callback: (report, key) => {
-        if (!report) {
-            delete moneyRequestReports[key];
-            delete chatReports[key];
-        } else if (ReportUtils.isMoneyRequestReport(report)) {
-            moneyRequestReports[key] = report;
-        } else {
-            chatReports[key] = report;
-        }
-    },
+    waitForCollectionCallback: true,
+    callback: (val) => (allReports = val),
 });
 
 let personalDetails;
@@ -108,9 +98,7 @@ function getOrderedReportIDs(reportIDFromRoute) {
     const isInDefaultMode = !isInGSDMode;
 
     // Filter out all the reports that shouldn't be displayed
-    const reportsToDisplay = _.filter({...chatReports, ...moneyRequestReports}, (report) =>
-        ReportUtils.shouldReportBeInOptionList(report, reportIDFromRoute, isInGSDMode, currentUserLogin, moneyRequestReports, betas, policies),
-    );
+    const reportsToDisplay = _.filter(allReports, (report) => ReportUtils.shouldReportBeInOptionList(report, reportIDFromRoute, isInGSDMode, currentUserLogin, allReports, betas, policies));
 
     // There are a few properties that need to be calculated for the report which are used when sorting reports.
     _.each(reportsToDisplay, (report) => {
@@ -121,7 +109,7 @@ function getOrderedReportIDs(reportIDFromRoute) {
         report.displayName = ReportUtils.getReportName(report);
 
         // eslint-disable-next-line no-param-reassign
-        report.iouReportAmount = ReportUtils.getMoneyRequestTotal(report, moneyRequestReports);
+        report.iouReportAmount = ReportUtils.getMoneyRequestTotal(report, allReports);
     });
 
     // The LHN is split into five distinct groups, and each group is sorted a little differently. The groups will ALWAYS be in this order:
@@ -146,7 +134,7 @@ function getOrderedReportIDs(reportIDFromRoute) {
             return;
         }
 
-        if (report.hasOutstandingIOU && !ReportUtils.isIOUOwnedByCurrentUser(report, moneyRequestReports)) {
+        if (report.hasOutstandingIOU && !ReportUtils.isIOUOwnedByCurrentUser(report, allReports)) {
             outstandingIOUReports.push(report);
             return;
         }
@@ -196,7 +184,7 @@ function getOrderedReportIDs(reportIDFromRoute) {
  */
 function getOptionData(reportID) {
     const reportKey = `${ONYXKEYS.COLLECTION.REPORT}${reportID}`;
-    const report = chatReports[reportKey] || moneyRequestReports[reportKey];
+    const report = allReports[reportKey];
 
     // When a user signs out, Onyx is cleared. Due to the lazy rendering with a virtual list, it's possible for
     // this method to be called after the Onyx data has been cleared out. In that case, it's fine to do
@@ -260,7 +248,7 @@ function getOptionData(reportID) {
     result.tooltipText = ReportUtils.getReportParticipantsTitle(report.participants || []);
     result.hasOutstandingIOU = report.hasOutstandingIOU;
     result.parentReportID = report.parentReportID || null;
-    const parentReport = result.parentReportID ? chatReports[`${ONYXKEYS.COLLECTION.REPORT}${result.parentReportID}`] : null;
+    const parentReport = result.parentReportID ? allReports[`${ONYXKEYS.COLLECTION.REPORT}${result.parentReportID}`] : null;
     const hasMultipleParticipants = participantPersonalDetailList.length > 1 || result.isChatRoom || result.isPolicyExpenseChat;
     const subtitle = ReportUtils.getChatRoomSubtitle(report);
 
@@ -329,8 +317,8 @@ function getOptionData(reportID) {
         result.alternateText = lastMessageText || formattedLogin;
     }
 
-    result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result, moneyRequestReports);
-    result.iouReportAmount = ReportUtils.getMoneyRequestTotal(result, moneyRequestReports);
+    result.isIOUReportOwner = ReportUtils.isIOUOwnedByCurrentUser(result, allReports);
+    result.iouReportAmount = ReportUtils.getMoneyRequestTotal(result, allReports);
 
     if (!hasMultipleParticipants) {
         result.login = personalDetail.login;
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 33af1acd67c5..28e0251276f0 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -882,6 +882,8 @@ function getSendMoneyParams(report, amount, currency, comment, paymentMethodType
         optimisticTransaction.transactionID,
         paymentMethodType,
         optimisticIOUReport.reportID,
+        false,
+        true,
     );
 
     // First, add data that will be used in all cases
@@ -1044,7 +1046,7 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
         },
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`,
             value: {
                 [reportPreviewAction.reportActionID]: {
                     created: DateUtils.getDBTime(),
@@ -1106,7 +1108,7 @@ function getPayMoneyRequestParams(chatReport, iouReport, recipient, paymentMetho
     const failureData = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReport.reportID}`,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${iouReport.reportID}`,
             value: {
                 [reportPreviewAction.reportActionID]: {
                     created: reportPreviewAction.created,
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index f1bbeec24b21..6a4cd9fe3050 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -58,18 +58,6 @@ Onyx.connect({
     },
 });
 
-const currentReportData = {};
-Onyx.connect({
-    key: ONYXKEYS.COLLECTION.REPORT,
-    callback: (data, key) => {
-        if (!data || !key) {
-            return;
-        }
-        const reportID = CollectionUtils.extractCollectionItemID(key);
-        currentReportData[reportID] = data;
-    },
-});
-
 const allReports = {};
 let conciergeChatReportID;
 const typingWatchTimers = {};
@@ -326,10 +314,6 @@ function addComment(reportID, text) {
     addActions(reportID, text);
 }
 
-function reportActionsExist(reportID) {
-    return allReportActions[reportID] !== undefined;
-}
-
 /**
  * Gets the latest page of report actions and updates the last read message
  * If a chat with the passed reportID is not found, we will create a chat based on the passed participantList
@@ -343,13 +327,12 @@ function openReport(reportID, participantList = [], newReportObject = {}, parent
     const optimisticReportData = {
         onyxMethod: Onyx.METHOD.MERGE,
         key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
-        value: reportActionsExist(reportID)
-            ? {}
-            : {
-                  isLoadingReportActions: true,
-                  isLoadingMoreReportActions: false,
-                  reportName: lodashGet(allReports, [reportID, 'reportName'], CONST.REPORT.DEFAULT_REPORT_NAME),
-              },
+        value: {
+            isLoadingReportActions: true,
+            isLoadingMoreReportActions: false,
+            lastReadTime: DateUtils.getDBTime(),
+            reportName: lodashGet(allReports, [reportID, 'reportName'], CONST.REPORT.DEFAULT_REPORT_NAME),
+        },
     };
     const reportSuccessData = {
         onyxMethod: Onyx.METHOD.MERGE,
@@ -431,9 +414,6 @@ function openReport(reportID, participantList = [], newReportObject = {}, parent
             });
         }
     }
-    console.log(JSON.stringify(currentReportData));
-    params.currentLastReadTime = currentReportData[reportID].lastReadTime || '';
-    console.log(`~~Monil openReport params ${JSON.stringify(params)}`);
 
     API.write('OpenReport', params, onyxData);
 }
@@ -678,7 +658,6 @@ function openMoneyRequestsReportPage(chatReportID, linkedReportID) {
  * @param {String} reportID
  */
 function readNewestAction(reportID) {
-    console.log(`~~Monil marking comment as read ${reportID}`);
     API.write(
         'ReadNewestAction',
         {
@@ -1619,20 +1598,6 @@ function openReportFromDeepLink(url) {
     });
 }
 
-function getCurrentUserAccountID() {
-    return currentUserAccountID;
-}
-
-/**
- * @param {String|null} reportID
- */
-function getAllReportActions(reportID) {
-    if (reportID) {
-        return allReportActions[reportID];
-    }
-    return allReportActions;
-}
-
 /**
  * Leave a report by setting the state to submitted and closed
  *
@@ -1711,6 +1676,5 @@ export {
     toggleEmojiReaction,
     hasAccountIDReacted,
     shouldShowReportActionNotification,
-    getAllReportActions,
     leaveRoom,
 };
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 41fcf102a138..e0749f698444 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -193,11 +193,10 @@ class ReportActionItem extends Component {
             originalMessage &&
             (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.CREATE ||
                 originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.SPLIT ||
-                (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && originalMessage.IOUDetails))
+                (originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && _.has(originalMessage, 'IOUDetails')))
         ) {
             // There is no single iouReport for bill splits, so only 1:1 requests require an iouReportID
             const iouReportID = originalMessage.IOUReportID ? originalMessage.IOUReportID.toString() : '0';
-
             children = (
                 <MoneyRequestAction
                     chatReportID={this.props.report.reportID}
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 42c7e6eb4671..7552be938890 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useState, useRef, useMemo} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import Animated, {useSharedValue, useAnimatedStyle, withTiming} from 'react-native-reanimated';
 import _ from 'underscore';
 import InvertedFlatList from '../../../components/InvertedFlatList';
@@ -8,7 +8,6 @@ import compose from '../../../libs/compose';
 import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import styles from '../../../styles/styles';
 import * as ReportUtils from '../../../libs/ReportUtils';
-import * as Report from '../../../libs/actions/Report';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
 import ReportActionItem from './ReportActionItem';
@@ -77,18 +76,8 @@ function keyExtractor(item) {
     return item.reportActionID;
 }
 
-function isUnreadMsg(message, lastRead) {
-    // console.log(`lastRead ${lastRead} < message ${message?.created}`, message);
-    return message && lastRead && message.created && lastRead < message.created;
-}
-
-function ReportActionsList(props) {
+const ReportActionsList = (props) => {
     const opacity = useSharedValue(0);
-    const currentUnreadMarker = useRef(null);
-    const report = props.report;
-    const lastReadTimeRef = useRef(report.lastReadTime);
-    const sortedReportActions = props.sortedReportActions;
-    const [reportActionSize, setReportActionSize] = useState(sortedReportActions.length);
     const animatedStyles = useAnimatedStyle(() => ({
         opacity: opacity.value,
     }));
@@ -99,44 +88,21 @@ function ReportActionsList(props) {
 
     const windowHeight = props.windowHeight;
 
-    useEffect(() => {
-        if (currentUnreadMarker.current) {
-            return;
-        }
-
-        if (reportActionSize === sortedReportActions.length) {
-            return;
-        }
-
-        setReportActionSize(sortedReportActions.length);
-        Report.readNewestAction(report.reportID);
-        currentUnreadMarker.current = null;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sortedReportActions.length, report.reportID]);
-
-    useEffect(() => {
-        if (lastReadTimeRef.current === report.lastReadTime && !ReportUtils.isUnread(report)) {
-            return;
-        }
-
-        lastReadTimeRef.current = report.lastReadTime;
-        currentUnreadMarker.current = null;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [report.lastReadTime]);
-
     /**
      * Calculates the ideal number of report actions to render in the first render, based on the screen height and on
      * the height of the smallest report action possible.
      * @return {Number}
      */
-    const initialNumToRender = useMemo(() => {
+    const calculateInitialNumToRender = useCallback(() => {
         const minimumReportActionHeight = styles.chatItem.paddingTop + styles.chatItem.paddingBottom + variables.fontSizeNormalHeight;
         const availableHeight = windowHeight - (CONST.CHAT_FOOTER_MIN_HEIGHT + variables.contentHeaderHeight);
         return Math.ceil(availableHeight / minimumReportActionHeight);
     }, [windowHeight]);
 
+    const report = props.report;
     const hasOutstandingIOU = props.report.hasOutstandingIOU;
-
+    const newMarkerReportActionID = props.newMarkerReportActionID;
+    const sortedReportActions = props.sortedReportActions;
     const mostRecentIOUReportActionID = props.mostRecentIOUReportActionID;
 
     /**
@@ -146,20 +112,8 @@ function ReportActionsList(props) {
      */
     const renderItem = useCallback(
         ({item: reportAction, index}) => {
-            let shouldDisplayNewMarker = false;
-
-            if (!currentUnreadMarker.current) {
-                const nextMessage = sortedReportActions[index + 1];
-                const isCurrentMessageUnread = !!isUnreadMsg(reportAction, report.lastReadTime);
-                shouldDisplayNewMarker = isCurrentMessageUnread && !isUnreadMsg(nextMessage, report.lastReadTime);
-
-                if (!currentUnreadMarker.current && shouldDisplayNewMarker) {
-                    currentUnreadMarker.current = {id: reportAction.reportActionID, index, created: reportAction.created};
-                }
-            } else {
-                shouldDisplayNewMarker = reportAction.reportActionID === currentUnreadMarker.current.id;
-            }
-
+            // When the new indicator should not be displayed we explicitly set it to null
+            const shouldDisplayNewMarker = reportAction.reportActionID === newMarkerReportActionID;
             const shouldDisplayParentAction = reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && ReportUtils.isThread(report);
             return shouldDisplayParentAction ? (
                 <ReportActionItemParentAction
@@ -179,14 +133,13 @@ function ReportActionsList(props) {
                 />
             );
         },
-        [report, hasOutstandingIOU, sortedReportActions, mostRecentIOUReportActionID],
+        [report, hasOutstandingIOU, newMarkerReportActionID, sortedReportActions, mostRecentIOUReportActionID],
     );
 
     // 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 = [!props.isDrawerOpen && props.isSmallScreenWidth ? props.newMarkerReportActionID : undefined, ReportUtils.isArchivedRoom(props.report)];
     const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(props.personalDetails, props.report);
-
     return (
         <Animated.View style={[animatedStyles, styles.flex1]}>
             <InvertedFlatList
@@ -197,7 +150,7 @@ function ReportActionsList(props) {
                 contentContainerStyle={[styles.chatContentScrollView, shouldShowReportRecipientLocalTime && styles.pt0]}
                 keyExtractor={keyExtractor}
                 initialRowHeight={32}
-                initialNumToRender={initialNumToRender}
+                initialNumToRender={calculateInitialNumToRender()}
                 onEndReached={props.loadMoreChats}
                 onEndReachedThreshold={0.75}
                 ListFooterComponent={() => {
@@ -230,7 +183,7 @@ function ReportActionsList(props) {
             />
         </Animated.View>
     );
-}
+};
 
 ReportActionsList.propTypes = propTypes;
 ReportActionsList.defaultProps = defaultProps;
diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
index 0a3d892f7981..fd506cf82353 100644
--- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
+++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js
@@ -15,6 +15,7 @@ import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
 import compose from '../../../../libs/compose';
 import NewDatePicker from '../../../../components/NewDatePicker';
 import CONST from '../../../../CONST';
+import withNavigationFocus from '../../../../components/withNavigationFocus';
 
 const propTypes = {
     /* Onyx Props */
@@ -49,11 +50,16 @@ class DateOfBirthPage extends Component {
     }
 
     componentDidMount() {
-        this.props.navigation.addListener('focus', this.getYearFromRouteParams);
+        this.getYearFromRouteParams();
     }
 
-    componentWillUnmount() {
-        this.props.navigation.removeListener('focus', this.getYearFromRouteParams);
+    componentDidUpdate(prevProps) {
+        // When we're navigating back from Year page. We need to update the selected year from the URL
+        if (prevProps.isFocused || !this.props.isFocused) {
+            return;
+        }
+
+        this.getYearFromRouteParams();
     }
 
     /**
@@ -135,6 +141,7 @@ DateOfBirthPage.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
+    withNavigationFocus,
     withOnyx({
         privatePersonalDetails: {
             key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 6839b4567e09..a85c2d527f17 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -819,13 +819,15 @@ function getKeyboardShortcutsModalWidth(isSmallScreenWidth) {
 }
 
 /**
- * @param {Boolean} isHovered
- * @param {Boolean} isPressed
- * @param {Boolean} isInReportAction
+ * @param {Object} params
+ * @param {Boolean} params.isHovered
+ * @param {Boolean} params.isPressed
+ * @param {Boolean} params.isInReportAction
+ * @param {Boolean} params.shouldUseCardBackground
  * @returns {Object}
  */
-function getHorizontalStackedAvatarBorderStyle(isHovered, isPressed, isInReportAction = false) {
-    let backgroundColor = themeColors.appBG;
+function getHorizontalStackedAvatarBorderStyle({isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false}) {
+    let backgroundColor = shouldUseCardBackground ? themeColors.cardBG : themeColors.appBG;
 
     if (isHovered) {
         backgroundColor = isInReportAction ? themeColors.highlightBG : themeColors.border;
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 3b80a942e41a..823c6124ac0f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2475,12 +2475,7 @@ const styles = {
 
     iouPreviewBoxAvatar: {
         marginRight: -10,
-        marginBottom: -10,
-    },
-
-    iouPreviewBoxAvatarHover: {
-        borderColor: themeColors.border,
-        backgroundColor: themeColors.border,
+        marginBottom: 0,
     },
 
     iouPreviewBoxCheckmark: {