diff --git a/src/css/custom.css b/src/css/custom.css
index d9232e1181..1aefb1bba6 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -510,26 +510,33 @@ hr {
   background: var(--border-color);
 }
 
-.navbar__link--active,
-.menu__link--active {
-  color: var(--selected);
+.navbar .navbar__link--active {
+  color: var(--surface-brand-default);
+  background: var(--surface-brand-grey-strong);
 }
 
-
-.navbar__link--active:hover {
-  color: var(--selected-hover);
+.navbar__link {
+  position: relative;
 }
 
-.navbar__link {
+.navbar__item.navbar__link:not(.logo-link):not(.navbar-login-btn):hover {
   position: relative;
 }
 
-.navbar__item.navbar__link:not(.logo-link):hover {
-  color: var(--normal-hover);
+.navbar__item.navbar__link:not(.logo-link):not(.navbar-login-btn):is(:hover, :focus-visible)::after {  position: absolute;
+  height: 2px;
+  width: 100%;
+  content: "";
+  background: var(--surface-brand-default);
+  bottom: -24px;
+  left: 0;
+  z-index: 2;
+  pointer-events: none;
 }
 
+
 .navbar__item {
-  padding: 12px 16px;
+  padding: 8px;
   border-radius: 8px;
   font-family: Inter;
   font-size: 16px;
@@ -664,49 +671,59 @@ hr {
 }
 
 .navbar__items--middle {
-  background: var(--navbar-items-bg);
   padding: 0 16px;
   border-radius: 99px;
+  display: flex;
+  gap: 16px;
   margin: 0 auto;
 }
 .navbar__inner {
-  margin: auto;
+  background: var(--surface-primary);
   padding: 16px 24px;
   display: grid;
-  grid-template-columns: 324px 1fr auto;
+  gap: 40px;
+  grid-template-columns: auto auto 1fr;
 }
 @media (max-width: 1191px) {
-  .navbar__inner {
-    grid-template-columns: repeat(3, auto);
-  }
   .header-github-link {
     display: none;
   }
+  .navbar__inner {
+    gap: 16px;
+  }
 }
 
 .navbar__items--right > :last-child {
   display: flex;
   align-items: center;
 }
+.navbar__items:first-child {
+  transform: translateY(-2px);
+}
+
 @media (max-width: 996px) {
+  .navbar__items:first-child {
+    transform: unset;
+  }
   .navbar__items:not(.navbar__items--right) {
     width: 100%;
     flex-direction: row-reverse;
     justify-content: space-between;
     max-width: unset;
+    height: 48px;
   }
 
   .navbar__inner {
     position: relative;
-    display: flex;
     padding: 16px 32px;
+    display: flex;
   }
 
   .navbar__items--right > :last-child {
-    left: 32px;
+    left: 0;
     z-index: 1;
-    top: calc(100% + 24px);
-    width: calc(100% - 64px);
+    top: 100%;
+    width: calc(100% - 16px);
   }
 
   .navbar__items--right > :last-child > * {
@@ -785,6 +802,9 @@ hr {
     top: 50%;
     transform: translateY(-50%);
   }
+  .logo-link::before {
+    content: "/"
+  }
   .logo-link:hover {
     transform: translateY(-60%);
   }
@@ -870,7 +890,7 @@ hr {
   padding: 0;
   backdrop-filter: blur(7px);
   background: var(--navbar-gradient);
-  box-shadow: var(--navbar-shadow);
+  border-bottom: 1px solid var(--border-color);
 }
 
 @media (max-width: 996px) {
diff --git a/src/css/theming.css b/src/css/theming.css
index 2e4152f496..443dbf43dd 100644
--- a/src/css/theming.css
+++ b/src/css/theming.css
@@ -207,6 +207,7 @@
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 /* PRIMITES WITH THEME DEFINED BY TOGGLER */
 html[data-theme="dark"] {
+  --surface-brand-default: #16a394;
   --code-with-result: var(--gray-1000);
   --code-with-result-border: var(--code-bgd-color);
   --docsearch-searchbox-background: var(--gray-900) !important;
@@ -329,6 +330,7 @@ html[data-theme="dark"] {
   :root[data-theme="light"] {
     --code-with-result: var(--gray-800);
     --code-with-result-border: var(--code-with-result);
+    --surface-brand-default: #16a394;
     --docsearch-searchbox-background: var(--ifm-color-secondary);
     --table-of-contents-link: rgb(113, 128, 150);
     --ifm-background-color: #fff;
@@ -507,6 +509,7 @@ html[data-theme="dark"] {
   :root[data-theme="dark"] {
     --code-with-result: var(--gray-1000);
     --code-with-result-border: var(--code-bgd-color);
+    --surface-brand-default: #16a394;
     --docsearch-searchbox-background: var(--gray-900) !important;
     --table-of-contents-link: #a0aec0;
     --ifm-color-primary: var(--teal-600);
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index fedebfaec5..cdadb06307 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -6,7 +6,7 @@
 .mainHome {
   overflow: hidden;
   padding: 0;
-  @media (max-width: 974px) {
+  @media (max-width: 996px) {
     margin-top: 68px;
   }
 }
@@ -113,14 +113,14 @@
       gap: 40px;
       margin-top: 36px;
       grid-template-columns: 1fr;
-      @media (min-width: 974px) {
+      @media (min-width: 996px) {
         grid-template-columns: repeat(2, calc(50% - 20px));
       }
       .tabBox {
         width: 100%;
         height: 100%;
         max-width: 100%;
-        @media (min-width: 974px) {
+        @media (min-width: 996px) {
           height: 100%;
         }
         .heading {
@@ -210,7 +210,7 @@
   line-height: 52.8px;
   letter-spacing: -0.02em;
   text-align: left;
-  @media (min-width: 974px) {
+  @media (min-width: 996px) {
     font-size: 48px;
   }
 }
@@ -223,7 +223,7 @@
   letter-spacing: -2%;
   margin: 40px 0 24px;
   
-  @media (min-width: 974px) {
+  @media (min-width: 996px) {
     margin: 80px 0 24px;
     font-size: 36px;
   }
@@ -243,7 +243,7 @@
   gap: 24px;
   flex-wrap: wrap;
   display: grid;
-  @media (min-width: 974px) {
+  @media (min-width: 996px) {
     grid-template-columns: repeat(3, 1fr);
   }
 }
@@ -264,7 +264,7 @@
     display: grid;
     gap: 40px;
     grid-template-columns: 1fr;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       grid-template-columns: repeat(3, 1fr);
     }
     .howItem {
@@ -301,7 +301,7 @@
           line-height: 140%;
           letter-spacing: 0%;
           margin: 16px 0 0;
-          @media (min-width: 974px) {
+          @media (min-width: 996px) {
             height: 98px;
           }
         }
@@ -371,7 +371,7 @@
     display: grid;
     gap: 40px;
     grid-template-columns: 1fr;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       grid-template-columns: repeat(3, 1fr);
     }
     .helpItem {
@@ -441,7 +441,7 @@
     max-width: 1272px;
     text-align: left;
     padding: 40px 16px;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       grid-template-columns: repeat(2, 1fr);
       padding: 80px 16px;
     }
@@ -469,7 +469,7 @@
     justify-content: left;
     align-items: center;
     gap: 24px;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       justify-content: center;
     }
     .link {
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
index 4734c8d6d0..84dd491c34 100644
--- a/src/theme/Navbar/Content/index.tsx
+++ b/src/theme/Navbar/Content/index.tsx
@@ -72,7 +72,8 @@ export default function NavbarContent(): ReactNode {
         <>
           {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
-          <Link to={baseUrl} className="logo-link">/docs</Link>
+          <span className={styles.separator}>/</span>
+          <Link to={baseUrl} className="logo-link">docs</Link>
         </>
       }
       middle={
diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css
index 4c9471e109..17d7fe92f8 100644
--- a/src/theme/Navbar/Content/styles.module.css
+++ b/src/theme/Navbar/Content/styles.module.css
@@ -5,4 +5,13 @@ Hide color mode toggle in small viewports
   .colorModeToggle {
     display: none;
   }
+  .separator {
+    display: none;
+  }
 }
+
+.separator {
+  color: var(--border-color);
+  font-size: 28px;
+  margin-right: 4px;
+}
\ No newline at end of file
diff --git a/src/theme/SearchBar/index.tsx b/src/theme/SearchBar/index.tsx
index 9813510291..6d9c29d100 100644
--- a/src/theme/SearchBar/index.tsx
+++ b/src/theme/SearchBar/index.tsx
@@ -1,17 +1,16 @@
-import React, { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
-import { createPortal } from "react-dom";
 import { DocSearchButton, useDocSearchKeyboardEvents } from "@docsearch/react";
 import Head from "@docusaurus/Head";
 import Link from "@docusaurus/Link";
 import { useHistory } from "@docusaurus/router";
 import { isRegexpStringMatch, useSearchLinkCreator } from "@docusaurus/theme-common";
-import {
-  useAlgoliaContextualFacetFilters,
-  useSearchResultUrlProcessor,
-} from "@docusaurus/theme-search-algolia/client";
+import { useAlgoliaContextualFacetFilters, useSearchResultUrlProcessor } from "@docusaurus/theme-search-algolia/client";
 import Translate from "@docusaurus/Translate";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import translations from "@theme/SearchTranslations";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+
 import type {
   InternalDocSearchHit,
   DocSearchModal as DocSearchModalType,
@@ -53,7 +52,7 @@ const kapaStyles = `
   width: fit-content;
   border: none;
   background: transparent;    font-size: 14px;
-  color: var(--docsearch-highlight-color);
+  color: var(--surface-brand-default);
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
@@ -113,6 +112,28 @@ const kapaStyles = `
 }
 
 /* Make sure the Kapa wrapper appears at the top of the dropdown */
+
+.DocSearch-Modal:not(:has(.DocSearch-Dropdown)) .DocSearch-Footer {
+  margin-top: 200px;
+  position: relative;
+}
+.DocSearch-Modal:not(:has(.DocSearch-Dropdown)) .DocSearch-Footer::before {
+  content: "No recent searches";
+  position: absolute;
+  top: -100px;
+  color: var(--tertiary-font-color);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.DocSearch-Modal {
+  --docsearch-highlight-color: var(--surface-brand-default) !important;
+  --docsearch-soft-primary-color: transparent !important;
+  --docsearch-hit-highlight-color:rgba(0, 150, 136, 0.1) !important;
+  background: var(--surface-primary);
+}
+.DocSearch-Hit-source {
+  background: var(--surface-primary);
+}
 .DocSearch-Dropdown {
   display: flex;
   flex-direction: column;
@@ -127,6 +148,50 @@ const kapaStyles = `
   flex-direction: column;
   padding: 0 1rem 1rem;
 }
+.DocSearch-SearchBar {
+  padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
+}
+.DocSearch-Button {
+  align-items: center;
+  background: var(--docsearch-searchbox-background);
+  border: 0;
+  border-radius: 40px;
+  color: var(--tertiary-font-color);
+  cursor: pointer;
+  display: flex;
+  font-weight: 500;
+  height: 36px;
+  justify-content: space-between;
+  margin: 0 0 0 16px;
+  padding: 0 8px;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.DocSearch-Button:hover {
+  background: var(--surface-primary);
+  outline: 1px solid var(--border-color);
+}
+.DocSearch-Button kbd {
+  background: var(--white-color);
+  color: var(--gray-800);
+  box-shadow: 0px 1px 1px rgba(47, 55, 71, 0.6), 0px 1px 4px rgba(47, 55, 71, 0.2);
+  border-bottom: 1px solid rgba(47, 55, 71, 0.2);
+  border-radius: 4px;
+  padding: 0;
+  vertical-align: baseline;
+  font-size: 14px !important;
+  font-family: "JetBrainsMono" !important;
+}
+  .DocSearch-Form {
+    border: 2px solid var(--surface-brand-default);
+    border-radius: 4px;
+  }
+  .DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
+    color: var(--surface-brand-default);
+  }
+  .DocSearch-Hit-path  {
+    color: var(--tertiary-font-color);
+  }
 `;
 
 let DocSearchModal: typeof DocSearchModalType | null = null;