diff --git a/assets/job/index.js b/assets/job/index.js
index 10f11e6..f54571a 100644
--- a/assets/job/index.js
+++ b/assets/job/index.js
@@ -27,6 +27,11 @@ function initRunNowButtons() {
     document.querySelectorAll('.runnow').forEach(elem => elem.addEventListener("click", event => {
         let me = event.currentTarget;
         let href = me.dataset.href;
+
+        document.querySelector('.container-fluid').classList.add('blur');
+        document.querySelector('.runnow-overlay').classList.add('d-block');
+        document.querySelector('.runnow-overlay').classList.remove('d-none');
+
         fetch(href, { method: 'GET' })
             .then(response => response.json())
             .then(data => {
@@ -56,6 +61,10 @@ function initRunNowButtons() {
                 }
 
                 var bsModal = new Modal('#runnow_result').show();
+
+                document.querySelector('.container-fluid').classList.remove('blur');
+                document.querySelector('.runnow-overlay').classList.remove('d-block');
+                document.querySelector('.runnow-overlay').classList.add('d-none');
             })
         })
     )
diff --git a/assets/job/index.scss b/assets/job/index.scss
index 0d2266e..24842ea 100644
--- a/assets/job/index.scss
+++ b/assets/job/index.scss
@@ -4,6 +4,33 @@
 tr.norun td {
   background-color: #f8d7da;
 }
+
 tr.running td {
   background-color: #d4edda;
+}
+
+.blur {
+  filter: blur(3px);
+}
+.runnow-overlay {
+  .runnow-blur {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1500;
+  }
+
+  .runnow-content {
+    font-size: 10px;
+    height: 50px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    width: 100px;
+    left: 50%;
+    margin-left: -50px;
+    margin-top: -50px;
+  }
 }
\ No newline at end of file
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 6672fbe..6fe376c 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -35,6 +35,8 @@
                 </div>
             </div>
         </div>
+
+        {% block extrahtml %}{% endblock %}
     </body>
 </html>
 
diff --git a/templates/job/index.html.twig b/templates/job/index.html.twig
index e263851..f153219 100644
--- a/templates/job/index.html.twig
+++ b/templates/job/index.html.twig
@@ -48,9 +48,15 @@
             </div>
         </div>
     </div>
-    <div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
-        <img src="/public/images/ajax-loader.gif" alt="loading">
+{% endblock %}
+
+{% block extrahtml %}
+<div class="runnow-overlay d-none">
+    <div class="runnow-content">
+        <img src="/images/ajax-loader.gif" alt="loading">
     </div>
+    <div class="runnow-blur"></div>
+</div>
 {% endblock %}
 
 {% block styles %}