diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 92411a3e..65b5fbef 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -60,7 +60,7 @@ const ConversationBubble = forwardRef<
         <div className="flex self-start">
           <Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
           <div
-            className={`ml-2 mr-5 flex items-center rounded-3xl bg-gray-1000 p-3.5 ${
+            className={`ml-2 mr-5 flex flex-col items-center rounded-3xl bg-gray-1000 p-3.5 ${
               type === 'ERROR'
                 ? ' rounded-lg border border-red-2000 bg-red-1000 p-2 text-red-3000'
                 : ''
@@ -100,6 +100,43 @@ const ConversationBubble = forwardRef<
             >
               {message}
             </ReactMarkdown>
+            {DisableSourceFE || type === 'ERROR' ? null : (
+              <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
+            )}
+            <div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
+              {DisableSourceFE || type === 'ERROR' ? null : (
+                <div className="py-1 px-2 text-base font-semibold">
+                  Sources:
+                </div>
+              )}
+              <div className="flex flex-row flex-wrap items-center justify-start gap-2">
+                {DisableSourceFE
+                  ? null
+                  : 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]'
+                        }`}
+                        onClick={() =>
+                          setOpenSource(openSource === index ? null : index)
+                        }
+                      >
+                        <p
+                          className={`truncate text-center text-base font-medium ${
+                            openSource === index
+                              ? 'text-white'
+                              : 'text-[#007DFF]'
+                          }`}
+                        >
+                          {index + 1}. {source.title}
+                        </p>
+                      </div>
+                    ))}
+              </div>
+            </div>
           </div>
           <div
             className={`mr-2 flex items-center justify-center ${
@@ -134,23 +171,6 @@ const ConversationBubble = forwardRef<
             ></Dislike>
           </div>
         </div>
-        <div className="ml-8 mt-2 grid w-1/2 grid-cols-3 gap-2">
-          {DisableSourceFE
-            ? null
-            : sources?.map((source, index) => (
-                <div
-                  key={index}
-                  className="w-26 cursor-pointer rounded-xl border border-gray-200 py-1 px-2 hover:bg-gray-100"
-                  onClick={() =>
-                    setOpenSource(openSource === index ? null : index)
-                  }
-                >
-                  <p className="truncate text-xs text-gray-500">
-                    {index + 1}. {source.title}
-                  </p>
-                </div>
-              ))}
-        </div>
 
         {sources && openSource !== null && sources[openSource] && (
           <div className="ml-8 mt-2 w-3/4 rounded-xl bg-blue-200 p-2">