diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 920005e3..296caeda 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -59,6 +59,7 @@ const ConversationBubble = forwardRef<
       updated?: boolean,
       index?: number,
     ) => void;
+    attachmentsMetadata?: { id: string; filename: string }[];
   }
 >(function ConversationBubble(
   {
@@ -74,6 +75,7 @@ const ConversationBubble = forwardRef<
     questionNumber,
     isStreaming,
     handleUpdatedQuestionSubmission,
+    attachmentsMetadata,
   },
   ref,
 ) {
@@ -225,11 +227,35 @@ const ConversationBubble = forwardRef<
 
       return contentSegments;
     };
+    const renderAttachments = () => {
+      if (!attachmentsMetadata || attachmentsMetadata.length === 0) return null;
+
+      return (
+        <div className="mb-2 flex flex-wrap gap-2">
+          {attachmentsMetadata.map((attachment, index) => (
+            <div
+              key={index}
+              className="flex items-center rounded-[32px] border border-[#AAAAAA] bg-white px-3 py-1.5 text-[14px] text-[#5D5D5D] dark:border-purple-taupe dark:bg-[#1F2028] dark:text-bright-gray"
+            >
+              <img
+                src={Document}
+                alt="Attachment"
+                className="mr-2 h-[17px] w-[17px] object-fill"
+              />
+              <span className="max-w-[150px] truncate font-medium">
+                {attachment.filename}
+              </span>
+            </div>
+          ))}
+        </div>
+      );
+    };
     bubble = (
       <div
         ref={ref}
         className={`flex flex-wrap self-start ${className} group flex-col dark:text-bright-gray`}
       >
+        {type === 'ANSWER' && renderAttachments()}
         {DisableSourceFE ||
         type === 'ERROR' ||
         sources?.length === 0 ||
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 5c2150a6..44f38159 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -145,6 +145,7 @@ export default function ConversationMessages({
           toolCalls={query.tool_calls}
           feedback={query.feedback}
           isStreaming={isCurrentlyStreaming}
+          attachmentsMetadata={query.attachments}
           handleFeedback={
             handleFeedback
               ? (feedback) => handleFeedback(query, feedback, index)
diff --git a/frontend/src/conversation/conversationModels.ts b/frontend/src/conversation/conversationModels.ts
index 8c5a479b..b9abf853 100644
--- a/frontend/src/conversation/conversationModels.ts
+++ b/frontend/src/conversation/conversationModels.ts
@@ -46,7 +46,7 @@ export interface Query {
   sources?: { title: string; text: string; link: string }[];
   tool_calls?: ToolCallsType[];
   error?: string;
-  attachments?: { fileName: string; id: string }[];
+  attachments?: { id: string; filename: string }[];
 }
 
 export interface RetrievalPayload {