diff --git a/src/languages/en.js b/src/languages/en.js
index 37fbc63cc578..29f53eccd685 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -202,7 +202,7 @@ export default {
         beginningOfChatHistoryPolicyExpenseChatPartTwo: ' and ',
         beginningOfChatHistoryPolicyExpenseChatPartThree: ' starts here! 🎉 This is the place to chat, request money and settle up.',
     },
-    newMessageCount: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,
+    newMessages: 'New messages',
     reportTypingIndicator: {
         isTyping: 'is typing...',
         areTyping: 'are typing...',
diff --git a/src/languages/es.js b/src/languages/es.js
index d0dad9e78736..b5b3671cdf5b 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -202,7 +202,7 @@ export default {
         beginningOfChatHistoryPolicyExpenseChatPartTwo: ' y ',
         beginningOfChatHistoryPolicyExpenseChatPartThree: ' empieza aquí! :tada: Este es el lugar donde chatear, pedir dinero y pagar.',
     },
-    newMessageCount: ({count}) => `${count} mensaje${count > 1 ? 's' : ''} nuevo${count > 1 ? 's' : ''}`,
+    newMessages: 'Mensajes nuevos',
     reportTypingIndicator: {
         isTyping: 'está escribiendo...',
         areTyping: 'están escribiendo...',
diff --git a/src/libs/actions/Report.js b/src/libs/actions/Report.js
index 4cf9102acfd7..c9253e6d5033 100644
--- a/src/libs/actions/Report.js
+++ b/src/libs/actions/Report.js
@@ -416,16 +416,6 @@ function fetchIOUReportByID(iouReportID, chatReportID, shouldRedirectIfEmpty = f
         });
 }
 
-/**
- * @param {Number} reportID
- * @param {Number} sequenceNumber
- */
-function setNewMarkerPosition(reportID, sequenceNumber) {
-    Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {
-        newMarkerSequenceNumber: sequenceNumber,
-    });
-}
-
 /**
  * Get the private pusher channel name for a Report.
  *
@@ -684,7 +674,7 @@ function createOptimisticReport(participantList) {
         lastActorEmail: '',
         lastMessageHtml: '',
         lastMessageText: null,
-        lastReadSequenceNumber: undefined,
+        lastReadSequenceNumber: 0,
         lastMessageTimestamp: 0,
         lastVisitedTimestamp: 0,
         maxSequenceNumber: 0,
@@ -1121,7 +1111,6 @@ function markCommentAsUnread(reportID, sequenceNumber) {
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
                 value: {
-                    newMarkerSequenceNumber: sequenceNumber,
                     lastReadSequenceNumber: newLastReadSequenceNumber,
                     lastVisitedTimestamp: Date.now(),
                     unreadActionCount: calculateUnreadActionCount(reportID, newLastReadSequenceNumber, maxSequenceNumber),
@@ -1523,12 +1512,6 @@ function viewNewReportAction(reportID, action) {
         return;
     }
 
-    // When a new message comes in, if the New marker is not already set (newMarkerSequenceNumber === 0), set the marker above the incoming message.
-    const report = lodashGet(allReports, 'reportID', {});
-    if (lodashGet(report, 'newMarkerSequenceNumber', 0) === 0 && report.unreadActionCount > 0) {
-        setNewMarkerPosition(reportID, report.lastReadSequenceNumber + 1);
-    }
-
     Log.info('[LOCAL_NOTIFICATION] Creating notification');
     LocalNotification.showCommentNotification({
         reportAction: action,
@@ -1589,7 +1572,6 @@ export {
     addAttachment,
     reconnect,
     updateNotificationPreference,
-    setNewMarkerPosition,
     subscribeToReportTypingEvents,
     subscribeToUserEvents,
     subscribeToReportCommentPushNotifications,
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index d2c114335e53..717963c3dd49 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -53,9 +53,6 @@ const propTypes = {
         /** The largest sequenceNumber on this report */
         maxSequenceNumber: PropTypes.number,
 
-        /** The current position of the new marker */
-        newMarkerSequenceNumber: PropTypes.number,
-
         /** Whether there is an outstanding amount in IOU */
         hasOutstandingIOU: PropTypes.bool,
 
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index fb9dfba7c362..7025d5a67a4f 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -11,25 +11,17 @@ import withLocalize, {withLocalizePropTypes} from '../../../../components/withLo
 import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
 const propTypes = {
-    /** Count of new messages to show in the badge */
-    count: PropTypes.number,
+    /** Whether the New Messages indicator is active */
+    isActive: PropTypes.bool,
 
-    /** Whether the marker is active */
-    active: PropTypes.bool,
-
-    /** Callback to be called when user closes the badge */
-    onClose: PropTypes.func,
-
-    /** Callback to be called when user clicks the marker */
+    /** Callback to be called when user clicks the New Messages indicator */
     onClick: PropTypes.func,
 
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
-    count: 0,
-    active: false,
-    onClose: () => {},
+    isActive: false,
     onClick: () => {},
 };
 
@@ -45,7 +37,7 @@ class FloatingMessageCounter extends PureComponent {
     }
 
     componentDidUpdate() {
-        if (this.props.active && this.props.count > 0) {
+        if (this.props.isActive) {
             this.show();
         } else {
             this.hide();
@@ -93,24 +85,10 @@ class FloatingMessageCounter extends PureComponent {
                                             styles.textWhite,
                                         ]}
                                     >
-                                        {this.props.translate(
-                                            'newMessageCount',
-                                            {count: this.props.count},
-                                        )}
+                                        {this.props.translate('newMessages')}
                                     </Text>
                                 </View>
                             )}
-                            shouldRemoveRightBorderRadius
-                        />
-                        <Button
-                            success
-                            small
-                            style={[styles.buttonDropdown]}
-                            onPress={this.props.onClose}
-                            shouldRemoveLeftBorderRadius
-                            ContentComponent={() => (
-                                <Icon small src={Expensicons.Close} fill={themeColors.textReversed} />
-                            )}
                         />
                     </View>
                 </View>
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index a78f672d3901..f5f434a5d2aa 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -19,6 +19,9 @@ import CONST from '../../../CONST';
 import * as StyleUtils from '../../../styles/StyleUtils';
 
 const propTypes = {
+    /** Position of the "New" line marker */
+    newMarkerSequenceNumber: PropTypes.number.isRequired,
+
     /** Personal details of all the users */
     personalDetails: PropTypes.objectOf(participantPropTypes),
 
@@ -30,9 +33,6 @@ const propTypes = {
         /** The largest sequenceNumber on this report */
         maxSequenceNumber: PropTypes.number,
 
-        /** The current position of the new marker */
-        newMarkerSequenceNumber: PropTypes.number,
-
         /** Whether there is an outstanding amount in IOU */
         hasOutstandingIOU: PropTypes.bool,
     }).isRequired,
@@ -134,8 +134,10 @@ class ReportActionsList extends React.Component {
         item,
         index,
     }) {
-        const shouldDisplayNewIndicator = this.props.report.newMarkerSequenceNumber > 0
-            && item.action.sequenceNumber === this.props.report.newMarkerSequenceNumber;
+        // 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
+            && item.action.sequenceNumber === this.props.newMarkerSequenceNumber;
         return (
             <ReportActionItem
                 reportID={this.props.report.reportID}
@@ -171,7 +173,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.report.newMarkerSequenceNumber : undefined;
+        const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.newMarkerSequenceNumber : undefined;
         const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(this.props.personalDetails, this.props.report);
         return (
             <Animated.View style={StyleUtils.getReportListAnimationStyle(this.state.fadeInAnimation)}>
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index db77666310aa..3c694b5e746d 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -44,9 +44,6 @@ const propTypes = {
         /** The largest sequenceNumber on this report */
         maxSequenceNumber: PropTypes.number,
 
-        /** The current position of the new marker */
-        newMarkerSequenceNumber: PropTypes.number,
-
         /** Whether there is an outstanding amount in IOU */
         hasOutstandingIOU: PropTypes.bool,
 
@@ -89,29 +86,33 @@ class ReportActionsView extends React.Component {
 
         this.state = {
             isFloatingMessageCounterVisible: false,
-            messageCounterCount: this.props.report.unreadActionCount,
+            newMarkerSequenceNumber: props.report.unreadActionCount > 0
+                ? props.report.lastReadSequenceNumber + 1
+                : 0,
         };
 
         this.currentScrollOffset = 0;
         this.sortedReportActions = ReportActionsUtils.getSortedReportActions(props.reportActions);
         this.mostRecentIOUReportSequenceNumber = ReportActionsUtils.getMostRecentIOUReportSequenceNumber(props.reportActions);
         this.trackScroll = this.trackScroll.bind(this);
-        this.showFloatingMessageCounter = this.showFloatingMessageCounter.bind(this);
-        this.hideFloatingMessageCounter = this.hideFloatingMessageCounter.bind(this);
         this.toggleFloatingMessageCounter = this.toggleFloatingMessageCounter.bind(this);
-        this.updateNewMarkerPosition = this.updateNewMarkerPosition.bind(this);
-        this.updateMessageCounterCount = this.updateMessageCounterCount.bind(this);
         this.loadMoreChats = this.loadMoreChats.bind(this);
         this.recordTimeToMeasureItemLayout = this.recordTimeToMeasureItemLayout.bind(this);
         this.scrollToBottomAndMarkReportAsRead = this.scrollToBottomAndMarkReportAsRead.bind(this);
     }
 
     componentDidMount() {
-        this.appStateChangeListener = AppState.addEventListener('change', () => {
+        this.appStateChangeListener = AppState.addEventListener('change', (state) => {
             if (!this.getIsReportFullyVisible()) {
                 return;
             }
 
+            // 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
+            if (state === 'active' && this.props.report.unreadActionCount === 0) {
+                this.setState({newMarkerSequenceNumber: 0});
+            }
+
             Report.openReport(this.props.report.reportID);
         });
 
@@ -123,7 +124,9 @@ class ReportActionsView extends React.Component {
             ReportScrollManager.scrollToBottom();
         });
 
-        Report.openReport(this.props.report.reportID);
+        if (this.getIsReportFullyVisible()) {
+            Report.openReport(this.props.report.reportID);
+        }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -133,16 +136,15 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
-        // If the new marker has changed places, update the component.
-        if (lodashGet(nextProps.report, 'newMarkerSequenceNumber') !== lodashGet(this.props.report, 'newMarkerSequenceNumber')) {
+        if (lodashGet(nextProps.network, 'isOffline') !== lodashGet(this.props.network, 'isOffline')) {
             return true;
         }
 
-        if (lodashGet(nextProps.network, 'isOffline') !== lodashGet(this.props.network, 'isOffline')) {
+        if (nextProps.report.isLoadingMoreReportActions !== this.props.report.isLoadingMoreReportActions) {
             return true;
         }
 
-        if (nextProps.report.isLoadingMoreReportActions !== this.props.report.isLoadingMoreReportActions) {
+        if (nextProps.report.lastReadSequenceNumber !== this.props.report.lastReadSequenceNumber) {
             return true;
         }
 
@@ -150,7 +152,7 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
-        if (nextState.messageCounterCount !== this.state.messageCounterCount) {
+        if (nextState.newMarkerSequenceNumber !== this.state.newMarkerSequenceNumber) {
             return true;
         }
 
@@ -174,53 +176,76 @@ class ReportActionsView extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (lodashGet(prevProps.network, 'isOffline') && !lodashGet(this.props.network, 'isOffline')) {
-            if (this.getIsReportFullyVisible()) {
+        const isReportFullyVisible = this.getIsReportFullyVisible();
+
+        // When returning from offline to online state we want to trigger a request to OpenReport which
+        // will fetch the reportActions data and mark the report as read. If the report is not fully visible
+        // then we call ReconnectToReport which only loads the reportActions data without marking the report as read.
+        const wasNetworkChangeDetected = lodashGet(prevProps.network, 'isOffline') && !lodashGet(this.props.network, 'isOffline');
+        if (wasNetworkChangeDetected) {
+            if (isReportFullyVisible) {
                 Report.openReport(this.props.report.reportID);
             } else {
                 Report.reconnect(this.props.report.reportID);
             }
         }
 
-        // The last sequenceNumber of the same report has changed.
         const previousLastSequenceNumber = lodashGet(CollectionUtils.lastItem(prevProps.reportActions), 'sequenceNumber');
         const currentLastSequenceNumber = lodashGet(CollectionUtils.lastItem(this.props.reportActions), 'sequenceNumber');
-
-        // Record the max action when window is visible and the sidebar is not covering the report view on a small screen
-        const isReportFullyVisible = this.getIsReportFullyVisible();
-        const sidebarClosed = prevProps.isDrawerOpen && !this.props.isDrawerOpen;
-        const screenSizeIncreased = prevProps.isSmallScreenWidth && !this.props.isSmallScreenWidth;
-        const reportBecomeVisible = sidebarClosed || screenSizeIncreased;
-
-        if (previousLastSequenceNumber !== currentLastSequenceNumber) {
+        const didNewReportActionAppear = previousLastSequenceNumber !== currentLastSequenceNumber;
+        if (didNewReportActionAppear) {
             const lastAction = CollectionUtils.lastItem(this.props.reportActions);
             const isLastActionFromCurrentUser = lodashGet(lastAction, 'actorEmail', '') === lodashGet(this.props.session, 'email', '');
+
+            // 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 (isLastActionFromCurrentUser) {
-                // 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.
                 ReportScrollManager.scrollToBottom();
-            } else {
-                // Only update the unread count when the floating message counter is visible
-                // Otherwise counter will be shown on scrolling up from the bottom even if user have read those messages
-                if (this.state.isFloatingMessageCounterVisible) {
-                    this.updateMessageCounterCount(!isReportFullyVisible);
-                }
 
-                // Show new floating message counter when there is a new message
-                this.toggleFloatingMessageCounter();
-            }
-
-            // When the last action changes, record the max action
-            // This will make the NEW marker line go away if you receive comments in the same chat you're looking at
-            if (isReportFullyVisible) {
-                Report.readNewestAction(this.props.report.reportID);
+                // 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});
+            } else if (isReportFullyVisible) {
+                // 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);
+                    this.setState({newMarkerSequenceNumber: 0});
+                } else if (this.state.newMarkerSequenceNumber === 0) {
+                    this.setState({newMarkerSequenceNumber: currentLastSequenceNumber});
+                }
             }
         }
 
-        // Update the new marker position and last read action when we are closing the sidebar or moving from a small to large screen size
-        if (isReportFullyVisible && reportBecomeVisible) {
-            this.updateNewMarkerPosition(this.props.report.unreadActionCount);
+        // If the report was previously hidden by the side bar, or the view is expanded from mobile to desktop layout
+        // we update the new marker position, mark the report as read, and fetch new report actions
+        const didSidebarClose = prevProps.isDrawerOpen && !this.props.isDrawerOpen;
+        const didScreenSizeIncrease = prevProps.isSmallScreenWidth && !this.props.isSmallScreenWidth;
+        const didReportBecomeVisible = isReportFullyVisible && (didSidebarClose || didScreenSizeIncrease);
+        if (didReportBecomeVisible) {
+            this.setState({
+                newMarkerSequenceNumber: this.props.report.unreadActionCount === 0
+                    ? 0
+                    : this.props.report.lastReadSequenceNumber + 1,
+            });
             Report.openReport(this.props.report.reportID);
         }
+
+        // When the user navigates to the LHN the ReportActionsView doesn't unmount and just remains hidden.
+        // The next time we navigate to the same report (e.g. by swiping or tapping the LHN row) we want the new marker to clear.
+        const didSidebarOpen = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
+        const didUserNavigateToSidebarAfterReadingReport = didSidebarOpen && this.props.report.unreadActionCount === 0;
+        if (didUserNavigateToSidebarAfterReadingReport) {
+            this.setState({newMarkerSequenceNumber: 0});
+        }
+
+        // Checks to see if a report comment has been manually "marked as unread". All other times when the lastReadSequenceNumber
+        // changes it will be because we marked the entire report as read and there should be an unreadActionCount of 0.
+        const didManuallyMarkReportAsUnread = (prevProps.report.lastReadSequenceNumber !== this.props.report.lastReadSequenceNumber)
+            && this.props.report.unreadActionCount > 0;
+        if (didManuallyMarkReportAsUnread) {
+            this.setState({newMarkerSequenceNumber: this.props.report.lastReadSequenceNumber + 1});
+        }
     }
 
     componentWillUnmount() {
@@ -271,67 +296,21 @@ class ReportActionsView extends React.Component {
     scrollToBottomAndMarkReportAsRead() {
         ReportScrollManager.scrollToBottom();
         Report.readNewestAction(this.props.report.reportID);
-        Report.setNewMarkerPosition(this.props.report.reportID, 0);
-    }
-
-    /**
-     * Updates NEW marker position
-     * @param {Number} unreadActionCount
-     */
-    updateNewMarkerPosition(unreadActionCount) {
-        // Since we want the New marker to remain in place even if newer messages come in, we set it once on mount.
-        // We determine the last read action by deducting the number of unread actions from the total number.
-        // Then, we add 1 because we want the New marker displayed over the oldest unread sequence.
-        const oldestUnreadSequenceNumber = unreadActionCount === 0 ? 0 : this.props.report.lastReadSequenceNumber + 1;
-        Report.setNewMarkerPosition(this.props.report.reportID, oldestUnreadSequenceNumber);
     }
 
     /**
      * Show/hide the new floating message counter when user is scrolling back/forth in the history of messages.
      */
     toggleFloatingMessageCounter() {
-        // Update the message counter count before counter is about to show
         if (this.currentScrollOffset < -200 && !this.state.isFloatingMessageCounterVisible) {
-            this.updateMessageCounterCount();
-            this.showFloatingMessageCounter();
+            this.setState({isFloatingMessageCounterVisible: true});
         }
 
         if (this.currentScrollOffset > -200 && this.state.isFloatingMessageCounterVisible) {
-            this.hideFloatingMessageCounter();
+            this.setState({isFloatingMessageCounterVisible: false});
         }
     }
 
-    /**
-     * Update the message counter count to show in the floating message counter
-     * @param {Boolean} [shouldResetLocalCount=false] Whether count should increment or reset
-     */
-    updateMessageCounterCount(shouldResetLocalCount = false) {
-        this.setState((prevState) => {
-            const messageCounterCount = shouldResetLocalCount
-                ? this.props.report.unreadActionCount
-                : prevState.messageCounterCount + this.props.report.unreadActionCount;
-            this.updateNewMarkerPosition(messageCounterCount);
-            return {messageCounterCount};
-        });
-    }
-
-    /**
-     * Show the new floating message counter
-     */
-    showFloatingMessageCounter() {
-        this.setState({isFloatingMessageCounterVisible: true});
-    }
-
-    /**
-     * Hide the new floating message counter
-     */
-    hideFloatingMessageCounter() {
-        this.setState({
-            isFloatingMessageCounterVisible: false,
-            messageCounterCount: 0,
-        });
-    }
-
     /**
      * keeps track of the Scroll offset of the main messages list
      *
@@ -373,10 +352,8 @@ class ReportActionsView extends React.Component {
                 {!this.props.isComposerFullSize && (
                     <>
                         <FloatingMessageCounter
-                            active={this.state.isFloatingMessageCounterVisible}
-                            count={this.state.messageCounterCount}
+                            isActive={this.state.isFloatingMessageCounterVisible && this.state.newMarkerSequenceNumber > 0}
                             onClick={this.scrollToBottomAndMarkReportAsRead}
-                            onClose={this.hideFloatingMessageCounter}
                         />
                         <ReportActionsList
                             report={this.props.report}
@@ -386,6 +363,7 @@ class ReportActionsView extends React.Component {
                             mostRecentIOUReportSequenceNumber={this.mostRecentIOUReportSequenceNumber}
                             isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
                             loadMoreChats={this.loadMoreChats}
+                            newMarkerSequenceNumber={this.state.newMarkerSequenceNumber}
                         />
                         <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
                     </>
diff --git a/tests/actions/ReportTest.js b/tests/actions/ReportTest.js
index 1856ce529c6e..af2d0294bcdf 100644
--- a/tests/actions/ReportTest.js
+++ b/tests/actions/ReportTest.js
@@ -242,7 +242,6 @@ describe('actions/Report', () => {
                             lastMessageTimestamp: 0,
                             lastMessageText: 'Comment 1',
                             lastActorEmail: USER_2_LOGIN,
-                            newMarkerSequenceNumber: 0,
                             lastReadSequenceNumber: 0,
                         },
                     },
@@ -284,9 +283,8 @@ describe('actions/Report', () => {
                 return waitForPromisesToResolve();
             })
             .then(() => {
-                // The unreadActionCount will increase and the new marker will be set correctly
+                // The unreadActionCount will increase
                 expect(report.unreadActionCount).toBe(1);
-                expect(report.newMarkerSequenceNumber).toBe(1);
 
                 // When a new comment is added by the current user
                 Report.addComment(REPORT_ID, 'Current User Comment 1');
@@ -391,7 +389,6 @@ describe('actions/Report', () => {
                 // Then we should expect the unreadActionCount to be updated
                 expect(report.unreadActionCount).toBe(2);
                 expect(report.lastReadSequenceNumber).toBe(2);
-                expect(report.newMarkerSequenceNumber).toBe(3);
 
                 // If the user deletes the last comment after the last read the unreadActionCount will decrease and the lastMessageText will reflect the new last comment
                 Report.deleteReportComment(REPORT_ID, reportActions[4]);