diff --git a/ci4/app/Views/themes/_commonPartialsBs/_modalInput.php b/ci4/app/Views/themes/_commonPartialsBs/_modalInput.php
new file mode 100644
index 00000000..159ccba8
--- /dev/null
+++ b/ci4/app/Views/themes/_commonPartialsBs/_modalInput.php
@@ -0,0 +1,24 @@
+<div class="modal fade" id="modalInput" tabindex="-1" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="modalTitle"></h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col mb-3">
+                        <label for="inputData" class="form-label"></label>
+                        <input type="number" id="inputData" class="inputData form-control" placeholder="">
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button id="modalInputBtnClose" type="button" class="btn btn-label-secondary waves-effect" data-bs-dismiss="modal">
+                    Cerrar
+                </button>
+                <button id="modalInputBtnSave" type="button" class="btn btn-primary waves-effect waves-light">Guardar cambios</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ci4/app/Views/themes/vuexy/components/direccion_presupuesto.php b/ci4/app/Views/themes/vuexy/components/direccion_presupuesto.php
deleted file mode 100644
index 7742225e..00000000
--- a/ci4/app/Views/themes/vuexy/components/direccion_presupuesto.php
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="row mb-3">
-    <div class="col-sm-5">
-        <label class="form-check-label custom-option-content">
-            <span class="custom-option-header mb-2">
-                <h6 class="fw-semibold mb-0"></h6>
-                <span class="badge bg-label-primary"></span>
-            </span>
-            <span class="custom-option-body">
-                <small class="address-direccion"></small><br>
-                <small class="address-cp"></small><br>
-                <small class="address-municipio-pais"></small><br>
-                <small class="address-telefono"></small><br>
-                <small class="address-email"></small><br>
-
-                <small class="address-palets"><i>Envío en palets</i></small><br>
-
-                <hr class="my-2">
-                <span class="d-flex">
-                    <a class="direccion-eliminar" href="javascript:void(0)">Eliminar</a>
-                </span>
-            </span>
-        </label>
-    </div>
-</div>
\ No newline at end of file
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_direcciones.php b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_direcciones.php
index e22083d0..006223e7 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_direcciones.php
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_direcciones.php
@@ -1,4 +1,4 @@
-<div class="col-12 pb-2 d-flex flex-column align-items-center">
+<div class="col-12 d-flex flex-column align-items-center">
 
     <div class="col-sm-8 mb-3 d-flex flex-column align-items-center">
         <h5 class="mb-1 fw-bold titulo"></h5>
@@ -47,7 +47,7 @@
             </div>
         </div>
 
-        <div id="divDirecciones" class="col-12 pb-2">
+        <div id="divDirecciones" class="col-sm-12 d-flex flex-column align-items-center">
 
         </div>
     </div>
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/viewPresupuestoclienteForm.php b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/viewPresupuestoclienteForm.php
index 8f7e40c4..50427912 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/viewPresupuestoclienteForm.php
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/viewPresupuestoclienteForm.php
@@ -1,12 +1,15 @@
 <?= $this->include('themes/_commonPartialsBs/datatables') ?>
 <?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
 <?= $this->include("themes/_commonPartialsBs/sweetalert") ?>
+
 <?= $this->extend('themes/vuexy/main/defaultlayout') ?>
 
 
 <?= $this->section("content") ?>
 
 <?= view("themes/vuexy/form/clientes/cliente/_clienteDireccionesForm") ?>
+<?= view("themes/_commonPartialsBs/_modalInput") ?>
+
 <div class="container-xxl flex-grow-1 container-p-y">
   <div class="col-12">
     <h3 class="card-title"><?= $boxTitle ?? $pageTitle ?></h3>
diff --git a/httpdocs/assets/js/safekat/components/tarjetaDireccionPresupuesto.js b/httpdocs/assets/js/safekat/components/tarjetaDireccionPresupuesto.js
new file mode 100644
index 00000000..c62ae516
--- /dev/null
+++ b/httpdocs/assets/js/safekat/components/tarjetaDireccionPresupuesto.js
@@ -0,0 +1,76 @@
+class tarjetaDireccion {
+
+    constructor(container, id, direccion) {
+        
+        this.container = container;
+        this.card = this.#generateHTML(id, direccion);
+        this.deleteBtn = this.card.find('.direccion-eliminar');
+        this.editBtn = this.card.find('.direccion-editar');
+    }
+
+
+    #generateHTML(id, direccion) {
+
+        // Crear los elementos usando jQuery
+        var $parent = $('<div>', { 
+            class: 'direccion-cliente col-sm-5 form-check custom-option custom-option-basic checked justify-content-center mb-4',
+            id: id 
+        });
+        
+        var $label = $('<label>', { class: 'form-check-label custom-option-content' });
+
+        var $header = $('<span>', { class: 'custom-option-header mb-2' });
+        var $name = $('<h6>', { class: 'fw-semibold mb-0', text: direccion.nombre });
+        var $unidades = $('<span>', { class: 'badge bg-label-primary unidades', text: direccion.unidades + ' unidades' });
+
+        var $body = $('<span>', { class: 'custom-option-body' });
+        var $direccion = $('<small>', { class: 'address-direccion', text: direccion.direccion });
+        var $cp = $('<small>', { class: 'address-cp', text: direccion.cp });
+        var $municipioPais = $('<small>', { class: 'address-municipio-pais', text: direccion.municipioPais });
+        var $telefono = $('<small>', { class: 'address-telefono', text: direccion.telefono });
+        var $email = $('<small>', { class: 'address-email', text: direccion.email });
+
+        var $palets = $('<small>', {class: 'address-palets', html: '<i>Envío en palets</i>'});
+        if (!direccion.palets) $palets.addClass('d-none');
+
+        var $hr = $('<hr>', { class: 'my-2' });
+        var $eliminar = $('<a>', { class: 'ms-auto direccion-eliminar', href: 'javascript:void(0)', text: 'Eliminar' });
+        var $editar = $('<a>', { class: 'me-auto direccion-editar', href: 'javascript:void(0)', text: 'Editar' });
+        var $eliminarContainer = $('<span>', { class: 'd-flex w-100 position-relative' }).append($editar, $eliminar);
+
+        // Construir la estructura del HTML
+        $header.append($name, $unidades);
+        $body.append($direccion, '<br>', $cp, '<br>', $municipioPais, '<br>', $telefono, '<br>', $email, '<br>', $palets, '<br>', $hr, $eliminarContainer);
+        $label.append($header, $body);
+        $parent.append($label);
+
+        return $parent;
+    }
+
+
+    init() {
+
+        this.container.append(this.card);
+    }
+
+
+    setDireccion(direccion) {
+        this.card.find('.address-direccion').text(direccion.direccion);
+        this.card.find('.address-cp').text(direccion.cp);
+        this.card.find('.address-municipio-pais').text(direccion.municipioPais);
+        this.card.find('.address-telefono').text(direccion.telefono);
+        this.card.find('.address-email').text(direccion.email);
+        this.card.find('.address-palets').toggleClass('d-none', !direccion.palets);
+    }
+
+
+    getUnidades() {
+        return this.card.find('.unidades').text().split(' ')[0];
+    }
+
+    getCp() {
+        return this.card.find('.address-cp').text();
+    }
+}
+
+export default tarjetaDireccion;
\ No newline at end of file
diff --git a/httpdocs/assets/js/safekat/pages/presupuestoCliente/direcciones.js b/httpdocs/assets/js/safekat/pages/presupuestoCliente/direcciones.js
index f785fcb6..60093b65 100644
--- a/httpdocs/assets/js/safekat/pages/presupuestoCliente/direcciones.js
+++ b/httpdocs/assets/js/safekat/pages/presupuestoCliente/direcciones.js
@@ -1,4 +1,5 @@
 import ClassSelect from '../../components/select2.js';
+import tarjetaDireccion from '../../components/tarjetaDireccionPresupuesto.js';
 
 class Direcciones {
 
@@ -8,7 +9,11 @@ class Direcciones {
         this.wizardStep = wizardForm.querySelector('#direcciones-libro');
         this.validatorStepper = validatorStepper;
 
-        this.direcciones = new ClassSelect($("#direcciones"), '/clientedirecciones/menuitems');
+        this.direccionesCliente = new ClassSelect($("#direcciones"), '/clientedirecciones/menuitems');
+
+        this.divDirecciones = $(this.domItem.find('#divDirecciones'));
+
+        this.direcciones = [];
 
         this.initValidation();
 
@@ -19,8 +24,16 @@ class Direcciones {
 
         $("#clienteId").on('change', this.#handleChangeCliente.bind(this));
 
-        this.domItem.load('../../components/direcciones.html');
-        this.direcciones.init();
+        let direccion = {
+            nombre: 'Casa',
+            unidades: '100',
+            direccion: 'Calle de la Prueba, 12',
+            cp: '28000',
+            municipioPais: 'Madrid, España',
+            telefono: '912345678',
+            email: 'aaa@aa.com',
+            palets: false,
+        }
     }
 
 
@@ -57,11 +70,61 @@ class Direcciones {
         });
     }
 
+    #insertDireccion(direccion_id) {
+            
+            let tarjeta = new tarjetaDireccion();
+            tarjeta.setDireccion(direccion);
+    
+            tarjeta.card.find('.direccion-editar').on('click', this.#editUnits.bind(this));
+            tarjeta.card.find('.direccion-eliminar').on('click', this.#deleteDireccion.bind(this));
+    
+            this.divDirecciones.append(tarjeta.card);
+            this.direcciones.push(direccion);
+    }
+    
 
     #handleChangeCliente() {
-        this.direcciones.setParams({ 'cliente_id': $("#clienteId").select2('data')[0].id })
-        this.direcciones.clear();
-        // falta quitar las direcciones que haya!!!!
+
+        this.direccionesCliente.setParams({ 'cliente_id': $("#clienteId").select2('data')[0].id })
+        this.direccionesCliente.clear();
+        
+        this.domItem.find('.direccion-cliente').remove();
+        this.direcciones = [];
+    }
+
+    #editUnits(event) {
+
+        let tarjeta = $(event.currentTarget.closest('.direccion-cliente'));
+        let unidades = tarjeta.find('.unidades').text().split(' ')[0];
+
+        let modal = $('#modalInput');
+        modal.find('.modal-title').text('Editar unidades');
+        modal.find('.inputData').val(unidades);
+        modal.modal('show');
+
+        modal.find('.btn-primary').off('click');
+        modal.find('.btn-primary').on('click', function () {
+            try {
+
+                let nuevo_valor = parseInt(modal.find('.modal-body input').val());
+                if (nuevo_valor > 0) {
+                    tarjeta.find('.unidades').text(nuevo_valor + ' unidades');
+                }
+            } catch (error) {
+                console.error('Units must be a number');
+            }
+            modal.modal('hide');
+        });
+    }
+
+    #deleteDireccion(event) {
+
+        let tarjeta = event.currentTarget.closest('.direccion-cliente');
+        let id = tarjeta.id;
+
+        tarjeta.remove();
+
+        this.direcciones = this.direcciones.filter(direccion => direccion.id != id);
     }
 }
 
diff --git a/httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js b/httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js
index f87320f7..3cd022a8 100644
--- a/httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js
+++ b/httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js
@@ -76,7 +76,8 @@ class PresupuestoCliente {
 
         setTimeout(function() {
             $("#tapaDura").trigger("click");
-        }, 0);
+        }, 0);  
+
     }