diff --git a/app/actions.tsx b/app/actions.tsx
index a2aa182d..19bf0844 100644
--- a/app/actions.tsx
+++ b/app/actions.tsx
@@ -128,9 +128,16 @@ async function submit(formData?: FormData, skip?: boolean) {
       isCollapsed: isCollapsed.value,
     };
   }
-  const file = !skip ? (formData?.get('file') as File) : undefined
+  const files: File[] = []
+  if (formData && !skip) {
+    for (const [key, value] of formData.entries()) {
+      if (key.startsWith('files[')) {
+        files.push(value as File)
+      }
+    }
+  }
 
-  if (!userInput && !file) {
+  if (!userInput && files.length === 0) {
     isGenerating.done(false)
     return {
       id: nanoid(),
@@ -144,31 +151,31 @@ async function submit(formData?: FormData, skip?: boolean) {
     type: 'text' | 'image'
     text?: string
     image?: string
-    mimeType?: string
   }[] = []
 
   if (userInput) {
     messageParts.push({ type: 'text', text: userInput })
   }
 
-  if (file) {
-    const buffer = await file.arrayBuffer()
-    if (file.type.startsWith('image/')) {
-      const dataUrl = `data:${file.type};base64,${Buffer.from(
-        buffer
-      ).toString('base64')}`
-      messageParts.push({
-        type: 'image',
-        image: dataUrl,
-        mimeType: file.type
-      })
-    } else if (file.type === 'text/plain') {
-      const textContent = Buffer.from(buffer).toString('utf-8')
-      const existingTextPart = messageParts.find(p => p.type === 'text')
-      if (existingTextPart) {
-        existingTextPart.text = `${textContent}\n\n${existingTextPart.text}`
-      } else {
-        messageParts.push({ type: 'text', text: textContent })
+  if (files.length > 0) {
+    for (const file of files) {
+      const buffer = await file.arrayBuffer()
+      if (file.type.startsWith('image/')) {
+        const dataUrl = `data:${file.type};base64,${Buffer.from(
+          buffer
+        ).toString('base64')}`
+        messageParts.push({
+          type: 'image',
+          image: dataUrl
+        })
+      } else if (file.type === 'text/plain') {
+        const textContent = Buffer.from(buffer).toString('utf-8')
+        const existingTextPart = messageParts.find(p => p.type === 'text')
+        if (existingTextPart) {
+          existingTextPart.text = `${textContent}\n\n${existingTextPart.text}`
+        } else {
+          messageParts.push({ type: 'text', text: textContent })
+        }
       }
     }
   }
@@ -180,7 +187,7 @@ async function submit(formData?: FormData, skip?: boolean) {
 
   const type = skip
     ? undefined
-    : formData?.has('input') || formData?.has('file')
+    : formData?.has('input') || files.length > 0
     ? 'input'
     : formData?.has('related_query')
     ? 'input_related'
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index b0bf2166..9f87c273 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -3,13 +3,13 @@
 import { useEffect, useState, useRef, ChangeEvent, forwardRef, useImperativeHandle } from 'react'
 import type { AI, UIState } from '@/app/actions'
 import { useUIState, useActions } from 'ai/rsc'
-// Removed import of useGeospatialToolMcp as it's no longer used/available
 import { cn } from '@/lib/utils'
 import { UserMessage } from './user-message'
 import { Button } from './ui/button'
 import { ArrowRight, Plus, Paperclip, X } from 'lucide-react'
 import Textarea from 'react-textarea-autosize'
 import { nanoid } from 'nanoid'
+import Image from 'next/image'
 
 interface ChatPanelProps {
   messages: UIState
@@ -24,9 +24,8 @@ export interface ChatPanelRef {
 export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, input, setInput }, ref) => {
   const [, setMessages] = useUIState<typeof AI>()
   const { submit, clearChat } = useActions()
-  // Removed mcp instance as it's no longer passed to submit
   const [isMobile, setIsMobile] = useState(false)
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([])
   const inputRef = useRef<HTMLTextAreaElement>(null)
   const formRef = useRef<HTMLFormElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -48,22 +47,43 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
   }, [])
 
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      if (file.size > 10 * 1024 * 1024) {
-        alert('File size must be less than 10MB')
-        return
-      }
-      setSelectedFile(file)
+    const files = e.target.files
+    if (files) {
+      const newFiles = Array.from(files).filter(file => {
+        if (file.size > 10 * 1024 * 1024) {
+          alert(`File ${file.name} is too large (max 10MB)`)
+          return false
+        }
+        return true
+      })
+      setSelectedFiles(prevFiles => [...prevFiles, ...newFiles])
     }
   }
 
+  // Automatically submit the form when a file is selected on mobile
+  useEffect(() => {
+    if (selectedFiles.length > 0 && isMobile) {
+      // Only auto-submit if there wasn't text before, to avoid interrupting typing
+      if (input.trim() === '') {
+        formRef.current?.requestSubmit()
+      }
+    }
+  }, [selectedFiles, isMobile, input])
+
   const handleAttachmentClick = () => {
     fileInputRef.current?.click()
   }
 
-  const clearAttachment = () => {
-    setSelectedFile(null)
+  const removeAttachment = (index: number) => {
+    setSelectedFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
+    // Reset file input value to allow re-selecting the same file
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const clearAllAttachments = () => {
+    setSelectedFiles([])
     if (fileInputRef.current) {
       fileInputRef.current.value = ''
     }
@@ -71,7 +91,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    if (!input && !selectedFile) {
+    if (!input && selectedFiles.length === 0) {
       return
     }
 
@@ -79,12 +99,15 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
     if (input) {
       content.push({ type: 'text', text: input })
     }
-    if (selectedFile && selectedFile.type.startsWith('image/')) {
-      content.push({
-        type: 'image',
-        image: URL.createObjectURL(selectedFile)
-      })
-    }
+    selectedFiles.forEach(file => {
+        if (file.type.startsWith('image/')) {
+            content.push({
+                type: 'image',
+                image: URL.createObjectURL(file)
+            })
+        }
+    })
+
 
     setMessages(currentMessages => [
       ...currentMessages,
@@ -95,12 +118,14 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
     ])
 
     const formData = new FormData(e.currentTarget)
-    if (selectedFile) {
-      formData.append('file', selectedFile)
+    if (selectedFiles.length > 0) {
+      selectedFiles.forEach((file, index) => {
+        formData.append(`files[${index}]`, file)
+      })
     }
 
     setInput('')
-    clearAttachment()
+    clearAllAttachments()
 
     const responseMessage = await submit(formData)
     setMessages(currentMessages => [...currentMessages, responseMessage as any])
@@ -108,7 +133,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
 
   const handleClear = async () => {
     setMessages([])
-    clearAttachment()
+    clearAllAttachments()
     await clearChat()
   }
 
@@ -149,16 +174,32 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
           : 'sticky bottom-0 bg-background z-10 w-full border-t border-border px-2 py-3 md:px-4'
       )}
     >
-      {selectedFile && (
+      {selectedFiles.length > 0 && (
         <div className="w-full px-4 pb-2">
-          <div className="flex items-center justify-between p-2 bg-muted rounded-lg">
-            <span className="text-sm text-muted-foreground truncate max-w-xs">
-              {selectedFile.name}
-            </span>
-            <Button variant="ghost" size="icon" onClick={clearAttachment}>
-              <X size={16} />
-            </Button>
-          </div>
+            <div className="flex items-center space-x-2 overflow-x-auto">
+                {selectedFiles.map((file, index) => (
+                    <div
+                        key={index}
+                        className="flex-shrink-0 relative w-20 h-20 bg-muted rounded-lg p-1"
+                    >
+                        <Image
+                            src={URL.createObjectURL(file)}
+                            alt={file.name}
+                            width={80}
+                            height={80}
+                            className="w-full h-full object-cover rounded-md"
+                        />
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute top-0 right-0 h-6 w-6 bg-background/50 hover:bg-background/75"
+                            onClick={() => removeAttachment(index)}
+                        >
+                            <X size={12} />
+                        </Button>
+                    </div>
+                ))}
+            </div>
         </div>
       )}
       <form
@@ -180,7 +221,8 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             ref={fileInputRef}
             onChange={handleFileChange}
             className="hidden"
-            accept="text/plain,image/png,image/jpeg,image/webp"
+            accept="image/png,image/jpeg,image/webp"
+            multiple
           />
           {!isMobile && (
             <Button
@@ -219,7 +261,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
                 !e.shiftKey &&
                 !e.nativeEvent.isComposing
               ) {
-                if (input.trim().length === 0 && !selectedFile) {
+                if (input.trim().length === 0 && selectedFiles.length === 0) {
                   e.preventDefault()
                   return
                 }
@@ -245,7 +287,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
               'absolute top-1/2 transform -translate-y-1/2',
               isMobile ? 'right-1' : 'right-2'
             )}
-            disabled={input.length === 0 && !selectedFile}
+            disabled={input.length === 0 && selectedFiles.length === 0}
             aria-label="Send message"
           >
             <ArrowRight size={isMobile ? 18 : 20} />
@@ -255,4 +297,4 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
     </div>
   )
 })
-ChatPanel.displayName = 'ChatPanel'
+ChatPanel.displayName = 'ChatPanel'
\ No newline at end of file
diff --git a/components/user-message.tsx b/components/user-message.tsx
index 03b8ea8d..397b2c06 100644
--- a/components/user-message.tsx
+++ b/components/user-message.tsx
@@ -26,23 +26,27 @@ export const UserMessage: React.FC<UserMessageProps> = ({
   // Extract text and image parts
   const textPart = contentArray.find(
     (part): part is { type: 'text'; text: string } => part.type === 'text'
-  )?.text
-  const imagePart = contentArray.find(
+  )?.text;
+  const imageParts = contentArray.filter(
     (part): part is { type: 'image'; image: string } => part.type === 'image'
-  )?.image
+  );
 
   return (
     <div className="flex items-start w-full space-x-3 mt-2">
       <div className="flex-1 space-y-2">
-        {imagePart && (
-          <div className="p-2 border rounded-lg bg-muted w-fit">
-            <Image
-              src={imagePart}
-              alt="attachment"
-              width={300}
-              height={300}
-              className="max-w-xs max-h-64 rounded-md object-contain"
-            />
+        {imageParts.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {imageParts.map((imagePart, index) => (
+              <div key={index} className="p-2 border rounded-lg bg-muted w-fit">
+                <Image
+                  src={imagePart.image}
+                  alt={`attachment ${index + 1}`}
+                  width={300}
+                  height={300}
+                  className="max-w-xs max-h-64 rounded-md object-contain"
+                />
+              </div>
+            ))}
           </div>
         )}
         {textPart && <div className="text-xl break-words">{textPart}</div>}
diff --git a/dev.log b/dev.log
new file mode 100644
index 00000000..59e3b892
--- /dev/null
+++ b/dev.log
@@ -0,0 +1 @@
+$ next dev --turbo
diff --git a/jules-scratch/verification/debug_previews.png b/jules-scratch/verification/debug_previews.png
new file mode 100644
index 00000000..c94c5857
Binary files /dev/null and b/jules-scratch/verification/debug_previews.png differ
diff --git a/jules-scratch/verification/test_image_1.png b/jules-scratch/verification/test_image_1.png
new file mode 100644
index 00000000..5371d4ac
--- /dev/null
+++ b/jules-scratch/verification/test_image_1.png
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
\ No newline at end of file
diff --git a/jules-scratch/verification/test_image_2.png b/jules-scratch/verification/test_image_2.png
new file mode 100644
index 00000000..1d32a162
--- /dev/null
+++ b/jules-scratch/verification/test_image_2.png
@@ -0,0 +1 @@
+iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhso34wAAAABJRU5ErkJggg==
\ No newline at end of file
diff --git a/jules-scratch/verification/verify_multi_attachment.py b/jules-scratch/verification/verify_multi_attachment.py
new file mode 100644
index 00000000..70ae67ce
--- /dev/null
+++ b/jules-scratch/verification/verify_multi_attachment.py
@@ -0,0 +1,55 @@
+from playwright.sync_api import sync_playwright, expect
+
+def run_verification():
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        context = browser.new_context(
+            viewport={'width': 375, 'height': 812},
+            is_mobile=True,
+            user_agent='Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1'
+        )
+        page = context.new_page()
+
+        # Capture console logs
+        page.on("console", lambda msg: print(f"Browser Console: {msg.text}"))
+
+        page.goto("http://localhost:3000", timeout=60000)
+
+        # Workaround for the persistent loading overlay in the test environment
+        overlay_selector = 'div[class*="z-[9999]"]'
+        try:
+            page.wait_for_selector(overlay_selector, state='visible', timeout=15000)
+            page.evaluate(f"document.querySelector('{overlay_selector}').remove()")
+        except Exception as e:
+            print(f"Could not find or remove overlay, perhaps it's not there: {e}")
+
+
+        # Wait for the mobile layout to be visible
+        mobile_container = page.locator('div.mobile-layout-container')
+        expect(mobile_container).to_be_visible(timeout=10000)
+
+        # Directly interact with the file input element to attach multiple files
+        file_input = page.locator('input[type="file"]')
+        file_input.set_input_files([
+            "jules-scratch/verification/test_image_1.png",
+            "jules-scratch/verification/test_image_2.png"
+        ])
+
+        # Verify that the UserMessage component contains two images
+        user_message_container = page.locator('.flex-1.space-y-2').first
+        expect(user_message_container).to_be_visible(timeout=10000)
+
+        images_in_message = user_message_container.locator('img')
+        expect(images_in_message).to_have_count(2, timeout=10000)
+
+        # After the files are set, the form should auto-submit on mobile.
+        # We should wait for the AI response to appear.
+        bot_message = page.locator('div[data-message-author="bot"]')
+        expect(bot_message).to_be_visible(timeout=30000)
+
+        page.screenshot(path="jules-scratch/verification/verification.png")
+
+        browser.close()
+
+if __name__ == "__main__":
+    run_verification()
\ No newline at end of file