diff --git a/docs/src/pages/docs.js b/docs/src/pages/docs.js
index 62b465ccc..01d238aa9 100644
--- a/docs/src/pages/docs.js
+++ b/docs/src/pages/docs.js
@@ -7,12 +7,14 @@ import HomepagePrimaryFeatures from '../components/HomepagePrimaryFeatures'
 import HomepageSecondaryFeatures from '../components/HomepageSecondaryFeatures'
 import HomepageTerinaryFeatures from '../components/HomepageTerinaryFeatures'
 import { DocSearch } from '@docsearch/react'
+import NavbarExtended from '../theme/NavbarExtension'
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext()
 
   return (
     <header className={clsx(styles.heroBanner)}>
+      <NavbarExtended />
       <div className="container">
         <Heading as="h1" className={clsx(styles.heroTitle)}>
           Hello, how can we help?
diff --git a/docs/src/theme/NavbarExtension/NavPageContainer.jsx b/docs/src/theme/NavbarExtension/NavPageContainer.jsx
new file mode 100644
index 000000000..0c292c5a4
--- /dev/null
+++ b/docs/src/theme/NavbarExtension/NavPageContainer.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import Link from '@docusaurus/Link';
+import css from "./NavPageContainer.module.css";
+
+export default function NavPageContainer() {
+  return (
+    <div className={css.NavPageContainer}>
+      <Link to="/guides" className={css.NavPageItem}>
+        Guide
+      </Link>
+      <Link
+        to="/developer"
+        className={css.NavPageItem}
+      >
+        Developer
+      </Link>
+      <Link
+        to="/api-reference"
+        className={css.NavPageItem}
+      >
+        API Reference
+      </Link>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/docs/src/theme/NavbarExtension/NavPageContainer.module.css b/docs/src/theme/NavbarExtension/NavPageContainer.module.css
new file mode 100644
index 000000000..9a5f14a1b
--- /dev/null
+++ b/docs/src/theme/NavbarExtension/NavPageContainer.module.css
@@ -0,0 +1,14 @@
+.NavPageContainer {
+    margin-right: auto;
+    display: flex;
+    align-items: right;
+  }
+  
+  .NavPageItem {
+    margin: 0 30px;
+    font-size: 16px;
+    font-weight: normal;
+    color: #262a2f;
+    cursor: pointer;
+    text-decoration: none;
+  }
\ No newline at end of file
diff --git a/docs/src/theme/NavbarExtension/index.js b/docs/src/theme/NavbarExtension/index.js
new file mode 100644
index 000000000..885482839
--- /dev/null
+++ b/docs/src/theme/NavbarExtension/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+import css from "./index.module.css";
+import NavPageContainer from "./NavPageContainer";
+
+
+
+export default function NavBar() {
+  return (
+    <div className={css.NavBar}>
+      <NavPageContainer />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/docs/src/theme/NavbarExtension/index.module.css b/docs/src/theme/NavbarExtension/index.module.css
new file mode 100644
index 000000000..4811f0fa5
--- /dev/null
+++ b/docs/src/theme/NavbarExtension/index.module.css
@@ -0,0 +1,19 @@
+.NavBar {
+    height: 3rem; /* Adjust height as needed */
+    background-color: #fff;
+    padding: 0.5rem 0.8rem; /* Adjust padding as needed */
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* Align items to the start and end of the container */
+    position: fixed; /* Fixed position to keep it on top */
+    top: 55px; /* Position it at the top */
+    left: 0; /* Position it at the left */
+    width: 100%; /* Occupy full width of the viewport */
+    z-index: 5; /* Ensure it's above other elements */
+}
+
+@media screen and (max-width: 768px) {
+    .NavBar {
+        display: none; /* Hide the NavBar on mobile devices */
+    }
+}