diff --git a/frontend/src/assets/alert.svg b/frontend/src/assets/alert.svg
index 05c7634b..07721b57 100644
--- a/frontend/src/assets/alert.svg
+++ b/frontend/src/assets/alert.svg
@@ -1,3 +1,3 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#F44336"/>
+<path d="M8.16669 11.5H9.83335V13.1666H8.16669V11.5ZM8.16669 4.83329H9.83335V9.83329H8.16669V4.83329ZM8.99169 0.666626C4.39169 0.666626 0.666687 4.39996 0.666687 8.99996C0.666687 13.6 4.39169 17.3333 8.99169 17.3333C13.6 17.3333 17.3334 13.6 17.3334 8.99996C17.3334 4.39996 13.6 0.666626 8.99169 0.666626ZM9.00002 15.6666C5.31669 15.6666 2.33335 12.6833 2.33335 8.99996C2.33335 5.31663 5.31669 2.33329 9.00002 2.33329C12.6834 2.33329 15.6667 5.31663 15.6667 8.99996C15.6667 12.6833 12.6834 15.6666 9.00002 15.6666Z" fill="#ECECF1"/>
 </svg>
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 1db5c2c8..fb405316 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -263,7 +263,7 @@ export default function MessageInput({
           {attachments.map((attachment, index) => (
             <div
               key={index}
-              className={`group relative flex items-center rounded-[24px] bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray sm:px-3 sm:py-1.5 sm:text-[14px] ${
+              className={`group relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray sm:px-3 sm:py-1.5 sm:text-[14px] ${
                 attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
               }`}
               title={attachment.fileName}
@@ -280,13 +280,8 @@ export default function MessageInput({
                 {attachment.status === 'failed' && (
                   <img
                     src={AlertIcon}
-                    alt="Upload failed"
+                    alt="Failed"
                     className="h-[15px] w-[15px] object-fill"
-                    style={{
-                      filter:
-                        'invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%)',
-                    }}
-                    title="Upload failed"
                   />
                 )}
 
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 709a9843..102a8363 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -107,13 +107,15 @@ const ConversationBubble = forwardRef<
       <div
         onMouseEnter={() => setIsQuestionHovered(true)}
         onMouseLeave={() => setIsQuestionHovered(false)}
+        className={className}
       >
         <div className="flex flex-col items-end">
           {filesAttached && filesAttached.length > 0 && (
-            <div className="mb-2 mr-12 flex flex-wrap justify-end gap-2">
+            <div className="mb-4 mr-12 flex flex-wrap justify-end gap-2">
               {filesAttached.map((file, index) => (
                 <div
                   key={index}
+                  title={file.fileName}
                   className="flex items-center rounded-xl bg-[#EFF3F4] p-2 text-[14px] text-[#5D5D5D] dark:bg-[#393B3D] dark:text-bright-gray"
                 >
                   <div className="mr-2 items-center justify-center rounded-lg bg-purple-30 p-[5.5px]">
@@ -132,7 +134,7 @@ const ConversationBubble = forwardRef<
           )}
           <div
             ref={ref}
-            className={`flex flex-row-reverse justify-items-start ${className}`}
+            className={`flex flex-row-reverse justify-items-start`}
           >
             <Avatar
               size="SMALL"
diff --git a/frontend/src/conversation/conversationHandlers.ts b/frontend/src/conversation/conversationHandlers.ts
index 981dffc3..71f539e5 100644
--- a/frontend/src/conversation/conversationHandlers.ts
+++ b/frontend/src/conversation/conversationHandlers.ts
@@ -279,12 +279,12 @@ export function handleSendFeedback(
     });
 }
 
-export function handleFetchSharedAnswerStreaming( //for shared conversations
+export function handleFetchSharedAnswerStreaming(
   question: string,
   signal: AbortSignal,
   apiKey: string,
   history: Array<any> = [],
-  attachments: string[] = [], // Add attachments parameter with default empty array
+  attachments: string[] = [],
   onEvent: (event: MessageEvent) => void,
 ): Promise<Answer> {
   history = history.map((item) => {
@@ -301,7 +301,7 @@ export function handleFetchSharedAnswerStreaming( //for shared conversations
       history: JSON.stringify(history),
       api_key: apiKey,
       save_conversation: false,
-      attachments: attachments.length > 0 ? attachments : undefined, // Add attachments to payload
+      attachments: attachments.length > 0 ? attachments : undefined,
     };
     conversationService
       .answerStream(payload, null, signal)
@@ -376,13 +376,10 @@ export function handleFetchSharedAnswer(
   const payload = {
     question: question,
     api_key: apiKey,
+    attachments:
+      attachments && attachments.length > 0 ? attachments : undefined,
   };
 
-  // Add attachments to payload if they exist
-  if (attachments && attachments.length > 0) {
-    payload.attachments = attachments;
-  }
-
   return conversationService
     .answer(payload, null, signal)
     .then((response) => {