diff --git a/templates/element/layouts/header/header-breadcrumb.php b/templates/element/layouts/header/header-breadcrumb.php
index 6150221..5c4c619 100644
--- a/templates/element/layouts/header/header-breadcrumb.php
+++ b/templates/element/layouts/header/header-breadcrumb.php
@@ -10,7 +10,7 @@
     $breadcrumbAction = '';
     $this->Breadcrumbs->setTemplates([
         'wrapper' => sprintf(
-            '<nav class="header-breadcrumb d-xl-block d-none"{{attrs}}><ol class="">{{content}}</ol></nav>'
+            '<nav class="header-breadcrumb d-lg-block d-none"{{attrs}}><ol class="">{{content}}</ol></nav>'
         ),
         'item' => '<li class="header-breadcrumb-item"{{attrs}}><i class="{{icon}} me-1"></i><a class="{{linkClass}}" href="{{url}}"{{innerAttrs}}>{{title}}</a></li>{{separator}}',
         'itemWithoutLink' => '<li class="header-breadcrumb-item"{{attrs}}><span{{innerAttrs}}>{{title}}</span></li>{{separator}}',
diff --git a/templates/layout/default.php b/templates/layout/default.php
index f446ff4..b97bed3 100644
--- a/templates/layout/default.php
+++ b/templates/layout/default.php
@@ -48,7 +48,7 @@ $cakeDescription = 'Cerebrate';
 </head>
 <body>
     <div class="main-wrapper">
-        <header class="navbar top-navbar">
+        <header class="navbar top-navbar navbar-dark">
             <?= $this->element('layouts/header') ?>
         </header>
         <nav id="app-sidebar" class="collapse d-sm-block sidebar">
diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index f3141f0..8016e00 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -1,9 +1,10 @@
 /* layout */
 :root {
     --navbar-height: 60px;
-    /* --sidebar-width: 230px; */
+    /* --navbar-height: 40px; */
     --sidebar-width-expanded: 230px;
     --sidebar-width-collapsed: 65px;
+    /* --sidebar-width-collapsed: 40px; */
 }
 
 body {
@@ -53,6 +54,13 @@ body {
     .sidebar.expanded ~ main.content {
         margin-left: 0 !important;
     }
+
+    .sidebar ul.sidebar-elements > li.category > span.category-label {
+        opacity: 1;
+        position: relative;
+        height: auto;
+        width: auto;
+    }
 }
 
 @media (max-width: 768px) {
@@ -205,7 +213,7 @@ main.content {
 }
 
 .sidebar-content {
-    padding-top: 10px;
+    padding-top: 0.25em;
 }
 
 ul.sidebar-elements {
@@ -236,7 +244,7 @@ ul.sidebar-elements > li {
 ul.sidebar-elements li > a.sidebar-link {
     position: relative;
     display: block;
-    padding: 0 20px;
+    padding: 0 calc((var(--sidebar-width-collapsed) - 25px) / 2);
     line-height: 35px;
     overflow: hidden;
     white-space: nowrap;
@@ -352,7 +360,7 @@ ul.sidebar-elements > li ul li > ul > li > ul > li > ul > li > a.sidebar-link {
 ul.sidebar-elements > li.category {
     white-space: nowrap;
     display: flex;
-    padding: 15px 20px 0;
+    padding: 15px calc((var(--sidebar-width-collapsed) - 25px) / 2) 0;
     line-height: 30px;
     
 }
@@ -455,8 +463,8 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
 }
 
 .composed-app-icon-container {
-    height: 50px;
-    width: 51px;
+    height: calc(var(--navbar-height) - 10px);
+    width: calc(var(--navbar-height) - 10px);
     position: relative;
     display: block;
 }
@@ -464,12 +472,12 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
 .composed-app-icon-container > .app-icon {
     display: inline-block;
     mask-image: url(/img/icon-composition/sheet-all.svg), url(/img/icon-composition/z.svg);
-    mask-position: 0 0, 2.4px 26px;
+    mask-position: 0 0, 2.4px calc((var(--navbar-height) - 10px) / 2);
     mask-repeat: no-repeat;
     mask-size: contain, cover;
     mask-composite: source-out;
     -webkit-mask-image: url(/img/icon-composition/sheet-all.svg), url(/img/icon-composition/z.svg);
-    -webkit-mask-position: 0 0, 2.4px 26px;
+    -webkit-mask-position: 0 0, 2.4px calc((var(--navbar-height) - 10px) / 2);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: contain, cover;
     -webkit-mask-composite: source-out;
@@ -479,6 +487,6 @@ ul.sidebar-elements > li.category > span.category-divider > hr {
 }
 
 .composed-app-icon-container > .app-icon:hover {
-    mask-position: 0 0, 2.4px 21px;
-    -webkit-mask-position: 0 0, 2.4px 21px;
+    mask-position: 0 0, 2.4px calc(0.75 * (var(--navbar-height) - 10px) / 2);
+    -webkit-mask-position: 0 0, 2.4px calc(0.75 * (var(--navbar-height) - 10px) / 2);
 }
\ No newline at end of file
