diff --git a/js/src/server/databases.js b/js/src/server/databases.js
index 2d2da46711..a4891b8ffa 100644
--- a/js/src/server/databases.js
+++ b/js/src/server/databases.js
@@ -44,7 +44,7 @@ AJAX.registerOnload('server/databases.js', function () {
         });
         if (! selectedDbs.length) {
             Functions.ajaxShowMessage(
-                $('<div class="alert alert-primary" role="alert"></div>').text(
+                $('<div class="alert alert-warning" role="alert"></div>').text(
                     Messages.strNoDatabasesSelected
                 ),
                 2000
@@ -57,41 +57,45 @@ AJAX.registerOnload('server/databases.js', function () {
         var question = Messages.strDropDatabaseStrongWarning + ' ' +
             Functions.sprintf(Messages.strDoYouReally, selectedDbs.join('<br>'));
 
-        var argsep = CommonParams.get('arg_separator');
-        $(this).confirm(
-            question,
-            'index.php?route=/server/databases/destroy&' + $(this).serialize() +
-                argsep + 'drop_selected_dbs=1',
-            function (url) {
-                Functions.ajaxShowMessage(Messages.strProcessingRequest, false);
+        const modal = $('#dropDatabaseModal');
+        modal.find('.modal-body').html(question);
+        modal.modal('show');
 
-                var parts = url.split('?');
-                var params = Functions.getJsConfirmCommonParam(this, parts[1]);
+        const url = 'index.php?route=/server/databases/destroy&' + $(this).serialize()
+            + CommonParams.get('arg_separator') + 'drop_selected_dbs=1';
 
-                $.post(parts[0], params, function (data) {
-                    if (typeof data !== 'undefined' && data.success === true) {
-                        Functions.ajaxShowMessage(data.message);
+        $('#dropDatabaseModalDropButton').on('click', function () {
+            Functions.ajaxShowMessage(Messages.strProcessingRequest, false);
 
-                        var $rowsToRemove = $form.find('tr.removeMe');
-                        var $databasesCount = $('#filter-rows-count');
-                        var newCount = parseInt($databasesCount.text(), 10) - $rowsToRemove.length;
-                        $databasesCount.text(newCount);
+            var parts = url.split('?');
+            var params = Functions.getJsConfirmCommonParam(this, parts[1]);
 
-                        $rowsToRemove.remove();
-                        $form.find('tbody').sortTable('.name');
-                        if ($form.find('tbody').find('tr').length === 0) {
-                            // user just dropped the last db on this page
-                            CommonActions.refreshMain();
-                        }
-                        Navigation.reload();
-                    } else {
-                        $form.find('tr.removeMe').removeClass('removeMe');
-                        Functions.ajaxShowMessage(data.error, false);
+            $.post(parts[0], params, function (data) {
+                if (typeof data !== 'undefined' && data.success === true) {
+                    Functions.ajaxShowMessage(data.message);
+
+                    var $rowsToRemove = $form.find('tr.removeMe');
+                    var $databasesCount = $('#filter-rows-count');
+                    var newCount = parseInt($databasesCount.text(), 10) - $rowsToRemove.length;
+                    $databasesCount.text(newCount);
+
+                    $rowsToRemove.remove();
+                    $form.find('tbody').sortTable('.name');
+                    if ($form.find('tbody').find('tr').length === 0) {
+                        // user just dropped the last db on this page
+                        CommonActions.refreshMain();
                     }
-                }); // end $.post()
-            }
-        );
-    }); // end of Drop Database action
+                    Navigation.reload();
+                } else {
+                    $form.find('tr.removeMe').removeClass('removeMe');
+                    Functions.ajaxShowMessage(data.error, false);
+                }
+            });
+
+            modal.modal('hide');
+            $('#dropDatabaseModalDropButton').off('click');
+        });
+    });
 
     /**
      * Attach Ajax event handlers for 'Create Database'.
diff --git a/templates/server/databases/index.twig b/templates/server/databases/index.twig
index ebe0619ca8..65292f7ce8 100644
--- a/templates/server/databases/index.twig
+++ b/templates/server/databases/index.twig
@@ -64,7 +64,7 @@
                 <label class="form-check-label" for="checkAllCheckbox">{% trans 'Check all' %}</label>
               </div>
             </div>
-            <button class="btn btn-outline-secondary" id="bulkActionDropButton" type="submit" name="submit_mult" value="Drop" form="dbStatsForm" title="{% trans 'Drop' %}">
+            <button class="btn btn-outline-secondary" type="submit" name="submit_mult" value="Drop" form="dbStatsForm" title="{% trans 'Drop' %}">
               {{ get_icon('db_drop', 'Drop'|trans) }}
             </button>
           </div>
@@ -309,3 +309,21 @@
     </div>
   {% endif %}
 </div>
+
+{% if is_drop_allowed %}
+  <div class="modal fade" id="dropDatabaseModal" tabindex="-1" aria-labelledby="dropDatabaseModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-scrollable">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="dropDatabaseModalLabel">{% trans 'Confirm' %}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Cancel' %}"></button>
+        </div>
+        <div class="modal-body"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
+          <button type="button" class="btn btn-danger" id="dropDatabaseModalDropButton">{% trans 'Drop' %}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+{% endif %}