diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx
index 04454084b..de2bedd63 100644
--- a/src/components/BotMessageWithBodyInput.tsx
+++ b/src/components/BotMessageWithBodyInput.tsx
@@ -61,12 +61,13 @@ type Props = {
   messageCount?: number;
   zIndex?: number;
   bodyStyle?: object;
+  isBotWelcomeMessage?: boolean;
 };
 
 const ImageContainer = styled.div``;
 
 const EmptyImageContainer = styled.div`
-  width: 30px;
+  width: 28px;
 `;
 
 export default function BotMessageWithBodyInput(props: Props) {
@@ -80,11 +81,13 @@ export default function BotMessageWithBodyInput(props: Props) {
     bodyStyle,
     chainTop,
     chainBottom,
+    isBotWelcomeMessage,
   } = props;
 
   const nonChainedMessage = chainTop == null && chainBottom == null;
   const displayProfileImage = nonChainedMessage || chainBottom;
   const displaySender = nonChainedMessage || chainTop;
+
   return (
     <Root style={{ zIndex: messageCount === 1 && zIndex ? zIndex : 0 }}>
       {displayProfileImage ? (
@@ -111,7 +114,9 @@ export default function BotMessageWithBodyInput(props: Props) {
           </Sender>
         )}
         {bodyComponent}
-        {enableEmojiFeedback && <ReactionContainer message={message} />}
+        {enableEmojiFeedback && displayProfileImage && !isBotWelcomeMessage && (
+          <ReactionContainer message={message} />
+        )}
       </BodyContainer>
       <SentTime>{formatCreatedAtToAMPM(message.createdAt)}</SentTime>
     </Root>
diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx
index deca707b5..282ec6331 100644
--- a/src/components/CustomChannelComponent.tsx
+++ b/src/components/CustomChannelComponent.tsx
@@ -17,7 +17,10 @@ import DynamicRepliesPanel from './DynamicRepliesPanel';
 import { useConstantState } from '../context/ConstantContext';
 import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming';
 import { isSpecialMessage, scrollUtil } from '../utils';
-import { groupMessagesByShortSpanTime } from '../utils/messages';
+import {
+  groupMessagesByShortSpanTime,
+  getBotWelcomeMessages,
+} from '../utils/messages';
 
 const Root = styled.div<{ hidePlaceholder: boolean; height: string }>`
   height: ${({ height }) => height};
@@ -126,6 +129,10 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
     [allMessages.length]
   );
 
+  const botWelcomeMessages = useMemo(() => {
+    return getBotWelcomeMessages(allMessages, botUser.userId);
+  }, [allMessages.length]);
+
   return (
     <Root hidePlaceholder={startingPagePlaceHolder} height={'100%'}>
       <ChannelUI
@@ -158,6 +165,10 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
           const grouppedMessage = grouppedMessages.find(
             (m) => m.messageId == message.messageId
           );
+
+          const isBotWelcomeMessage = !!botWelcomeMessages.find(
+            (welcomeMessage) => welcomeMessage.messageId === message.messageId
+          );
           return (
             <>
               <CustomMessage
@@ -167,6 +178,7 @@ export function CustomChannelComponent(props: CustomChannelComponentProps) {
                 lastMessageRef={lastMessageRef}
                 chainTop={grouppedMessage?.chaintop}
                 chainBottom={grouppedMessage?.chainBottom}
+                isBotWelcomeMessage={isBotWelcomeMessage}
               />
               {message.messageId === lastMessage.messageId &&
                 dynamicReplyOptions.length > 0 && (
diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx
index b3ae84051..dda9cfe64 100644
--- a/src/components/CustomMessage.tsx
+++ b/src/components/CustomMessage.tsx
@@ -28,6 +28,7 @@ type Props = {
   lastMessageRef: React.RefObject<HTMLDivElement>;
   chainTop?: boolean;
   chainBottom?: boolean;
+  isBotWelcomeMessage: boolean;
 };
 
 export default function CustomMessage(props: Props) {
@@ -38,6 +39,7 @@ export default function CustomMessage(props: Props) {
     lastMessageRef,
     chainTop,
     chainBottom,
+    isBotWelcomeMessage,
   } = props;
   const { replacementTextList } = useConstantState();
 
@@ -71,9 +73,9 @@ export default function CustomMessage(props: Props) {
           }
           messageCount={allMessages.length}
           zIndex={30}
-          bodyStyle={{ maxWidth: '255px', width: 'calc(100% - 98px)' }}
           chainTop={chainTop}
           chainBottom={chainBottom}
+          isBotWelcomeMessage={isBotWelcomeMessage}
         />
       </div>
     );
@@ -94,6 +96,7 @@ export default function CustomMessage(props: Props) {
           messageCount={allMessages.length}
           chainTop={chainTop}
           chainBottom={chainBottom}
+          isBotWelcomeMessage={isBotWelcomeMessage}
         />
       );
     }
@@ -125,6 +128,7 @@ export default function CustomMessage(props: Props) {
         }
         chainTop={chainTop}
         chainBottom={chainBottom}
+        isBotWelcomeMessage={isBotWelcomeMessage}
       />
     </div>
   );
diff --git a/src/components/ParsedBotMessageBody.tsx b/src/components/ParsedBotMessageBody.tsx
index c0fca5300..809e23dcf 100644
--- a/src/components/ParsedBotMessageBody.tsx
+++ b/src/components/ParsedBotMessageBody.tsx
@@ -61,7 +61,7 @@ export default function ParsedBotMessageBody(props: Props) {
     : [];
 
   // console.log('## sources: ', sources);
-  if (tokens.length > 0 && enableSourceMessage) {
+  if (tokens.length > 0) {
     return (
       <Root>
         {tokens.map((token: Token, i) => {
@@ -81,7 +81,7 @@ export default function ParsedBotMessageBody(props: Props) {
             </BlockContainer>
           );
         })}
-        {sources.length > 0 ? (
+        {sources.length > 0 && enableSourceMessage ? (
           <>
             <SourceContainer sources={sources} />
             <BotMessageBottom />
diff --git a/src/const.ts b/src/const.ts
index 4b9229332..4959669ac 100644
--- a/src/const.ts
+++ b/src/const.ts
@@ -50,15 +50,15 @@ export const DEFAULT_CONSTANT: Constant = {
     ],
   },
   firstMessageData: [
-    {
-      data: {
-        quick_replies: [
-          'What can I learn from Pre-K 8th grade?',
-          'Tell me about Math',
-        ],
-      },
-      message: "Hi~ I'm Khan Academy Support ChatBot. Ask me anything!",
-    },
+    // {
+    //   data: {
+    //     quick_replies: [
+    //       'What can I learn from Pre-K 8th grade?',
+    //       'Tell me about Math',
+    //     ],
+    //   },
+    //   message: "Hi~ I'm Khan Academy Support ChatBot. Ask me anything!",
+    // },
   ],
   createGroupChannelParams: {
     name: 'Sendbird AI Chatbot',
diff --git a/src/main.tsx b/src/main.tsx
index aa57c9e07..2d4a19383 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,8 +6,6 @@ import { DEFAULT_CONSTANT } from './const';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App 
-      firstMessageData={DEFAULT_CONSTANT.firstMessageData}
-    />
+    <App firstMessageData={DEFAULT_CONSTANT.firstMessageData} />
   </React.StrictMode>
 );
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
index 302ac5115..b83db7b9b 100644
--- a/src/utils/messages.ts
+++ b/src/utils/messages.ts
@@ -53,3 +53,24 @@ export function groupMessagesByShortSpanTime(
     }
   );
 }
+
+export function getBotWelcomeMessages(
+  messages: EveryMessage[],
+  botUserId: string
+) {
+  // if the list is empty or the first message is not from bot,
+  // we just assume there's no welcome messages
+  if (messages.length === 0 || messages[0]?.sender.userId !== botUserId) {
+    return [];
+  }
+
+  // if the list has only bot messages, then just return the whole list
+  if (messages.every((message) => message?.sender.userId === botUserId)) {
+    return messages;
+  }
+
+  const firstUserMesssage = messages.find(
+    (message) => message?.sender.userId !== botUserId
+  );
+  return messages.slice(0, messages.indexOf(firstUserMesssage));
+}