diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
index f73c9aa44..2f7faac99 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -322,7 +322,7 @@ dark:prose-invert"
                   {chatMessage}
                 </span>
                 {chat.files && (
-                  <div className="my-2">
+                  <div className="my-2 flex  flex-col gap-5">
                     {chat.files.map((file, index) => {
                       return (
                         <div key={index} className="flex flex-col gap-2">
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 504d3fe24..c6577b473 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/filePreviewChat/index.tsx
@@ -62,7 +62,7 @@ export default function FilePreview({
         <div>Error...</div>
       ) : (
         <div
-          className={`relative ${isImage ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border  border-ring bg-background transition duration-300 ${
+          className={`relative mt-2 ${isImage ? "h-20 w-20" : "h-20 w-80"} cursor-pointer rounded-lg border  border-ring bg-background transition duration-300 ${
             isHovered ? "shadow-md" : ""
           }`}
           onMouseEnter={() => setIsHovered(true)}