diff --git a/src/public/css/offers.css b/src/public/css/offers.css
index e89f523..17ac4b5 100644
--- a/src/public/css/offers.css
+++ b/src/public/css/offers.css
@@ -214,6 +214,7 @@
 .offer-action-area {
   cursor: pointer;
   margin-right: 20px;
+  padding: 3px;
 }
 
 .offer-long-text {
diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js
index f3fd9b6..5bcd2cc 100644
--- a/src/public/javascript/offers.js
+++ b/src/public/javascript/offers.js
@@ -525,6 +525,7 @@ class Offer {
 
     const editActionArea = document.createElement('div');
     editActionArea.classList.add('offer-action-area');
+    editActionArea.classList.add('subtle-box');
     const editActionIcon = document.createElement('img');
     editActionIcon.src = '/img/edit.svg';
     const editActionText = document.createElement('p');
@@ -533,11 +534,15 @@ class Offer {
 
     const deleteActionArea = document.createElement('div');
     deleteActionArea.classList.add('offer-action-area');
+    deleteActionArea.classList.add('subtle-box');
     const deleteActionIcon = document.createElement('img');
     deleteActionIcon.src = '/img/trash-can-darkred.svg';
     const deleteActionText = document.createElement('p');
     deleteActionText.innerText = 'Eliminar';
     deleteActionArea.append(deleteActionIcon, deleteActionText);
+    deleteActionArea.addEventListener('click', async () => {
+      deleteOfferByUuid(this.uuid);
+    });
 
     actionButtonsArea.append(editActionArea, deleteActionArea);
 
@@ -589,6 +594,18 @@ class MyOffers {
   }
 }
 
+async function deleteOfferByUuid(offerUuid) {
+  await fetch(`/api/offer/${offerUuid}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  myOffers.getOffersFromApi();
+  myOffers.render();
+}
+
 buttonStartCreateOffer.addEventListener('click', () => {
   toggleCreateOfferModal();
 });