diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css
index ebfac8c..e6843c2 100644
--- a/src/styles/css-config/base.css
+++ b/src/styles/css-config/base.css
@@ -19,7 +19,7 @@ html {
   --accent-400: var(--green) 90 57;
   --accent-500: var(--green) 90 47;
   --accent-600: var(--green) 88 40;
-	--accent-700: var(--green) 70 40;
+  --accent-700: var(--green) 70 40;
 
   /* secondary */
   --blue: 224;
@@ -49,6 +49,10 @@ html {
   --var-color: 190 78 70;
   --var-link-color: 190 85 60;
   --inner-param-color: 215 60 70;
+  --nav-hovered-bkg: var(--blue) 100 93;
+  --nav-selected-bkg: var(--blue) 100 90;
+  --nav-selected-text: var(--blue) 60 60;
+  --nav-indicator-bkg: var(--blue) 45 80;
 }
 
 html.dark {
@@ -86,6 +90,10 @@ html.dark {
   --var-color: 190 78 70;
   --var-link-color: 190 85 60;
   --inner-param-color: 215 60 70;
+  --nav-hovered-bkg: var(--blue) 40 10;
+  --nav-selected-bkg: var(--blue) 40 13;
+  --nav-selected-text: var(--blue) 100 70;
+  --nav-indicator-bkg: var(--blue) 30 30;
 }
 
 * {
diff --git a/src/styles/docs/nav/nav-tree.css b/src/styles/docs/nav/nav-tree.css
index f9ca281..656c370 100644
--- a/src/styles/docs/nav/nav-tree.css
+++ b/src/styles/docs/nav/nav-tree.css
@@ -27,7 +27,7 @@
   transition: background-color 0.2s ease;
 
   &:hover {
-    background-color: hsl(var(--blue) 40 10);
+    background-color: hsl(var(--nav-hovered-bkg));
   }
 }
 
@@ -43,14 +43,10 @@
   margin-left: 3px;
 
   &:hover {
-    background-color: hsl(var(--blue) 20 80);
+    background-color: hsl(var(--nav-indicator-bkg));
   }
 }
 
-html.dark [data-scope="accordion"][data-part="item-indicator"]:hover {
-  background-color: hsl(var(--blue) 30 30);
-}
-
 .nav-shevron {
   color: black;
 }
@@ -70,16 +66,7 @@ html.dark .nav-shevron {
 [data-scope="accordion"][data-part="item-content"] {
   --height: 709;
   margin-block: 0.175rem;
-
-  &>.arktree-item,
-  [data-part="item"] {
-    margin-left: 1.2rem;
-  }
-
-  &>.arktree-item,
-  & [data-part="item-content"] {
-      margin-left: 1.8rem;
-  }
+  margin-left: 1.4rem;
 
   & .arktree-item,
   [data-part="item-content"]>div {
@@ -93,7 +80,7 @@ html.dark .nav-shevron {
     transition: background-color 0.2s ease;
 
     &:hover {
-      background-color: hsl(var(--blue) 40 10)
+      background-color: hsl(var(--nav-hovered-bkg))
     }
 
     &>a {
@@ -106,12 +93,12 @@ html.dark .nav-shevron {
     }
   }
 
-  & .arktree-item,
-  [data-part="item-content"]>div.__current-type-doc {
-    background-color: hsl(var(--blue) 40 13);
+    & .arktree-item.__current-type-doc,
+    [data-part="item-content"]>div.__current-type-doc {
+    background-color: hsl(var(--nav-selected-bkg));
 
     &>a {
-      color: hsl(var(--blue) 100 70);
+      color: hsl(var(--nav-selected-text));
     }
   }
 }
@@ -125,13 +112,13 @@ html.dark .nav-shevron {
 }
 
 .__current-type-doc {
-  color: hsl(var(--blue) 100 70);
+  color: hsl(var(--nav-selected-text));
 
   & [data-part="item-trigger"] a {
-    color: hsl(var(--blue) 100 70);
+    color: hsl(var(--nav-selected-text));
   }
 
   & [data-scope="accordion"][data-part="item-trigger"] {
-    background-color: hsl(var(--blue) 40 13);
+    background-color: hsl(var(--nav-selected-bkg));
   }
 }