diff --git a/src/public/css/seca.css b/src/public/css/seca.css
index f847728..27ced1a 100644
--- a/src/public/css/seca.css
+++ b/src/public/css/seca.css
@@ -44,6 +44,12 @@
   }
 }
 
+
+.max-size-zero {
+  max-width: 0;
+  max-height: 0;
+}
+
 .top-notification-good {
   border-radius: 10px;
   background-color: rgb(9, 165, 9);
@@ -56,9 +62,9 @@
   justify-content: space-evenly;
   align-items: center;
   left: 50%;
-  transform: translate(-50%, -200%);
-  transition: transform 1s ease-in-out;
-
+  transform: translate(-50%, -200px);
+  transition: 
+    transform 2s ease-in-out;
 }
 
 .top-notification-good.revealed {
diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js
index 3f15f18..054d7fa 100644
--- a/src/public/javascript/offers.js
+++ b/src/public/javascript/offers.js
@@ -157,13 +157,16 @@ async function publishOffer() {
     body: JSON.stringify({ offerDetails }),
   });
 
+  offerCreatedPopup.classList.remove('max-size-zero');
   offerCreatedPopup.classList.add('revealed');
   setTimeout(() => {
     offerCreatedPopup.classList.remove('revealed');
   }, 3000);
   setTimeout(() => {
-    offerCreatedPopup.classList.remove('revealed');
-  }, 3000);
+    offerCreatedPopup.classList.add('max-size-zero');
+  }, 4000);
+
+  toggleCreateOfferControls();
 }
 
 buttonStartCreateOffer.addEventListener('click', () => {
diff --git a/src/views/offers.ejs b/src/views/offers.ejs
index 241ba7d..6737f47 100644
--- a/src/views/offers.ejs
+++ b/src/views/offers.ejs
@@ -178,7 +178,7 @@
           </button>
         </div>
       </div>
-      <div id="offer-created-confirmation" class="top-notification-good">
+      <div id="offer-created-confirmation" class="top-notification-good max-size-zero">
         <img
             src="/img/circle-check-white.svg"
           />
diff --git a/tests/createOffer.spec.js b/tests/createOffer.spec.js
index 38aa863..1de4566 100644
--- a/tests/createOffer.spec.js
+++ b/tests/createOffer.spec.js
@@ -1,4 +1,5 @@
 const { test, expect, hardcodedSessionUuid } = require('./test-setup');
+const { chromium } = require('playwright');
 
 const SessionCreated = require('../src/models/SessionCreated');
 const SessionRelatedToPublickey = require('../src/models/SessionRelatedToPublickey');
@@ -41,6 +42,7 @@ test('Create an offer with a few options creates in DB', async ({
   await page.goto('http://localhost/offers');
 
   await page.getByRole('button', { name: 'Crear nueva oferta' }).click();
+  await expect(page.locator('#close-offer-controls-area')).toBeVisible();
   await page.getByRole('button', { name: 'Quiero vender Bitcoin' }).click();
   await page.getByRole('button', { name: 'Quiero comprar Bitcoin' }).click();
   await page.getByRole('button', { name: '+' }).click();
@@ -80,11 +82,13 @@ test('Create an offer with a few options creates in DB', async ({
   await expect(page.locator('#all-members-checkbox')).not.toBeChecked();
   await page.locator('#large-bills-checkbox').check();
   await expect(page.locator('#large-bills-checkbox')).toBeChecked();
+
   await page.getByRole('button', { name: 'Publicar oferta' }).click();
-  await page.locator('#close-offer-controls-x').click();
-  await expect(page.locator('#offers-root')).toMatchAriaSnapshot(
-    `- button "Crear nueva oferta"`
-  );
+  await expect(page.locator('#offer-created-confirmation')).toBeInViewport();
+  await expect(
+    page.locator('#offer-created-confirmation')
+  ).not.toBeInViewport();
+  await expect(page.locator('#close-offer-controls-area')).not.toBeVisible();
 
   const createdOfferDetailsSetRecord = await OfferDetailsSet.findOne();
   expect(createdOfferDetailsSetRecord.wants).toBe('BTC');