diff --git a/src/View/Helper/FormFieldMassageHelper.php b/src/View/Helper/FormFieldMassageHelper.php
index b0db4ab..7dd1a40 100644
--- a/src/View/Helper/FormFieldMassageHelper.php
+++ b/src/View/Helper/FormFieldMassageHelper.php
@@ -8,7 +8,7 @@ class FormFieldMassageHelper extends Helper
 {
     public function prepareFormElement(\Cake\View\Helper\FormHelper $form, array $controlParams, array $fieldData): string
     {
-        if ($fieldData['tooltip']) {
+        if (!empty($fieldData['tooltip'])) {
             $form->setTemplates([
                 'label' => '{{text}}{{tooltip}}',
             ]);
diff --git a/templates/MetaTemplates/migrate_old_meta_template_to_newest_version_for_entity.php b/templates/MetaTemplates/migrate_old_meta_template_to_newest_version_for_entity.php
index 32252c7..fa0b920 100644
--- a/templates/MetaTemplates/migrate_old_meta_template_to_newest_version_for_entity.php
+++ b/templates/MetaTemplates/migrate_old_meta_template_to_newest_version_for_entity.php
@@ -97,7 +97,6 @@ echo $this->Html->scriptBlock(sprintf(
 
     function submitMigration() {
         const $form = $('.to-save-container form')
-        console.log($form.attr('action'));
         AJAXApi.quickPostForm($form[0]).then((postResult) => {
             if (postResult.additionalData.redirect.url !== undefined) {
                 window.location = postResult.additionalData.redirect.url
diff --git a/templates/Users/add.php b/templates/Users/add.php
index 9aff9d3..8afcd69 100644
--- a/templates/Users/add.php
+++ b/templates/Users/add.php
@@ -102,7 +102,6 @@ echo $this->element('genericElements/Form/genericForm', [
 <script>
     $(document).ready(function() {
         const entity = <?= json_encode($entity) ?>;
-        console.log(entity);
         if (entity.MetaTemplates) {
             for (const [metaTemplateId, metaTemplate] of Object.entries(entity.MetaTemplates)) {
                 for (const [metaTemplateFieldId, metaTemplateField] of Object.entries(metaTemplate.meta_template_fields)) {
diff --git a/templates/element/genericElements/IndexTable/Fields/brood_sync_status.php b/templates/element/genericElements/IndexTable/Fields/brood_sync_status.php
index 018c585..53ea704 100644
--- a/templates/element/genericElements/IndexTable/Fields/brood_sync_status.php
+++ b/templates/element/genericElements/IndexTable/Fields/brood_sync_status.php
@@ -145,7 +145,6 @@ echo $this->Bootstrap->badge([
                 .data('sync-status', status)
                 .click(function() {
                     const syncStatusData = $(this).data('sync-status')['data']
-                    console.log(syncStatusData);
                     let rearrangedStatusData = []
                     for (const [field, values] of Object.entries(syncStatusData)) {
                         if (field !== 'meta_fields') {
diff --git a/templates/element/layouts/sidebar/entry.php b/templates/element/layouts/sidebar/entry.php
index 9c0bdab..9e4c65c 100644
--- a/templates/element/layouts/sidebar/entry.php
+++ b/templates/element/layouts/sidebar/entry.php
@@ -61,7 +61,7 @@
 <li class="<?= !empty($children) ? 'parent collapsed' : '' ?>">
     <?php if (!empty($children) || !empty($url)): ?>
         <a
-            class="d-flex align-items-center sidebar-link <?= !empty($children) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>"
+            class="d-flex align-items-center sidebar-link <?= (!empty($children) && !$hasActiveChild) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>"
             href="<?= h($url) ?>"
             <?= !empty($children) ? 'data-bs-toggle="collapse"' : '' ?>
             <?= $hasActiveChild ? 'aria-expanded="true"' : '' ?>
diff --git a/templates/element/layouts/sidebar/sub-menu.php b/templates/element/layouts/sidebar/sub-menu.php
index 5b96b62..916023e 100644
--- a/templates/element/layouts/sidebar/sub-menu.php
+++ b/templates/element/layouts/sidebar/sub-menu.php
@@ -2,12 +2,14 @@
     $seed = $seed ?? 'sd-' . mt_rand();
 ?>
 
-<ul id="<?= $seed ?>" class="sub-menu collapse <?= !empty($open) ? 'show' : '' ?>">
-    <?php foreach ($children as $childName => $child): ?>
-        <?= $this->element('layouts/sidebar/entry', [
-                'parentName' => $childName,
-                'parent' => $child,
-            ])
-        ?>
-    <?php endforeach; ?>
-</ul>
+<div id="<?= $seed ?>" class="collapse <?= !empty($open) ? 'show' : '' ?>">
+    <ul class="sub-menu">
+        <?php foreach ($children as $childName => $child): ?>
+            <?= $this->element('layouts/sidebar/entry', [
+                    'parentName' => $childName,
+                    'parent' => $child,
+                ])
+            ?>
+        <?php endforeach; ?>
+    </ul>
+</div>
diff --git a/webroot/css/layout-style.css b/webroot/css/layout-style.css
deleted file mode 100644
index f01a93d..0000000
--- a/webroot/css/layout-style.css
+++ /dev/null
@@ -1,139 +0,0 @@
-/* body.light-mode {
-    background-color: #f1f2f4;
-}
-
-
-body.light-mode .sub-container {
-    background-color: white;
-    box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
-}
-
-body.dark-mode .sub-container {
-    background-color: #363636;
-    border: 1px solid #454545;
-} */
-
-.sidebar {
-    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 2px 6px 0 rgb(0 0 0 / 12%);
-}
-
-.sidebar ~ main.content:after {
-    background:#000;
-}
-
-.top-navbar {
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 6px 0 rgba(0,0,0,0.12);
-}
-
-.light-mode .sidebar-wrapper {
-    border-right: 1px solid #ddd;
-}
-
-.light-mode .sidebar-wrapper {
-    border-right: 1px solid rgba(0, 0, 0, 0.125);
-}
-
-.light-mode ul.sidebar-elements li > a.sidebar-link.active {
-    background-color: #ebebeb;
-}
-.dark-mode ul.sidebar-elements li > a.sidebar-link.active {
-    background-color: #375a7f;
-}
-
-ul.sidebar-elements li > a.sidebar-link.active::after {
-    background-color: var(--cerebrate-color);
-}
-
-.light-mode .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
-    background-color: #ebebeb;
-}
-.dark-mode .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
-    background-color: #375a7f;
-}
-
-.sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child,
-.sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child {
-    background-color: unset;
-}
-
-.sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
-    background-color: var(--cerebrate-color);
-}
-
-ul.sidebar-elements li > a.sidebar-link {
-    color: unset;
-}
-
-.light-mode ul.sidebar-elements > li > a.sidebar-link:hover {
-    background-color: #f0f0f0;
-}
-.dark-mode ul.sidebar-elements > li > a.sidebar-link:hover {
-    background-color: #375a7f;
-}
-
-/* sidebar sub-menu */
-ul.sidebar-elements li.parent > a.sidebar-link::before {
-    color: #bbb;
-}
-
-ul.sidebar-elements > li ul li > a.sidebar-link:hover {
-    background-color: #e0e0e0;
-}
-
-/* 
-    Header
-*/
-header.navbar-dark.top-navbar .header-menu > a:hover,
-header.navbar-dark.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
-    color: #d6d6d6 !important;
-}
-header.navbar-light.top-navbar .header-menu > a:hover,
-header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
-    color: #6c757d !important;
-}
-
-.center-navbar nav.header-breadcrumb {
-    color: white;
-}
-
-.navbar-dark .center-navbar nav.header-breadcrumb li.header-breadcrumb-item  a{
-    color: white;
-}
-.navbar-light .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a {
-    color: black;
-}
-
-.header-breadcrumb-children {
-    box-shadow: 
-        0 1px 0 rgba(255, 255, 255, 0.07),
-        inset 0 -1px 2px rgba(0, 0, 0, 0.5),
-        inset 0 3px 5px rgba(0, 0, 0, 0.6);
-}
-
-.navbar-dark .right-navbar .header-menu a.nav-link {
-    color: white;
-}
-.navbar-light .right-navbar .header-menu a {
-    color: black;
-}
-
-.navbar-dark .left-navbar .navbar-brand img {
-    filter: invert(1);
-}
-.navbar-light .left-navbar .navbar-brand img {
-    filter: invert(0);
-}
-
-.navbar-dark .left-navbar .navbar-brand:hover img {
-    filter: invert(1) drop-shadow(0px 0px 3px #fff);
-}
-.navbar-light .left-navbar .navbar-brand:hover img {
-    filter: invert(0) drop-shadow(0px 0px 3px #000);
-}
-
-.navbar-light .composed-app-icon-container > .app-icon {
-    background-color: black;
-}
-.navbar-dark .composed-app-icon-container > .app-icon {
-    background-color: white;
-}
diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index f7f57c2..8f40e4c 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -352,10 +352,13 @@ ul.sidebar-elements > li > a.sidebar-link > i.sidebar-icon {
 .sidebar.expanded ul.sidebar-elements > li > a.sidebar-link > span.text,
 .sidebar:hover ul.sidebar-elements > li > a.sidebar-link > span.text {
     visibility: visible;
+    opacity: 1;
 }
 
 ul.sidebar-elements > li > a.sidebar-link > span.text {
     visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.2s linear;
     line-height: 40px;
     white-space: nowrap;
 }
@@ -363,17 +366,18 @@ ul.sidebar-elements > li > a.sidebar-link > span.text {
 /* sidebar sub-menu */
 ul.sidebar-elements li.parent > a.sidebar-link::before {
     visibility: hidden;
-    content: "\f0d7";
+    content: "\f104";
     float: right;
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     font-size: 1rem;
     order: 6 !important;
     margin-left: auto;
+    transition: transform 0.3s ease-out;
 }
 
 ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before {
-    content: "\f0d8";
+    transform: rotate(-90deg);
 }
 
 .sidebar.expanded ul.sidebar-elements li.parent > a.sidebar-link::before,
@@ -381,17 +385,20 @@ ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before {
     visibility: visible;
 }
 
-.sidebar.expanded ul.sidebar-elements li ul.show,
-.sidebar.expanded ul.sidebar-elements li ul.collapsing,
-.sidebar.expanded ul.sidebar-elements li ul.in,
-.sidebar:hover ul.sidebar-elements li ul.show,
-.sidebar:hover ul.sidebar-elements li ul.collapsing,
-.sidebar:hover ul.sidebar-elements li ul.in {
+.sidebar.expanded ul.sidebar-elements li div.show,
+.sidebar.expanded ul.sidebar-elements li div.collapsing,
+.sidebar.expanded ul.sidebar-elements li div.in,
+.sidebar:hover ul.sidebar-elements li div.show,
+.sidebar:hover ul.sidebar-elements li div.collapsing,
+.sidebar:hover ul.sidebar-elements li div.in {
     display: block;
 }
 
-ul.sidebar-elements > li ul {
+.sidebar ul.sidebar-elements li div {
     display: none;
+}
+
+ul.sidebar-elements > li ul {
     padding: 10px 0;
     list-style: none;
     line-height: 20px;
diff --git a/webroot/css/login.css b/webroot/css/login.css
index 7cfb32d..044e3f2 100644
--- a/webroot/css/login.css
+++ b/webroot/css/login.css
@@ -18,7 +18,7 @@ body {
 }
 
 .cerebrate-background-logo {
-    background-color: var(--cerebrate-color);
+    background-color: var(--application-color);
     -webkit-mask: url(/img/icon-composition/z.svg) no-repeat;
     mask: url(/img/icon-composition/z.svg) no-repeat;
     -webkit-mask-size: 400px 400px;
diff --git a/webroot/css/main.css b/webroot/css/main.css
index 391019d..5036657 100644
--- a/webroot/css/main.css
+++ b/webroot/css/main.css
@@ -1,26 +1,8 @@
-:root {
-    --cerebrate-color: #924da6;
-}
-
 .pagination li.page-item > a.page-link > .ellipsis {
     line-height: 12px;
     vertical-align: top;
 }
 
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  /* Set the fixed height of the footer here */
-  height: 60px;
-  line-height: 60px; /* Vertically center the text there */
-  background-color: #f5f5f5;
-}
-
-.black {
-    color:black;
-}
-
 .loading-overlay-container {
     backdrop-filter: blur(1px);
 }
diff --git a/webroot/css/themes/theme-darkly.css b/webroot/css/themes/theme-darkly.css
index 34e902b..8718150 100644
--- a/webroot/css/themes/theme-darkly.css
+++ b/webroot/css/themes/theme-darkly.css
@@ -1,3 +1,94 @@
+:root {
+  --bs-blue: #375a7f;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #e83e8c;
+  --bs-red: #e74c3c;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #f39c12;
+  --bs-green: #00bc8c;
+  --bs-teal: #20c997;
+  --bs-cyan: #3498db;
+  --bs-white: #fff;
+  --bs-gray: #888;
+  --bs-gray-dark: #303030;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #ebebeb;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #888;
+  --bs-gray-700: #444;
+  --bs-gray-800: #303030;
+  --bs-gray-900: #222;
+  --bs-primary: #375a7f;
+  --bs-secondary: #444;
+  --bs-success: #00bc8c;
+  --bs-info: #3498db;
+  --bs-warning: #f39c12;
+  --bs-danger: #e74c3c;
+  --bs-light: #adb5bd;
+  --bs-dark: #303030;
+  --bs-primary-rgb: 55, 90, 127;
+  --bs-secondary-rgb: 68, 68, 68;
+  --bs-success-rgb: 0, 188, 140;
+  --bs-info-rgb: 52, 152, 219;
+  --bs-warning-rgb: 243, 156, 18;
+  --bs-danger-rgb: 231, 76, 60;
+  --bs-light-rgb: 173, 181, 189;
+  --bs-dark-rgb: 48, 48, 48;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 255, 255, 255;
+  --bs-body-bg-rgb: 34, 34, 34;
+  --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #fff;
+  --bs-body-bg: #222;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
 /* Callout */
 .callout {
   border: 1px solid 1px solid none;
@@ -475,6 +566,10 @@
   height: 100%;
 }
 
+:root {
+  --application-color: #924da6;
+}
+
 /* Body */
 body {
   background-color: var(--bs-body-bg);
@@ -569,7 +664,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
-  background-color: var(--cerebrate-color);
+  background-color: var(--application-color);
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link:hover {
@@ -587,10 +682,20 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
   background-color: #60676c;
 }
 
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+  background-color: #50565a;
+  color: #fff;
+}
+
 ul.sidebar-elements li > a.sidebar-link.active::after {
-  background-color: var(--cerebrate-color);
+  background-color: var(--application-color);
 }
 
 .lock-sidebar > a.btn {
   background-color: unset;
 }
+
+.sidebar ul.sidebar-elements li ul.sub-menu {
+  background-color: #3e4346;
+  box-shadow: inset #11111a1a 0px 0px 0px 1px;
+}
diff --git a/webroot/css/themes/theme-default.css b/webroot/css/themes/theme-default.css
index 56e4cd5..3df35cc 100644
--- a/webroot/css/themes/theme-default.css
+++ b/webroot/css/themes/theme-default.css
@@ -1,3 +1,94 @@
+:root {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
 /* Callout */
 .callout {
   border: 1px solid #e9ecef;
@@ -475,6 +566,10 @@
   height: 100%;
 }
 
+:root {
+  --application-color: #924da6;
+}
+
 /* Body */
 body {
   background-color: var(--bs-body-bg);
@@ -559,21 +654,21 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.active {
-  background-color: #dbdbdb;
+  background-color: #dedede;
   color: #000;
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
-  background-color: #dbdbdb;
+  background-color: #dedede;
   color: #000;
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
-  background-color: var(--cerebrate-color);
+  background-color: var(--application-color);
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link:hover {
-  background-color: #ebebeb;
+  background-color: lightgray;
   color: #000;
 }
 
@@ -584,13 +679,23 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 
 .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
 .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
-  background-color: #ebebeb;
+  background-color: lightgray;
+}
+
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+  background-color: #c8c8c8;
+  color: #000;
 }
 
 ul.sidebar-elements li > a.sidebar-link.active::after {
-  background-color: var(--cerebrate-color);
+  background-color: var(--application-color);
 }
 
 .lock-sidebar > a.btn {
   background-color: #f8f9fa;
 }
+
+.sidebar ul.sidebar-elements li ul.sub-menu {
+  background-color: #efefef;
+  box-shadow: inset #11111a1a 0px 0px 0px 1px;
+}
diff --git a/webroot/css/themes/theme-flatly.css b/webroot/css/themes/theme-flatly.css
index b0dbfc1..84a5bb7 100644
--- a/webroot/css/themes/theme-flatly.css
+++ b/webroot/css/themes/theme-flatly.css
@@ -1,3 +1,94 @@
+:root {
+  --bs-blue: #2c3e50;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #e83e8c;
+  --bs-red: #e74c3c;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #f39c12;
+  --bs-green: #18bc9c;
+  --bs-teal: #20c997;
+  --bs-cyan: #3498db;
+  --bs-white: #fff;
+  --bs-gray: #95a5a6;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #ecf0f1;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #b4bcc2;
+  --bs-gray-600: #95a5a6;
+  --bs-gray-700: #7b8a8b;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #2c3e50;
+  --bs-secondary: #95a5a6;
+  --bs-success: #18bc9c;
+  --bs-info: #3498db;
+  --bs-warning: #f39c12;
+  --bs-danger: #e74c3c;
+  --bs-light: #ecf0f1;
+  --bs-dark: #7b8a8b;
+  --bs-primary-rgb: 44, 62, 80;
+  --bs-secondary-rgb: 149, 165, 166;
+  --bs-success-rgb: 24, 188, 156;
+  --bs-info-rgb: 52, 152, 219;
+  --bs-warning-rgb: 243, 156, 18;
+  --bs-danger-rgb: 231, 76, 60;
+  --bs-light-rgb: 236, 240, 241;
+  --bs-dark-rgb: 123, 138, 139;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
 /* Callout */
 .callout {
   border: 1px solid #ecf0f1;
@@ -475,6 +566,10 @@
   height: 100%;
 }
 
+:root {
+  --application-color: #924da6;
+}
+
 /* Body */
 body {
   background-color: var(--bs-body-bg);
@@ -559,12 +654,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.active {
-  background-color: #dbdbdb;
+  background-color: #dedede;
   color: #18bc9c;
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
-  background-color: #dbdbdb;
+  background-color: #dedede;
   color: #18bc9c;
 }
 
@@ -573,7 +668,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link:hover {
-  background-color: #ebebeb;
+  background-color: lightgray;
   color: #18bc9c;
 }
 
@@ -584,7 +679,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 
 .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
 .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
-  background-color: #ebebeb;
+  background-color: lightgray;
+}
+
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+  background-color: #c8c8c8;
+  color: #18bc9c;
 }
 
 ul.sidebar-elements li > a.sidebar-link.active::after {
@@ -594,3 +694,8 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
 .lock-sidebar > a.btn {
   background-color: unset;
 }
+
+.sidebar ul.sidebar-elements li ul.sub-menu {
+  background-color: #efefef;
+  box-shadow: inset #11111a1a 0px 0px 0px 1px;
+}
diff --git a/webroot/css/themes/theme-minty.css b/webroot/css/themes/theme-minty.css
index 421f575..9d505f4 100644
--- a/webroot/css/themes/theme-minty.css
+++ b/webroot/css/themes/theme-minty.css
@@ -1,3 +1,94 @@
+:root {
+  --bs-blue: #2c3e50;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #e83e8c;
+  --bs-red: #e74c3c;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #f39c12;
+  --bs-green: #18bc9c;
+  --bs-teal: #20c997;
+  --bs-cyan: #3498db;
+  --bs-white: #fff;
+  --bs-gray: #95a5a6;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #ecf0f1;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #b4bcc2;
+  --bs-gray-600: #95a5a6;
+  --bs-gray-700: #7b8a8b;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #2c3e50;
+  --bs-secondary: #95a5a6;
+  --bs-success: #18bc9c;
+  --bs-info: #3498db;
+  --bs-warning: #f39c12;
+  --bs-danger: #e74c3c;
+  --bs-light: #ecf0f1;
+  --bs-dark: #7b8a8b;
+  --bs-primary-rgb: 44, 62, 80;
+  --bs-secondary-rgb: 149, 165, 166;
+  --bs-success-rgb: 24, 188, 156;
+  --bs-info-rgb: 52, 152, 219;
+  --bs-warning-rgb: 243, 156, 18;
+  --bs-danger-rgb: 231, 76, 60;
+  --bs-light-rgb: 236, 240, 241;
+  --bs-dark-rgb: 123, 138, 139;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-body-bg: #fff;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
 /* Callout */
 .callout {
   border: 1px solid #ecf0f1;
@@ -475,6 +566,10 @@
   height: 100%;
 }
 
+:root {
+  --application-color: #924da6;
+}
+
 /* Body */
 body {
   background-color: var(--bs-body-bg);
@@ -559,12 +654,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.active {
-  background-color: #dbdbdb;
+  background-color: #dedede;
   color: #18bc9c;
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child {
-  background-color: #dbdbdb;
+  background-color: #dedede;
   color: #18bc9c;
 }
 
@@ -573,7 +668,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link:hover {
-  background-color: #ebebeb;
+  background-color: lightgray;
   color: #18bc9c;
 }
 
@@ -584,7 +679,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 
 .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
 .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
-  background-color: #ebebeb;
+  background-color: lightgray;
+}
+
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+  background-color: #c8c8c8;
+  color: #18bc9c;
 }
 
 ul.sidebar-elements li > a.sidebar-link.active::after {
@@ -594,3 +694,8 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
 .lock-sidebar > a.btn {
   background-color: unset;
 }
+
+.sidebar ul.sidebar-elements li ul.sub-menu {
+  background-color: #efefef;
+  box-shadow: inset #11111a1a 0px 0px 0px 1px;
+}
diff --git a/webroot/css/themes/theme-quartz.css b/webroot/css/themes/theme-quartz.css
index 45e7268..ff4e54e 100644
--- a/webroot/css/themes/theme-quartz.css
+++ b/webroot/css/themes/theme-quartz.css
@@ -1,3 +1,94 @@
+:root {
+  --bs-blue: #3a8fd9;
+  --bs-indigo: #6610f2;
+  --bs-purple: #686dc3;
+  --bs-pink: #e83283;
+  --bs-red: #fc346f;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #41d7a7;
+  --bs-teal: #528fb3;
+  --bs-cyan: #39cbfb;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9e9e8;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #e83283;
+  --bs-secondary: rgba(255, 255, 255, 0.4);
+  --bs-success: #41d7a7;
+  --bs-info: #39cbfb;
+  --bs-warning: #ffc107;
+  --bs-danger: #fd7e14;
+  --bs-light: #e9e9e8;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 232, 50, 131;
+  --bs-secondary-rgb: 255, 255, 255;
+  --bs-success-rgb: 65, 215, 167;
+  --bs-info-rgb: 57, 203, 251;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 253, 126, 20;
+  --bs-light-rgb: 233, 233, 232;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 255, 255, 255;
+  --bs-body-bg-rgb: 104, 109, 195;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #fff;
+  --bs-body-bg: #686dc3;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
 /* Callout */
 .callout {
   border: 1px solid #e9e9e8;
@@ -475,6 +566,10 @@
   height: 100%;
 }
 
+:root {
+  --application-color: #924da6;
+}
+
 /* Body */
 .panel {
   background-color: transparent;
@@ -564,7 +659,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link:hover {
-  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.46);
   color: #343a40;
 }
 
@@ -575,7 +670,12 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 
 .sidebar.expanded ul.sidebar-elements li > a.sidebar-link.have-active-child:hover,
 .sidebar:hover ul.sidebar-elements li > a.sidebar-link.have-active-child:hover {
-  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.46);
+}
+
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+  background-color: rgba(255, 255, 255, 0.58);
+  color: #343a40;
 }
 
 ul.sidebar-elements li > a.sidebar-link.active::after {
@@ -586,6 +686,11 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
   background-color: rgba(255, 255, 255, 0.4);
 }
 
+.sidebar ul.sidebar-elements li ul.sub-menu {
+  background-color: rgba(211, 211, 211, 0.43);
+  box-shadow: inset #11111a1a 0px 0px 0px 1px;
+}
+
 .btn {
   display: inline-block;
   font-weight: 400;
diff --git a/webroot/css/themes/theme-slate.css b/webroot/css/themes/theme-slate.css
index cb59b58..7d216bc 100644
--- a/webroot/css/themes/theme-slate.css
+++ b/webroot/css/themes/theme-slate.css
@@ -1,3 +1,94 @@
+:root {
+  --bs-blue: #007bff;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #e83e8c;
+  --bs-red: #ee5f5b;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #f89406;
+  --bs-green: #62c462;
+  --bs-teal: #20c997;
+  --bs-cyan: #5bc0de;
+  --bs-white: #fff;
+  --bs-gray: #7a8288;
+  --bs-gray-dark: #3a3f44;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #999;
+  --bs-gray-600: #7a8288;
+  --bs-gray-700: #52575c;
+  --bs-gray-800: #3a3f44;
+  --bs-gray-900: #272b30;
+  --bs-primary: #3a3f44;
+  --bs-secondary: #7a8288;
+  --bs-success: #62c462;
+  --bs-info: #5bc0de;
+  --bs-warning: #f89406;
+  --bs-danger: #ee5f5b;
+  --bs-light: #e9ecef;
+  --bs-dark: #272b30;
+  --bs-primary-rgb: 58, 63, 68;
+  --bs-secondary-rgb: 122, 130, 136;
+  --bs-success-rgb: 98, 196, 98;
+  --bs-info-rgb: 91, 192, 222;
+  --bs-warning-rgb: 248, 148, 6;
+  --bs-danger-rgb: 238, 95, 91;
+  --bs-light-rgb: 233, 236, 239;
+  --bs-dark-rgb: 39, 43, 48;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 170, 170, 170;
+  --bs-body-bg-rgb: 39, 43, 48;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #aaa;
+  --bs-body-bg: #272b30;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
 /* Callout */
 .callout {
   border: 1px solid #e9ecef;
@@ -475,6 +566,10 @@
   height: 100%;
 }
 
+:root {
+  --application-color: #924da6;
+}
+
 /* Body */
 body {
   background-color: var(--bs-body-bg);
@@ -569,7 +664,7 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link.have-active-child::after {
-  background-color: var(--cerebrate-color);
+  background-color: var(--application-color);
 }
 
 .sidebar ul.sidebar-elements li > a.sidebar-link:hover {
@@ -587,14 +682,24 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
   background-color: #60676c;
 }
 
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+  background-color: #50565a;
+  color: #fff;
+}
+
 ul.sidebar-elements li > a.sidebar-link.active::after {
-  background-color: var(--cerebrate-color);
+  background-color: var(--application-color);
 }
 
 .lock-sidebar > a.btn {
   background-color: #7a8288;
 }
 
+.sidebar ul.sidebar-elements li ul.sub-menu {
+  background-color: #acafb2;
+  box-shadow: inset #11111a1a 0px 0px 0px 1px;
+}
+
 .btn {
   display: inline-block;
   font-weight: 400;
diff --git a/webroot/css/themes/theme-vapor.css b/webroot/css/themes/theme-vapor.css
index d44b6ca..4ae954e 100644
--- a/webroot/css/themes/theme-vapor.css
+++ b/webroot/css/themes/theme-vapor.css
@@ -1,3 +1,94 @@
+:root {
+  --bs-blue: #1ba2f6;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #ea39b8;
+  --bs-red: #e44c55;
+  --bs-orange: #f1b633;
+  --bs-yellow: #ffc107;
+  --bs-green: #3cf281;
+  --bs-teal: #3f81a2;
+  --bs-cyan: #32fbe2;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #170229;
+  --bs-primary: #6f42c1;
+  --bs-secondary: #ea39b8;
+  --bs-success: #3cf281;
+  --bs-info: #1ba2f6;
+  --bs-warning: #ffc107;
+  --bs-danger: #e44c55;
+  --bs-light: #44d9e8;
+  --bs-dark: #170229;
+  --bs-primary-rgb: 111, 66, 193;
+  --bs-secondary-rgb: 234, 57, 184;
+  --bs-success-rgb: 60, 242, 129;
+  --bs-info-rgb: 27, 162, 246;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 228, 76, 85;
+  --bs-light-rgb: 68, 217, 232;
+  --bs-dark-rgb: 23, 2, 41;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 50, 251, 226;
+  --bs-body-bg-rgb: 26, 9, 51;
+  --bs-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #32fbe2;
+  --bs-body-bg: #1a0933;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s cubic-bezier(0, 0.71, 0.58, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width 0.35s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collapsing.collapse-horizontal {
+    transition: none;
+  }
+}
+
 /* Callout */
 .callout {
   border: 1px solid #e9ecef;
@@ -475,6 +566,10 @@
   height: 100%;
 }
 
+:root {
+  --application-color: #924da6;
+}
+
 /* Body */
 .panel {
   background-color: #363636;
@@ -578,6 +673,11 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
   background-color: #495057;
 }
 
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+  background-color: #5d6166;
+  color: #3cf281;
+}
+
 ul.sidebar-elements li > a.sidebar-link.active::after {
   background-color: #6f42c1;
 }
@@ -585,3 +685,8 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
 .lock-sidebar > a.btn {
   background-color: unset;
 }
+
+.sidebar ul.sidebar-elements li ul.sub-menu {
+  background-color: #230f34;
+  box-shadow: inset #11111a1a 0px 0px 0px 1px;
+}
diff --git a/webroot/theme/scss/theme-darkly.scss b/webroot/theme/scss/theme-darkly.scss
index 4312b4b..56a6278 100644
--- a/webroot/theme/scss/theme-darkly.scss
+++ b/webroot/theme/scss/theme-darkly.scss
@@ -2,6 +2,7 @@
 // $h1-font-size: 3rem;
 $theme: "app-darkly";
 
+@import "../node_modules/bootstrap/scss/functions";
 @import "darkly/variables";
 
 $bodyBackgroundBlendmode: soft-light;
@@ -24,10 +25,11 @@ $sidebarTextColor: $white;
 $sidebarActiveColor: $nav-tabs-link-active-color;
 $sidebarActiveBgColor: #595f64;
 $sidebarHoverColor: #60676c;
+$sidebarSubmenuColor: shade-color($sidebarActiveBgColor, 30%);
 $sidebarBorder: none;
 $sidebarShadows: none;
 $sidebarLockButton: unset;
-$activeSidebarLinkColor: var(--cerebrate-color);
+$activeSidebarLinkColor: var(--application-color);
 
 $calloutBorderColor: 1px solid none;
 
diff --git a/webroot/theme/scss/theme-default.scss b/webroot/theme/scss/theme-default.scss
index dc58b3d..16540dd 100644
--- a/webroot/theme/scss/theme-default.scss
+++ b/webroot/theme/scss/theme-default.scss
@@ -1,13 +1,18 @@
 $theme: "app-default";
 
 @import "../node_modules/bootstrap/scss/functions";
+
+$transition-collapse: height .35s cubic-bezier(0, 0.71, 0.58, 1);
+
 @import "../node_modules/bootstrap/scss/variables";
 @import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
+@import "../node_modules/bootstrap/scss/transitions";
 
 @import "./mixins/background";
 
-$cerebrateColor: #924da6;
-$bodyBackgroundImageStopColor: tint-color($cerebrateColor, 62) !default;
+$applicationColor: #924da6;
+$bodyBackgroundImageStopColor: tint-color($applicationColor, 62) !default;
 $enabledBackgroundSVG: true !default;
 $bodyBackgroundBlendmode: normal !default;
 
@@ -26,12 +31,15 @@ $headerBreadcrumbLinksBGColor: $light !default;
 $sidebarBgColor: $light !default;
 $sidebarTextColor: $black !default;
 $sidebarActiveColor: $black !default;
-$sidebarActiveBgColor: #dbdbdb !default;
-$sidebarHoverColor: #ebebeb !default;
+
+$sidebarActiveBgColor: #dedede !default;
+$sidebarSubmenuColor: tint-color($sidebarActiveBgColor, 50%) !default;
+$sidebarHoverColor: shade-color($sidebarActiveBgColor, 5%) !default;
+$sidebarHoverActiveColor: shade-color($sidebarActiveBgColor, 10%) !default;
 $sidebarBorder: #ddd !default;
 $sidebarShadows: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 6px 0 rgba(0, 0, 0, 0.12) !default;
 $sidebarLockButton: $light !default;
-$activeSidebarLinkColor: var(--cerebrate-color) !default;
+$activeSidebarLinkColor: var(--application-color) !default;
 
 // $calloutBorderColor: $gray-200 !default;
 $calloutBgColor: $panelBgColor !default;
@@ -39,6 +47,10 @@ $calloutShadow: $panelShadow !default;
 
 @import "additional/bootstrap-additional";
 
+:root {
+    --application-color: #{$applicationColor};
+}
+
 /* Body */
 body {
     @if $enabledBackgroundSVG {
@@ -151,6 +163,10 @@ header.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover {
     background-color: $sidebarHoverColor;
 }
 
+.sidebar ul.sidebar-elements li > a.sidebar-link.active:hover {
+    background-color: $sidebarHoverActiveColor;
+    color: $sidebarActiveColor;
+}
 
 ul.sidebar-elements li > a.sidebar-link.active::after {
     background-color: $activeSidebarLinkColor;
@@ -158,4 +174,9 @@ ul.sidebar-elements li > a.sidebar-link.active::after {
 
 .lock-sidebar > a.btn {
     background-color: $sidebarLockButton;
+}
+
+.sidebar ul.sidebar-elements li ul.sub-menu {
+    background-color: $sidebarSubmenuColor;
+    box-shadow: inset #11111a1a 0px 0px 0px 1px;
 }
\ No newline at end of file
diff --git a/webroot/theme/scss/theme-quartz.scss b/webroot/theme/scss/theme-quartz.scss
index 92d2e3e..2e07b50 100644
--- a/webroot/theme/scss/theme-quartz.scss
+++ b/webroot/theme/scss/theme-quartz.scss
@@ -2,6 +2,7 @@
 // $h1-font-size: 3rem;
 $theme: "app-slate";
 
+@import "../node_modules/bootstrap/scss/functions";
 @import "quartz/variables";
 
 $enabledBackgroundSVG: false;
@@ -20,7 +21,11 @@ $sidebarBgColor: $secondary;
 $sidebarTextColor: $white;
 $sidebarActiveColor: $nav-tabs-link-active-color;
 $sidebarActiveBgColor: $nav-tabs-link-active-bg;
-$sidebarHoverColor: $nav-tabs-link-active-bg;
+
+$sidebarSubmenuColor: shade-color($secondary, 5%);
+$sidebarHoverColor: tint-color($secondary, 10%);
+$sidebarHoverActiveColor: tint-color($secondary, 30%);
+
 $sidebarBorder: none;
 $sidebarShadows: none;
 $sidebarLockButton: $secondary;
diff --git a/webroot/theme/scss/theme-slate.scss b/webroot/theme/scss/theme-slate.scss
index c3e3921..03d1f34 100644
--- a/webroot/theme/scss/theme-slate.scss
+++ b/webroot/theme/scss/theme-slate.scss
@@ -28,7 +28,7 @@ $sidebarHoverColor: #60676c;
 $sidebarBorder: none;
 $sidebarShadows: none;
 $sidebarLockButton: $secondary;
-$activeSidebarLinkColor: var(--cerebrate-color);
+$activeSidebarLinkColor: var(--application-color);
 
 @import "theme-default";
 @import "../node_modules/bootstrap/scss/buttons";
diff --git a/webroot/theme/scss/theme-vapor.scss b/webroot/theme/scss/theme-vapor.scss
index 4fe035d..ab701f3 100644
--- a/webroot/theme/scss/theme-vapor.scss
+++ b/webroot/theme/scss/theme-vapor.scss
@@ -2,6 +2,7 @@
 // $h1-font-size: 3rem;
 $theme: "app-vapor";
 
+@import "../node_modules/bootstrap/scss/functions";
 @import "vapor/variables";
 
 $enabledBackgroundSVG: false;
@@ -20,6 +21,10 @@ $sidebarTextColor: $white;
 $sidebarActiveColor: $success;
 $sidebarActiveBgColor: $gray-800;
 $sidebarHoverColor: $gray-700;
+
+$sidebarSubmenuColor: tint-color($dark, 5%);
+$sidebarHoverActiveColor: tint-color($sidebarActiveBgColor, 20%);
+
 $sidebarBorder: none;
 $sidebarShadows: none;
 $sidebarLockButton: unset;