diff --git a/app/components/chat.module.scss b/app/components/chat.module.scss
index 9dc57c0b9..33668ed53 100644
--- a/app/components/chat.module.scss
+++ b/app/components/chat.module.scss
@@ -61,15 +61,25 @@
 
 .attach-file {
   cursor: default;
+  display: flex;
+  //flex-direction: row;
+  column-gap: 4px;
+  //justify-content: flex-start;
+  color: var(--black);
+  font-size: 14px;
   //width: 64px;
-  width: 14px;
+  //width: 14px;
   height: 14px;
   //border: rgba($color: #888, $alpha: 0.2) 1px solid;
   border-radius: 5px;
   margin-right: 10px;
-  background-size: cover;
-  background-position: center;
-  background-color: var(--white);
+  //background-size: cover;
+  //background-position: center;
+  //background-color: var(--white);
+  
+  .attach-file-icon {
+    width: 32px;
+  }
 
   .attach-image-mask {
     width: 100%;
@@ -86,11 +96,11 @@
     width: 24px;
     height: 24px;
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    //display: flex;
+    //align-items: center;
+    //justify-content: center;
     border-radius: 5px;
-    float: right;
+    float: left;
     background-color: var(--white);
   }
 }
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 1159a22db..e467f55b6 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -98,6 +98,7 @@ import {
 } from "./ui-lib";
 import { useNavigate } from "react-router-dom";
 import { FileIcon, defaultStyles } from "react-file-icon";
+import type { DefaultExtensionType } from "react-file-icon";
 import {
   CHAT_PAGE_SIZE,
   DEFAULT_TTS_ENGINE,
@@ -2030,13 +2031,20 @@ function _Chat() {
             {attachFiles.length != 0 && (
               <div className={styles["attach-files"]}>
                 {attachFiles.map((file, index) => {
+                  const extension: DefaultExtensionType = file
+                    .split(".")
+                    .pop()
+                    ?.toLowerCase() as DefaultExtensionType;
+                  const style = defaultStyles[extension];
                   return (
-                    <div
-                      key={index}
-                      className={styles["attach-file"]}
-                      style={{ backgroundImage: `url("${file}")` }}
-                    >
-                      <FileIcon extension="csv" {...defaultStyles["csv"]} />
+                    <div key={index} className={styles["attach-file"]}>
+                      <div
+                        className={styles["attach-file-icon"]}
+                        key={extension}
+                      >
+                        <FileIcon {...style} />
+                      </div>
+                      <span>{extension}</span>
                       <div className={styles["attach-image-mask"]}>
                         <DeleteImageButton
                           deleteImage={() => {