diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 21fc23269..9879ab3e8 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -60,7 +60,6 @@
     border-bottom-right-radius: inherit;
     border-top-width: 0;
     background-color: $colorBlack;
-    color: $colorWhite;
   }
 
   &__link {
diff --git a/docs/src/components/LiveDemo/CustomLayout.vue b/docs/src/components/LiveDemo/CustomLayout.vue
index 77b5768c8..4df8f6a65 100644
--- a/docs/src/components/LiveDemo/CustomLayout.vue
+++ b/docs/src/components/LiveDemo/CustomLayout.vue
@@ -56,7 +56,6 @@ export default {
   &__editor {
     border: 1px solid rgba($colorWhite, 0.1);
     background-color: $colorBlack;
-    color: $colorText;
   }
 
   &__editor ::v-deep {
diff --git a/docs/src/components/LiveDemo/style.scss b/docs/src/components/LiveDemo/style.scss
index 804476db6..822b62233 100644
--- a/docs/src/components/LiveDemo/style.scss
+++ b/docs/src/components/LiveDemo/style.scss
@@ -48,11 +48,6 @@
     border-bottom-right-radius: inherit;
     border-top-width: 0;
     background-color: $colorBlack;
-    color: $colorWhite;
-  }
-
-  &__link {
-    // text-align: right;
   }
 
   &__error {
diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index f0b05ab29..9afe36220 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -53,7 +53,7 @@ body {
   line-height: 1.7;
   font-feature-settings: 'cv05' 1;
   background-color: $colorBlack;
-  color: $colorWhite;
+  color: $colorText;
   height: 100%;
 }
 
diff --git a/docs/src/layouts/App/prism.scss b/docs/src/layouts/App/prism.scss
index 2f9b6cfd5..6b8544a37 100644
--- a/docs/src/layouts/App/prism.scss
+++ b/docs/src/layouts/App/prism.scss
@@ -27,7 +27,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"] {
   white-space: normal;
-  color: $colorText;
+  color: $colorWhite;
   background: $codeBackground;
   border-radius: 0.2em;
   padding: 0.1em;
@@ -42,7 +42,7 @@ pre > code[class*="language-"] {
 pre[class*="language-"] {
   overflow: auto;
   position: relative;
-  color: $colorText;
+  color: $colorWhite;
   background: $codeBackground;
   padding: 1.2rem 1.5rem !important;
   border-radius: 0.5rem;
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index d0d1ec7ae..1a2f21023 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -201,19 +201,21 @@ $menuBreakPoint: 750px;
     height: 100vh;
     overflow: auto;
     overscroll-behavior: contain;
+    border-right: 1px solid rgba($colorWhite, 0.1);
   }
 
   &__content {
     flex: 1 1 auto;
+    min-width: 0;
     padding: 0 2rem 2rem 2rem;
   }
 
   &__top-bar {
-    padding: 2rem;
+    padding: 1rem 0;
     position: sticky;
     z-index: 2;
     top: 0;
-    background-color: rgba($colorBlack, 0.7);
+    background-color: rgba($colorBlack, 0.8);
     backdrop-filter: blur(10px);
   }
 
@@ -248,12 +250,11 @@ $menuBreakPoint: 750px;
   }
 
   &__link {
-    display: block;
-    padding: 0.1rem 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.25rem 0.5rem;
     border-radius: 5px;
-    font-weight: 500;
-    color: rgba($colorWhite, 0.6);
-    margin-bottom: 0.2rem;
+    font-size: 0.85rem;
     margin-left: -0.5rem;
 
     &:hover {
@@ -262,7 +263,7 @@ $menuBreakPoint: 750px;
 
     &.active {
       color: $colorWhite;
-      background-color: rgba($colorWhite, 0.05);
+      background-color: rgba($colorWhite, 0.08);
     }
 
     &--draft {
@@ -270,8 +271,12 @@ $menuBreakPoint: 750px;
     }
 
     &--with-children::after {
-      content: '→';
+      content: '↓';
       color: rgba($colorWhite, 0.2);
     }
   }
+
+  &__main {
+    margin-top: 2rem;
+  }
 }
diff --git a/docs/src/templates/DocPage/style.scss b/docs/src/templates/DocPage/style.scss
index 1de3a93ee..816e2a489 100644
--- a/docs/src/templates/DocPage/style.scss
+++ b/docs/src/templates/DocPage/style.scss
@@ -12,9 +12,13 @@
     }
 
     > ul li,
-    > ol li {
-      margin-top: $spacing;
-      margin-bottom: $spacing;
+    > ol li,
+    > ul ul,
+    > ul ol,
+    > ol ol,
+    > ol ul {
+      margin-top: 0.5 * $spacing;
+      margin-bottom: 0.5 * $spacing;
     }
 
     > h1,
@@ -23,6 +27,7 @@
     > h4,
     > h5,
     > h6 {
+      color: $colorWhite;
       margin-top: 3 * $spacing;
       margin-bottom: $spacing;
 
@@ -61,18 +66,14 @@
       }
     }
 
-    > :first-child {
+    :first-child {
       margin-top: 0;
     }
 
-    > :last-child {
+    :last-child {
       margin-bottom: 0;
     }
 
-    > p {
-      color: rgba($colorWhite, 0.8);
-    }
-
     > pre {
       border: 1px solid rgba($colorWhite, 0.1);
     }
@@ -92,13 +93,32 @@
       text-decoration: underline;
     }
 
+    #table-of-contents + ul {
+      border: 1px solid rgba($colorWhite, 0.1);
+      padding: 1.2rem 1.5rem !important;
+      border-radius: 0.5rem;
+
+      li {
+        padding-left: 0;
+
+        &::before {
+          display: none;
+        }
+
+        ul {
+          margin-left: 1rem;
+        }
+
+        // a::before {
+        //   content: '→ ';
+        //   opacity: 0.2;
+        // }
+      }
+    }
+
     > ul {
       list-style-type: none;
 
-      > * + * {
-        margin-top: 0.5rem;
-      }
-
       li {
         position: relative;
         padding-left: 1.25rem;
@@ -117,10 +137,6 @@
     > ol {
       counter-reset: item;
 
-      > * + * {
-        margin-top: 0.5rem;
-      }
-
       li {
         position: relative;
         padding-left: 2.5rem;
@@ -151,7 +167,6 @@
       border-collapse: collapse;
       font-size: 0.85rem;
       text-align: left;
-      color: rgba($colorWhite, 0.8);
 
       th,
       td {