diff --git a/resources/js/src/server/status/monitor.ts b/resources/js/src/server/status/monitor.ts
index a77c46a859..480d005486 100644
--- a/resources/js/src/server/status/monitor.ts
+++ b/resources/js/src/server/status/monitor.ts
@@ -117,7 +117,6 @@ AJAX.registerTeardown('server/status/monitor.js', function () {
     $('#monitorChartRefreshRateSelect').off('change');
     $('#monitorAddNewChartButton').off('click');
     $('#monitorExportConfigButton').off('click');
-    $('#monitorImportConfigButton').off('click');
     $('#monitorResetConfigButton').off('click');
     $('#monitorPauseResumeButton').off('click');
     $('#monitorInstructionsButton').off('click');
@@ -677,99 +676,71 @@ AJAX.registerOnload('server/status/monitor.js', function () {
         }, 100);
     });
 
-    $('#monitorImportConfigButton').on('click', function () {
-        $('#emptyDialog').dialog({
-            classes: {
-                'ui-dialog-titlebar-close': 'btn-close'
-            },
-            title: window.Messages.strImportDialogTitle
-        });
+    function monitorImportConfigImportEventHandler () {
+        var input = ($('#monitorImportConfigModal').find('#import_file') as JQuery<HTMLInputElement>)[0];
+        var reader = new FileReader();
 
-        $('#emptyDialog').html(window.Messages.strImportDialogMessage + '<br><form>' +
-            '<input type="file" name="file" id="import_file"> </form>');
-
-        var dlgBtns = {
-            [window.Messages.strImport]: {
-                text: window.Messages.strImport,
-                class: 'btn btn-primary',
-            },
-            [window.Messages.strCancel]: {
-                text: window.Messages.strCancel,
-                class: 'btn btn-secondary',
-            },
+        reader.onerror = function (event) {
+            alert(window.Messages.strFailedParsingConfig + '\n' + event.target.error.code);
         };
 
-        // @ts-ignore
-        dlgBtns[window.Messages.strImport].click = function () {
-            var input = ($('#emptyDialog').find('#import_file') as JQuery<HTMLInputElement>)[0];
-            var reader = new FileReader();
+        reader.onload = function (e) {
+            var data = (e.target.result as string);
+            var json = null;
+            // Try loading config
+            try {
+                json = JSON.parse(data);
+            } catch (err) {
+                alert(window.Messages.strFailedParsingConfig);
+                window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
 
-            reader.onerror = function (event) {
-                alert(window.Messages.strFailedParsingConfig + '\n' + event.target.error.code);
-            };
-
-            reader.onload = function (e) {
-                var data = (e.target.result as string);
-                var json = null;
-                // Try loading config
-                try {
-                    json = JSON.parse(data);
-                } catch (err) {
-                    alert(window.Messages.strFailedParsingConfig);
-                    $('#emptyDialog').dialog('close');
-
-                    return;
-                }
-
-                // Basic check, is this a monitor config json?
-                if (! json || ! json.monitorCharts || ! json.monitorCharts) {
-                    alert(window.Messages.strFailedParsingConfig);
-                    $('#emptyDialog').dialog('close');
-
-                    return;
-                }
-
-                // If json ok, try applying config
-                try {
-                    if (isStorageSupported('localStorage')) {
-                        window.localStorage.monitorCharts = JSON.stringify(json.monitorCharts);
-                        window.localStorage.monitorSettings = JSON.stringify(json.monitorSettings);
-                    }
-
-                    rebuildGrid();
-                } catch (err) {
-                    alert(window.Messages.strFailedBuildingGrid);
-                    // If an exception is thrown, load default again
-                    if (isStorageSupported('localStorage')) {
-                        window.localStorage.removeItem('monitorCharts');
-                        window.localStorage.removeItem('monitorSettings');
-                    }
-
-                    rebuildGrid();
-                }
-
-                $('#emptyDialog').dialog('close');
-            };
-
-            if (input.files[0]) {
-                reader.readAsText(input.files[0]);
+                return;
             }
+
+            // Basic check, is this a monitor config json?
+            if (! json || ! json.monitorCharts || ! json.monitorCharts) {
+                alert(window.Messages.strFailedParsingConfig);
+                window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
+
+                return;
+            }
+
+            // If json ok, try applying config
+            try {
+                if (isStorageSupported('localStorage')) {
+                    window.localStorage.monitorCharts = JSON.stringify(json.monitorCharts);
+                    window.localStorage.monitorSettings = JSON.stringify(json.monitorSettings);
+                }
+
+                rebuildGrid();
+            } catch (err) {
+                alert(window.Messages.strFailedBuildingGrid);
+                // If an exception is thrown, load default again
+                if (isStorageSupported('localStorage')) {
+                    window.localStorage.removeItem('monitorCharts');
+                    window.localStorage.removeItem('monitorSettings');
+                }
+
+                rebuildGrid();
+            }
+
+            window.bootstrap.Modal.getOrCreateInstance('#monitorImportConfigModal').hide();
         };
 
-        // @ts-ignore
-        dlgBtns[window.Messages.strCancel].click = function () {
-            $(this).dialog('close');
-        };
+        if (input.files[0]) {
+            reader.readAsText(input.files[0]);
+        }
+    }
 
-        $('#emptyDialog').dialog({
-            classes: {
-                'ui-dialog-titlebar-close': 'btn-close'
-            },
-            width: 'auto',
-            height: 'auto',
-            // @ts-ignore
-            buttons: dlgBtns
-        });
+    const monitorImportConfigModal = document.getElementById('monitorImportConfigModal');
+    monitorImportConfigModal.addEventListener('shown.bs.modal', function () {
+        const monitorImportConfigImportButton = document.getElementById('monitorImportConfigImportButton');
+        monitorImportConfigImportButton?.addEventListener('click', monitorImportConfigImportEventHandler);
+    });
+
+    monitorImportConfigModal.addEventListener('hidden.bs.modal', function () {
+        const monitorImportConfigImportButton = document.getElementById('monitorImportConfigImportButton');
+        monitorImportConfigImportButton?.removeEventListener('click', monitorImportConfigImportEventHandler);
     });
 
     $('#monitorResetConfigButton').on('click', function () {
diff --git a/resources/templates/server/status/monitor/index.twig b/resources/templates/server/status/monitor/index.twig
index 4b801b73c4..2a6fb7dd27 100644
--- a/resources/templates/server/status/monitor/index.twig
+++ b/resources/templates/server/status/monitor/index.twig
@@ -50,7 +50,28 @@
             <span class="text-body-secondary">{{ t('The arrangement of the charts is stored to the browsers local storage. You may want to export it if you have a complicated set up.') }}</span>
           </p>
           <div>
-            <button type="button" class="btn btn-secondary" id="monitorImportConfigButton">{{ t('Import') }}</button>
+            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#monitorImportConfigModal">{{ t('Import') }}</button>
+            <div class="modal fade" id="monitorImportConfigModal" tabindex="-1" aria-labelledby="monitorImportConfigModalLabel" aria-hidden="true">
+              <div class="modal-dialog">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="monitorImportConfigModalLabel">{{ t('Importing system monitor configuration') }}</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
+                  </div>
+                  <div class="modal-body">
+                    <form>
+                      <label for="import_file" class="form-label">{{ t('Please select the file you want to import:') }}</label>
+                      <input class="form-control" type="file" name="file" id="import_file">
+                    </form>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ t('Close') }}</button>
+                    <button type="button" class="btn btn-primary" id="monitorImportConfigImportButton">{{ t('Import') }}</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
             <button type="button" class="btn btn-secondary" id="monitorExportConfigButton">{{ t('Export') }}</button>
             <button type="button" class="btn btn-secondary" id="monitorResetConfigButton">{{ t('Reset to default') }}</button>
           </div>
diff --git a/src/Controllers/JavaScriptMessagesController.php b/src/Controllers/JavaScriptMessagesController.php
index a83f9f5852..f0f46090ab 100644
--- a/src/Controllers/JavaScriptMessagesController.php
+++ b/src/Controllers/JavaScriptMessagesController.php
@@ -324,8 +324,6 @@ final class JavaScriptMessagesController implements InvocableController
             'strFailedBuildingGrid' => __(
                 'Failed building chart grid with imported config. Resetting to default config…',
             ),
-            'strImport' => __('Import'),
-            'strImportDialogTitle' => __('Import monitor configuration'),
             'strImportDialogMessage' => __('Please select the file you want to import:'),
             'strTableNameDialogMessage' => __('Please enter a valid table name.'),
             'strDBNameDialogMessage' => __('Please enter a valid database name.'),