diff --git a/components/attachment-preview.tsx b/components/attachment-preview.tsx
new file mode 100644
index 0000000000..8c76198fd5
--- /dev/null
+++ b/components/attachment-preview.tsx
@@ -0,0 +1,29 @@
+import { X } from 'lucide-react';
+import { Button } from './ui/button';
+import { Attachment } from 'ai';
+
+interface AttachmentPreviewProps {
+  attachment: Attachment;
+  onRemove: () => void;
+}
+
+export function AttachmentPreview({
+  attachment,
+  onRemove,
+}: AttachmentPreviewProps) {
+  return (
+    <div className="relative inline-block group">
+      <div className="flex items-center gap-2 p-2 rounded-md bg-muted">
+        <span className="text-sm text-muted-foreground">{attachment.name}</span>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={onRemove}
+        >
+          <X className="h-3 w-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/chat.tsx b/components/chat.tsx
index 2a919b1feb..13538dcdbd 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -15,6 +15,7 @@ import { useArtifactSelector } from '@/hooks/use-artifact';
 import { toast } from 'sonner';
 import { unstable_serialize } from 'swr/infinite';
 import { getChatHistoryPaginationKey } from './sidebar-history';
+import { AttachmentPreview } from './attachment-preview';
 
 export function Chat({
   id,
@@ -85,7 +86,22 @@ export function Chat({
           isArtifactVisible={isArtifactVisible}
         />
 
-        <form className="flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
+        <form className="flex flex-col mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
+          {attachments.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-2">
+              {attachments.map((attachment, index) => (
+                <AttachmentPreview
+                  key={`attachment-${index}`}
+                  attachment={attachment}
+                  onRemove={() => {
+                    const newAttachments = [...attachments];
+                    newAttachments.splice(index, 1);
+                    setAttachments(newAttachments);
+                  }}
+                />
+              ))}
+            </div>
+          )}
           {!isReadonly && (
             <MultimodalInput
               chatId={id}