diff --git a/assets/css/component/dialog.css b/assets/css/component/dialog.css
index daacad3eeaea7afc4e0b25cfb958b47031f000b0..54693a9a3425bf66963c39188bebc7eb954697cb 100644
--- a/assets/css/component/dialog.css
+++ b/assets/css/component/dialog.css
@@ -1,3 +1,7 @@
 .modal-footer .ui-dialog-buttonset {
   gap: var(--bs-modal-footer-gap);
 }
+
+.modal {
+  --bs-modal-zindex: 1050;
+}
diff --git a/assets/js/misc/dialog/dialog.js b/assets/js/misc/dialog/dialog.js
index f92afb814d53bc97eaccef620d62ce9938115fcd..8c416163c5f3a0ffd100b85cdaf9834d04a6144d 100644
--- a/assets/js/misc/dialog/dialog.js
+++ b/assets/js/misc/dialog/dialog.js
@@ -225,6 +225,11 @@
       if ($element.modal !== undefined) {
         $element.modal(settings);
         $element.modal('show');
+        // Be sure modal is last, it will be on top of all other modals and
+        // backdrops.
+        // Thanks to that, no more need different z-index for modals and
+        // backdrops.
+        $element.appendTo('body');
       }
 
       if (settings.width) {
diff --git a/ui_suite_bootstrap.libraries.yml b/ui_suite_bootstrap.libraries.yml
index 6367d016f182dea9a6ab969296ab0071bd894481..9ee69c3aa143a856e46c10a67a34ee05657a60bb 100644
--- a/ui_suite_bootstrap.libraries.yml
+++ b/ui_suite_bootstrap.libraries.yml
@@ -61,12 +61,13 @@ drupal.dialog:
   js:
     assets/js/misc/dialog/dialog.js: {}
   css:
-    component:
+    theme:
       assets/css/component/dialog.css: {}
   dependencies:
     - core/jquery
     - core/drupal
     - core/drupalSettings
+    - ui_suite_bootstrap/bootstrap
 
 drupal.dialog.ajax:
   js: