diff --git a/po/ca.po b/po/ca.po
index 25af991..db760ed 100644
--- a/po/ca.po
+++ b/po/ca.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-09-22 00:56+0200\n"
+"POT-Creation-Date: 2023-09-22 02:03+0200\n"
 "PO-Revision-Date: 2023-07-22 23:45+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Catalan <ca@dodds.net>\n"
@@ -810,11 +810,11 @@ msgstr "No podeu deixar el format del número de factura en blanc."
 msgid "Cross-site request forgery detected."
 msgstr "S’ha detectat un intent de falsificació de petició a llocs creuats."
 
-#: pkg/media/admin.go:278
+#: pkg/media/admin.go:265
 msgid "Uploaded file can not be empty."
 msgstr "No podeu deixar el fitxer del mèdia en blanc."
 
-#: pkg/media/admin.go:337
+#: pkg/media/admin.go:324
 msgid "Filename can not be empty."
 msgstr "No podeu deixar el nom del fitxer."
 
diff --git a/po/es.po b/po/es.po
index 8161a5c..e18a273 100644
--- a/po/es.po
+++ b/po/es.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-09-22 00:56+0200\n"
+"POT-Creation-Date: 2023-09-22 02:03+0200\n"
 "PO-Revision-Date: 2023-07-22 23:46+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Spanish <es@tp.org.es>\n"
@@ -810,11 +810,11 @@ msgstr "No podéis dejar el formato de número de factura en blanco."
 msgid "Cross-site request forgery detected."
 msgstr "Se ha detectado un intento de falsificación de petición en sitios cruzados."
 
-#: pkg/media/admin.go:278
+#: pkg/media/admin.go:265
 msgid "Uploaded file can not be empty."
 msgstr "No podéis dejar el archivo del medio en blanco."
 
-#: pkg/media/admin.go:337
+#: pkg/media/admin.go:324
 msgid "Filename can not be empty."
 msgstr "No podéis dejar el nombre del archivo en blanco."
 
diff --git a/web/static/camper.css b/web/static/camper.css
index fdbb7fe..0e7605c 100644
--- a/web/static/camper.css
+++ b/web/static/camper.css
@@ -7,7 +7,7 @@
     box-sizing: border-box;
 }
 
-* {
+*:not(dialog) {
     margin: 0;
 }
 
@@ -67,3 +67,25 @@ a.missing-translation {
 .media-grid img {
     object-fit: cover;
 }
+
+.media-picker {
+    min-width: 75vw;
+}
+
+.media-picker, .media-picker header, .media-picker footer {
+    background-color: white;
+}
+
+.media-picker header, .media-picker footer {
+    position: sticky;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.media-picker header {
+    top: -1em;
+}
+
+.media-picker footer {
+    bottom: -1em;
+}
diff --git a/web/static/camper.js b/web/static/camper.js
index 3b8a0d1..c4762cd 100644
--- a/web/static/camper.js
+++ b/web/static/camper.js
@@ -134,3 +134,10 @@ function camperUploadForm(el) {
         }
     });
 }
+
+htmx.onLoad((target) => {
+    if (target.tagName === 'DIALOG') {
+        target.showModal();
+    }
+})
+
diff --git a/web/templates/admin/form.gohtml b/web/templates/admin/form.gohtml
index 32bfe53..f1d2512 100644
--- a/web/templates/admin/form.gohtml
+++ b/web/templates/admin/form.gohtml
@@ -21,7 +21,10 @@
     <fieldset data-hx-target="this" data-hx-swap="outerHTML">
         <legend>{{( pgettext .Label "input" )}}</legend>
         <input type="hidden" name="{{ .Name }}" value="{{ .Val }}">
-        <button class="media-picker" type="button" data-hx-get="/admin/media/picker?name={{ .Name | queryEscape }}&amp;value={{ .Val | queryEscape }}&amp;label={{ .Label | queryEscape }}&amp;prompt={{ .Prompt | queryEscape }}">
+        <button type="button"
+                data-hx-get="/admin/media/picker?name={{ .Name | queryEscape }}&amp;value={{ .Val | queryEscape }}&amp;label={{ .Label | queryEscape }}&amp;prompt={{ .Prompt | queryEscape }}"
+                data-hx-swap="beforeend"
+        >
             {{ if .Val -}}
                 <img src="/admin/media/{{ .Val }}/content" alt="">
             {{ else -}}
diff --git a/web/templates/admin/media/picker.gohtml b/web/templates/admin/media/picker.gohtml
index ed30658..7c172e0 100644
--- a/web/templates/admin/media/picker.gohtml
+++ b/web/templates/admin/media/picker.gohtml
@@ -2,7 +2,7 @@
  SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
  SPDX-License-Identifier: AGPL-3.0-only
 -->
-<div class="media-picker" data-hx-target="this" data-hx-swap="outerHTML">
+<dialog class="media-picker">
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/media.mediaPicker*/ -}}
     <header>
         <h3>{{( pgettext "Media Picker" "title" )}}</h3>
@@ -58,4 +58,4 @@
             <button name="value" value="{{ .Field.Val }}" type="submit">{{( pgettext "Cancel" "action" )}}</button>
         </footer>
     </form>
-</div>
+</dialog>