diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index ff970da0..e4add343 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -13,7 +13,6 @@ import copy from 'copy-to-clipboard';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import DocsGPT3 from '../assets/cute_docsgpt3.svg';
-
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
 const ConversationBubble = forwardRef<
@@ -64,9 +63,9 @@ const ConversationBubble = forwardRef<
     bubble = (
       <div
         ref={ref}
-        className={`flex self-start ${className} group flex-col pr-20  dark:text-bright-gray`}
+        className={`flex self-start flex-wrap ${className} group flex-col pr-20  dark:text-bright-gray`}
       >
-        <div className="flex self-start">
+        <div className="flex self-start flex-wrap md:flex-nowrap">
           <Avatar
             className="mt-2 h-12 w-12 text-2xl"
             avatar={
@@ -79,17 +78,16 @@ const ConversationBubble = forwardRef<
           />
 
           <div
-            className={`ml-2 mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${
-              type === 'ERROR'
-                ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
-                : 'flex-col rounded-3xl'
-            }`}
+            className={`ml-2 md:max-w-[50vw] max-w-[90vw] mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${type === 'ERROR'
+              ? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000  dark:border-red-2000 dark:text-white'
+              : 'flex-col rounded-3xl'
+              }`}
           >
             {type === 'ERROR' && (
               <img src={Alert} alt="alert" className="mr-2 inline" />
             )}
             <ReactMarkdown
-              className="max-w-screen-md whitespace-pre-wrap break-words"
+              className="whitespace-pre-wrap break-words"
               remarkPlugins={[remarkGfm]}
               components={{
                 code({ node, inline, className, children, ...props }) {
@@ -170,21 +168,19 @@ const ConversationBubble = forwardRef<
                     {sources?.map((source, index) => (
                       <div
                         key={index}
-                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
-                          openSource === index
-                            ? 'bg-[#007DFF]'
-                            : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
-                        }`}
+                        className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${openSource === index
+                          ? 'bg-[#007DFF]'
+                          : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
+                          }`}
                         onClick={() =>
                           setOpenSource(openSource === index ? null : index)
                         }
                       >
                         <p
-                          className={`truncate text-center text-base font-medium ${
-                            openSource === index
-                              ? 'text-white'
-                              : 'text-[#007DFF]'
-                          }`}
+                          className={`truncate text-center text-base font-medium ${openSource === index
+                            ? 'text-white'
+                            : 'text-[#007DFF]'
+                            }`}
                         >
                           {index + 1}. {source.title.substring(0, 45)}
                         </p>
@@ -196,9 +192,9 @@ const ConversationBubble = forwardRef<
             )}
           </div>
           <div
-            className={`relative mr-5 flex items-center justify-center md:invisible ${
-              type !== 'ERROR' ? 'group-hover:md:visible' : ''
-            }`}
+            className={`relative mr-5  items-center justify-center lg:invisible block 
+            ${type !== 'ERROR' ? 'group-hover:lg:visible' : ''
+              }`}
           >
             <div className="absolute left-2 top-4">
               <div
@@ -225,13 +221,11 @@ const ConversationBubble = forwardRef<
             </div>
           </div>
           <div
-            className={`relative mr-5 flex items-center justify-center ${
-              !isLikeClicked ? 'md:invisible' : ''
-            } ${
-              feedback === 'LIKE' || type !== 'ERROR'
-                ? 'group-hover:md:visible'
+            className={`relative mr-5 flex items-center justify-center ${!isLikeClicked ? 'lg:invisible' : ''
+              } ${feedback === 'LIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
                 : ''
-            }`}
+              }`}
           >
             <div className="absolute left-6 top-4">
               <div
@@ -242,7 +236,7 @@ const ConversationBubble = forwardRef<
                   ${isLikeClicked || feedback === 'LIKE'
                       ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
                       : 'fill-none  stroke-gray-4000'
-                  }`}
+                    }`}
                   onClick={() => {
                     handleFeedback?.('LIKE');
                     setIsLikeClicked(true);
@@ -255,25 +249,22 @@ const ConversationBubble = forwardRef<
             </div>
           </div>
           <div
-            className={`mr-13 relative flex items-center justify-center ${
-              !isDislikeClicked ? 'md:invisible' : ''
-            } ${
-              feedback === 'DISLIKE' || type !== 'ERROR'
-                ? 'group-hover:md:visible'
+            className={`mr-13 relative flex items-center justify-center ${!isDislikeClicked ? 'lg:invisible' : ''
+              } ${feedback === 'DISLIKE' || type !== 'ERROR'
+                ? 'group-hover:lg:visible'
                 : ''
-            }`}
+              }`}
           >
             <div className="absolute left-10 top-4">
               <div
-                
+
                 className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
               >
                 <Dislike
-                  className={`cursor-pointer ${
-                    isDislikeClicked || feedback === 'DISLIKE'
-                      ? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
-                      : 'fill-none  stroke-gray-4000'
-                  }`}
+                  className={`cursor-pointer ${isDislikeClicked || feedback === 'DISLIKE'
+                    ? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
+                    : 'fill-none  stroke-gray-4000'
+                    }`}
                   onClick={() => {
                     handleFeedback?.('DISLIKE');
                     setIsDislikeClicked(true);
@@ -288,7 +279,7 @@ const ConversationBubble = forwardRef<
         </div>
 
         {sources && openSource !== null && sources[openSource] && (
-          <div className="ml-10 mt-2 max-w-[800px] rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
+          <div className="ml-10 mt-2 max-w-[300px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
             <p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
               Source: {sources[openSource].title}
             </p>