diff --git a/src/Model/Table/SettingsProviderTable.php b/src/Model/Table/SettingProviders/BaseSettingsProvider.php
similarity index 53%
rename from src/Model/Table/SettingsProviderTable.php
rename to src/Model/Table/SettingProviders/BaseSettingsProvider.php
index 5483352..0efcaf4 100644
--- a/src/Model/Table/SettingsProviderTable.php
+++ b/src/Model/Table/SettingProviders/BaseSettingsProvider.php
@@ -1,27 +1,27 @@
 <?php
-namespace App\Model\Table;
+namespace App\Settings\SettingsProvider;
 
 use App\Model\Table\AppTable;
 use Cake\Validation\Validator;
 use Cake\ORM\TableRegistry;
 
-class SettingsProviderTable extends AppTable
+class BaseSettingsProvider
 {
-    private $settingsConfiguration = [];
-    private $error_critical = '',
+    protected $settingsConfiguration = [];
+    protected $error_critical = '',
             $error_warning = '',
             $error_info = '';
-    private $severities = ['info', 'warning', 'critical'];
+    protected $severities = ['info', 'warning', 'critical'];
 
-    public function initialize(array $config): void
+    public function __construct()
     {
-        parent::initialize($config);
         $this->settingsConfiguration = $this->generateSettingsConfiguration();
-        $this->setTable(false);
         $this->error_critical =  __('Cerebrate will not operate correctly or will be unsecure until these issues are resolved.');
         $this->error_warning =  __('Some of the features of Cerebrate cannot be utilised until these issues are resolved.');
         $this->error_info =  __('There are some optional tweaks that could be done to improve the looks of your Cerebrate instance.');
-        $this->settingValidator = new SettingValidator();
+        if (!isset($this->settingValidator)) {
+            $this->settingValidator = new SettingValidator();
+        }
     }
 
     /**
@@ -46,151 +46,9 @@ class SettingsProviderTable extends AppTable
      *     redacted    [optional]: Should the setting value be redacted. FIXME: To implement
      *     cli_only    [optional]: Should this setting be modified only via the CLI.
      */
-    private function generateSettingsConfiguration()
+    protected function generateSettingsConfiguration()
     {
-        return [
-            'Application' => [
-                'General' => [
-                    'Essentials' => [
-                        '_description' => __('Ensentials settings required for the application to run normally.'),
-                        '_icon' => 'user-cog',
-                        'app.baseurl' => [
-                            'name' => __('Base URL'),
-                            'type' => 'string',
-                            'description' => __('The base url of the application (in the format https://www.mymispinstance.com or https://myserver.com/misp). Several features depend on this setting being correctly set to function.'),
-                            'default' => '',
-                            'severity' => 'critical',
-                            'test' => 'testBaseURL',
-                        ],
-                        'app.uuid' => [
-                            'name' => 'UUID',
-                            'type' => 'string',
-                            'description' => __('The Cerebrate instance UUID. This UUID is used to identify this instance.'),
-                            'default' => '',
-                            'severity' => 'critical',
-                            'test' => 'testUuid',
-                        ],
-                    ],
-                    'Miscellaneous' => [
-                        'sc2.hero' => [
-                            'description' => 'The true hero',
-                            'default' => 'Sarah Kerrigan',
-                            'name' => 'Hero',
-                            'options' => [
-                                'Jim Raynor' => 'Jim Raynor',
-                                'Sarah Kerrigan' => 'Sarah Kerrigan',
-                                'Artanis' => 'Artanis',
-                                'Zeratul' => 'Zeratul',
-                            ],
-                            'type' => 'select'
-                        ],
-                        'sc2.antagonists' => [
-                            'description' => 'The bad guys',
-                            'default' => 'Amon',
-                            'name' => 'Antagonists',
-                            'options' => function($settingsProviders) {
-                                return [
-                                    'Amon' => 'Amon',
-                                    'Sarah Kerrigan' => 'Sarah Kerrigan',
-                                    'Narud' => 'Narud',
-                                ];
-                            },
-                            'severity' => 'warning',
-                            'type' => 'multi-select'
-                        ],
-                    ],
-                    'floating-setting' => [
-                        'description' => 'floaringSetting',
-                        // 'default' => 'A default value',
-                        'name' => 'Uncategorized Setting',
-                        // 'severity' => 'critical',
-                        'severity' => 'warning',
-                        // 'severity' => 'info',
-                        'type' => 'integer'
-                    ],
-                ],
-                'Network' => [
-                    'Proxy' => [
-                        'proxy.host' => [
-                            'name' => __('Host'),
-                            'type' => 'string',
-                            'description' => __('The hostname of an HTTP proxy for outgoing sync requests. Leave empty to not use a proxy.'),
-                            'test' => 'testHostname',
-                        ],
-                        'proxy.port' => [
-                            'name' => __('Port'),
-                            'type' => 'integer',
-                            'description' => __('The TCP port for the HTTP proxy.'),
-                            'test' => 'testForRangeXY',
-                        ],
-                        'proxy.user' => [
-                            'name' => __('User'),
-                            'type' => 'string',
-                            'description' => __('The authentication username for the HTTP proxy.'),
-                            'default' => 'admin',
-                            'dependsOn' => 'proxy.host',
-                        ],
-                        'proxy.password' => [
-                            'name' => __('Password'),
-                            'type' => 'string',
-                            'description' => __('The authentication password for the HTTP proxy.'),
-                            'default' => '',
-                            'dependsOn' => 'proxy.host',
-                        ],
-                    ],
-                ],
-                'UI' => [
-                    'General' => [
-                        'ui.bsTheme' => [
-                            'description' => 'The Bootstrap theme to use for the application',
-                            'default' => 'default',
-                            'name' => 'UI Theme',
-                            'options' => function($settingsProviders) {
-                                $instanceTable = TableRegistry::getTableLocator()->get('Instance');
-                                $themes = $instanceTable->getAvailableThemes();
-                                return array_combine($themes, $themes);
-                            },
-                            'severity' => 'info',
-                            'type' => 'select'
-                        ],
-                    ],
-                ],
-            ],
-            'Security' => [
-                'Development' => [
-                    'Debugging' => [
-                        'security.debug' => [
-                            'name' => __('Debug Level'),
-                            'type' => 'select',
-                            'description' => __('The debug level of the instance'),
-                            'default' => 0,
-                            'options' => [
-                                0 => __('Debug Off'),
-                                1 => __('Debug On'),
-                                2 => __('Debug On + SQL Dump'),
-                            ],
-                            'test' => function($value, $setting, $validator) {
-                                $validator->range('value', [0, 3]);
-                                return testValidator($value, $validator);
-                            },
-                        ],
-                    ],
-                ]
-            ],
-            'Features' => [
-                'Demo Settings' => [
-                    'demo.switch' => [
-                        'name' => __('Switch'),
-                        'type' => 'boolean',
-                        'description' => __('A switch acting as a checkbox'),
-                        'default' => false,
-                        'test' => function() {
-                            return 'Fake error';
-                        },
-                    ],
-                ]
-            ],
-        ];
+        return [];
     }
 
     /**
@@ -214,7 +72,7 @@ class SettingsProviderTable extends AppTable
      * @param  array $settings the settings
      * @return void
      */
-    private function mergeSettingsIntoSettingConfiguration(array $settingConf, array $settings, string $path=''): array
+    protected function mergeSettingsIntoSettingConfiguration(array $settingConf, array $settings, string $path=''): array
     {
         foreach ($settingConf as $key => $value) {
             if ($this->isSettingMetaKey($key)) {
@@ -277,12 +135,12 @@ class SettingsProviderTable extends AppTable
         return $notices;
     }
 
-    private function isLeaf($setting)
+    protected function isLeaf($setting)
     {
         return !empty($setting['name']) && !empty($setting['type']);
     }
 
-    private function evaluateLeaf($setting, $settingSection)
+    protected function evaluateLeaf($setting, $settingSection)
     {
         $skipValidation = false;
         if ($setting['type'] == 'select' || $setting['type'] == 'multi-select') {
@@ -353,12 +211,6 @@ class SettingsProviderTable extends AppTable
     }
 }
 
-function testValidator($value, $validator)
-{
-    $errors = $validator->validate(['value' => $value]);
-    return !empty($errors) ? implode(', ', $errors['value']) : true;
-}
-
 class SettingValidator
 {
 
@@ -383,23 +235,5 @@ class SettingValidator
     public function testForEmpty($value, &$setting)
     {
         return !empty($value) ? true : __('Cannot be empty');
-    }
-
-    public function testBaseURL($value, &$setting)
-    {
-        if (empty($value)) {
-            return __('Cannot be empty');
-        }
-        if (!empty($value) && !preg_match('/^http(s)?:\/\//i', $value)) {
-            return __('Invalid URL, please make sure that the protocol is set.');
-        }
-        return true;
-    }
-
-    public function testUuid($value, &$setting) {
-        if (empty($value) || !preg_match('/^\{?[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}\}?$/', $value)) {
-            return __('Invalid UUID.');
-        }
-        return true;
-    }
+    } 
 }
\ No newline at end of file
diff --git a/src/Model/Table/SettingProviders/CerebrateSettingsProvider.php b/src/Model/Table/SettingProviders/CerebrateSettingsProvider.php
new file mode 100644
index 0000000..ac50614
--- /dev/null
+++ b/src/Model/Table/SettingProviders/CerebrateSettingsProvider.php
@@ -0,0 +1,196 @@
+<?php
+
+namespace App\Settings\SettingsProvider;
+
+use Cake\ORM\TableRegistry;
+
+require_once(APP . 'Model' . DS . 'Table' . DS . 'SettingProviders' . DS . 'BaseSettingsProvider.php');
+
+use App\Settings\SettingsProvider\BaseSettingsProvider;
+use App\Settings\SettingsProvider\SettingValidator;
+
+class CerebrateSettingsProvider extends BaseSettingsProvider
+{
+
+    public function __construct()
+    {
+        $this->settingValidator = new CerebrateSettingValidator();
+        parent::__construct();
+    }
+
+    protected function generateSettingsConfiguration()
+    {
+        return [
+            'Application' => [
+                'General' => [
+                    'Essentials' => [
+                        '_description' => __('Ensentials settings required for the application to run normally.'),
+                        '_icon' => 'user-cog',
+                        'app.baseurl' => [
+                            'name' => __('Base URL'),
+                            'type' => 'string',
+                            'description' => __('The base url of the application (in the format https://www.mymispinstance.com or https://myserver.com/misp). Several features depend on this setting being correctly set to function.'),
+                            'default' => '',
+                            'severity' => 'critical',
+                            'test' => 'testBaseURL',
+                        ],
+                        'app.uuid' => [
+                            'name' => 'UUID',
+                            'type' => 'string',
+                            'description' => __('The Cerebrate instance UUID. This UUID is used to identify this instance.'),
+                            'default' => '',
+                            'severity' => 'critical',
+                            'test' => 'testUuid',
+                        ],
+                    ],
+                    'Miscellaneous' => [
+                        'sc2.hero' => [
+                            'description' => 'The true hero',
+                            'default' => 'Sarah Kerrigan',
+                            'name' => 'Hero',
+                            'options' => [
+                                'Jim Raynor' => 'Jim Raynor',
+                                'Sarah Kerrigan' => 'Sarah Kerrigan',
+                                'Artanis' => 'Artanis',
+                                'Zeratul' => 'Zeratul',
+                            ],
+                            'type' => 'select'
+                        ],
+                        'sc2.antagonists' => [
+                            'description' => 'The bad guys',
+                            'default' => 'Amon',
+                            'name' => 'Antagonists',
+                            'options' => function ($settingsProviders) {
+                                return [
+                                    'Amon' => 'Amon',
+                                    'Sarah Kerrigan' => 'Sarah Kerrigan',
+                                    'Narud' => 'Narud',
+                                ];
+                            },
+                            'severity' => 'warning',
+                            'type' => 'multi-select'
+                        ],
+                    ],
+                    'floating-setting' => [
+                        'description' => 'floaringSetting',
+                        // 'default' => 'A default value',
+                        'name' => 'Uncategorized Setting',
+                        // 'severity' => 'critical',
+                        'severity' => 'warning',
+                        // 'severity' => 'info',
+                        'type' => 'integer'
+                    ],
+                ],
+                'Network' => [
+                    'Proxy' => [
+                        'proxy.host' => [
+                            'name' => __('Host'),
+                            'type' => 'string',
+                            'description' => __('The hostname of an HTTP proxy for outgoing sync requests. Leave empty to not use a proxy.'),
+                            'test' => 'testHostname',
+                        ],
+                        'proxy.port' => [
+                            'name' => __('Port'),
+                            'type' => 'integer',
+                            'description' => __('The TCP port for the HTTP proxy.'),
+                            'test' => 'testForRangeXY',
+                        ],
+                        'proxy.user' => [
+                            'name' => __('User'),
+                            'type' => 'string',
+                            'description' => __('The authentication username for the HTTP proxy.'),
+                            'default' => 'admin',
+                            'dependsOn' => 'proxy.host',
+                        ],
+                        'proxy.password' => [
+                            'name' => __('Password'),
+                            'type' => 'string',
+                            'description' => __('The authentication password for the HTTP proxy.'),
+                            'default' => '',
+                            'dependsOn' => 'proxy.host',
+                        ],
+                    ],
+                ],
+                'UI' => [
+                    'General' => [
+                        'ui.bsTheme' => [
+                            'description' => 'The Bootstrap theme to use for the application',
+                            'default' => 'default',
+                            'name' => 'UI Theme',
+                            'options' => function ($settingsProviders) {
+                                $instanceTable = TableRegistry::getTableLocator()->get('Instance');
+                                $themes = $instanceTable->getAvailableThemes();
+                                return array_combine($themes, $themes);
+                            },
+                            'severity' => 'info',
+                            'type' => 'select'
+                        ],
+                    ],
+                ],
+            ],
+            'Security' => [
+                'Development' => [
+                    'Debugging' => [
+                        'security.debug' => [
+                            'name' => __('Debug Level'),
+                            'type' => 'select',
+                            'description' => __('The debug level of the instance'),
+                            'default' => 0,
+                            'options' => [
+                                0 => __('Debug Off'),
+                                1 => __('Debug On'),
+                                2 => __('Debug On + SQL Dump'),
+                            ],
+                            'test' => function ($value, $setting, $validator) {
+                                $validator->range('value', [0, 3]);
+                                return testValidator($value, $validator);
+                            },
+                        ],
+                    ],
+                ]
+            ],
+            'Features' => [
+                'Demo Settings' => [
+                    'demo.switch' => [
+                        'name' => __('Switch'),
+                        'type' => 'boolean',
+                        'description' => __('A switch acting as a checkbox'),
+                        'default' => false,
+                        'test' => function () {
+                            return 'Fake error';
+                        },
+                    ],
+                ]
+            ],
+        ];
+    }
+}
+
+function testValidator($value, $validator)
+{
+    $errors = $validator->validate(['value' => $value]);
+    return !empty($errors) ? implode(', ', $errors['value']) : true;
+}
+
+class CerebrateSettingValidator extends SettingValidator
+{
+    public function testUuid($value, &$setting)
+    {
+        if (empty($value) || !preg_match('/^\{?[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}\}?$/', $value)) {
+            return __('Invalid UUID.');
+        }
+        return true;
+    }
+
+
+    public function testBaseURL($value, &$setting)
+    {
+        if (empty($value)) {
+            return __('Cannot be empty');
+        }
+        if (!empty($value) && !preg_match('/^http(s)?:\/\//i', $value)) {
+            return __('Invalid URL, please make sure that the protocol is set.');
+        }
+        return true;
+    }  
+}
\ No newline at end of file
diff --git a/src/Model/Table/SettingsTable.php b/src/Model/Table/SettingsTable.php
index 0235cdc..0459ce7 100644
--- a/src/Model/Table/SettingsTable.php
+++ b/src/Model/Table/SettingsTable.php
@@ -3,9 +3,10 @@ namespace App\Model\Table;
 
 use App\Model\Table\AppTable;
 use Cake\ORM\Table;
-use Cake\Validation\Validator;
 use Cake\Core\Configure;
-use Cake\ORM\TableRegistry;
+
+require_once(APP . 'Model' . DS . 'Table' . DS . 'SettingProviders' . DS . 'CerebrateSettingsProvider.php');
+use App\Settings\SettingsProvider\CerebrateSettingsProvider;
 
 class SettingsTable extends AppTable
 {
@@ -16,7 +17,7 @@ class SettingsTable extends AppTable
     {
         parent::initialize($config);
         $this->setTable(false);
-        $this->SettingsProvider = TableRegistry::getTableLocator()->get('SettingsProvider');
+        $this->SettingsProvider = new CerebrateSettingsProvider();
     }
 
     public function getSettings($full=false): array
diff --git a/templates/Instance/settings.php b/templates/Instance/settings.php
index 20215c6..334b5c5 100644
--- a/templates/Instance/settings.php
+++ b/templates/Instance/settings.php
@@ -26,191 +26,48 @@ array_unshift($tabContents, $notice);
 ?>
 
 <script>
-    const variantFromSeverity = <?= json_encode($variantFromSeverity) ?>;
-    const settingsFlattened = <?= json_encode($settingsFlattened) ?>;
+    window.variantFromSeverity = <?= json_encode($variantFromSeverity) ?>;
+    window.settingsFlattened = <?= json_encode($settingsFlattened) ?>;
+    window.saveSettingURL = '/instance/saveSetting'
 </script>
 
 <div class="px-5">
     <div class="mb-3 mt-2">
         <?=
-            $this->element('Settings/search', [
-                'settingsFlattened' => $settingsFlattened,
-            ]);
+        $this->element('Settings/search', [
+            'settingsFlattened' => $settingsFlattened,
+        ]);
         ?>
     </div>
     <?php
-        $tabsOptions = [
-            'card' => false,
-            'pills' => false,
-            'justify' => 'center',
-            'nav-class' => ['settings-tabs'],
-            'data' => [
-                'navs' => $navLinks,
-                'content' => $tabContents
-            ]
-        ];
-        echo $this->Bootstrap->tabs($tabsOptions);
+    $tabsOptions = [
+        'card' => false,
+        'pills' => false,
+        'justify' => 'center',
+        'nav-class' => ['settings-tabs'],
+        'data' => [
+            'navs' => $navLinks,
+            'content' => $tabContents
+        ]
+    ];
+    echo $this->Bootstrap->tabs($tabsOptions);
+    echo $this->Html->script('settings');
     ?>
 </div>
 
-<script>
-    $(document).ready(function() {
-        new bootstrap.Tooltip('.depends-on-icon', {
-            placement: 'right',
-        })
-        $('select.custom-select[multiple]').select2()
-
-        $('.settings-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
-            $('[data-bs-spy="scroll"]').trigger('scroll.bs.scrollspy')
-        })
-
-        $('.tab-content input, .tab-content select').on('input', function() {
-            if ($(this).attr('type') == 'checkbox') {
-                const $input = $(this)
-                const $inputGroup = $(this).closest('.setting-group')
-                const settingName = $(this).data('setting-name')
-                const settingValue = $(this).is(':checked') ? 1 : 0
-                saveSetting($inputGroup[0], $input, settingName, settingValue)
-            } else {
-                handleSettingValueChange($(this))
-            }
-        })
-
-        $('.tab-content .setting-group .btn-save-setting').click(function() {
-            const $input = $(this).closest('.input-group').find('input, select')
-            const settingName = $input.data('setting-name')
-            const settingValue = $input.val()
-            saveSetting(this, $input, settingName, settingValue)
-        })
-        $('.tab-content .setting-group .btn-reset-setting').click(function() {
-            const $btn = $(this)
-            const $input = $btn.closest('.input-group').find('input, select')
-            let oldValue = settingsFlattened[$input.data('setting-name')].value
-            if ($input.is('select')) {
-                oldValue = oldValue !== undefined ? oldValue : -1
-            } else {
-                oldValue = oldValue !== undefined ? oldValue : ''
-            }
-            $input.val(oldValue)
-            handleSettingValueChange($input)
-        })
-
-        const referencedID = window.location.hash
-        redirectToSetting(referencedID)
-    })
-
-    function saveSetting(statusNode, $input, settingName, settingValue) {
-        const url = '/instance/saveSetting/'
-        const data = {
-            name: settingName,
-            value: settingValue,
-        }
-        const APIOptions = {
-            statusNode: statusNode,
-        }
-        AJAXApi.quickFetchAndPostForm(url, data, APIOptions).then((result) => {
-            settingsFlattened[settingName] = result.data
-            if ($input.attr('type') == 'checkbox') {
-                $input.prop('checked', result.data.value)
-            } else {
-                $input.val(result.data.value)
-            }
-            handleSettingValueChange($input)
-        }).catch((e) => {})
-    }
-
-    function handleSettingValueChange($input) {
-        const oldValue = settingsFlattened[$input.data('setting-name')].value
-        const newValue = ($input.attr('type') == 'checkbox' ? $input.is(':checked') : $input.val())
-        if (newValue == oldValue || (newValue == '' && oldValue == undefined)) {
-            restoreWarnings($input)
-        } else {
-            removeWarnings($input)
-        }
-    }
-
-    function removeWarnings($input) {
-        const $inputGroup = $input.closest('.input-group')
-        const $btnSettingAction = $inputGroup.find('.btn-setting-action')
-        const $saveButton = $('.setting-group button.btn-save-setting')
-        $input.removeClass(['is-invalid', 'border-warning', 'border-danger', 'border-info', 'warning', 'info'])
-        $btnSettingAction.removeClass('d-none')
-        if ($input.is('select') && $input.find('option:selected').data('is-empty-option') == 1) {
-            $btnSettingAction.addClass('d-none') // hide save button if empty selection picked
-        }
-        $inputGroup.parent().find('.invalid-feedback').removeClass('d-block')
-    }
-
-    function restoreWarnings($input) {
-        const $inputGroup = $input.closest('.input-group')
-        const $btnSettingAction = $inputGroup.find('.btn-setting-action')
-        const $saveButton = $('.setting-group button.btn-save-setting')
-        const setting = settingsFlattened[$input.data('setting-name')]
-        if (setting.error) {
-            borderVariant = setting.severity !== undefined ? variantFromSeverity[setting.severity] : 'warning'
-            $input.addClass(['is-invalid', `border-${borderVariant}`, borderVariant])
-            $inputGroup.parent().find('.invalid-feedback').addClass('d-block').text(setting.errorMessage)
-        } else {
-            removeWarnings($input)
-        }
-        const $callout = $input.closest('.settings-group')
-        updateCalloutColors($callout)
-        $btnSettingAction.addClass('d-none')
-    }
-
-    function updateCalloutColors($callout) {
-        if ($callout.length == 0) {
-            return
-        }
-        const $settings = $callout.find('input, select')
-        const settingNames = Array.from($settings).map((i) => {
-            return $(i).data('setting-name')
-        })
-        const severityMapping = {null: 0, info: 1, warning: 2, critical: 3}
-        const severityMappingInverted = Object.assign({}, ...Object.entries(severityMapping).map(([k, v]) => ({[v]: k})))
-        let highestSeverity = severityMapping[null]
-        settingNames.forEach(name => {
-            if (settingsFlattened[name].error) {
-                highestSeverity = severityMapping[settingsFlattened[name].severity] > highestSeverity ? severityMapping[settingsFlattened[name].severity] : highestSeverity
-            }
-        });
-        highestSeverity = severityMappingInverted[highestSeverity]
-        $callout.removeClass(['callout', 'callout-danger', 'callout-warning', 'callout-info'])
-        if (highestSeverity !== null) {
-            $callout.addClass(['callout', `callout-${variantFromSeverity[highestSeverity]}`])
-        }
-    }
-
-    function redirectToSetting(referencedID) {
-        const $settingToFocus = $(referencedID)
-        const pageNavID = $(referencedID).closest('.tab-pane').attr('aria-labelledby')
-        const $navController = $(`#${pageNavID}`)
-        const $settingGroup = $settingToFocus.closest('.settings-group')
-        $navController
-            .on('shown.bs.tab.after-redirect', () => {
-                $settingToFocus[0].scrollIntoView()
-                const inputID = $settingToFocus.parent().attr('for')
-                $settingToFocus.closest('.setting-group').find(`#${inputID}`).focus()
-                $navController.off('shown.bs.tab.after-redirect')
-                $settingGroup.addClass(['to-be-slided', 'slide-in'])
-            })
-            .tab('show')
-        $settingGroup.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
-            $(this).removeClass(['to-be-slided', 'slide-in'])
-        });
-    }
-</script>
-
 <style>
     .input-group-actions {
         z-index: 5;
     }
-    .form-control[type="number"] ~ div > a.btn-reset-setting {
+
+    .form-control[type="number"]~div>a.btn-reset-setting {
         left: -3em;
     }
-    select.custom-select[multiple][data-setting-name] ~ span.select2-container{
+
+    select.custom-select[multiple][data-setting-name]~span.select2-container {
         min-width: unset;
     }
+
     span.select2-container--open {
         min-width: unset;
     }
diff --git a/templates/Users/settings.php b/templates/Users/settings.php
index 22222bf..da014ca 100644
--- a/templates/Users/settings.php
+++ b/templates/Users/settings.php
@@ -1,54 +1,19 @@
 <?php
-use Cake\ORM\TableRegistry;
+$navLinks = [];
+$tabContents = [];
 
-function isLeaf($setting)
-{
-    return !empty($setting['name']) && !empty($setting['type']);
-}
-
-function getResolvableID($sectionName, $panelName = false)
-{
-    $id = sprintf('sp-%s', preg_replace('/(\.|\W)/', '_', h($sectionName)));
-    if (!empty($panelName)) {
-        $id .= '-' . preg_replace('/(\.|\W)/', '_', h($panelName));
-    }
-    return $id;
-}
-
-
-$settings = [
-    __('Appearance') => [
-        'ui.bsTheme' => [
-            'description' => 'The Bootstrap theme to use for the application',
-            'default' => 'default',
-            'name' => 'UI Theme',
-            'options' => (function () {
-                $instanceTable = TableRegistry::getTableLocator()->get('Instance');
-                $themes = $instanceTable->getAvailableThemes();
-                return array_combine($themes, $themes);
-            })(),
-            'severity' => 'info',
-            'type' => 'select'
-        ],
-    ],
-    __('Bookmarks') => 'Bookmarks',
-    __('Account Security') => 'Account Security',
-];
-
-$cardNavs = array_keys($settings);
-$cardContent = [];
-
-$sectionHtml = '';
-foreach ($settings[__('Appearance')] as $sectionName => $sectionContent) {
-    $sectionHtml .= $this->element('Settings/panel', [
-        'sectionName' => $sectionName,
-        'panelName' => $sectionName,
-        'panelSettings' => $sectionContent,
+foreach ($settingsProvider as $settingTitle => $settingContent) {
+    $navLinks[] = h($settingTitle);
+    $tabContents[] = $this->element('Settings/category', [
+        'settings' => $settingContent,
+        'includeScrollspy' => false,
     ]);
 }
-$cardContent[] = $sectionHtml;
-$cardContent[] = $settings[__('Bookmarks')];
-$cardContent[] = $settings[__('Account Security')];
+
+$navLinks[] = __('Bookmarks');
+$tabContents[] = $this->element('UserSettings/saved-bookmarks', [
+    'bookmarks' => !empty($user->user_settings_by_name['ui.bookmarks']['value']) ? json_decode($user->user_settings_by_name['ui.bookmarks']['value'], true) : []
+]);
 
 $tabsOptions = [
     'vertical' => true,
@@ -58,13 +23,19 @@ $tabsOptions = [
     'justify' => 'center',
     'nav-class' => ['settings-tabs'],
     'data' => [
-        'navs' => $cardNavs,
-        'content' => $cardContent
+        'navs' => $navLinks,
+        'content' => $tabContents
     ]
 ];
 $tabs = $this->Bootstrap->tabs($tabsOptions);
+echo $this->Html->script('settings');
 ?>
 
+<script>
+    window.settingsFlattened = <?= json_encode($settingsFlattened) ?>;
+    window.saveSettingURL = '/userSettings/saveSetting'
+</script>
+
 <h2 class="fw-light"><?= __('Account settings') ?></h2>
 <div class="p-2">
     <div>
diff --git a/webroot/js/settings.js b/webroot/js/settings.js
new file mode 100644
index 0000000..e8b4808
--- /dev/null
+++ b/webroot/js/settings.js
@@ -0,0 +1,164 @@
+const variantFromSeverity = {
+    'critical': 'danger',
+    'warning': 'warning',
+    'info': 'info',
+}
+
+$(document).ready(function () {
+    if (
+        variantFromSeverity === undefined ||
+        window.settingsFlattened === undefined ||
+        window.saveSettingURL === undefined
+    ) {
+        console.error('`settingFlatenned` and `saveSettingURL` variables must be set')
+    }
+
+    if (document.getElementsByClassName('.depends-on-icon').length > 0) {
+        new bootstrap.Tooltip('.depends-on-icon', {
+            placement: 'right',
+        })
+    }
+    $('select.custom-select[multiple]').select2()
+
+    $('.settings-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (event) {
+        $('[data-bs-spy="scroll"]').trigger('scroll.bs.scrollspy')
+    })
+
+    $('.tab-content input, .tab-content select').on('input', function () {
+        if ($(this).attr('type') == 'checkbox') {
+            const $input = $(this)
+            const $inputGroup = $(this).closest('.setting-group')
+            const settingName = $(this).data('setting-name')
+            const settingValue = $(this).is(':checked') ? 1 : 0
+            saveSetting($inputGroup[0], $input, settingName, settingValue)
+        } else {
+            handleSettingValueChange($(this))
+        }
+    })
+
+    $('.tab-content .setting-group .btn-save-setting').click(function () {
+        const $input = $(this).closest('.input-group').find('input, select')
+        const settingName = $input.data('setting-name')
+        const settingValue = $input.val()
+        saveSetting(this, $input, settingName, settingValue)
+    })
+    $('.tab-content .setting-group .btn-reset-setting').click(function () {
+        const $btn = $(this)
+        const $input = $btn.closest('.input-group').find('input, select')
+        let oldValue = window.settingsFlattened[$input.data('setting-name')].value
+        if ($input.is('select')) {
+            oldValue = oldValue !== undefined ? oldValue : -1
+        } else {
+            oldValue = oldValue !== undefined ? oldValue : ''
+        }
+        $input.val(oldValue)
+        handleSettingValueChange($input)
+    })
+
+    const referencedID = window.location.hash
+    redirectToSetting(referencedID)
+})
+
+function saveSetting(statusNode, $input, settingName, settingValue) {
+    const url = window.saveSettingURL
+    const data = {
+        name: settingName,
+        value: settingValue,
+    }
+    const APIOptions = {
+        statusNode: statusNode,
+    }
+    AJAXApi.quickFetchAndPostForm(url, data, APIOptions).then((result) => {
+        window.settingsFlattened[settingName] = result.data
+        if ($input.attr('type') == 'checkbox') {
+            $input.prop('checked', result.data.value == true)
+        } else {
+            $input.val(result.data.value)
+        }
+        handleSettingValueChange($input)
+    }).catch((e) => { })
+}
+
+function handleSettingValueChange($input) {
+    let oldValue = window.settingsFlattened[$input.data('setting-name')].value
+    const newValue = ($input.attr('type') == 'checkbox' ? $input.is(':checked') : $input.val())
+    if ($input.attr('type') == 'checkbox') {
+        oldValue = oldValue == true
+    }
+    if (newValue == oldValue || (newValue == '' && oldValue == undefined)) {
+        restoreWarnings($input)
+    } else {
+        removeWarnings($input)
+    }
+}
+
+function removeWarnings($input) {
+    const $inputGroup = $input.closest('.input-group')
+    const $btnSettingAction = $inputGroup.find('.btn-setting-action')
+    const $saveButton = $('.setting-group button.btn-save-setting')
+    $input.removeClass(['is-invalid', 'border-warning', 'border-danger', 'border-info', 'warning', 'info'])
+    $btnSettingAction.removeClass('d-none')
+    if ($input.is('select') && $input.find('option:selected').data('is-empty-option') == 1) {
+        $btnSettingAction.addClass('d-none') // hide save button if empty selection picked
+    }
+    $inputGroup.parent().find('.invalid-feedback').removeClass('d-block')
+}
+
+function restoreWarnings($input) {
+    const $inputGroup = $input.closest('.input-group')
+    const $btnSettingAction = $inputGroup.find('.btn-setting-action')
+    const $saveButton = $('.setting-group button.btn-save-setting')
+    const setting = window.settingsFlattened[$input.data('setting-name')]
+    if (setting.error) {
+        borderVariant = setting.severity !== undefined ? variantFromSeverity[setting.severity] : 'warning'
+        $input.addClass(['is-invalid', `border-${borderVariant}`, borderVariant])
+        $inputGroup.parent().find('.invalid-feedback').addClass('d-block').text(setting.errorMessage)
+    } else {
+        removeWarnings($input)
+    }
+    const $callout = $input.closest('.settings-group')
+    updateCalloutColors($callout)
+    $btnSettingAction.addClass('d-none')
+}
+
+function updateCalloutColors($callout) {
+    if ($callout.length == 0) {
+        return
+    }
+    const $settings = $callout.find('input, select')
+    const settingNames = Array.from($settings).map((i) => {
+        return $(i).data('setting-name')
+    })
+    const severityMapping = { null: 0, info: 1, warning: 2, critical: 3 }
+    const severityMappingInverted = Object.assign({}, ...Object.entries(severityMapping).map(([k, v]) => ({ [v]: k })))
+    let highestSeverity = severityMapping[null]
+    settingNames.forEach(name => {
+        if (window.settingsFlattened[name].error) {
+            highestSeverity = severityMapping[window.settingsFlattened[name].severity] > highestSeverity ? severityMapping[window.settingsFlattened[name].severity] : highestSeverity
+        }
+    });
+    highestSeverity = severityMappingInverted[highestSeverity]
+    $callout.removeClass(['callout', 'callout-danger', 'callout-warning', 'callout-info'])
+    if (highestSeverity !== null) {
+        $callout.addClass(['callout', `callout-${variantFromSeverity[highestSeverity]}`])
+    }
+}
+
+function redirectToSetting(referencedID) {
+    const $settingToFocus = $(referencedID)
+    const pageNavID = $(referencedID).closest('.tab-pane').attr('aria-labelledby')
+    const $navController = $(`#${pageNavID}`)
+    const $settingGroup = $settingToFocus.closest('.settings-group')
+    $navController
+        .on('shown.bs.tab.after-redirect', () => {
+            $settingToFocus[0].scrollIntoView()
+            const inputID = $settingToFocus.parent().attr('for')
+            $settingToFocus.closest('.setting-group').find(`#${inputID}`).focus()
+            $navController.off('shown.bs.tab.after-redirect')
+            $settingGroup.addClass(['to-be-slided', 'slide-in'])
+        })
+        .tab('show')
+    $settingGroup.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
+        $(this).removeClass(['to-be-slided', 'slide-in'])
+    });
+}
\ No newline at end of file