diff --git a/addons/web/static/src/core/ui/block_ui.js b/addons/web/static/src/core/ui/block_ui.js
index 20aec7d7694..9e8527a479b 100644
--- a/addons/web/static/src/core/ui/block_ui.js
+++ b/addons/web/static/src/core/ui/block_ui.js
@@ -71,12 +71,12 @@ export class BlockUI extends Component {
 }
 
 BlockUI.template = xml`
-    <div t-att-class="state.blockUI ? 'o_blockUI' : ''">
+    <div t-att-class="state.blockUI ? 'o_blockUI fixed-top d-flex justify-content-center align-items-center flex-column vh-100 bg-black' : ''">
       <t t-if="state.blockUI">
-        <div class="o_spinner">
+        <div class="o_spinner mb-3 h-auto">
             <img src="/web/static/img/spin.png" alt="Loading..."/>
         </div>
-        <div class="o_message">
+        <div class="o_message text-center">
             <t t-esc="state.line1"/> <br/>
             <t t-esc="state.line2"/>
         </div>
diff --git a/addons/web/static/src/core/ui/block_ui.scss b/addons/web/static/src/core/ui/block_ui.scss
index b4b4f322138..0d089afe106 100644
--- a/addons/web/static/src/core/ui/block_ui.scss
+++ b/addons/web/static/src/core/ui/block_ui.scss
@@ -1,31 +1,8 @@
 .o_blockUI {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1100;
-
-  cursor: wait;
-  background: #000000;
-  opacity: 0.6;
-  height: 100vh;
-  width: 100vw;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  .o_spinner {
-    height: 4.2rem;
-    margin-bottom: 1rem;
-
-    img {
-      animation: fa-spin 1s infinite steps(12);
-    }
-  }
-
-  .o_message {
-    color: #ffffff;
-    text-align: center;
-  }
+	cursor: wait;
+	opacity: 0.6;
+	
+	img {
+		animation: fa-spin 1s infinite steps(12);
+	}
 }