diff --git a/src/main/resources/static/android-chrome-192x192.png b/src/main/resources/static/android-chrome-192x192.png
new file mode 100644
index 0000000..9e87cd5
Binary files /dev/null and b/src/main/resources/static/android-chrome-192x192.png differ
diff --git a/src/main/resources/static/android-chrome-512x512.png b/src/main/resources/static/android-chrome-512x512.png
new file mode 100644
index 0000000..edec48d
Binary files /dev/null and b/src/main/resources/static/android-chrome-512x512.png differ
diff --git a/src/main/resources/static/apple-touch-icon.png b/src/main/resources/static/apple-touch-icon.png
new file mode 100644
index 0000000..3b0aeca
Binary files /dev/null and b/src/main/resources/static/apple-touch-icon.png differ
diff --git a/src/main/resources/static/favicon-16x16.png b/src/main/resources/static/favicon-16x16.png
new file mode 100644
index 0000000..4fd3ea0
Binary files /dev/null and b/src/main/resources/static/favicon-16x16.png differ
diff --git a/src/main/resources/static/favicon-32x32.png b/src/main/resources/static/favicon-32x32.png
new file mode 100644
index 0000000..2db5cfd
Binary files /dev/null and b/src/main/resources/static/favicon-32x32.png differ
diff --git a/src/main/resources/static/favicon.ico b/src/main/resources/static/favicon.ico
new file mode 100644
index 0000000..b8b4af2
Binary files /dev/null and b/src/main/resources/static/favicon.ico differ
diff --git a/src/main/resources/static/site.webmanifest b/src/main/resources/static/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/src/main/resources/static/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/src/main/resources/templates/certs.html b/src/main/resources/templates/certs.html
index 9b67242..f1696ff 100644
--- a/src/main/resources/templates/certs.html
+++ b/src/main/resources/templates/certs.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="es" xmlns:th="http://www.thymeleaf.org">
 
-<head th:replace="fragments/head :: head"></head>
+<head th:replace="fragments/head"></head>
 
-<body>
+<body hx-ext="response-targets, class-tools, loading-states">
     <div class="grid grid-cols-[5rem_auto]">
         <!-- Navigation Rail -->
         <div th:replace="fragments/navigation_rail :: div"></div>
@@ -19,43 +19,39 @@
                             <img class="inline-block w-[10rem] h-[10rem]" src="" />
                         </div>
                     </div>
-                    <div>
-                        <form>
+                    <div x-data="{user_dni: ''}">
+                        <form 
+                            hx-get="/certs/person" hx-target="#person-search-result"
+                            hx-target-4*="#person-search-result"
+                            hx-swap="outerHTML"
+                        >
                             <div class="relative max-w-[14rem] mx-auto">
-                                <input
-                                    id="search-dni"
-                                    class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
+                                <input id="search-dni" class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
                                             invalid:border-c-error invalid:text-c-error
                                             focus:border-c-primary outline-none font-mono
-                                            disabled:opacity-50 disabled:cursor-not-allowed"
-                                    type="text"
-                                    minLength="8"
-                                    maxLength="15"
-                                    pattern="[0-9]{8,15}"
-                                    placeholder="Número de DNI"
-                                    required
-                                />
+                                            disabled:opacity-50 disabled:cursor-not-allowed" type="text" minLength="8"
+                                    maxLength="15" pattern="[0-9]{8,15}" placeholder="Número de DNI" x-model="user_dni"
+                                    required />
 
-                                <label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
+                                <label for="search-dni"
+                                    class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
 
-                                <span
-                                    class="absolute top-[2px] right-14 rounded hover:bg-c-surface-variant"
-                                >
+                                <span class="absolute top-[2px] right-14 rounded hover:bg-c-surface-variant">
                                     <LoadingIcon class="animate-spin" fill="var(--c-on-surface)" />
                                 </span>
-                                <button
-                                    type="button"
-                                    class="absolute top-1 right-8 rounded hover:bg-c-surface-variant"
-                                >
+                                <button type="button" class="absolute top-1 right-8 rounded hover:bg-c-surface-variant">
                                     <i class="ph ph-copy inline-block w-6 text-2xl"></i>
                                 </button>
-                                <button
-                                    type="button"
-                                    class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
-                                >
+                                <button type="button" class="absolute top-1 right-1 rounded hover:bg-c-surface-variant">
                                     <i class="ph ph-x-circle inline-block w-6 text-2xl"></i>
                                 </button>
                             </div>
+
+                            <button type="submit" class="hidden"
+                                x-effect="user_dni.length >= 8? $el.click() : null"
+                            >
+                                Buscar
+                            </button>
                         </form>
 
                         <p class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none opacity-0">
diff --git a/src/main/resources/templates/fragments/head.html b/src/main/resources/templates/fragments/head.html
index d47b3de..35aa37b 100644
--- a/src/main/resources/templates/fragments/head.html
+++ b/src/main/resources/templates/fragments/head.html
@@ -11,8 +11,13 @@
 
     <!-- htmx -->
     <script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
+    <script defer src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
+    <script defer src="https://unpkg.com/htmx.org/dist/ext/class-tools.js"></script>
+    <script defer src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>
     <!-- color manager -->
     <script defer src="/colorManager.js"></script>
     <!-- Phosphor icons -->
     <link rel="stylesheet" type="text/css" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css" />
+    <!-- Alpinejs -->
+    <script src="https://unpkg.com/alpinejs" defer></script>
 </head>
\ No newline at end of file
