diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
index d5133f868..d33426169 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/index.tsx
@@ -56,6 +56,14 @@ export default function ChatInput({
                   newFiles[updatedIndex].loading = false;
                   return newFiles;
                 })
+              }).catch((err) => {
+                setFiles(prev=>{
+                  const newFiles = [...prev];
+                  const updatedIndex = newFiles.findIndex((file)=>file.id===id);
+                  newFiles[updatedIndex].loading = false;
+                  newFiles[updatedIndex].error = true;
+                  return newFiles;
+                })
               });
             }
           }
@@ -150,10 +158,13 @@ export default function ChatInput({
           </button>
         </div>
       </div>
-      <div className="flex w-full gap-2">
+      <div className="flex w-full gap-2 pb-2">
       {
         files.map((file)=>(
-          <FilePreview error={file.error} file={file.file} loading={file.loading} key={file.id}/>
+          <FilePreview error={file.error} file={file.file} loading={file.loading} key={file.id} onDelete={()=>{
+            setFiles(prev=>prev.filter((f)=>f.id!==file.id))
+            // TODO: delete file on backend
+          }}/>
         ))
       }
       </div>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
index 06bc1b348..8ec9f19c3 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
@@ -1,13 +1,33 @@
-export default function FilePreview(
-    { error, file, loading }:
-        { loading: boolean, file: File, error: boolean }
-) {
-    return (
-        <div>
-            {loading && <div>Loading...</div>}
-            {error && <div>Error...</div>}
-            <div>{file.name}</div>
-        </div>
-    )
+import React, { useState } from "react";
+import LoadingComponent from "../../../../../components/loadingComponent";
+import IconComponent from "../../../../../components/genericIconComponent";
 
-}
\ No newline at end of file
+export default function FilePreview({ error, file, loading,onDelete }: { loading: boolean, file: File, error: boolean,onDelete:()=>void }) {
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
+        <div className="inline-block relative w-56">
+            {loading && <LoadingComponent remSize={5} />}
+            {error && <div>Error...</div>}
+            <div
+                className={`rounded-md overflow-hidden transition duration-300 bg-background p-4 relative ${
+                    isHovered ? "shadow-md" : ""
+                }`}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
+                <img src={URL.createObjectURL(file)} alt="file" className="w-full h-auto block" />
+                {isHovered && (
+                    <div className="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
+                        <div
+                            className="bg-white bg-opacity-80 rounded-full cursor-pointer p-2"
+                            onClick={onDelete}
+                        >
+                            <IconComponent name="trash" className="stroke-red-500" />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}