diff --git a/scss/content.scss b/scss/content.scss
new file mode 100644
index 00000000..8cffe7d7
--- /dev/null
+++ b/scss/content.scss
@@ -0,0 +1,15 @@
+/* content */
+#content {
+    height: calc(100% - 40px);
+}
+#main-area {
+    width: 0!important; /* prevent 'jumping' between 1400 and 1440px */
+}
+
+/* copysupport */
+tr.selectable td {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
diff --git a/scss/form.scss b/scss/form.scss
new file mode 100644
index 00000000..0ec1787d
--- /dev/null
+++ b/scss/form.scss
@@ -0,0 +1,4 @@
+// contentform
+#input-contentform-save:has(+ input.btn) {
+    margin-right: 1rem;
+}
diff --git a/scss/header.scss b/scss/header.scss
new file mode 100644
index 00000000..7d7525fb
--- /dev/null
+++ b/scss/header.scss
@@ -0,0 +1,157 @@
+
+/* header */
+#header-logo {
+    z-index: 4;
+}
+#header-logo, #header-logo-placeholder {
+    > span {
+        font-size: 1.5rem!important;
+    }
+}
+#header-logo-placeholder {
+    visibility: hidden;
+}
+#header-main {
+    height: var(--navbar-height);
+
+    &.navbar-expand {
+        #header-content {
+            flex-direction: row-reverse;
+        }
+        #navbar-content-wrapper {
+            box-shadow: none!important;
+            background: none;
+        }
+    }
+    &:not(.navbar-expand) {
+        #header-content {
+            flex-direction: row;
+        }
+
+        #navbar-content {
+            flex-direction: column;
+        }
+        #livesearch {
+            order: 0;
+            width: 100%;
+            padding-left: 55px !important;
+            padding-right: 15px !important;
+        }
+        #mainmenu {
+            order: 1;
+            margin-left: 10px!important;
+            margin-top: 20px;
+            margin-bottom: 20px;
+
+            ul > li {
+                // XXX
+                display: block!important;
+            }
+        }
+    }
+
+    &.compact:has(.show) {
+        height: 100%;
+    }
+    &.compact:has(.show), &.compact:has(.collapsing) {
+        #header-logo-placeholder {
+            display: none;
+        }
+
+        #navbar-content-wrapper {
+            position: relative;
+            overflow: hidden;
+            height: 100%;
+            padding: 0 !important;
+
+            @media screen and (max-width: 768px) {
+                z-index: 1200;
+            }
+        }
+        #header-content {
+            align-items: flex-start;
+        }
+        .navbar-toggler {
+            height: 50px!important; // XXX variable
+        }
+
+        #mainmenu {
+            .scrollable-content {
+                right: 0!important;
+            }
+
+            .dropdown-menu {
+                border: none;
+
+                > li {
+                    .dropdown-item {
+                        padding: 8px 20px;
+                    }
+                    &:first-child {
+                        .dropdown-item {
+                            padding-top: 0;
+                        }
+                    }
+                }
+            }
+        }
+        #personaltools {
+            height: 50px;
+            justify-content: space-between;
+            margin: auto 20px;
+
+            #colortoggler {
+                padding-left: 0;
+            }
+        }
+    }
+
+    &.full {
+        #mainmenu {
+            .dropdown-menu {
+                position: fixed;
+            }
+        }
+        #personaltools {
+            height: 100%;
+        }
+    }
+
+    #navbar-content-wrapper {
+        min-width: 0;
+        z-index: 1;
+
+        #navbar-content {
+            min-width: 0;
+        }
+    }
+    #mainmenu {
+        > ul {
+            padding-left: 8px;
+            white-space: nowrap;
+        }
+        .nav-item.active .nav-link {
+            color: $primary;
+        }
+    }
+
+    #personaltools {
+        #language-dropdown > div.dropdown-toggle > a {
+            height: 20px;
+
+            img {
+                vertical-align: baseline;
+            }
+        }
+        #colortoggler #colortoggle-switch {
+            width: 2rem;
+            height: 1rem;
+        }
+    }
+}
+#personaltools-dropdown {
+    .dropdown-item a {
+        text-decoration: none;
+        color: $form-text-color;
+    }
+}
diff --git a/scss/login.scss b/scss/login.scss
new file mode 100644
index 00000000..e98e4401
--- /dev/null
+++ b/scss/login.scss
@@ -0,0 +1,20 @@
+// login view
+#form-loginform {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    #field-loginform-user, #field-loginform-password {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        margin-bottom: 0.5rem;
+    }
+
+    #input-loginform-login {
+        margin-top: 1.5rem;
+        width: 200px;
+    }
+}
diff --git a/scss/logo.scss b/scss/logo.scss
new file mode 100644
index 00000000..8b35a333
--- /dev/null
+++ b/scss/logo.scss
@@ -0,0 +1,7 @@
+/* responsive changes */
+#layout:has(#sidebar_left.expanded),
+#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) {
+    #header-logo {
+        color: #fff;
+    }
+}
diff --git a/scss/scrollbar.scss b/scss/scrollbar.scss
new file mode 100644
index 00000000..927b05f9
--- /dev/null
+++ b/scss/scrollbar.scss
@@ -0,0 +1,41 @@
+/* scrollbar */
+.scrollable-x, .scrollable-y {
+    position: relative;
+    overflow: hidden;
+}
+.scrollable-content {
+    position: relative;
+}
+.scrollbar {
+    display: none;
+    position: absolute;
+    background: $gray-300;
+    border-radius: 3px;
+    z-index: 1000;
+
+    .scroll-handle {
+        position: relative;
+        border-radius: 3px;
+        background: $primary;
+    }
+}
+.scrollbar-top {
+    .scrollbar {
+        top: 0;
+    }
+}
+.scrollbar-bottom {
+    .scrollbar {
+        bottom: 0;
+    }
+}
+.scrollbar-left {
+    .scrollbar {
+        left: 0;
+    }
+}
+.scrollbar-right {
+    .scrollbar {
+        right: 0;
+    }
+}
diff --git a/scss/sidebar.scss b/scss/sidebar.scss
new file mode 100644
index 00000000..a9ef6f83
--- /dev/null
+++ b/scss/sidebar.scss
@@ -0,0 +1,132 @@
+@import 'colors';
+@import "bootstrap/mixins/_breakpoints";
+
+/* sidebar */
+#sidebar_left {
+    height: 100%;
+    max-height: 100%;
+    user-select: none;
+
+    > .scrollable-y {
+        margin-top: 34px;
+    }
+
+    ul.list-group, ul.list-group li {
+        background-color: inherit;
+    }
+
+    #navtree {
+        max-width: 100%;
+
+        .nav-link {
+            z-index: 2000;
+            white-space: nowrap;
+
+            &.active {
+                background-color: transparent;
+                font-weight: bold;
+            }
+
+            i.bi-chevron-right {
+                vertical-align: text-bottom;
+            }
+
+            span {
+                display: inline-block;
+                width: calc(100% - 40px);
+                text-overflow: ellipsis;
+                overflow-x: hidden;
+                vertical-align: text-bottom;
+            }
+        }
+    }
+
+    #sidebar_resize {
+        position: relative;
+        left: 100%;
+        width: 0;
+        height: 0;
+
+        #sidebar_resizer {
+            position: absolute;
+            z-index: 3;
+            height: 100vh;
+            width: 20px;
+            transform: translateX(-50%);
+            cursor: col-resize;
+        }
+    }
+
+    #sidebar_collapse {
+        position: relative;
+        left: 100%;
+        top: 100%;
+        width: 0;
+        height: 0;
+
+        .collapse_btn {
+            position: absolute;
+            bottom: 0px;
+            border-radius: 100%;
+            z-index: 20001;
+        }
+    }
+
+    &.collapsed {
+        width: 0px!important;
+        min-width: 0!important;
+
+        #sidebar_resize {
+            display: none;
+        }
+        #sidebar_collapse .collapse_btn .bi-chevron-left {
+            display: none;
+        }
+    }
+    &.expanded {
+        #sidebar_collapse .collapse_btn .bi-chevron-right {
+            display: none;
+        }
+    }
+
+    @include media-breakpoint-up(xxl) {
+        &:not(.collapsed) #sidebar_collapse .collapse_btn {
+            transform: translateX(-20px);
+
+            .bi-chevron-right {
+                display: none;
+            }
+        }
+    }
+    @include media-breakpoint-down(xxl) {
+        &:not(.expanded) {
+            width: 0!important;
+            min-width: 0!important;
+
+            #sidebar_resize {
+                display: none;
+            }
+            #sidebar_collapse .collapse_btn .bi-chevron-left {
+                display: none;
+            }
+        }
+    }
+    @include media-breakpoint-between(md, xxl) {
+        &.expanded #sidebar_collapse .collapse_btn {
+            transform: translateX(-20px);
+        }
+    }
+    @include media-breakpoint-down(md) {
+        #sidebar_resize {
+            display: none;
+        }
+        &.expanded {
+            width: 100%!important;
+            z-index: 3;
+
+            #sidebar_collapse {
+                left: calc(100% - 50px);
+            }
+        }
+    }
+}
diff --git a/scss/styles.scss b/scss/styles.scss
index 56ad951c..b8be80a3 100644
--- a/scss/styles.scss
+++ b/scss/styles.scss
@@ -13,402 +13,11 @@ body {
     height: 100%;
 }
 
-/* sidebar */
-#sidebar_left {
-    height: 100%;
-    max-height: 100%;
-    user-select: none;
-
-    > .scrollable-y {
-        margin-top: 34px;
-    }
-
-    ul.list-group, ul.list-group li {
-        background-color: inherit;
-    }
-
-    #navtree {
-        max-width: 100%;
-
-        .nav-link {
-            z-index: 2000;
-            white-space: nowrap;
-
-            &.active {
-                background-color: transparent;
-                font-weight: bold;
-            }
-
-            i.bi-chevron-right {
-                vertical-align: text-bottom;
-            }
-
-            span {
-                display: inline-block;
-                width: calc(100% - 40px);
-                text-overflow: ellipsis;
-                overflow-x: hidden;
-                vertical-align: text-bottom;
-            }
-        }
-    }
-
-    #sidebar_resize {
-        position: relative;
-        left: 100%;
-        width: 0;
-        height: 0;
-
-        #sidebar_resizer {
-            position: absolute;
-            z-index: 3;
-            height: 100vh;
-            width: 20px;
-            transform: translateX(-50%);
-            cursor: col-resize;
-        }
-    }
-
-    #sidebar_collapse {
-        position: relative;
-        left: 100%;
-        top: 100%;
-        width: 0;
-        height: 0;
-
-        .collapse_btn {
-            position: absolute;
-            bottom: 0px;
-            border-radius: 100%;
-            z-index: 20001;
-        }
-    }
-
-    &.collapsed {
-        width: 0px!important;
-        min-width: 0!important;
-
-        #sidebar_resize {
-            display: none;
-        }
-        #sidebar_collapse .collapse_btn .bi-chevron-left {
-            display: none;
-        }
-    }
-    &.expanded {
-        #sidebar_collapse .collapse_btn .bi-chevron-right {
-            display: none;
-        }
-    }
-
-    @include media-breakpoint-up(xxl) {
-        &:not(.collapsed) #sidebar_collapse .collapse_btn {
-            transform: translateX(-20px);
-
-            .bi-chevron-right {
-                display: none;
-            }
-        }
-    }
-    @include media-breakpoint-down(xxl) {
-        &:not(.expanded) {
-            width: 0!important;
-            min-width: 0!important;
-
-            #sidebar_resize {
-                display: none;
-            }
-            #sidebar_collapse .collapse_btn .bi-chevron-left {
-                display: none;
-            }
-        }
-    }
-    @include media-breakpoint-between(md, xxl) {
-        &.expanded #sidebar_collapse .collapse_btn {
-            transform: translateX(-20px);
-        }
-    }
-    @include media-breakpoint-down(md) {
-        #sidebar_resize {
-            display: none;
-        }
-        &.expanded {
-            width: 100%!important;
-            z-index: 3;
-
-            #sidebar_collapse {
-                left: calc(100% - 50px);
-            }
-        }
-    }
-}
-
-/* header */
-#header-logo {
-    z-index: 4;
-}
-#header-logo, #header-logo-placeholder {
-    > span {
-        font-size: 1.5rem!important;
-    }
-}
-#header-logo-placeholder {
-    visibility: hidden;
-}
-#header-main {
-    height: 50px;
-
-    &.navbar-expand {
-        #header-content {
-            flex-direction: row-reverse;
-        }
-        #navbar-content-wrapper {
-            box-shadow: none!important;
-            background: none;
-        }
-    }
-    &:not(.navbar-expand) {
-        #header-content {
-            flex-direction: row;
-        }
-
-        #navbar-content {
-            flex-direction: column;
-        }
-        #livesearch {
-            order: 0;
-            width: 100%;
-            padding-left: 55px !important;
-            padding-right: 15px !important;
-        }
-        #mainmenu {
-            order: 1;
-            margin-left: 10px!important;
-            margin-top: 20px;
-            margin-bottom: 20px;
-
-            ul > li {
-                // XXX
-                display: block!important;
-            }
-        }
-    }
-
-    &.compact:has(.show) {
-        height: 100%;
-    }
-    &.compact:has(.show), &.compact:has(.collapsing) {
-        #header-logo-placeholder {
-            display: none;
-        }
-
-        #navbar-content-wrapper {
-            position: relative;
-            overflow: hidden;
-            height: 100%;
-            padding: 0 !important;
-
-            @media screen and (max-width: 768px) {
-                z-index: 1200;
-            }
-        }
-        #header-content {
-            align-items: flex-start;
-        }
-        .navbar-toggler {
-            height: 50px!important; // XXX variable
-        }
-
-        #mainmenu {
-            .scrollable-content {
-                right: 0!important;
-            }
-
-            .dropdown-menu {
-                border: none;
-
-                > li {
-                    .dropdown-item {
-                        padding: 8px 20px;
-                    }
-                    &:first-child {
-                        .dropdown-item {
-                            padding-top: 0;
-                        }
-                    }
-                }
-            }
-        }
-        #personaltools {
-            height: 50px;
-            justify-content: space-between;
-            margin: auto 20px;
-
-            #colortoggler {
-                padding-left: 0;
-            }
-        }
-    }
-
-    &.full {
-        #mainmenu {
-            .dropdown-menu {
-                position: fixed;
-            }
-        }
-        #personaltools {
-            height: 100%;
-        }
-    }
-
-    #navbar-content-wrapper {
-        min-width: 0;
-        z-index: 1;
-
-        #navbar-content {
-            min-width: 0;
-        }
-    }
-    #mainmenu {
-        > ul {
-            padding-left: 8px;
-            white-space: nowrap;
-        }
-        .nav-item.active .nav-link {
-            color: $primary;
-        }
-    }
-
-    #personaltools {
-        #language-dropdown > div.dropdown-toggle > a {
-            height: 20px;
-
-            img {
-                vertical-align: baseline;
-            }
-        }
-        #colortoggler #colortoggle-switch {
-            width: 2rem;
-            height: 1rem;
-        }
-    }
-}
-#personaltools-dropdown {
-    .dropdown-item a {
-        text-decoration: none;
-        color: $form-text-color;
-    }
-}
-
-/* content */
-#content {
-    height: calc(100% - 40px);
-}
-#main-area {
-    width: 0!important; /* prevent 'jumping' between 1400 and 1440px */
-}
-
-/* scrollbar */
-.scrollable-x, .scrollable-y {
-    position: relative;
-    overflow: hidden;
-}
-.scrollable-content {
-    position: relative;
-}
-.scrollbar {
-    display: none;
-    position: absolute;
-    background: $gray-300;
-    border-radius: 3px;
-    z-index: 1000;
-
-    .scroll-handle {
-        position: relative;
-        border-radius: 3px;
-        background: $primary;
-    }
-}
-.scrollbar-top {
-    .scrollbar {
-        top: 0;
-    }
-}
-.scrollbar-bottom {
-    .scrollbar {
-        bottom: 0;
-    }
-}
-.scrollbar-left {
-    .scrollbar {
-        left: 0;
-    }
-}
-.scrollbar-right {
-    .scrollbar {
-        right: 0;
-    }
-}
-
-/* copysupport */
-tr.selectable td {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-}
-
-/* responsive changes */
-#layout:has(#sidebar_left.expanded),
-#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) {
-    #header-logo {
-        color: #fff;
-    }
-}
-
-.table_length, .table_filter {
-    width: unset;
-}
-
-// login view
-#form-loginform {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    #field-loginform-user, #field-loginform-password {
-        display: grid;
-        grid-template-columns: 1fr 2fr;
-        margin-bottom: 0.5rem;
-    }
-
-    #input-loginform-login {
-        margin-top: 1.5rem;
-        width: 200px;
-    }
-}
-
-// contents table
-#contents > div.card-body div.row {
-    > div {
-        flex: 1 0 auto;
-        flex-wrap: nowrap;
-    }
-}
-
-// table
-.table-footer {
-    gap: 1rem 0;
-
-    .table_info {
-        white-space: nowrap;
-    }
-}
-
-// contentform
-#input-contentform-save:has(+ input.btn) {
-    margin-right: 1rem;
-}
+@import 'content.scss';
+@import 'form.scss';
+@import 'header.scss';
+@import 'login.scss';
+@import 'logo.scss';
+@import 'scrollbar.scss';
+@import 'sidebar.scss';
+@import 'table.scss';
diff --git a/scss/table.scss b/scss/table.scss
new file mode 100644
index 00000000..ffa06ca2
--- /dev/null
+++ b/scss/table.scss
@@ -0,0 +1,20 @@
+.table_length, .table_filter {
+    width: unset;
+}
+
+// contents table
+#contents > div.card-body div.row {
+    > div {
+        flex: 1 0 auto;
+        flex-wrap: nowrap;
+    }
+}
+
+// table
+.table-footer {
+    gap: 1rem 0;
+
+    .table_info {
+        white-space: nowrap;
+    }
+}
diff --git a/src/cone/app/browser/static/cone/cone.app.css b/src/cone/app/browser/static/cone/cone.app.css
index 013c28f8..038182ac 100644
--- a/src/cone/app/browser/static/cone/cone.app.css
+++ b/src/cone/app/browser/static/cone/cone.app.css
@@ -68,115 +68,25 @@ body {
   height: 100%;
 }
 
-/* sidebar */
-#sidebar_left {
-  height: 100%;
-  max-height: 100%;
-  user-select: none;
-}
-#sidebar_left > .scrollable-y {
-  margin-top: 34px;
-}
-#sidebar_left ul.list-group, #sidebar_left ul.list-group li {
-  background-color: inherit;
-}
-#sidebar_left #navtree {
-  max-width: 100%;
-}
-#sidebar_left #navtree .nav-link {
-  z-index: 2000;
-  white-space: nowrap;
-}
-#sidebar_left #navtree .nav-link.active {
-  background-color: transparent;
-  font-weight: bold;
-}
-#sidebar_left #navtree .nav-link i.bi-chevron-right {
-  vertical-align: text-bottom;
-}
-#sidebar_left #navtree .nav-link span {
-  display: inline-block;
-  width: calc(100% - 40px);
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  vertical-align: text-bottom;
-}
-#sidebar_left #sidebar_resize {
-  position: relative;
-  left: 100%;
-  width: 0;
-  height: 0;
-}
-#sidebar_left #sidebar_resize #sidebar_resizer {
-  position: absolute;
-  z-index: 3;
-  height: 100vh;
-  width: 20px;
-  transform: translateX(-50%);
-  cursor: col-resize;
-}
-#sidebar_left #sidebar_collapse {
-  position: relative;
-  left: 100%;
-  top: 100%;
-  width: 0;
-  height: 0;
-}
-#sidebar_left #sidebar_collapse .collapse_btn {
-  position: absolute;
-  bottom: 0px;
-  border-radius: 100%;
-  z-index: 20001;
-}
-#sidebar_left.collapsed {
-  width: 0px !important;
-  min-width: 0 !important;
-}
-#sidebar_left.collapsed #sidebar_resize {
-  display: none;
-}
-#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left {
-  display: none;
-}
-#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right {
-  display: none;
-}
-@media (min-width: 1400px) {
-  #sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn {
-    transform: translateX(-20px);
-  }
-  #sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right {
-    display: none;
-  }
+/* content */
+#content {
+  height: calc(100% - 40px);
 }
-@media (max-width: 1399.98px) {
-  #sidebar_left:not(.expanded) {
-    width: 0 !important;
-    min-width: 0 !important;
-  }
-  #sidebar_left:not(.expanded) #sidebar_resize {
-    display: none;
-  }
-  #sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left {
-    display: none;
-  }
+
+#main-area {
+  width: 0 !important; /* prevent 'jumping' between 1400 and 1440px */
 }
-@media (min-width: 768px) and (max-width: 1399.98px) {
-  #sidebar_left.expanded #sidebar_collapse .collapse_btn {
-    transform: translateX(-20px);
-  }
+
+/* copysupport */
+tr.selectable td {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 }
-@media (max-width: 767.98px) {
-  #sidebar_left #sidebar_resize {
-    display: none;
-  }
-  #sidebar_left.expanded {
-    width: 100% !important;
-    z-index: 3;
-  }
-  #sidebar_left.expanded #sidebar_collapse {
-    left: calc(100% - 50px);
-  }
+
+#input-contentform-save:has(+ input.btn) {
+  margin-right: 1rem;
 }
 
 /* header */
@@ -193,7 +103,7 @@ body {
 }
 
 #header-main {
-  height: 50px;
+  height: var(--navbar-height);
 }
 #header-main.navbar-expand #header-content {
   flex-direction: row-reverse;
@@ -302,13 +212,28 @@ body {
   color: var(--bs-secondary-color);
 }
 
-/* content */
-#content {
-  height: calc(100% - 40px);
+#form-loginform {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+#form-loginform #field-loginform-user, #form-loginform #field-loginform-password {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  margin-bottom: 0.5rem;
+}
+#form-loginform #input-loginform-login {
+  margin-top: 1.5rem;
+  width: 200px;
 }
 
-#main-area {
-  width: 0 !important; /* prevent 'jumping' between 1400 and 1440px */
+/* responsive changes */
+#layout:has(#sidebar_left.expanded) #header-logo,
+#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) #header-logo {
+  color: #fff;
 }
 
 /* scrollbar */
@@ -350,40 +275,175 @@ body {
   right: 0;
 }
 
-/* copysupport */
-tr.selectable td {
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
+/* sidebar colors */
+/* dark mode */
+[data-bs-theme=dark] #content {
+  color: #f8f9fa;
+  background-color: #212529;
 }
-
-/* responsive changes */
-#layout:has(#sidebar_left.expanded) #header-logo,
-#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) #header-logo {
-  color: #fff;
+[data-bs-theme=dark] #navbar-content-wrapper {
+  color: #f8f9fa;
+  background-color: #212529;
+}
+[data-bs-theme=dark] #sidebar_left {
+  background-color: #343b45;
+}
+[data-bs-theme=dark] #footer {
+  color: #f8f9fa;
+  background-color: #000;
+}
+[data-bs-theme=dark] #contextmenu {
+  color: #f8f9fa;
+  background-color: #343a40;
+}
+[data-bs-theme=dark] tr.selectable.selected td {
+  background-color: #344555;
+}
+[data-bs-theme=dark] .table-striped > tbody > tr.selectable.selected:nth-child(2n+1) > td {
+  background-color: #485f76;
 }
 
-.table_length, .table_filter {
-  width: unset;
+/* light mode */
+[data-bs-theme=light] #content {
+  color: #212529;
+  background-color: #f8f9fa;
+}
+[data-bs-theme=light] #navbar-content-wrapper {
+  color: #212529;
+  background-color: #fff;
+}
+[data-bs-theme=light] #sidebar_left {
+  background-color: #414c5b;
+}
+[data-bs-theme=light] #footer {
+  color: #212529;
+  background-color: #f8f9fa;
+}
+[data-bs-theme=light] #contextmenu {
+  color: #212529;
+  background-color: #fff;
+}
+[data-bs-theme=light] tr.selectable.selected td {
+  background-color: #dfeefb;
+}
+[data-bs-theme=light] .table-striped > tbody > tr.selectable.selected:nth-child(2n+1) > td {
+  background-color: #cfdce7;
 }
 
-#form-loginform {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
+/* import everything where we need changed bootstrap variables for here */
+/* sidebar */
+#sidebar_left {
   height: 100%;
+  max-height: 100%;
+  user-select: none;
 }
-#form-loginform #field-loginform-user, #form-loginform #field-loginform-password {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  margin-bottom: 0.5rem;
+#sidebar_left > .scrollable-y {
+  margin-top: 34px;
 }
-#form-loginform #input-loginform-login {
-  margin-top: 1.5rem;
-  width: 200px;
+#sidebar_left ul.list-group, #sidebar_left ul.list-group li {
+  background-color: inherit;
+}
+#sidebar_left #navtree {
+  max-width: 100%;
+}
+#sidebar_left #navtree .nav-link {
+  z-index: 2000;
+  white-space: nowrap;
+}
+#sidebar_left #navtree .nav-link.active {
+  background-color: transparent;
+  font-weight: bold;
+}
+#sidebar_left #navtree .nav-link i.bi-chevron-right {
+  vertical-align: text-bottom;
+}
+#sidebar_left #navtree .nav-link span {
+  display: inline-block;
+  width: calc(100% - 40px);
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  vertical-align: text-bottom;
+}
+#sidebar_left #sidebar_resize {
+  position: relative;
+  left: 100%;
+  width: 0;
+  height: 0;
+}
+#sidebar_left #sidebar_resize #sidebar_resizer {
+  position: absolute;
+  z-index: 3;
+  height: 100vh;
+  width: 20px;
+  transform: translateX(-50%);
+  cursor: col-resize;
+}
+#sidebar_left #sidebar_collapse {
+  position: relative;
+  left: 100%;
+  top: 100%;
+  width: 0;
+  height: 0;
+}
+#sidebar_left #sidebar_collapse .collapse_btn {
+  position: absolute;
+  bottom: 0px;
+  border-radius: 100%;
+  z-index: 20001;
+}
+#sidebar_left.collapsed {
+  width: 0px !important;
+  min-width: 0 !important;
+}
+#sidebar_left.collapsed #sidebar_resize {
+  display: none;
+}
+#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left {
+  display: none;
+}
+#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right {
+  display: none;
+}
+@media (min-width: 1400px) {
+  #sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn {
+    transform: translateX(-20px);
+  }
+  #sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right {
+    display: none;
+  }
+}
+@media (max-width: 1399.98px) {
+  #sidebar_left:not(.expanded) {
+    width: 0 !important;
+    min-width: 0 !important;
+  }
+  #sidebar_left:not(.expanded) #sidebar_resize {
+    display: none;
+  }
+  #sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left {
+    display: none;
+  }
+}
+@media (min-width: 768px) and (max-width: 1399.98px) {
+  #sidebar_left.expanded #sidebar_collapse .collapse_btn {
+    transform: translateX(-20px);
+  }
+}
+@media (max-width: 767.98px) {
+  #sidebar_left #sidebar_resize {
+    display: none;
+  }
+  #sidebar_left.expanded {
+    width: 100% !important;
+    z-index: 3;
+  }
+  #sidebar_left.expanded #sidebar_collapse {
+    left: calc(100% - 50px);
+  }
+}
+
+.table_length, .table_filter {
+  width: unset;
 }
 
 #contents > div.card-body div.row > div {
@@ -397,7 +457,3 @@ tr.selectable td {
 .table-footer .table_info {
   white-space: nowrap;
 }
-
-#input-contentform-save:has(+ input.btn) {
-  margin-right: 1rem;
-}
diff --git a/src/cone/app/browser/static/cone/cone.app.min.css b/src/cone/app/browser/static/cone/cone.app.min.css
index 06277ae5..0f51e9c6 100644
--- a/src/cone/app/browser/static/cone/cone.app.min.css
+++ b/src/cone/app/browser/static/cone/cone.app.min.css
@@ -1 +1 @@
-[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}:root{--sidebar-width: 300px;--navbar-height: 50px}html{height:100%;width:100%}body{height:100%}#sidebar_left{height:100%;max-height:100%;user-select:none}#sidebar_left>.scrollable-y{margin-top:34px}#sidebar_left ul.list-group,#sidebar_left ul.list-group li{background-color:inherit}#sidebar_left #navtree{max-width:100%}#sidebar_left #navtree .nav-link{z-index:2000;white-space:nowrap}#sidebar_left #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.bi-chevron-right{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #sidebar_resize{position:relative;left:100%;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse{position:relative;left:100%;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn{position:absolute;bottom:0px;border-radius:100%;z-index:20001}#sidebar_left.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded){width:0 !important;min-width:0 !important}#sidebar_left:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize{display:none}#sidebar_left.expanded{width:100% !important;z-index:3}#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}#header-logo{z-index:4}#header-logo>span,#header-logo-placeholder>span{font-size:1.5rem !important}#header-logo-placeholder{visibility:hidden}#header-main{height:50px}#header-main.navbar-expand #header-content{flex-direction:row-reverse}#header-main.navbar-expand #navbar-content-wrapper{box-shadow:none !important;background:none}#header-main:not(.navbar-expand) #header-content{flex-direction:row}#header-main:not(.navbar-expand) #navbar-content{flex-direction:column}#header-main:not(.navbar-expand) #livesearch{order:0;width:100%;padding-left:55px !important;padding-right:15px !important}#header-main:not(.navbar-expand) #mainmenu{order:1;margin-left:10px !important;margin-top:20px;margin-bottom:20px}#header-main:not(.navbar-expand) #mainmenu ul>li{display:block !important}#header-main.compact:has(.show){height:100%}#header-main.compact:has(.show) #header-logo-placeholder,#header-main.compact:has(.collapsing) #header-logo-placeholder{display:none}#header-main.compact:has(.show) #navbar-content-wrapper,#header-main.compact:has(.collapsing) #navbar-content-wrapper{position:relative;overflow:hidden;height:100%;padding:0 !important}@media screen and (max-width: 768px){#header-main.compact:has(.show) #navbar-content-wrapper,#header-main.compact:has(.collapsing) #navbar-content-wrapper{z-index:1200}}#header-main.compact:has(.show) #header-content,#header-main.compact:has(.collapsing) #header-content{align-items:flex-start}#header-main.compact:has(.show) .navbar-toggler,#header-main.compact:has(.collapsing) .navbar-toggler{height:50px !important}#header-main.compact:has(.show) #mainmenu .scrollable-content,#header-main.compact:has(.collapsing) #mainmenu .scrollable-content{right:0 !important}#header-main.compact:has(.show) #mainmenu .dropdown-menu,#header-main.compact:has(.collapsing) #mainmenu .dropdown-menu{border:none}#header-main.compact:has(.show) #mainmenu .dropdown-menu>li .dropdown-item,#header-main.compact:has(.collapsing) #mainmenu .dropdown-menu>li .dropdown-item{padding:8px 20px}#header-main.compact:has(.show) #mainmenu .dropdown-menu>li:first-child .dropdown-item,#header-main.compact:has(.collapsing) #mainmenu .dropdown-menu>li:first-child .dropdown-item{padding-top:0}#header-main.compact:has(.show) #personaltools,#header-main.compact:has(.collapsing) #personaltools{height:50px;justify-content:space-between;margin:auto 20px}#header-main.compact:has(.show) #personaltools #colortoggler,#header-main.compact:has(.collapsing) #personaltools #colortoggler{padding-left:0}#header-main.full #mainmenu .dropdown-menu{position:fixed}#header-main.full #personaltools{height:100%}#header-main #navbar-content-wrapper{min-width:0;z-index:1}#header-main #navbar-content-wrapper #navbar-content{min-width:0}#header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#header-main #mainmenu .nav-item.active .nav-link{color:#4e7bba}#header-main #personaltools #language-dropdown>div.dropdown-toggle>a{height:20px}#header-main #personaltools #language-dropdown>div.dropdown-toggle>a img{vertical-align:baseline}#header-main #personaltools #colortoggler #colortoggle-switch{width:2rem;height:1rem}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#content{height:calc(100% - 40px)}#main-area{width:0 !important}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4e7bba}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}tr.selectable td{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#layout:has(#sidebar_left.expanded) #header-logo,#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) #header-logo{color:#fff}.table_length,.table_filter{width:unset}#form-loginform{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{display:grid;grid-template-columns:1fr 2fr;margin-bottom:.5rem}#form-loginform #input-loginform-login{margin-top:1.5rem;width:200px}#contents>div.card-body div.row>div{flex:1 0 auto;flex-wrap:nowrap}.table-footer{gap:1rem 0}.table-footer .table_info{white-space:nowrap}#input-contentform-save:has(+input.btn){margin-right:1rem}
+[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}:root{--sidebar-width: 300px;--navbar-height: 50px}html{height:100%;width:100%}body{height:100%}#content{height:calc(100% - 40px)}#main-area{width:0 !important}tr.selectable td{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#input-contentform-save:has(+input.btn){margin-right:1rem}#header-logo{z-index:4}#header-logo>span,#header-logo-placeholder>span{font-size:1.5rem !important}#header-logo-placeholder{visibility:hidden}#header-main{height:var(--navbar-height)}#header-main.navbar-expand #header-content{flex-direction:row-reverse}#header-main.navbar-expand #navbar-content-wrapper{box-shadow:none !important;background:none}#header-main:not(.navbar-expand) #header-content{flex-direction:row}#header-main:not(.navbar-expand) #navbar-content{flex-direction:column}#header-main:not(.navbar-expand) #livesearch{order:0;width:100%;padding-left:55px !important;padding-right:15px !important}#header-main:not(.navbar-expand) #mainmenu{order:1;margin-left:10px !important;margin-top:20px;margin-bottom:20px}#header-main:not(.navbar-expand) #mainmenu ul>li{display:block !important}#header-main.compact:has(.show){height:100%}#header-main.compact:has(.show) #header-logo-placeholder,#header-main.compact:has(.collapsing) #header-logo-placeholder{display:none}#header-main.compact:has(.show) #navbar-content-wrapper,#header-main.compact:has(.collapsing) #navbar-content-wrapper{position:relative;overflow:hidden;height:100%;padding:0 !important}@media screen and (max-width: 768px){#header-main.compact:has(.show) #navbar-content-wrapper,#header-main.compact:has(.collapsing) #navbar-content-wrapper{z-index:1200}}#header-main.compact:has(.show) #header-content,#header-main.compact:has(.collapsing) #header-content{align-items:flex-start}#header-main.compact:has(.show) .navbar-toggler,#header-main.compact:has(.collapsing) .navbar-toggler{height:50px !important}#header-main.compact:has(.show) #mainmenu .scrollable-content,#header-main.compact:has(.collapsing) #mainmenu .scrollable-content{right:0 !important}#header-main.compact:has(.show) #mainmenu .dropdown-menu,#header-main.compact:has(.collapsing) #mainmenu .dropdown-menu{border:none}#header-main.compact:has(.show) #mainmenu .dropdown-menu>li .dropdown-item,#header-main.compact:has(.collapsing) #mainmenu .dropdown-menu>li .dropdown-item{padding:8px 20px}#header-main.compact:has(.show) #mainmenu .dropdown-menu>li:first-child .dropdown-item,#header-main.compact:has(.collapsing) #mainmenu .dropdown-menu>li:first-child .dropdown-item{padding-top:0}#header-main.compact:has(.show) #personaltools,#header-main.compact:has(.collapsing) #personaltools{height:50px;justify-content:space-between;margin:auto 20px}#header-main.compact:has(.show) #personaltools #colortoggler,#header-main.compact:has(.collapsing) #personaltools #colortoggler{padding-left:0}#header-main.full #mainmenu .dropdown-menu{position:fixed}#header-main.full #personaltools{height:100%}#header-main #navbar-content-wrapper{min-width:0;z-index:1}#header-main #navbar-content-wrapper #navbar-content{min-width:0}#header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#header-main #mainmenu .nav-item.active .nav-link{color:#4e7bba}#header-main #personaltools #language-dropdown>div.dropdown-toggle>a{height:20px}#header-main #personaltools #language-dropdown>div.dropdown-toggle>a img{vertical-align:baseline}#header-main #personaltools #colortoggler #colortoggle-switch{width:2rem;height:1rem}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#form-loginform{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{display:grid;grid-template-columns:1fr 2fr;margin-bottom:.5rem}#form-loginform #input-loginform-login{margin-top:1.5rem;width:200px}#layout:has(#sidebar_left.expanded) #header-logo,#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) #header-logo{color:#fff}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4e7bba}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}#sidebar_left{height:100%;max-height:100%;user-select:none}#sidebar_left>.scrollable-y{margin-top:34px}#sidebar_left ul.list-group,#sidebar_left ul.list-group li{background-color:inherit}#sidebar_left #navtree{max-width:100%}#sidebar_left #navtree .nav-link{z-index:2000;white-space:nowrap}#sidebar_left #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.bi-chevron-right{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #sidebar_resize{position:relative;left:100%;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse{position:relative;left:100%;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn{position:absolute;bottom:0px;border-radius:100%;z-index:20001}#sidebar_left.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded){width:0 !important;min-width:0 !important}#sidebar_left:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize{display:none}#sidebar_left.expanded{width:100% !important;z-index:3}#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}.table_length,.table_filter{width:unset}#contents>div.card-body div.row>div{flex:1 0 auto;flex-wrap:nowrap}.table-footer{gap:1rem 0}.table-footer .table_info{white-space:nowrap}