diff --git a/plants/templates/plants/partials/photo_gallery.html b/plants/templates/plants/partials/photo_gallery.html
index a59ec96..5a68e3e 100644
--- a/plants/templates/plants/partials/photo_gallery.html
+++ b/plants/templates/plants/partials/photo_gallery.html
@@ -38,8 +38,10 @@
           hx-encoding="multipart/form-data" hx-indicator="#photo-upload-spinner">
         {% csrf_token %}
         <div class="d-flex gap-2 align-items-center flex-wrap">
-            <input type="file" name="image" accept="image/*"
-                   class="form-control form-control-sm" style="max-width:220px;">
+            <label class="btn btn-sm btn-outline-secondary mb-0" for="photo-upload-input">📷 Choose photo</label>
+            <input type="file" id="photo-upload-input" name="image" accept="image/*" class="d-none"
+                   onchange="document.getElementById('photo-filename').textContent = this.files[0]?.name || ''">
+            <span id="photo-filename" class="text-muted small"></span>
             <button type="submit" class="btn btn-sm btn-outline-secondary">Upload</button>
             <span id="photo-upload-spinner" class="htmx-indicator text-muted small">Uploading…</span>
         </div>