diff --git a/package/src/components/MessageList/MessageList.tsx b/package/src/components/MessageList/MessageList.tsx
index 51454a9b18..21dcd5ac72 100644
--- a/package/src/components/MessageList/MessageList.tsx
+++ b/package/src/components/MessageList/MessageList.tsx
@@ -983,7 +983,9 @@ const MessageListWithContext = <
         });
       }
       // the message we want to scroll to has not been loaded in the state yet
-      loadChannelAroundMessage({ messageId: messageIdToScroll });
+      if (indexOfParentInMessageList === -1) {
+        loadChannelAroundMessage({ messageId: messageIdToScroll });
+      }
     }, 50);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage, initialScrollToFirstUnreadMessage]);
diff --git a/package/src/components/MessageList/__tests__/MessageList.test.js b/package/src/components/MessageList/__tests__/MessageList.test.js
index 8efc295753..f9b98a25a2 100644
--- a/package/src/components/MessageList/__tests__/MessageList.test.js
+++ b/package/src/components/MessageList/__tests__/MessageList.test.js
@@ -372,8 +372,9 @@ describe('MessageList', () => {
       mockedLongMessagesList.push(generateMessage({ timestamp: new Date(), user: user1 }));
     }
     // could be any message that is not within the initially processed ones
-    const { id: targetedMessageId, text: targetedMessageText } = mockedLongMessagesList[3];
-    const latestMessageText = mockedLongMessagesList[mockedLongMessagesList.length - 1].text;
+    const latestMessageText = mockedLongMessagesList[0].text;
+    const { id: targetedMessageId, text: targetedMessageText } =
+      mockedLongMessagesList[mockedLongMessagesList.length - 4];
 
     const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
diff --git a/package/src/components/MessageOverlay/MessageOverlay.tsx b/package/src/components/MessageOverlay/MessageOverlay.tsx
index a788aff4ba..00aa850776 100644
--- a/package/src/components/MessageOverlay/MessageOverlay.tsx
+++ b/package/src/components/MessageOverlay/MessageOverlay.tsx
@@ -168,12 +168,14 @@ const MessageOverlayWithContext = <
   );
 
   const {
-    colors: { blue_alice, grey_gainsboro, grey_whisper, transparent, white_smoke },
+    colors: { blue_alice, grey_gainsboro, grey_whisper, transparent },
     messageSimple: {
       content: {
         container: { borderRadiusL, borderRadiusS },
         containerInner,
+        receiverMessageBackgroundColor,
         replyContainer,
+        senderMessageBackgroundColor,
       },
     },
     overlay: { container: containerStyle, padding: overlayPadding },
@@ -360,8 +362,8 @@ const MessageOverlayWithContext = <
                             : grey_gainsboro
                           : blue_alice
                         : alignment === 'left'
-                        ? white_smoke
-                        : grey_gainsboro,
+                        ? receiverMessageBackgroundColor
+                        : senderMessageBackgroundColor,
                     borderBottomLeftRadius:
                       (groupStyle === 'left_bottom' || groupStyle === 'left_single') &&
                       (!hasThreadReplies || threadList)
diff --git a/package/src/contexts/themeContext/utils/theme.ts b/package/src/contexts/themeContext/utils/theme.ts
index b6f76a99a3..c0bf575a77 100644
--- a/package/src/contexts/themeContext/utils/theme.ts
+++ b/package/src/contexts/themeContext/utils/theme.ts
@@ -1096,8 +1096,10 @@ export const defaultTheme: Theme = {
       metaText: {
         fontSize: 12,
       },
+      receiverMessageBackgroundColor: Colors.white,
       replyBorder: {},
       replyContainer: {},
+      senderMessageBackgroundColor: Colors.grey_gainsboro,
       textContainer: {
         onlyEmojiMarkdown: { text: { fontSize: 50 } },
       },