diff --git a/src/smart-components/Channel/components/ChannelHeader/index.tsx b/src/smart-components/Channel/components/ChannelHeader/index.tsx
index ba5dc4fcb..ed0512fc6 100644
--- a/src/smart-components/Channel/components/ChannelHeader/index.tsx
+++ b/src/smart-components/Channel/components/ChannelHeader/index.tsx
@@ -13,7 +13,13 @@ import { useChannelContext } from '../../context/ChannelProvider';
 import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import { noop } from '../../../../utils/utils'
 
-const ChannelHeader: React.FC = () => {
+interface ChannelHeaderProps {
+  className?: string;
+}
+
+const ChannelHeader: React.FC<ChannelHeaderProps> = ({
+  className = '',
+}) => {
   const globalStore = useSendbirdStateContext();
   const userId = globalStore?.config?.userId;
   const theme = globalStore?.config?.theme;
@@ -33,7 +39,7 @@ const ChannelHeader: React.FC = () => {
 
   const { stringSet } = useContext(LocalizationContext);
   return (
-    <div className="sendbird-chat-header">
+    <div className={`sendbird-chat-header ${className}`}>
       <div className="sendbird-chat-header__left">
         {
           isMobile && (
diff --git a/src/smart-components/Channel/components/ChannelUI/index.tsx b/src/smart-components/Channel/components/ChannelUI/index.tsx
index 5b58b7645..ce2a5a30f 100644
--- a/src/smart-components/Channel/components/ChannelUI/index.tsx
+++ b/src/smart-components/Channel/components/ChannelUI/index.tsx
@@ -1,6 +1,6 @@
 import './channel-ui.scss';
 
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 
 import { useChannelContext } from '../../context/ChannelProvider';
@@ -9,11 +9,8 @@ import ConnectionStatus from '../../../../ui/ConnectionStatus';
 import ChannelHeader from '../ChannelHeader';
 import MessageList from '../MessageList';
 import TypingIndicator from '../TypingIndicator';
-import FrozenNotification from '../FrozenNotification';
-import UnreadCount from '../UnreadCount';
 import MessageInputWrapper from '../MessageInput';
 import { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
-import * as messageActionTypes from '../../context/dux/actionTypes';
 
 export interface ChannelUIProps {
   isLoading?: boolean;
@@ -23,9 +20,9 @@ export interface ChannelUIProps {
   renderChannelHeader?: () => React.ReactElement;
   renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderMessageInput?: () => React.ReactElement;
-  renderFileUploadIcon?: () =>  React.ReactElement;
-  renderVoiceMessageIcon?: () =>  React.ReactElement;
-  renderSendMessageIcon?: () =>  React.ReactElement;
+  renderFileUploadIcon?: () => React.ReactElement;
+  renderVoiceMessageIcon?: () => React.ReactElement;
+  renderSendMessageIcon?: () => React.ReactElement;
   renderTypingIndicator?: () => React.ReactElement;
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
 }
@@ -45,28 +42,9 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   renderSendMessageIcon,
 }: ChannelUIProps) => {
   const {
-    currentGroupChannel,
     channelUrl,
     isInvalid,
-    unreadSince,
-    loading,
-    setInitialTimeStamp,
-    setAnimatedMessageId,
-    setHighLightedMessageId,
-    scrollRef,
-    messagesDispatcher,
-    disableMarkAsRead,
   } = useChannelContext();
-  const [unreadCount, setUnreadCount] = useState(0);
-  useEffect(() => {
-    // simple debounce to avoid flicker of UnreadCount badge
-    const handler = setTimeout(() => {
-      setUnreadCount(currentGroupChannel?.unreadMessageCount);
-    }, 1000);
-    return () => {
-      clearTimeout(handler);
-    }
-  }, [currentGroupChannel?.unreadMessageCount]);
 
   const globalStore = useSendbirdStateContext();
   const sdkError = globalStore?.stores?.sdkStore?.error;
@@ -122,62 +100,16 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
   }
   return (
     <div className='sendbird-conversation'>
-      {
-        renderChannelHeader?.() || (
-          <ChannelHeader />
-        )
-      }
-      {
-        currentGroupChannel?.isFrozen && (
-          <FrozenNotification />
-        )
-      }
-      {
-        unreadCount > 0 && (
-          <UnreadCount
-            count={unreadCount}
-            time={unreadSince}
-            onClick={() => {
-              setUnreadCount(0);
-              if (scrollRef?.current?.scrollTop) {
-                scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;
-              }
-              if (!disableMarkAsRead) {
-                try {
-                  currentGroupChannel?.markAsRead();
-                } catch {
-                  //
-                }
-                messagesDispatcher({
-                  type: messageActionTypes.MARK_AS_READ,
-                  payload: { channel: currentGroupChannel },
-                });
-              }
-              setInitialTimeStamp(null);
-              setAnimatedMessageId(null);
-              setHighLightedMessageId(null);
-            }}
-          />
-        )
-      }
-      {
-        loading
-          ? (
-            <div className="sendbird-conversation">
-              {
-                renderPlaceholderLoader?.() || (
-                  <PlaceHolder type={PlaceHolderTypes.LOADING} />
-                )
-              }
-            </div>
-          ) : (
-            <MessageList
-              renderMessage={renderMessage}
-              renderPlaceholderEmpty={renderPlaceholderEmpty}
-              renderCustomSeparator={renderCustomSeparator}
-            />
-          )
-      }
+      {renderChannelHeader?.() || (
+        <ChannelHeader className="sendbird-conversation__channel-header" />
+      )}
+      <MessageList
+        className="sendbird-conversation__message-list"
+        renderMessage={renderMessage}
+        renderPlaceholderEmpty={renderPlaceholderEmpty}
+        renderCustomSeparator={renderCustomSeparator}
+        renderPlaceholderLoader={renderPlaceholderLoader}
+      />
       <div className="sendbird-conversation__footer">
         {
           renderMessageInput?.() || (
diff --git a/src/smart-components/Channel/components/FrozenNotification/index.tsx b/src/smart-components/Channel/components/FrozenNotification/index.tsx
index 3467bc5ae..e4ea28c7f 100644
--- a/src/smart-components/Channel/components/FrozenNotification/index.tsx
+++ b/src/smart-components/Channel/components/FrozenNotification/index.tsx
@@ -5,10 +5,16 @@ import './frozen-notification.scss';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Label, { LabelTypography } from '../../../../ui/Label';
 
-const FrozenNotification = (): JSX.Element => {
+interface FrozenNotificationProps {
+  className?: string;
+}
+
+const FrozenNotification = ({
+  className = '',
+}: FrozenNotificationProps): React.ReactElement => {
   const { stringSet } = useContext(LocalizationContext);
   return (
-    <div className="sendbird-notification sendbird-notification--frozen">
+    <div className={`sendbird-notification sendbird-notification--frozen ${className}`}>
       <Label
         className="sendbird-notification__text"
         type={LabelTypography.CAPTION_2}
diff --git a/src/smart-components/Channel/components/Message/index.tsx b/src/smart-components/Channel/components/Message/index.tsx
index 06ecdb9e4..a57ebf2d6 100644
--- a/src/smart-components/Channel/components/Message/index.tsx
+++ b/src/smart-components/Channel/components/Message/index.tsx
@@ -8,6 +8,7 @@ import React, {
 import type { FileMessage } from '@sendbird/chat/message';
 import format from 'date-fns/format';
 
+import useDidMountEffect from '../../../../utils/useDidMountEffect';
 import SuggestedMentionList from '../SuggestedMentionList';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelContext } from '../../context/ChannelProvider';
@@ -39,19 +40,17 @@ type MessageUIProps = {
 };
 
 // todo: Refactor this component, is too complex now
-const Message = (props: MessageUIProps): React.FC<MessageUIProps> | React.ReactElement => {
-  const {
-    message,
-    hasSeparator,
-    chainTop,
-    chainBottom,
-    handleScroll,
-    renderCustomSeparator,
-    renderEditInput,
-    renderMessage,
-    renderMessageContent,
-  } = props;
-
+const Message = ({
+  message,
+  hasSeparator,
+  chainTop,
+  chainBottom,
+  handleScroll,
+  renderCustomSeparator,
+  renderEditInput,
+  renderMessage,
+  renderMessageContent,
+}: MessageUIProps): React.ReactElement => {
   const { dateLocale } = useLocalization();
   const globalStore = useSendbirdStateContext();
   const {
@@ -130,8 +129,10 @@ const Message = (props: MessageUIProps): React.FC<MessageUIProps> | React.ReactE
     }));
   }, [mentionedUserIds]);
 
-  useLayoutEffect(() => {
-    handleScroll?.();
+  useDidMountEffect(() => {
+    if (currentGroupChannel?.lastMessage?.messageId === message?.messageId) {
+      handleScroll?.();
+    }
   }, [showEdit, message?.reactions?.length]);
 
   useLayoutEffect(() => {
diff --git a/src/smart-components/Channel/components/MessageList/__test__/getMessagePartsInfo.spec.js b/src/smart-components/Channel/components/MessageList/__test__/getMessagePartsInfo.spec.js
new file mode 100644
index 000000000..f256eb229
--- /dev/null
+++ b/src/smart-components/Channel/components/MessageList/__test__/getMessagePartsInfo.spec.js
@@ -0,0 +1,173 @@
+import { getMessagePartsInfo } from "../getMessagePartsInfo";
+
+const mockChannel = {
+  isGroupChannel: () => true,
+  getUnreadMemberCount: () => 0,
+  getUndeliveredMemberCount: () => 0,
+};
+
+const currentTime = Date.now();
+const timeList = [1, 2, 3].map((gap) => {
+  const time = new Date(currentTime);
+  time.setMinutes(time.getMinutes() + gap);
+  return time.valueOf();
+});
+const users = [{ userId: 1 }, { userId: 2 }];
+
+// same sender & same sent at
+const messageGroup1 = [1, 2, 3].map((n) => ({
+  messageId: n,
+  sendingStatus: 'succeeded',
+  createdAt: timeList[0],
+  messageType: 'user',
+  sender: users[0],
+}));
+// same sender & different sent at
+const messageGroup2 = [1, 2, 3].map((n, i) => ({
+  messageId: n,
+  sendingStatus: 'succeeded',
+  createdAt: timeList[i],
+  messageType: 'user',
+  sender: users[0],
+}));
+// different sender && same sent at
+const messageGroup3 = [1, 2, 3].map((n, i) => ({
+  messageId: n,
+  sendingStatus: 'succeeded',
+  createdAt: timeList[0],
+  messageType: 'user',
+  sender: users[i],
+}));
+
+describe('getMessagePartsInfo', () => {
+  it('should group messages that are sent at same time', () => {
+    const defaultSetting = {
+      allMessages: messageGroup1,
+      isMessageGroupingEnabled: true,
+      currentChannel: mockChannel,
+      replyType: 'THREAD',
+    };
+    const firstGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 0,
+      currentMessage: defaultSetting.allMessages[0],
+    });
+    expect(firstGroupingInfo.chainTop).toBe(false);
+    expect(firstGroupingInfo.chainBottom).toBe(true);
+    expect(firstGroupingInfo.hasSeparator).toBe(true);
+    const secondGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 1,
+      currentMessage: defaultSetting.allMessages[1],
+    });
+    expect(secondGroupingInfo.chainTop).toBe(true);
+    expect(secondGroupingInfo.chainBottom).toBe(true);
+    expect(secondGroupingInfo.hasSeparator).toBe(false);
+    const thirdGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 2,
+      currentMessage: defaultSetting.allMessages[2],
+    });
+    expect(thirdGroupingInfo.chainTop).toBe(true);
+    expect(thirdGroupingInfo.chainBottom).toBe(false);
+    expect(thirdGroupingInfo.hasSeparator).toBe(false);
+  });
+
+  it('should not group messages if isMessageGroupingEnabled is false', () => {
+    const defaultSetting = {
+      allMessages: messageGroup1,
+      isMessageGroupingEnabled: false,
+      currentChannel: mockChannel,
+      replyType: 'THREAD',
+    };
+    const firstGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 0,
+      currentMessage: defaultSetting.allMessages[0],
+    });
+    expect(firstGroupingInfo.chainTop).toBe(false);
+    expect(firstGroupingInfo.chainBottom).toBe(false);
+    expect(firstGroupingInfo.hasSeparator).toBe(true);
+    const secondGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 1,
+      currentMessage: defaultSetting.allMessages[1],
+    });
+    expect(secondGroupingInfo.chainTop).toBe(false);
+    expect(secondGroupingInfo.chainBottom).toBe(false);
+    expect(secondGroupingInfo.hasSeparator).toBe(false);
+    const thirdGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 2,
+      currentMessage: defaultSetting.allMessages[2],
+    });
+    expect(thirdGroupingInfo.chainTop).toBe(false);
+    expect(thirdGroupingInfo.chainBottom).toBe(false);
+    expect(thirdGroupingInfo.hasSeparator).toBe(false);
+  });
+
+  it('should not group messages if sent time are different', () => {
+    const defaultSetting = {
+      allMessages: messageGroup2,
+      isMessageGroupingEnabled: true,
+      currentChannel: mockChannel,
+      replyType: 'THREAD',
+    };
+    const firstGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 0,
+      currentMessage: defaultSetting.allMessages[0],
+    });
+    expect(firstGroupingInfo.chainTop).toBe(false);
+    expect(firstGroupingInfo.chainBottom).toBe(false);
+    expect(firstGroupingInfo.hasSeparator).toBe(true);
+    const secondGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 1,
+      currentMessage: defaultSetting.allMessages[1],
+    });
+    expect(secondGroupingInfo.chainTop).toBe(false);
+    expect(secondGroupingInfo.chainBottom).toBe(false);
+    expect(secondGroupingInfo.hasSeparator).toBe(false);
+    const thirdGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 2,
+      currentMessage: defaultSetting.allMessages[2],
+    });
+    expect(thirdGroupingInfo.chainTop).toBe(false);
+    expect(thirdGroupingInfo.chainBottom).toBe(false);
+    expect(thirdGroupingInfo.hasSeparator).toBe(false);
+  });
+  it('should not group messages if sender is different', () => {
+    const defaultSetting = {
+      allMessages: messageGroup3,
+      isMessageGroupingEnabled: true,
+      currentChannel: mockChannel,
+      replyType: 'THREAD',
+    };
+    const firstGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 0,
+      currentMessage: defaultSetting.allMessages[0],
+    });
+    expect(firstGroupingInfo.chainTop).toBe(false);
+    expect(firstGroupingInfo.chainBottom).toBe(false);
+    expect(firstGroupingInfo.hasSeparator).toBe(true);
+    const secondGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 1,
+      currentMessage: defaultSetting.allMessages[1],
+    });
+    expect(secondGroupingInfo.chainTop).toBe(false);
+    expect(secondGroupingInfo.chainBottom).toBe(false);
+    expect(secondGroupingInfo.hasSeparator).toBe(false);
+    const thirdGroupingInfo = getMessagePartsInfo({
+      ...defaultSetting,
+      currentIndex: 2,
+      currentMessage: defaultSetting.allMessages[2],
+    });
+    expect(thirdGroupingInfo.chainTop).toBe(false);
+    expect(thirdGroupingInfo.chainBottom).toBe(false);
+    expect(thirdGroupingInfo.hasSeparator).toBe(false);
+  });
+});
diff --git a/src/smart-components/Channel/components/MessageList/getMessagePartsInfo.ts b/src/smart-components/Channel/components/MessageList/getMessagePartsInfo.ts
new file mode 100644
index 000000000..6239cf953
--- /dev/null
+++ b/src/smart-components/Channel/components/MessageList/getMessagePartsInfo.ts
@@ -0,0 +1,46 @@
+import { GroupChannel } from '@sendbird/chat/groupChannel';
+import { AdminMessage, FileMessage, UserMessage } from '@sendbird/chat/message';
+import isSameDay from 'date-fns/isSameDay';
+
+import { compareMessagesForGrouping } from '../../context/utils';
+
+export interface GetMessagePartsInfoProps {
+  allMessages: Array<UserMessage | FileMessage | AdminMessage>;
+  isMessageGroupingEnabled: boolean;
+  currentIndex: number;
+  currentMessage: UserMessage | FileMessage | AdminMessage;
+  currentChannel: GroupChannel;
+  replyType: string;
+}
+
+interface OutPuts {
+  chainTop: boolean,
+  chainBottom: boolean,
+  hasSeparator: boolean,
+}
+
+export const getMessagePartsInfo = ({
+  allMessages = [],
+  isMessageGroupingEnabled = true,
+  currentIndex = 0,
+  currentMessage = null,
+  currentChannel = null,
+  replyType = '',
+}: GetMessagePartsInfoProps): OutPuts => {
+  const previousMessage = allMessages[currentIndex - 1];
+  const nextMessage = allMessages[currentIndex + 1];
+  const [chainTop, chainBottom] = isMessageGroupingEnabled
+    ? compareMessagesForGrouping(previousMessage, currentMessage, nextMessage, currentChannel, replyType)
+    : [false, false];
+  const previousMessageCreatedAt = previousMessage?.createdAt;
+  const currentCreatedAt = currentMessage.createdAt;
+  // https://stackoverflow.com/a/41855608
+  const hasSeparator = !(previousMessageCreatedAt && (
+    isSameDay(currentCreatedAt, previousMessageCreatedAt)
+  ));
+  return {
+    chainTop,
+    chainBottom,
+    hasSeparator,
+  }
+};
diff --git a/src/smart-components/Channel/components/MessageList/index.tsx b/src/smart-components/Channel/components/MessageList/index.tsx
index 6073b5ffa..6937f9666 100644
--- a/src/smart-components/Channel/components/MessageList/index.tsx
+++ b/src/smart-components/Channel/components/MessageList/index.tsx
@@ -1,30 +1,35 @@
 import './message-list.scss';
 
-import React, { useState, useMemo } from 'react';
-import isSameDay from 'date-fns/isSameDay';
+import React, { useState } from 'react';
 
 import { useChannelContext } from '../../context/ChannelProvider';
 import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
-import { compareMessagesForGrouping } from '../../context/utils';
 import Message from '../Message';
 import { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
 import { isAboutSame } from '../../context/utils';
+import { getMessagePartsInfo } from './getMessagePartsInfo';
+import UnreadCount from '../UnreadCount';
+import FrozenNotification from '../FrozenNotification';
+import { MESSAGE_SCROLL_BUFFER } from '../../context/const';
 
-export type MessageListProps = {
+export interface MessageListProps {
+  className?: string;
   renderMessage?: (props: RenderMessageProps) => React.ReactElement;
   renderPlaceholderEmpty?: () => React.ReactElement;
   renderCustomSeparator?: (props: RenderCustomSeparatorProps) => React.ReactElement;
-};
+  renderPlaceholderLoader?: () => React.ReactElement;
+}
 
 const SCROLL_REF_CLASS_NAME = '.sendbird-msg--scroll-ref';
 
-const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
-  const {
-    renderMessage,
-    renderPlaceholderEmpty,
-    renderCustomSeparator,
-  } = props;
+const MessageList: React.FC<MessageListProps> = ({
+  className = '',
+  renderMessage,
+  renderPlaceholderEmpty,
+  renderCustomSeparator,
+  renderPlaceholderLoader,
+}) => {
   const {
     allMessages,
     hasMorePrev,
@@ -40,6 +45,8 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
     currentGroupChannel,
     disableMarkAsRead,
     replyType,
+    loading,
+    unreadSince,
   } = useChannelContext();
   const [scrollBottom, setScrollBottom] = useState(0);
 
@@ -70,7 +77,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
       });
     }
 
-    if (isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+    if (isAboutSame(clientHeight + scrollTop, scrollHeight, MESSAGE_SCROLL_BUFFER)) {
       onScrollDownCallback(([messages]) => {
         if (messages) {
           try {
@@ -89,7 +96,7 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
       setScrollBottom(current.scrollHeight - current.scrollTop - current.offsetHeight)
     }
 
-    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, 10)) {
+    if (!disableMarkAsRead && isAboutSame(clientHeight + scrollTop, scrollHeight, MESSAGE_SCROLL_BUFFER)) {
       // Mark as read if scroll is at end
       setTimeout(() => {
         messagesDispatcher({
@@ -114,63 +121,29 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
     }
   };
 
-  // Because every message components are re-rendered everytime by every scroll events
-  const memoizedAllMessages = useMemo(() => {
-    return (
-      allMessages.map((m, idx) => {
-        const previousMessage = allMessages[idx - 1];
-        const nextMessage = allMessages[idx + 1];
-        const [chainTop, chainBottom] = isMessageGroupingEnabled
-          ? compareMessagesForGrouping(previousMessage, m, nextMessage, currentGroupChannel, replyType)
-          : [false, false];
-        const previousMessageCreatedAt = previousMessage?.createdAt;
-        const currentCreatedAt = m.createdAt;
-        // https://stackoverflow.com/a/41855608
-        const hasSeparator = !(previousMessageCreatedAt && (
-          isSameDay(currentCreatedAt, previousMessageCreatedAt)
-        ));
-
-        const handleScroll = () => {
-          const current = scrollRef?.current;
-          if (current) {
-            const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
-            if (scrollBottom < bottom) {
-              current.scrollTop += bottom - scrollBottom;
-            }
-          }
-        };
-
-        return (
-          <Message
-            key={m?.messageId}
-            handleScroll={handleScroll}
-            renderMessage={renderMessage}
-            message={m}
-            hasSeparator={hasSeparator}
-            chainTop={chainTop}
-            chainBottom={chainBottom}
-            renderCustomSeparator={renderCustomSeparator}
-          />
-        );
-      })
-    );
-  }, [allMessages]);
+  const handleScroll = () => {
+    const current = scrollRef?.current;
+    if (current) {
+      const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+      if (scrollBottom < bottom && scrollBottom <= MESSAGE_SCROLL_BUFFER) {
+        current.scrollTop += bottom - scrollBottom;
+      }
+    }
+  };
 
+  if (loading) {
+    return (typeof renderPlaceholderLoader === 'function')
+      ? renderPlaceholderLoader()
+      : <PlaceHolder type={PlaceHolderTypes.LOADING} />;
+  }
   if (allMessages.length < 1) {
-    return (
-      <>
-        {
-          renderPlaceholderEmpty?.() || (
-            <PlaceHolder
-              className="sendbird-conversation__no-messages"
-              type={PlaceHolderTypes.NO_MESSAGES}
-            />)
-        }
-      </>
-    );
+    if (renderPlaceholderEmpty && typeof renderPlaceholderEmpty === 'function') {
+      return renderPlaceholderEmpty();
+    }
+    return <PlaceHolder className="sendbird-conversation__no-messages" type={PlaceHolderTypes.NO_MESSAGES} />;
   }
   return (
-    <div className="sendbird-conversation__messages">
+    <div className={`sendbird-conversation__messages ${className}`}>
       <div className="sendbird-conversation__scroll-container">
         <div className="sendbird-conversation__padding" />
         <div
@@ -178,9 +151,63 @@ const MessageList: React.FC<MessageListProps> = (props: MessageListProps) => {
           ref={scrollRef}
           onScroll={onScroll}
         >
-          {memoizedAllMessages}
+          {allMessages.map((m, idx) => {
+            const {
+              chainTop,
+              chainBottom,
+              hasSeparator,
+            } = getMessagePartsInfo({
+              allMessages,
+              replyType,
+              isMessageGroupingEnabled,
+              currentIndex: idx,
+              currentMessage: m,
+              currentChannel: currentGroupChannel,
+            });
+            return (
+              <Message
+                key={m?.messageId}
+                handleScroll={handleScroll}
+                renderMessage={renderMessage}
+                message={m}
+                hasSeparator={hasSeparator}
+                chainTop={chainTop}
+                chainBottom={chainBottom}
+                renderCustomSeparator={renderCustomSeparator}
+              />
+            );
+          })}
+          {/* show frozen notifications */}
+          {/* show new message notifications */}
         </div>
       </div>
+      {currentGroupChannel?.isFrozen && (
+        <FrozenNotification className="sendbird-conversation__messages__notification" />
+      )}
+      <UnreadCount
+        className="sendbird-conversation__messages__notification"
+        count={currentGroupChannel?.unreadMessageCount}
+        time={unreadSince}
+        onClick={() => {
+          if (scrollRef?.current?.scrollTop) {
+            scrollRef.current.scrollTop = scrollRef?.current?.scrollHeight - scrollRef?.current?.offsetHeight;
+          }
+          if (!disableMarkAsRead) {
+            try {
+              currentGroupChannel?.markAsRead();
+            } catch {
+              //
+            }
+            messagesDispatcher({
+              type: messageActionTypes.MARK_AS_READ,
+              payload: { channel: currentGroupChannel },
+            });
+          }
+          setInitialTimeStamp(null);
+          setAnimatedMessageId(null);
+          setHighLightedMessageId(null);
+        }}
+      />
       {
         // This flag is an unmatched variable
         (scrollBottom > 1) && (
diff --git a/src/smart-components/Channel/components/MessageList/message-list.scss b/src/smart-components/Channel/components/MessageList/message-list.scss
index 519ba0298..1ae751ca8 100644
--- a/src/smart-components/Channel/components/MessageList/message-list.scss
+++ b/src/smart-components/Channel/components/MessageList/message-list.scss
@@ -1,7 +1,9 @@
 @import '../../../../styles/variables';
 
 .sendbird-conversation__messages {
+  position: relative;
   .sendbird-conversation__messages-padding {
+    position: relative;
     padding-left: 24px;
     padding-right: 24px;
     height: 100%;
@@ -15,6 +17,13 @@
   }
 }
 
+.sendbird-conversation__messages__notification {
+  position: fixed;
+  top: 0px;
+  width: calc(100% - 50px);
+  margin-left: 25px;
+}
+
 .sendbird-conversation__scroll-bottom-button {
   position: sticky;
   display: flex;
diff --git a/src/smart-components/Channel/components/UnreadCount/index.tsx b/src/smart-components/Channel/components/UnreadCount/index.tsx
index abaa385b4..8d78ead2d 100644
--- a/src/smart-components/Channel/components/UnreadCount/index.tsx
+++ b/src/smart-components/Channel/components/UnreadCount/index.tsx
@@ -6,28 +6,27 @@ import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 
 export interface UnreadCountProps {
+  className?: string;
   count: number;
   time: string;
   onClick(): void;
 }
 
-const UnreadCount: React.FC<UnreadCountProps> = (props: UnreadCountProps) => {
-  const {
-    count,
-    time = '',
-    onClick,
-  } = props;
-
+const UnreadCount: React.FC<UnreadCountProps> = ({
+  className = '',
+  count,
+  time = '',
+  onClick,
+}: UnreadCountProps) => {
   const { stringSet } = useContext(LocalizationContext);
   const timeArray = time?.toString?.()?.split(' ') || [];
   timeArray?.splice(-2, 0, stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__ON);
 
-  if (count < 1) {
-    return;
-  }
-
   return (
-    <div className="sendbird-notification" onClick={onClick}>
+    <div
+      className={`sendbird-notification${count < 1 ? '--hide' : ''} ${className}`}
+      onClick={onClick}
+    >
       <Label className="sendbird-notification__text" color={LabelColors.ONCONTENT_1} type={LabelTypography.CAPTION_2}>
         {`${count} `}
         {stringSet.CHANNEL__MESSAGE_LIST__NOTIFICATION__NEW_MESSAGE}
diff --git a/src/smart-components/Channel/components/UnreadCount/unread-count.scss b/src/smart-components/Channel/components/UnreadCount/unread-count.scss
index 2916941a0..2b6b5c44c 100644
--- a/src/smart-components/Channel/components/UnreadCount/unread-count.scss
+++ b/src/smart-components/Channel/components/UnreadCount/unread-count.scss
@@ -1,5 +1,10 @@
 @import '../../../../styles/variables';
 
+.sendbird-notification--hide,
+.sendbird-notification {
+  position: absolute;
+}
+
 .sendbird-notification {
   margin-top: 8px;
   margin-left: 24px;
@@ -38,3 +43,7 @@
     margin-right: 8px;
   }
 }
+
+.sendbird-notification--hide {
+  display: none;
+}
diff --git a/src/smart-components/Channel/context/const.ts b/src/smart-components/Channel/context/const.ts
index 410881a1a..804e4d205 100644
--- a/src/smart-components/Channel/context/const.ts
+++ b/src/smart-components/Channel/context/const.ts
@@ -1,3 +1,5 @@
+export const MESSAGE_SCROLL_BUFFER = 10;
+
 export const PREV_RESULT_SIZE = 30;
 export const NEXT_RESULT_SIZE = 15;
 
diff --git a/src/smart-components/Channel/context/hooks/useHandleChannelEvents.ts b/src/smart-components/Channel/context/hooks/useHandleChannelEvents.ts
index 990b9cdc1..fa1786e68 100644
--- a/src/smart-components/Channel/context/hooks/useHandleChannelEvents.ts
+++ b/src/smart-components/Channel/context/hooks/useHandleChannelEvents.ts
@@ -64,8 +64,11 @@ function useHandleChannelEvents({
               type: messageActions.ON_MESSAGE_RECEIVED,
               payload: { channel, message },
             });
-
-            if (scrollToEnd) {
+            if (scrollToEnd
+              && document.getElementById('sendbird-dropdown-portal').childElementCount === 0
+              && document.getElementById('sendbird-emoji-list-portal').childElementCount === 0
+            ) {
+              // and !openContextMenu
               try {
                 setTimeout(() => {
                   if (!disableMarkAsRead) {
diff --git a/src/ui/ContextMenu/index.tsx b/src/ui/ContextMenu/index.tsx
index 28c76cb88..59fb01b80 100644
--- a/src/ui/ContextMenu/index.tsx
+++ b/src/ui/ContextMenu/index.tsx
@@ -55,6 +55,8 @@ export const MenuRoot = (): ReactElement => (
     className="sendbird-dropdown-portal"
   />
 );
+
+// For the test environment
 export const EmojiReactionListRoot = (): ReactElement => <div id="sendbird-emoji-list-portal" />;
 
 type MenuDisplayingFunc = () => void;
diff --git a/src/utils/useDidMountEffect.ts b/src/utils/useDidMountEffect.ts
new file mode 100644
index 000000000..1310ca5e0
--- /dev/null
+++ b/src/utils/useDidMountEffect.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+const useDidMountEffect = (func: () => void, deps: Array<unknown>): void => {
+    const [didMount, setDidmount] = useState(false);
+    useEffect(() => {
+        if (didMount) {
+          func();
+        } else {
+          setDidmount(true);
+        }
+    }, deps);
+};
+
+export default useDidMountEffect;