diff --git a/admin_frontend/assets/base.css b/admin_frontend/assets/base.css
index 5d849085..83a109ff 100644
--- a/admin_frontend/assets/base.css
+++ b/admin_frontend/assets/base.css
@@ -78,3 +78,7 @@ body {
 .input:focus {
   border-color: var(--af-cyan);
 }
+
+.loading-button {
+  filter: brightness(0.7);
+}
diff --git a/admin_frontend/templates/layouts/base.html b/admin_frontend/templates/layouts/base.html
index 6bea1e40..51d566fc 100644
--- a/admin_frontend/templates/layouts/base.html
+++ b/admin_frontend/templates/layouts/base.html
@@ -24,7 +24,17 @@
 </html>
 
 <script>
+  document.body.addEventListener('htmx:beforeRequest', function(event) {
+    const closeButton = event.target.querySelector('.button');
+    closeButton.classList.add('loading-button');
+    closeButton.disabled = true;
+  });
+
   document.body.addEventListener("htmx:afterRequest", function (evt) {
+    const closeButton = event.target.querySelector('.button');
+    closeButton.classList.remove('loading-button');
+    closeButton.disabled = false;
+
     const detail = evt.detail;
     if (detail.failed) {
       const xhr = detail.xhr;