diff --git a/website/core/DocsRating.tsx b/website/core/DocsRating.tsx
index 521cbec53ef..9908804726d 100644
--- a/website/core/DocsRating.tsx
+++ b/website/core/DocsRating.tsx
@@ -34,7 +34,7 @@ const DocsRating = ({label}) => {
       {haveVoted ? (
         'Thanks for letting us know!'
       ) : (
-        <div>
+        <>
           Is this page useful?
           <svg
             className="i_thumbsup"
@@ -52,7 +52,7 @@ const DocsRating = ({label}) => {
             viewBox="0 0 81.13 89.76">
             <path d="M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z" />
           </svg>
-        </div>
+        </>
       )}
     </div>
   );
diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss
index 6bac47b8208..f77f86036e9 100644
--- a/website/src/css/customTheme.scss
+++ b/website/src/css/customTheme.scss
@@ -19,13 +19,22 @@
 
   --navbar-background: #111317ee;
   --navbar-active-item-background: #61dafb11;
+  --sidebar-active-item-background: #e6f7ff;
+  --docs-rating-background: #64d7ff33;
 
   --doc-sidebar-width: 266px !important;
-  --docsearch-container-background: rgba(32, 35, 42, 0.6);
   --rn-note-background: rgba(255, 229, 100, 0.25);
 
+  --docsearch-container-background: rgba(32, 35, 42, 0.6);
+  --docsearch-key-shadow:
+    inset 0 -2px 0 0 var(--ifm-hr-border-color), inset 0 0 1px 1px #fff,
+    0 1px 2px 1px rgba(30, 35, 90, 0.3);
+
   --ifm-font-family-base:
     "Optimistic Display", system-ui, -apple-system, sans-serif;
+  --ifm-font-family-monospace:
+    Source Code Pro, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
   --ifm-color-primary: #06bcee;
   --ifm-color-primary-75: #087ea4cc;
   --ifm-code-background: rgba(0, 0, 0, 0.06);
@@ -52,6 +61,7 @@
   --ifm-table-border-color: var(--ifm-toc-border-color);
   --ifm-table-cell-padding: 10px;
   --ifm-table-stripe-background: rgba(0, 0, 0, 0.02);
+  --ifm-alert-border-radius: 20px;
 
   @media (min-width: 340px) {
     --ifm-navbar-sidebar-width: 340px;
@@ -80,7 +90,7 @@
   --home-section-top: white;
   --home-section-bottom: #efeff2;
   --home-secondary-text: #404756;
-  --home-feature-background-1: #f1dbfc;
+  --home-feature-background-1: #f4e3fc;
   --home-feature-background-2: #e1eefc;
   --home-feature-background-3: #d4f3e7;
   --home-border: #e5e7eb;
@@ -113,6 +123,7 @@ html[data-theme="dark"] {
   --subtle: #7c7c7c;
 
   --navbar-background: #20232aee;
+  --sidebar-active-item-background: #61dafb15;
 
   --ifm-code-background: rgba(255, 255, 255, 0.06);
   --ifm-toc-border-color: var(--dark);
@@ -125,8 +136,8 @@ html[data-theme="dark"] {
   --docsearch-footer-background: var(--dark);
   --docsearch-key-gradient: var(--deepdark);
   --docsearch-key-shadow:
-    inset 0 -2px 0 0 var(--light), inset 0 0 1px 1px var(--light),
-    0 1px 2px 1px var(--ifm-table-border-color);
+    inset 0 -2px 0 0 var(--dark), inset 0 0 1px 1px var(--light),
+    0 2px 2px 0 rgba(3, 4, 9, 0.3);
   --docsearch-container-background: rgba(0, 0, 0, 0.6);
 
   --logo: #58c4dc;
@@ -282,6 +293,19 @@ hr {
     vertical-align: initial;
   }
 
+  kbd {
+    border: 0;
+    top: -1px;
+    margin: 0 2px;
+    position: relative;
+    padding: 0.2rem 0.3rem;
+    background: none;
+    box-shadow: var(--docsearch-key-shadow);
+    display: inline-block;
+    text-align: center;
+    min-width: 24px;
+  }
+
   blockquote {
     > :last-child {
       margin-bottom: 0;
@@ -504,7 +528,7 @@ html[data-theme="dark"] .hash-link {
 article .badge {
   font-weight: 500;
   border-radius: 16px;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 
 html[data-theme="dark"] article .badge {
@@ -520,7 +544,7 @@ html[data-theme="dark"] article .badge {
   font-size: var(--ifm-blockquote-font-size);
   margin-bottom: var(--ifm-paragraph-margin-bottom);
   padding: 28px;
-  border-radius: 20px;
+  border-radius: var(--ifm-alert-border-radius);
   border: 1px solid var(--ifm-alert-background-color-highlight);
   box-shadow: none;
 
@@ -597,13 +621,14 @@ html[data-theme="dark"] .homepage {
 /* Version warning */
 
 .theme-doc-version-banner {
-  background-color: rgba(100, 215, 255, 0.3);
-  border-style: none;
+  background-color: var(--docs-rating-background);
+  border: 1px solid rgba(125, 222, 255, 0.21);
   color: var(--ifm-font-color-base);
   box-shadow: none;
   font-size: 15px;
   line-height: var(--ifm-pre-line-height);
   text-align: center;
+  border-radius: var(--ifm-alert-border-radius);
 
   a {
     color: var(--ifm-font-color-base) !important;
@@ -837,6 +862,7 @@ a[class*="tagRegular"] {
   .DocSearch-Button-Key {
     font-size: 12px;
     font-weight: 600;
+    background: none;
   }
 
   .DocSearch-Button-Keys {
@@ -913,11 +939,6 @@ So we need to "revert" some CSS vars to not enforce dark mode
       }
     }
 
-    .menu__list-item a {
-      color: var(--ifm-color-emphasis-700);
-      padding: 4px 12px;
-    }
-
     .menu__list-item-collapsible a[class*="menuLinkText"] {
       font-weight: 600;
       font-size: 14px;
@@ -982,6 +1003,7 @@ So we need to "revert" some CSS vars to not enforce dark mode
 
 aside[class^="theme-doc-sidebar-container"] {
   margin-right: 16px;
+  border-right: 0;
 
   .menu__list .menu__list {
     margin-top: 0;
@@ -1078,10 +1100,11 @@ aside[class^="theme-doc-sidebar-container"] {
     a {
       line-height: 20px;
     }
+  }
 
-    .menu__link--active {
-      font-weight: 600;
-    }
+  .menu__link {
+    border-radius: 8px;
+    padding: 6px 12px;
   }
 
   .menu__list-item {
@@ -1092,8 +1115,7 @@ aside[class^="theme-doc-sidebar-container"] {
 
   .menu__link--sublist {
     font-size: 15px;
-    padding: 4px 12px !important;
-    color: var(--light);
+    padding: 4px 12px;
 
     &:after {
       background-size: 1.66rem 1.66rem;
@@ -1124,15 +1146,11 @@ aside[class^="theme-doc-sidebar-container"] {
   }
 
   .menu__link.menu__link--active {
-    border-left-color: var(--ifm-menu-color-active) !important;
-    border-left-width: 0;
-  }
-
-  a[href].menu__link.menu__link--active:not(.menu__link--sublist) {
-    background: var(--ifm-code-background);
-    padding-left: 8px !important;
-    border-left-width: 4px;
-    border-left-style: solid;
+    border-left-width: 0 !important;
+    background-color: var(--sidebar-active-item-background);
+    color: var(--home-button-primary);
+    font-weight: 500;
+    transition: none;
   }
 
   a[href="#"].menu__link.menu__link--active {
@@ -1192,24 +1210,62 @@ html[data-theme="dark"] .menu {
 div[class^="tableOfContents"] {
   min-width: 100%;
   width: 100%;
+  top: calc(var(--ifm-navbar-height) + 34px);
+}
+
+.table-of-contents__left-border {
+  border-left: 0;
 }
 
 .table-of-contents {
+  padding-top: 0;
+  padding-bottom: 20px;
+
   li {
-    margin: 7px var(--ifm-toc-padding-vertical);
+    margin: 0 var(--ifm-toc-padding-vertical);
   }
 
   ul {
-    padding-left: 0.35rem;
+    padding-left: 0;
 
     li {
-      margin: 4px var(--ifm-toc-padding-vertical);
+      margin: 0 var(--ifm-toc-padding-vertical);
+    }
+  }
+
+  /* Label as dot in the right sidebar */
+
+  .label {
+    position: absolute;
+    padding: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 100%;
+    left: -2px;
+    top: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    color: transparent;
+    float: initial;
+
+    &.required {
+      position: absolute;
+      left: -2px;
+      top: 10px;
+      background: #fa5035;
+    }
+
+    &:nth-child(3) {
+      display: none;
     }
   }
 
   .table-of-contents__link {
     font-size: 12px;
     display: block;
+    padding: 2px 12px;
+    margin-left: -12px;
+    position: relative;
 
     code {
       background: none;
@@ -1218,50 +1274,32 @@ div[class^="tableOfContents"] {
     }
 
     &:hover {
-      color: var(--ifm-link-color);
+      color: var(--home-button-primary) !important;
 
       code {
-        color: var(--ifm-link-color);
+        color: var(--home-button-primary) !important;
       }
     }
   }
 
   .table-of-contents__link--active {
     font-weight: 500;
-    margin-left: -16px;
-    padding-left: 12px;
-    color: var(--ifm-font-color-base);
-    border-left: 4px solid var(--ifm-link-color);
+    color: var(--home-button-primary) !important;
+    border-radius: 8px;
 
     code {
-      color: var(--ifm-font-color-base);
       font-weight: 700;
-      white-space: nowrap;
-    }
-
-    &:hover {
-      color: var(--ifm-font-color-base);
-
-      code {
-        color: var(--ifm-font-color-base);
-      }
+      color: var(--home-button-primary) !important;
     }
   }
 }
 
-html[data-theme="dark"] {
-  .table-of-contents {
-    .table-of-contents__link--active {
-      color: var(--ifm-link-color);
-
-      &:hover {
-        color: var(--ifm-link-color);
-
-        code {
-          color: var(--ifm-link-color);
-        }
-      }
-    }
+div[class*="tocCollapsibleContent"] {
+  ul {
+    padding: 8px 0;
+  }
+  .table-of-contents__link {
+    margin-left: -4px;
   }
 }
 
@@ -1296,7 +1334,7 @@ button[class*="tocCollapsibleButton"] {
 /* Doc Item footer metadata */
 
 .theme-doc-footer {
-  margin-top: 40px !important;
+  margin-top: 32px;
   margin-bottom: 16px !important;
   font-size: 15px;
   color: var(--subtle);
@@ -1363,6 +1401,7 @@ button[class*="tocCollapsibleButton"] {
   .pagination-nav__link {
     border: 0;
     transition: background-color 0.15s;
+    border-radius: var(--ifm-alert-border-radius);
   }
 
   .pagination-nav__link:hover {
@@ -1513,13 +1552,13 @@ div[class*="announcementBarContent"] {
 
 .content-banner {
   background: #99d5e7;
-  padding: 1em 1.2em;
+  padding: 20px 24px;
   margin-bottom: 2em;
   position: relative;
   overflow: hidden;
-  width: calc(100%);
+  width: 100%;
   color: var(--dark);
-  border-radius: var(--ifm-global-radius);
+  border-radius: var(--ifm-alert-border-radius);
 }
 
 .content-banner p {
@@ -1553,26 +1592,27 @@ div[class*="announcementBarContent"] {
   background: #eeebfe;
   padding: 24px 48px 24px 24px;
   margin-bottom: 24px;
-  border-left: 8px solid #6170af;
+  border: 1px solid #dad1ff;
   border-radius: var(--ifm-alert-border-radius);
 
   h2,
   h3 {
     color: #6170af;
     margin-top: 0;
+    line-height: 32px;
 
     &:before {
       content: " ";
       float: left;
-      width: 32px;
-      height: 32px;
-      border-radius: 4px;
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
       background-color: #6170af;
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 18.036c.042.507.221 1.016.692 1.699.558.81 1.518 1.254 2.218.54.473-.481 5.582-9.335 8.045-12.69a.737.737 0 011.202 0c2.463 3.355 7.572 12.209 8.045 12.69.7.714 1.66.27 2.218-.54.55-.798.702-1.358.702-1.955 0-.407-7.958-15.086-8.76-16.308C13.593.297 13.357.042 12.053 0h-.994c-1.304.041-1.54.297-2.31 1.472C7.964 2.67.317 16.77 0 17.737v.299z' fill='%23fff'/%3E%3C/svg%3E%0A");
       background-repeat: no-repeat;
       background-position: center;
       background-size: 20px;
-      margin-right: 12px;
+      margin-right: 14px;
       margin-top: -2px;
     }
   }
@@ -1587,12 +1627,12 @@ div[class*="announcementBarContent"] {
 }
 
 html[data-theme="dark"] .banner-native-code-required {
-  background: rgba(123, 132, 172, 0.35);
-  border-left-color: #5d659a;
+  background: #6979bf4a;
+  border-color: #555b82;
 
   h2,
   h3 {
-    color: var(--ifm-font-color-base);
+    color: #999ec2;
   }
 
   h2:before,
@@ -1674,6 +1714,7 @@ td .color-box {
     color: #fa5035;
     border-color: #fa5035;
     border-radius: 32px;
+    font-weight: 600;
   }
 }
 
@@ -1727,7 +1768,6 @@ td .label {
 
   &.required {
     margin-left: 6px;
-    letter-spacing: 0.02rem;
     padding: 0 6px;
     border-width: 1px;
     margin-right: 0;
@@ -1745,35 +1785,6 @@ td .label {
   }
 }
 
-/* Label as dot in the right sidebar */
-
-.table-of-contents .label {
-  position: absolute;
-  padding: 0;
-  width: 6px;
-  height: 6px;
-  border-radius: 100%;
-  margin-left: 4px;
-  margin-top: 7px;
-  white-space: nowrap;
-  overflow: hidden;
-  color: transparent;
-  float: initial;
-
-  &.required {
-    position: initial;
-    margin-left: 0;
-    margin-right: 6px;
-    border-width: 3px;
-    background: #fa5035;
-  }
-
-  /* Second dot shift */
-  &:nth-child(3) {
-    margin-left: 13px;
-  }
-}
-
 /*
   Mark pages as "new" using href attribute:
   - to show badge in all versions use "PAGEID"
@@ -1891,17 +1902,16 @@ html[data-theme="dark"] .component {
 /* Docs Rating Box */
 
 .docsRating {
-  display: inline-block;
-  padding: 16px 30px 16px 40px;
-  min-height: 66px;
+  display: inline-flex;
+  align-items: center;
+  padding: 12px 30px;
   margin-top: 42px;
-  margin-left: -32px;
-  background-color: rgba(100, 215, 255, 0.3);
+  background-color: var(--docs-rating-background);
   text-align: center;
-  color: #057594;
+  color: var(--ifm-link-color);
   line-height: 32px;
   font-weight: 500;
-  border-radius: 0 32px 32px 0;
+  border-radius: var(--ifm-alert-border-radius);
 
   svg {
     height: 1.5em;
@@ -1917,18 +1927,17 @@ html[data-theme="dark"] .component {
 
   .i_thumbsup {
     fill: #56a211;
-    transform: translateY(0.25em);
     margin-left: 12px;
   }
 
   .i_thumbsdown {
     fill: #e9430f;
-    transform: scale(-1, -1) translateY(-0.25em);
+    transform: scale(-1, -1);
   }
 }
 
 html[data-theme="dark"] .docsRating {
-  color: #cee9f3;
+  color: #b8e0ef;
 }
 
 @media only screen and (max-width: 996px) {
@@ -1988,6 +1997,30 @@ html[data-theme="dark"] .docsRating {
     color: var(--ifm-font-color-secondary);
   }
 
+  div[class*="tableOfContents"] {
+    top: calc(var(--ifm-navbar-height));
+  }
+
+  .table-of-contents {
+    margin-top: 28px;
+  }
+
+  a[class*="sidebarItemLink"] {
+    border-left: 0 !important;
+    padding: 4px 12px !important;
+    border-radius: 8px;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+  }
+
+  a[class*="sidebarItemLinkActive"] {
+    background-color: var(--sidebar-active-item-background);
+    color: var(--home-button-primary);
+    font-weight: 500;
+    transition: none;
+  }
+
   @layer docusaurus.infima.importantOverrides {
     .container.margin-vert--lg {
       margin-top: 0 !important;