diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index c3010a3d9..c33845f76 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -739,10 +739,10 @@ class MessageInner extends React.PureComponent<MessageRegularProps, State> {
 
     return (
       <ReadableMessage
-      id={id}
-      className={classNames(divClasses)}
-      onChange={onVisible}
-      onContextMenu={this.handleContextMenu}
+        id={id}
+        className={classNames(divClasses)}
+        onChange={onVisible}
+        onContextMenu={this.handleContextMenu}
       >
         {this.renderAvatar()}
         <div
diff --git a/ts/components/conversation/ReadableMessage.tsx b/ts/components/conversation/ReadableMessage.tsx
index d5288e221..d6cc6be4b 100644
--- a/ts/components/conversation/ReadableMessage.tsx
+++ b/ts/components/conversation/ReadableMessage.tsx
@@ -1,28 +1,22 @@
 import React from 'react';
-import { useFocus } from "../../hooks/useFocus"
+import { useFocus } from '../../hooks/useFocus';
 import { InView } from 'react-intersection-observer';
 
 type ReadableMessageProps = {
-    children: React.ReactNode;
-    id: string;
-    className: string;
-    onChange: (inView: boolean) => void;
-    onContextMenu: (e: any) => void
-}
+  children: React.ReactNode;
+  id: string;
+  className: string;
+  onChange: (inView: boolean) => void;
+  onContextMenu: (e: any) => void;
+};
 
 export const ReadableMessage = (props: ReadableMessageProps) => {
+  const { onChange } = props;
+  useFocus(onChange);
 
-    const { onChange } = props;
-    useFocus(onChange);
-
-    return (
-        <InView
-        {...props}
-        as="div"
-        threshold={1}
-        delay={200}
-        triggerOnce={true}
-        >
-        {props.children}
-        </InView>);
-}
+  return (
+    <InView {...props} as="div" threshold={1} delay={200} triggerOnce={true}>
+      {props.children}
+    </InView>
+  );
+};
diff --git a/ts/hooks/useFocus.ts b/ts/hooks/useFocus.ts
index e3d3d510c..8f62de92e 100644
--- a/ts/hooks/useFocus.ts
+++ b/ts/hooks/useFocus.ts
@@ -1,11 +1,10 @@
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
 export const useFocus = (action: (param: any) => void) => {
-  
   useEffect(() => {
-    window.addEventListener("focus", action);
+    window.addEventListener('focus', action);
     return () => {
-      window.removeEventListener("focus", action);
+      window.removeEventListener('focus', action);
     };
   });
-}
\ No newline at end of file
+};
diff --git a/ts/models/message.ts b/ts/models/message.ts
index 339058372..380c2ec50 100644
--- a/ts/models/message.ts
+++ b/ts/models/message.ts
@@ -1047,6 +1047,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
   public async markRead(readAt: number) {
     this.markReadNoCommit(readAt);
 
+    this.getConversation()?.markRead(readAt);
+
     await this.commit();
   }