diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
new file mode 100644
index 000000000..496ab3c30
--- /dev/null
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/fileCardWrapper/index.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import ForwardedIconComponent from "../../../../../../../components/genericIconComponent";
+import formatFileName from "../../../filePreviewChat/utils/format-file-name";
+import FileCard from "../../../fileComponent";
+
+export default function FileCardWrapper({
+  index,
+  name,
+  type,
+  path,
+}: {
+  index: number;
+  name: string;
+  type: string;
+  path: string;
+}) {
+  const [show, setShow] = useState<boolean>(true);
+  return (
+    <div key={index} className="flex flex-col gap-2">
+      <span
+        onClick={() => setShow(!show)}
+        className="flex cursor-pointer gap-2 text-sm text-muted-foreground"
+      >
+        {formatFileName(name, 50)}
+        <ForwardedIconComponent name={show ? "ChevronDown" : "ChevronRight"} />
+      </span>
+      <FileCard
+        showFile={show}
+        fileName={name}
+        fileType={type}
+        content={path}
+      />
+    </div>
+  );
+}
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 2f7faac99..8c03226fb 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/index.tsx
@@ -17,6 +17,7 @@ import { chatMessagePropsType } from "../../../../../types/components";
 import { classNames, cn } from "../../../../../utils/utils";
 import FileCard from "../fileComponent";
 import formatFileName from "../filePreviewChat/utils/format-file-name";
+import FileCardWrapper from "./components/fileCardWrapper";
 
 export default function ChatMessage({
   chat,
@@ -325,23 +326,12 @@ dark:prose-invert"
                   <div className="my-2 flex  flex-col gap-5">
                     {chat.files.map((file, index) => {
                       return (
-                        <div key={index} className="flex flex-col gap-2">
-                          <span
-                            onClick={() => setShowFile(!showFile)}
-                            className="flex cursor-pointer gap-2 text-sm text-muted-foreground"
-                          >
-                            {formatFileName(file.name, 50)}
-                            <ForwardedIconComponent
-                              name={showFile ? "ChevronDown" : "ChevronRight"}
-                            />
-                          </span>
-                          <FileCard
-                            showFile={showFile}
-                            fileName={file.name}
-                            fileType={file.type}
-                            content={file.path}
-                          />
-                        </div>
+                        <FileCardWrapper
+                          index={index}
+                          name={file.name}
+                          type={file.type}
+                          path={file.path}
+                        />
                       );
                     })}
                   </div>