diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index adf18885..56ca97d1 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -103,13 +103,13 @@ const ConversationBubble = forwardRef<
             <span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
             <div className="mt-3 flex w-full flex-row items-center justify-center gap-2">
               <div className="py-1 px-2 text-base font-semibold">Sources:</div>
-              <div className="flex grid w-1/2 grid-cols-3 flex-row flex-col items-center justify-start gap-2">
+              <div className="flex flex-row items-center justify-start gap-2">
                 {DisableSourceFE
                   ? null
                   : sources?.map((source, index) => (
                       <div
                         key={index}
-                        className={`w-26 cursor-pointer rounded-xl py-1 px-2 ${
+                        className={`w-40 max-w-fit cursor-pointer rounded-[28px] py-1 px-2 ${
                           openSource === index
                             ? 'bg-[#007DFF]'
                             : 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
@@ -119,7 +119,7 @@ const ConversationBubble = forwardRef<
                         }
                       >
                         <p
-                          className={`truncate text-base font-medium ${
+                          className={`truncate text-center text-base font-medium ${
                             openSource === index
                               ? 'text-white'
                               : 'text-[#007DFF]'