diff --git a/package.json b/package.json
index 71ce12f..c9107c2 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "paneforge": "^0.0.6",
     "pathe": "^1.1.2",
     "shiki": "^1.21.0",
+    "svelte-lightbox": "^1.1.3",
     "svelte-radix": "^1.1.1",
     "svelte-sonner": "^0.3.28",
     "sveltekit-superforms": "^2.19.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af49a22..7e4d1b4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -140,6 +140,9 @@ importers:
       shiki:
         specifier: ^1.21.0
         version: 1.21.0
+      svelte-lightbox:
+        specifier: ^1.1.3
+        version: 1.1.3(svelte@4.2.19)
       svelte-radix:
         specifier: ^1.1.1
         version: 1.1.1(svelte@4.2.19)
@@ -3857,6 +3860,11 @@ packages:
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
 
+  svelte-lightbox@1.1.3:
+    resolution: {integrity: sha512-pPkNo89nUFEgOvIUZZA2CUSZpABp/LkR3vZz5gD+Sv0q1kmP0AcdQQquenuLyZcSigth0iqBFCd/bB3LSPMejg==}
+    peerDependencies:
+      svelte: ^3.25.0 || ^4.0.0
+
   svelte-preprocess@5.1.4:
     resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
     engines: {node: '>= 16.0.0'}
@@ -8190,6 +8198,10 @@ snapshots:
     dependencies:
       svelte: 4.2.19
 
+  svelte-lightbox@1.1.3(svelte@4.2.19):
+    dependencies:
+      svelte: 4.2.19
+
   svelte-preprocess@5.1.4(postcss-load-config@4.0.2(postcss@8.4.47))(postcss@8.4.47)(svelte@4.2.19)(typescript@5.6.2):
     dependencies:
       '@types/pug': 2.0.10
diff --git a/src/lib/components/chat/ChatWindow.svelte b/src/lib/components/chat/ChatWindow.svelte
index a4c91f1..73762c2 100644
--- a/src/lib/components/chat/ChatWindow.svelte
+++ b/src/lib/components/chat/ChatWindow.svelte
@@ -18,7 +18,8 @@
   import { cn } from '$lib/utils/ui'
   import { dataURItoBlob } from '$lib/utils/datauri'
   import { nanoid } from 'nanoid'
-    
+  import { LightboxGallery, GalleryImage } from 'svelte-lightbox'
+
   export let messages: Message[] = []
   export let loading = false
   export let pending = false
@@ -100,6 +101,18 @@
   const onDeleteImage = (index: number) => {
     images = images.filter((_, i) => i !== index)
   }
+
+  let isLightboxOpen = false
+  let lightboxIndex = 0
+
+  function openLightbox(index: number) {
+    isLightboxOpen = true
+    lightboxIndex = index
+  }
+
+  function closeLightbox() {
+    isLightboxOpen = false
+  }
 </script>
 
 <div class="relative h-full">
@@ -144,11 +157,16 @@
         >
           {#each images as image, index}
             <div class="flex-shrink-0 w-14 h-14 relative">
-              <img
-                src={image.url}
-                class="w-full h-full object-cover rounded-lg"
-                alt={image.name}
-              />
+              <button
+                class="w-full h-full"
+                on:click={() => openLightbox(index)}
+              >
+                <img
+                  src={image.url}
+                  class="w-full h-full object-cover rounded-lg"
+                  alt={image.name}
+                />
+              </button>
               <button
                 class="absolute top-0 right-0"
                 on:click={() => onDeleteImage(index)}
@@ -205,3 +223,17 @@
     </div>
   </div>
 </div>
+
+<LightboxGallery bind:isVisible={isLightboxOpen} activeImage={lightboxIndex}>
+  {#each images as image}
+    <GalleryImage>
+      <img src={image.url} alt={image.name} />
+    </GalleryImage>
+  {/each}
+</LightboxGallery>
+
+<style>
+  :global(.svelte-lightbox-body svg) {
+    display: inline-block;
+  }
+</style>