diff --git a/web/templates/components/icons/edit.svg b/web/templates/components/icons/edit.svg
new file mode 100644
index 0000000..b398765
--- /dev/null
+++ b/web/templates/components/icons/edit.svg
@@ -0,0 +1,5 @@
+<svg class="-ms-0.5 me-1.5 h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
+     height="24" fill="none" viewBox="0 0 24 24">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"></path>
+</svg>
\ No newline at end of file
diff --git a/web/templates/components/users/retrieve_update_address.html b/web/templates/components/users/retrieve_update_address.html
new file mode 100644
index 0000000..cb85222
--- /dev/null
+++ b/web/templates/components/users/retrieve_update_address.html
@@ -0,0 +1,166 @@
+{% load i18n %}
+{% load static %}
+{% for address in customer_addresses %}
+<form id="edit_address_{{ address.pk }}" class="hidden py-2 md:py-4" hx-post="" hx-swap="none">
+    {% csrf_token %}
+    <div class="mb-4 grid gap-4 sm:grid-cols-2 sm:gap-8 lg:gap-16">
+        <div class="space-y-4">
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">
+                    <label for="address_full_name">
+                        {% translate 'Nombre completo' %}
+                    </label>
+                </dt>
+                <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                                  focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700
+                                  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500
+                                  dark:focus:border-primary-500"
+                           id="address_full_name" type="text" value="{{ address.full_name }}">
+                </dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">
+                    <label for="address">
+                        {% translate 'Dirección' %}
+                    </label>
+                </dt>
+                <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                                  focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700
+                                  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500
+                                  dark:focus:border-primary-500"
+                           id="address" name="address" type="text" value="{{ address.address }}">
+                </dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">
+                    <label for="address_zip">
+                        {% translate 'Código postal' %}
+                    </label>
+                </dt>
+                <dd class="text-gray-500 dark:text-gray-400">
+                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                                  focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700
+                                  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500
+                                  dark:focus:border-primary-500"
+                           id="address_zip" name="address_zip" type="text" value="{{ address.address_zip }}">
+                </dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">
+                    <label for="address_phone">
+                        {% translate 'Teléfono' %}
+                    </label>
+                </dt>
+                <dd class="text-gray-500 dark:text-gray-400">
+                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                                  focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700
+                                  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500
+                                  dark:focus:border-primary-500"
+                           id="address_phone" name="address_phone" type="text" value="{{ address.address_phone }}">
+                </dd>
+            </dl>
+        </div>
+        <div class="space-y-4">
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">
+                    <label for="address_town">
+                        {% translate 'Localidad' %}
+                    </label>
+                </dt>
+                <dd class="text-gray-500 dark:text-gray-400">
+                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                                  focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700
+                                  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500
+                                  dark:focus:border-primary-500"
+                           id="address_town" name="address_town" type="text" value="{{ address.address_town }}">
+                </dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">
+                    <label for="address_state">
+                        {% translate 'Provincia' %}
+                    </label>
+                </dt>
+                <dd class="text-gray-500 dark:text-gray-400">
+                    <input class="my-2 bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg
+                                  focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700
+                                  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500
+                                  dark:focus:border-primary-500"
+                           id="address_state" name="address_state" type="text" value="{{ address.address_state }}">
+                </dd>
+            </dl>
+        </div>
+    </div>
+
+
+    <div class="flex justify-end">
+        <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none
+                   focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600
+                   dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+        >
+            {% translate 'Actualizar datos' %}
+        </button>
+    </div>
+
+</form>
+
+<div id="details_address_{{ address.pk }}" class="py-2 md:py-4">
+    <div class="mb-4 grid gap-4 sm:grid-cols-2 sm:gap-8 lg:gap-16">
+        <div class="space-y-4">
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</dt>
+                <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                    {{ address.full_name }}
+                </dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Dirección' %}</dt>
+                <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+                    {{ address.address }}
+                </dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Código postal' %}</dt>
+                <dd class="text-gray-500 dark:text-gray-400">{{ address.address_zip }}</dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Teléfono' %}</dt>
+                <dd class="text-gray-500 dark:text-gray-400">{{ address.address_phone }}</dd>
+            </dl>
+        </div>
+        <div class="space-y-4">
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Localidad' %}</dt>
+                <dd class="text-gray-500 dark:text-gray-400">{{ address.address_town }}</dd>
+            </dl>
+            <dl>
+                <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Provincia' %}</dt>
+                <dd class="text-gray-500 dark:text-gray-400">{{ address.address_state }}</dd>
+            </dl>
+        </div>
+    </div>
+    <div class="flex justify-end">
+        <button hx-on:click="htmx.toggleClass(htmx.find('#edit_address_{{ address.pk }}'), 'hidden'); htmx.toggleClass(htmx.find('#details_address_{{ address.pk }}'), 'hidden')"
+                type="button"
+                data-modal-target="accountInformationModal2" data-modal-toggle="accountInformationModal2"
+                class="inline-flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm
+                       font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300
+                       dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto"
+        >
+            {% include 'components/icons/edit.svg' %}
+            {% translate 'Editar datos' %}
+        </button>
+    </div>
+
+</div>
+{% if not forloop.last %}
+<hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700">
+{% endif %}
+{% endfor %}
+
+
+
+
+
diff --git a/web/templates/users/user_details.html b/web/templates/users/user_details.html
index 5c026d2..c15a66c 100644
--- a/web/templates/users/user_details.html
+++ b/web/templates/users/user_details.html
@@ -31,58 +31,7 @@
           <span class="text-gray-500 dark:text-gray-400">{% translate 'No hay ninguna dirección' %}</span>
         {% endif %}
 
-        {% for address in customer_addresses %}
-          <div class="py-2 md:py-4">
-            <div class="mb-4 grid gap-4 sm:grid-cols-2 sm:gap-8 lg:gap-16">
-              <div class="space-y-4">
-                <dl>
-                  <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</dt>
-                  <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
-                    {{ address.full_name }}
-                  </dd>
-                </dl>
-                <dl>
-                  <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Dirección' %}</dt>
-                  <dd class="flex items-center gap-1 text-gray-500 dark:text-gray-400">
-                    {{ address.address }}
-                  </dd>
-                </dl>
-                <dl>
-                  <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Código postal' %}</dt>
-                  <dd class="text-gray-500 dark:text-gray-400">{{ address.address_zip }}</dd>
-                </dl>
-                <dl>
-                  <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Teléfono' %}</dt>
-                  <dd class="text-gray-500 dark:text-gray-400">{{ address.address_phone }}</dd>
-                </dl>
-              </div>
-              <div class="space-y-4">
-                <dl>
-                  <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Localidad' %}</dt>
-                  <dd class="text-gray-500 dark:text-gray-400">{{ address.address_town }}</dd>
-                </dl>
-                <dl>
-                  <dt class="font-semibold text-gray-900 dark:text-white">{% translate 'Provincia' %}</dt>
-                  <dd class="text-gray-500 dark:text-gray-400">{{ address.address_state }}</dd>
-                </dl>
-
-              </div>
-            </div>
-            <button hx-on:click="htmx.toggleClass(htmx.find('#accountInformationModal2'), 'hidden')" type="button"
-                    data-modal-target="accountInformationModal2" data-modal-toggle="accountInformationModal2"
-                    class="inline-flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-auto">
-              <svg class="-ms-0.5 me-1.5 h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24"
-                   height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"></path>
-              </svg>
-              {% translate 'Editar datos' %}
-            </button>
-          </div>
-          {% if not forloop.last %}
-            <hr class="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700">
-          {% endif %}
-        {% endfor %}
+        {% include 'components/users/retrieve_update_address.html' %}
       </div>
     </div>