diff --git a/src/smart-components/App/stories/index.stories.js b/src/smart-components/App/stories/index.stories.js
index a9406ee5a..8f7f090c0 100644
--- a/src/smart-components/App/stories/index.stories.js
+++ b/src/smart-components/App/stories/index.stories.js
@@ -24,17 +24,17 @@ export const versionInfo = () => {
     <>
       <div>UIKit: {pkg.version}</div>
       <div>Sendbird SDK: {pkg.dependencies.sendbird.version}</div>
-      <button onClick={() => { setshowAll(!showAll)}}>Show all</button>
+      <button onClick={() => { setshowAll(!showAll) }}>Show all</button>
       {
         showAll && (
-        <div>
-          {
-            Object.keys(pkg.dependencies)
-              .map((p) => (
-                <div key={p}>{p}: {pkg.dependencies[p].version}</div>
-              ))
-          }
-        </div>
+          <div>
+            {
+              Object.keys(pkg.dependencies)
+                .map((p) => (
+                  <div key={p}>{p}: {pkg.dependencies[p].version}</div>
+                ))
+            }
+          </div>
         )
       }
     </>
@@ -47,7 +47,7 @@ export const basicSDK = () => fitPageSize(
     userId={userId}
     nickname={userId}
     showSearchIcon
-    /*config={{ logLevel: 'all' }}*/
+  /*config={{ logLevel: 'all' }}*/
   />
 );
 
@@ -111,8 +111,8 @@ export const login = () => {
           type="button"
           value={
             messageSearch
-            ? 'Use MessageSearch'
-            : 'Not use MessageSearch'
+              ? 'Use MessageSearch'
+              : 'Not use MessageSearch'
           }
           onClick={() => setMessageSearch(!messageSearch)}
         />
@@ -121,8 +121,8 @@ export const login = () => {
           type="button"
           value={
             profileEdit
-            ? 'Use ProfileEdit'
-            : 'Not use ProfileEdit'
+              ? 'Use ProfileEdit'
+              : 'Not use ProfileEdit'
           }
           onClick={() => setProfileEdit(!profileEdit)}
         />
@@ -207,7 +207,12 @@ export const user2 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
-  // config={{ logLevel: 'all' }}
+    replyType="QUOTE_REPLY"
+    imageCompression={{
+      compressionRate: 0.5,
+      resizingWidth: 100,
+      resizingHeight: '100px',
+    }}
   />
 );
 export const user3 = () => fitPageSize(
@@ -219,11 +224,6 @@ export const user3 = () => fitPageSize(
     showSearchIcon
     allowProfileEdit
     profileUrl={addProfile}
-    imageCompression={{
-      compressionRate: 0.5,
-      resizingWidth: 100,
-      resizingHeight: '100px',
-    }}
     replyType="QUOTE_REPLY"
   />
 );
@@ -264,41 +264,41 @@ const CustomApp = () => {
       imageCompression={{ compressionRate: 0.5, resizingWidth: 100, resizingHeight: '100px' }}
     >
       <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'row' }}>
-          <SBChannelList setChannelUrl={setChannelUrl} />
-          <div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
+        <SBChannelList setChannelUrl={setChannelUrl} />
+        <div style={{ height: '100%', width: '100%', display: 'inline-flex', flexDirection: 'row' }}>
+          <div style={{ width: '100%' }}>
+            <Conversation
+              channelUrl={channelUrl}
+              onChatHeaderActionClick={() => {
+                setChannelSearch(false);
+                setChannelSettings(true);
+              }}
+              showSearchIcon
+              onSearchClick={() => {
+                setChannelSettings(false);
+                setChannelSearch(true);
+              }}
+            />
+          </div>
+          {channelSearch && (
             <div style={{ width: '100%' }}>
-              <Conversation
+              <MessageSearch
                 channelUrl={channelUrl}
-                onChatHeaderActionClick={() => {
-                  setChannelSearch(false);
-                  setChannelSettings(true);
-                }}
-                showSearchIcon
-                onSearchClick={() => {
-                  setChannelSettings(false);
-                  setChannelSearch(true);
-                }}
+                searchString="hello"
+                onResultClick={() => { }}
               />
             </div>
-            {channelSearch && (
-              <div style={{ width: '100%' }}>
-                <MessageSearch
-                  channelUrl={channelUrl}
-                  searchString="hello"
-                  onResultClick={() => {}}
-                />
-              </div>
-            )}
-            {channelSettings && (
-              <div style={{ display: 'inline-flex'}}>
-                <ChannelSettings
-                  channelUrl={channelUrl}
-                  onCloseClick={() => setChannelSettings(false)}
-                />
-              </div>
-            )}
-          </div>
+          )}
+          {channelSettings && (
+            <div style={{ display: 'inline-flex' }}>
+              <ChannelSettings
+                channelUrl={channelUrl}
+                onCloseClick={() => setChannelSettings(false)}
+              />
+            </div>
+          )}
         </div>
+      </div>
     </Sendbird>
   );
 };
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 21d653695..d77518b10 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -64,7 +64,7 @@ export default function MessageContent({
   chainBottom = false,
   useReaction = false,
   replyType,
-  // scrollToMessage,
+  scrollToMessage,
   nicknamesMap,
   emojiContainer,
   showEdit,
@@ -185,7 +185,15 @@ export default function MessageContent({
         {/* quote message */}
         {(useReplying) ? (
           <div className={getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming'])}>
-            <QuoteMessage message={message} isByMe={isByMe} />
+            <QuoteMessage
+              message={message}
+              isByMe={isByMe}
+              onClick={() => {
+                if (message?.parentMessage?.createdAt && message?.parentMessageId) {
+                  scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+                }
+              }}
+            />
           </div>
         ) : null}
         {/* container: message item body + emoji reactions */}
diff --git a/src/ui/QuoteMessage/index.tsx b/src/ui/QuoteMessage/index.tsx
index e36fd4491..24c423386 100644
--- a/src/ui/QuoteMessage/index.tsx
+++ b/src/ui/QuoteMessage/index.tsx
@@ -23,12 +23,14 @@ interface Props {
   message?: UserMessage | FileMessage;
   isByMe?: boolean;
   className?: string | Array<string>;
+  onClick?: () => void;
 }
 
 export default function QuoteMessage({
   message,
   isByMe = false,
   className,
+  onClick = () => {},
 }: Props): ReactElement {
   const { parentMessage } = message;
   const parentMessageSender = parentMessage?.sender;
@@ -43,7 +45,11 @@ export default function QuoteMessage({
   const splitUrl = parentMessageUrl.split('/');
 
   return (
-    <div className={getClassName([className, 'sendbird-quote-message', isByMe ? 'outgoing' : 'incoming'])}>
+    <div
+      className={getClassName([className, 'sendbird-quote-message', isByMe ? 'outgoing' : 'incoming'])}
+      key={parentMessage?.messageId}
+      onClick={onClick}
+    >
       <div className="sendbird-quote-message__replied-to">
         <Icon
           className="sendbird-quote-message__replied-to__icon"