diff --git a/.gitignore b/.gitignore
index fd3dbb5..cb4eac6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+#bun
+bun.lockb
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
new file mode 100644
index 0000000..0a57e9f
--- /dev/null
+++ b/app/docs/page.tsx
@@ -0,0 +1,9 @@
+import Sidebar from '@/components/shared/Sidebar';
+
+export default function Page() {
+  return (
+    <>
+      <Sidebar />
+    </>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 935158a..5cf6955 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,16 +1,17 @@
-import type { Metadata } from "next";
-import { Poppins } from "next/font/google";
-import "./globals.css";
-import { ThemeProvider } from "@/components/shared/providers/themeprovider";
+import type { Metadata } from 'next';
+import { Poppins } from 'next/font/google';
+import './globals.css';
+import { ThemeProvider } from '@/components/shared/providers/themeprovider';
+import Navbar from '@/components/shared/Navbar';
 
 const poppins = Poppins({
-  weight: ["400", "600", "700", "900"],
-  subsets: ["latin"],
+  weight: ['400', '600', '700', '900'],
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "SVRJS - A Web Server running on Nodejs",
-  description: "Open Source Software Library",
+  title: 'SVRJS - A Web Server running on Nodejs',
+  description: 'Open Source Software Library',
 };
 
 export default function RootLayout({
@@ -27,6 +28,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
+          <Navbar />
           {children}
         </ThemeProvider>
       </body>
diff --git a/app/page.tsx b/app/page.tsx
index b01741f..623f50b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,13 +1,11 @@
-import About from "@/components/shared/About";
-import Hero from "@/components/shared/Hero";
-import HowItWorks from "@/components/shared/HowItWorks";
-import Navbar from "@/components/shared/Navbar";
-import Newsletter from "@/components/shared/Newsletter";
+import About from '@/components/shared/About';
+import Hero from '@/components/shared/Hero';
+import HowItWorks from '@/components/shared/HowItWorks';
+import Newsletter from '@/components/shared/Newsletter';
 
 const RootPage = () => {
   return (
     <>
-      <Navbar />
       <Hero />
       <HowItWorks />
       <About />
diff --git a/components/shared/Navbar.tsx b/components/shared/Navbar.tsx
index 42753a5..f15a109 100644
--- a/components/shared/Navbar.tsx
+++ b/components/shared/Navbar.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
 import {
   NavigationMenu,
   NavigationMenuItem,
   NavigationMenuList,
-} from "@radix-ui/react-navigation-menu";
-import Image from "next/image";
-import Link from "next/link";
-import ThemeToggle from "../ui/theme-toggle";
-import { NAVBAR } from "@/constants";
-import { buttonVariants } from "../ui/button";
-import MobileNav from "./MobileNav";
-import { usePathname } from "next/navigation";
+} from '@radix-ui/react-navigation-menu';
+import Image from 'next/image';
+import Link from 'next/link';
+import ThemeToggle from '../ui/theme-toggle';
+import { NAVBAR } from '@/constants';
+import { buttonVariants } from '../ui/button';
+import MobileNav from './MobileNav';
+import { usePathname } from 'next/navigation';
 
 const Navbar = () => {
   const pathname = usePathname();
@@ -50,9 +50,9 @@ const Navbar = () => {
                 href={href}
                 target={target}
                 className={`text-[18px] tracking-tight ${
-                  pathname == href ? "bg-accent/40" : ""
+                  pathname == href ? 'bg-accent/40' : ''
                 } ${buttonVariants({
-                  variant: "ghost",
+                  variant: 'ghost',
                 })}`}
               >
                 {label}
@@ -61,12 +61,12 @@ const Navbar = () => {
           </nav>
 
           <div className="hidden md:flex gap-2 items-center">
-            {NAVBAR.rightLinks?.map(({ href = "", label, target }) => (
+            {NAVBAR.rightLinks?.map(({ href = '', label, target }) => (
               <Link
                 key={label}
                 href={href}
                 target={target}
-                className={`border ${buttonVariants({ variant: "ghost" })}`}
+                className={`border ${buttonVariants({ variant: 'ghost' })}`}
               >
                 <Image
                   src="/next.svg"
diff --git a/components/shared/Sidebar.tsx b/components/shared/Sidebar.tsx
new file mode 100644
index 0000000..a492a48
--- /dev/null
+++ b/components/shared/Sidebar.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Sidebar = () => {
+  return (
+    <div className="w-[250px] h-[100vh] border-r dark:border-r-slate-800 pl-4 pt-2">
+      <span className="flex flex-col gap-2">
+        <h2 className="text-2xl font-bold">First use</h2>
+        <ul className="pl-4 flex flex-col gap-2">
+          <li>System requirements</li>
+          <li>Installation</li>
+          <li>Features</li>
+          <li>SVR.JS files</li>
+          <li>SVR.JS utilities</li>
+          <li>SVR.JS commands</li>
+          <li>Updating SVR.JS</li>
+          <li>Common problems</li>
+          <li>Bun support</li>
+        </ul>
+      </span>
+    </div>
+  );
+};
+
+export default Sidebar;