diff --git a/hypn0/hypn0_site/services/halftone.py b/hypn0/hypn0_site/services/halftone.py
index b091c25..d613391 100644
--- a/hypn0/hypn0_site/services/halftone.py
+++ b/hypn0/hypn0_site/services/halftone.py
@@ -86,7 +86,7 @@ def generate_shape_def(shape: str, radius: int, shape_id: str) -> str:
 def generate_halftone_svg(
     image: Union[Image.Image, BinaryIO, bytes, str],
     *,
-    cols: int = 80,
+    cols: int = 35,
     max_radius: int = 8,
     shape: str = "circle",
     color: str = "#a855ff",
diff --git a/hypn0/hypn0_site/tests.py b/hypn0/hypn0_site/tests.py
index cf9a1b3..7420506 100644
--- a/hypn0/hypn0_site/tests.py
+++ b/hypn0/hypn0_site/tests.py
@@ -120,6 +120,9 @@ class HalftoneViewTests(TestCase):
         self.assertContains(response, 'id="preview"')
         self.assertContains(response, 'name="csrfmiddlewaretoken"')
         self.assertContains(response, 'X-CSRFToken')
+        self.assertContains(response, "handleFileChange")
+        self.assertContains(response, "imagePreviewUrl")
+        self.assertContains(response, "Гипножаба облизывается на:")
         # Проверяем, что csrf_token не пустой в hx-headers
         content = response.content.decode("utf-8")
         self.assertNotIn('hx-headers=\'{"X-CSRFToken": ""}\'', content)
diff --git a/hypn0/templates/index.html b/hypn0/templates/index.html
index 77ef8c1..268e18d 100644
--- a/hypn0/templates/index.html
+++ b/hypn0/templates/index.html
@@ -22,9 +22,29 @@
          isLoading: false,   /* Идет ли процесс генерации SVG (индикация, блокировка) */
          hasChanges: true,   /* Флаг наличия правок в форме для активности кнопки */
          hasImage: false,    /* Флаг загрузки пользовательского файла */
+         fileName: '',       /* Имя выбранного файла */
+         imagePreviewUrl: null, /* Превью загруженного файла (Blob URL) */
          timer: null,        /* Ссылка на таймер удержания анимации размышления */
          copied: false,      /* Флаг успешного копирования в буфер */
 
+         /* Обработка выбора файла (превью + имя) */
+         handleFileChange(event) {
+           const files = event.target.files;
+           if (files && files.length > 0) {
+             const file = files[0];
+             this.hasImage = true;
+             this.fileName = file.name;
+             if (this.imagePreviewUrl) URL.revokeObjectURL(this.imagePreviewUrl);
+             this.imagePreviewUrl = URL.createObjectURL(file);
+           } else {
+             this.hasImage = false;
+             this.fileName = '';
+             if (this.imagePreviewUrl) URL.revokeObjectURL(this.imagePreviewUrl);
+             this.imagePreviewUrl = null;
+           }
+           this.hasChanges = true;
+         },
+
          /* Метод запуска состояния размышления (8 секунд) */
          startThinking() {
            this.isLoading = true;
@@ -91,15 +111,30 @@
           <label class="block text-sm font-bold mb-2 uppercase tracking-wider text-stone-500 dark:text-zinc-400">Источник</label>
           <div class="relative group">
             <input type="file" name="image" accept="image/*"
-                   @change="hasImage = $el.files.length > 0; hasChanges = true"
+                   @change="handleFileChange($event)"
                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
             <div
-              class="border-2 border-dashed border-stone-300 dark:border-zinc-700 group-hover:border-emerald-500 rounded-xl p-8 flex flex-col items-center justify-center text-center transition-colors">
-              <span class="text-stone-400 group-hover:text-emerald-500 flex flex-col items-center gap-3">
+              :class="hasImage ? 'border-emerald-500 bg-emerald-50/20 dark:bg-emerald-950/20' : 'border-stone-300 dark:border-zinc-700'"
+              class="border-2 border-dashed group-hover:border-emerald-500 rounded-xl p-6 flex flex-col items-center justify-center text-center transition-all">
+              
+              <!-- Состояние 1: Файл не выбран -->
+              <div x-show="!hasImage" class="text-stone-400 group-hover:text-emerald-500 flex flex-col items-center gap-3 transition-colors">
                 <svg class="w-20 h-20 fill-current transition-colors opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                   <path d="M477 174c8.812-13.708 13.948-29.993 13.948-47.466 0-48.55-39.499-88.048-88.05-88.048-32.839 0-61.516 18.084-76.651 44.803-22.773-5.031-46.356-7.586-70.424-7.586-24.003 0-47.624 2.55-70.427 7.582-15.135-26.717-43.813-44.799-76.65-44.799-48.55 0-88.048 39.498-88.048 88.049 0 17.473 5.137 33.759 13.949 47.467C11.987 204.676 0 239.016 0 274.61c0 53.849 27.194 104.194 76.573 141.763C124.677 452.97 188.399 473.125 256 473.125s131.323-20.155 179.427-56.753C484.806 378.803 512 328.457 512 274.609c0-35.59-11.986-69.935-34.822-100.219zM403.076 70.224c31.266 0 56.703 25.436 56.703 56.701s-25.437 56.702-56.703 56.702-56.701-25.436-56.701-56.702 25.436-56.701 56.701-56.701zm-294.152 0c31.266 0 56.703 25.436 56.703 56.701s-25.437 56.702-56.703 56.702-56.701-25.436-56.701-56.702 25.435-56.701 56.701-56.701zM56.629 197.71a87.57 87.57 0 0 0 52.294 17.264c48.55 0 88.05-39.498 88.05-88.049a88.25 88.25 0 0 0-1.02-13.409c19.464-4.03 39.588-6.075 60.047-6.075 20.515 0 40.613 2.041 60.048 6.068-.672 4.376-1.021 8.857-1.021 13.417 0 48.55 39.498 88.049 88.049 88.049 19.568 0 37.66-6.424 52.294-17.263 15.157 21.633 23.712 45.416 25.08 69.911-23.821 20.076-49.402 34.122-79.949 43.943-38.207 12.281-85.474 18.252-144.5 18.252s-106.292-5.971-144.499-18.253c-30.549-9.821-56.132-23.869-79.952-43.945 1.369-24.496 9.921-48.278 25.079-69.91zm199.372 244.067c-107.337 0-197.317-56.31-219.433-131.312 19.882 13.102 41.246 23.196 65.34 30.94 41.355 13.295 91.76 19.758 154.094 19.758s112.738-6.463 154.095-19.758c24.092-7.745 45.456-17.839 65.338-30.939-22.12 75.002-112.099 131.311-219.434 131.311z"/><use href="#B"/><use href="#B" x="294.153"/><path d="M219.852 256.624c-9.79 0-17.756 8.048-17.756 17.986s7.966 17.992 17.756 17.992c9.802 0 17.767-8.055 17.767-17.992s-7.965-17.986-17.767-17.986zm72.163-.14c-9.885 0-17.902 8.115-17.902 18.126s8.017 18.126 17.902 18.126c9.872 0 17.89-8.115 17.89-18.126s-8.018-18.126-17.89-18.126z"/><defs><path id="B" d="M108.931 105.926c-11.45 0-20.738 9.401-20.738 20.998s9.288 20.998 20.738 20.998c11.436 0 20.725-9.401 20.725-20.998s-9.289-20.998-20.725-20.998z"/></defs></svg>
                 <span>Покорми Гипнoжабу,<br />притащи сюда img или&nbsp;кликни</span>
-              </span>
+              </div>
+
+              <!-- Состояние 2: Файл выбран -->
+              <div x-show="hasImage" class="flex flex-col items-center gap-3 text-emerald-600 dark:text-emerald-400">
+                <img :src="imagePreviewUrl" alt="Превью"
+                     class="w-24 h-24 object-cover rounded-xl border-2 border-emerald-500 shadow-md">
+                <div class="text-xs font-mono">
+                  <p class="font-bold">Гипножаба облизывается на:</p>
+                  <p class="truncate max-w-[260px] text-stone-700 dark:text-zinc-300 font-semibold mt-0.5" x-text="fileName"></p>
+                  <p class="text-[11px] text-stone-400 dark:text-zinc-500 mt-1">кликни или притащи другой файл, чтобы скормить</p>
+                </div>
+              </div>
+
             </div>
           </div>
         </div>