diff --git a/resources/js/src/modules/console.ts b/resources/js/src/modules/console.ts
index a0f7acd0a7..645a184485 100644
--- a/resources/js/src/modules/console.ts
+++ b/resources/js/src/modules/console.ts
@@ -101,28 +101,6 @@ var Console = {
 
         // Event binds shouldn't run again
         if (Console.isInitialized === false) {
-            // Load config first
-            if (Config.AlwaysExpand) {
-                (document.getElementById('consoleOptionsAlwaysExpandCheckbox') as HTMLInputElement).checked = true;
-            }
-
-            if (Config.StartHistory) {
-                (document.getElementById('consoleOptionsStartHistoryCheckbox') as HTMLInputElement).checked = true;
-            }
-
-            if (Config.CurrentQuery) {
-                (document.getElementById('consoleOptionsCurrentQueryCheckbox') as HTMLInputElement).checked = true;
-            }
-
-            if (Config.EnterExecutes) {
-                (document.getElementById('consoleOptionsEnterExecutesCheckbox') as HTMLInputElement).checked = true;
-            }
-
-            if (Config.DarkTheme) {
-                (document.getElementById('consoleOptionsDarkThemeCheckbox') as HTMLInputElement).checked = true;
-                $('#pma_console').find('>.content').addClass('console_dark_theme');
-            }
-
             ConsoleResizer.initialize();
             ConsoleInput.initialize();
             ConsoleMessages.initialize();
diff --git a/resources/templates/console/display.twig b/resources/templates/console/display.twig
index 7f3540d40c..25db37f536 100644
--- a/resources/templates/console/display.twig
+++ b/resources/templates/console/display.twig
@@ -27,7 +27,7 @@
     </div>
 
     {# Console messages #}
-    <div class="content">
+    <div class="content{{ settings.DarkTheme ? ' console_dark_theme' }}">
       <div class="console_message_container">
         <div class="message welcome">
           <span id="instructions-0">{% trans 'Press Ctrl+Enter to execute query' %}</span>
@@ -171,23 +171,23 @@
 
       <div class="content">
         <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsAlwaysExpandCheckbox" name="always_expand">
+          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsAlwaysExpandCheckbox" name="always_expand"{{ settings.AlwaysExpand ? ' checked' }}>
           <label class="form-check-label" for="consoleOptionsAlwaysExpandCheckbox">{{ 'Always expand query messages'|trans }}</label>
         </div>
         <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsStartHistoryCheckbox" name="start_history">
+          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsStartHistoryCheckbox" name="start_history"{{ settings.StartHistory ? ' checked' }}>
           <label class="form-check-label" for="consoleOptionsStartHistoryCheckbox">{{ 'Show query history at start'|trans }}</label>
         </div>
         <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsCurrentQueryCheckbox" name="current_query">
+          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsCurrentQueryCheckbox" name="current_query"{{ settings.CurrentQuery ? ' checked' }}>
           <label class="form-check-label" for="consoleOptionsCurrentQueryCheckbox">{{ 'Show current browsing query'|trans }}</label>
         </div>
         <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsEnterExecutesCheckbox" name="enter_executes">
+          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsEnterExecutesCheckbox" name="enter_executes"{{ settings.EnterExecutes ? ' checked' }}>
           <label class="form-check-label" for="consoleOptionsEnterExecutesCheckbox">{{ 'Execute queries on Enter and insert new line with Shift+Enter. To make this permanent, view settings.'|trans }}</label>
         </div>
         <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsDarkThemeCheckbox" name="dark_theme">
+          <input class="form-check-input" type="checkbox" role="switch" id="consoleOptionsDarkThemeCheckbox" name="dark_theme"{{ settings.DarkTheme ? ' checked' }}>
           <label class="form-check-label" for="consoleOptionsDarkThemeCheckbox">{{ 'Switch to dark theme'|trans }}</label>
         </div>
       </div>
diff --git a/src/Console.php b/src/Console.php
index e5197c509f..d4be6fcbaf 100644
--- a/src/Console.php
+++ b/src/Console.php
@@ -113,6 +113,7 @@ class Console
         $bookmarkContent = $this->getBookmarkContent();
 
         return $this->template->render('console/display', [
+            'settings' => $this->config->config->Console->asArray(),
             'has_bookmark_feature' => $bookmarkFeature !== null,
             'sql_history' => $sqlHistory,
             'bookmark_content' => $bookmarkContent,