diff --git a/.vscode/settings.json b/.vscode/settings.json
index d067910..bd3337f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules\\typescript\\lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
 }
\ No newline at end of file
diff --git a/app/dashboard/SideNavbar.tsx b/app/dashboard/SideNavbar.tsx
new file mode 100644
index 0000000..f29ec96
--- /dev/null
+++ b/app/dashboard/SideNavbar.tsx
@@ -0,0 +1,99 @@
+"use client";
+import React from "react";
+
+import Image from "next/image";
+import Link from "next/link";
+import useTweetStore from "../store/tweetStore";
+import { AiOutlineSearch } from "react-icons/ai";
+import { BsPeopleFill } from "react-icons/bs";
+import DonutLargeIcon from "@mui/icons-material/DonutLarge";
+import { usePathname } from "next/navigation";
+
+import { Disclosure } from "@headlessui/react";
+import { GiHamburgerMenu } from "react-icons/gi";
+
+const links = [
+  {
+    name: "Progress",
+    url: "/dashboard",
+    icon: <DonutLargeIcon className="text-xl text-ourPink" />,
+  },
+  {
+    name: "Search",
+    url: "/search",
+    icon: <AiOutlineSearch className="text-xl text-ourPink" />,
+  },
+  {
+    name: "Discover",
+    url: "/discover",
+    icon: <BsPeopleFill className="text-2xl text-ourPink" />,
+  },
+];
+
+const activeLink =
+  "flex items-center gap-3 text-ourPink bg-[#343434] rounded-lg cursor-pointer py-4 px-4 text-lg transition-all duration-300 ease-in-out";
+const normalLink =
+  "flex items-center gap-3 text-ourPink hover:bg-[#343434] rounded-lg cursor-pointer py-4 px-4 text-lg transition-all duration-300 ease-in-out";
+const SideNavbar = () => {
+  const pathname = usePathname();
+  const { userProfile, count } = useTweetStore((state) => ({
+    userProfile: state.userProfile,
+    count: state.count,
+  }));
+  return (
+    <div>
+      <Disclosure>
+        <Disclosure.Button className="absolute top-5 right-5 inline-flex items-center peer justify-center rounded-md p-3 text-gray-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white group hover:bg-gray-900">
+          <GiHamburgerMenu
+            className="block md:hidden h-6 w-6"
+            aria-hidden="true"
+          />
+        </Disclosure.Button>
+        <div className="p-6 w-1/2 h-screen bg-gray-400 z-20 fixed top-20 -left-96 lg:w-60 lg:left-0 peer-focus:left-0 peer-transition ease-out delay-150 duration-200 md:block md:h-screen md:w-1/6">
+          <div className="flex flex-col gap-10 justify-start items-center">
+            <div className="flex items-center gap-2 ">
+              <div className="relative">
+                <Image
+                  alt={`${userProfile.name}'s profile image`}
+                  src={userProfile.profile_img}
+                  width={200}
+                  height={200}
+                  className="rounded-full w-12 object-cover"
+                />
+                <span className="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center rounded-full bg-ourPink text-white text-xs font-medium">
+                  {count}
+                </span>
+              </div>
+              <div className="flex flex-col">
+                <p className="text-ourDarkGray text-lg font-semibold">
+                  {userProfile.name}
+                </p>
+                <p className="text-ourDarkGray opacity-90 text-sm">
+                  @{userProfile.username}
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-col gap-2 w-full ">
+              {links.map((link) => (
+                <Link
+                  key={link.name}
+                  href={link.url}
+                  className=""
+                >
+                  <div
+                    className={pathname === link.url ? activeLink : normalLink}
+                  >
+                    {link.icon}
+                    <p className="text-xl font-medium">{link.name}</p>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Disclosure>
+    </div>
+  );
+};
+
+export default SideNavbar;
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 7fb4311..ad3a326 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-
+import { useState } from "react";
 import Badges from "./Badges";
 import Card from "./Card";
 import Sidebar from "./Sidebar";
@@ -9,6 +9,7 @@ import Streak from "./Streak";
 import Loading from "../components/Loading";
 import Navbar from "../components/Navbar";
 import { Poppins } from "@next/font/google";
+import SideNavbar from "./SideNavbar";
 
 const poppins = Poppins({
   subsets: ["latin"],
@@ -16,7 +17,7 @@ const poppins = Poppins({
   variable: "--font-Poppins",
 });
 
-const dashboardPage = () => {
+const DashboardPage = () => {
   const { tweets, dates, username, loading } = useTweetStore((state) => ({
     tweets: state.tweets,
     dates: state.dates,
@@ -24,12 +25,50 @@ const dashboardPage = () => {
     loading: state.loading,
   }));
 
+  const [navbar, setNavbar] = useState(false);
   return (
     <div className="px-8">
       <Navbar />
+      {/* <div className="md:hidden">
+        <button
+          className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
+          onClick={() => setNavbar(!navbar)}
+        >
+          {navbar ? (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-6 h-6 text-black"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clipRule="evenodd"
+              />
+            </svg>
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="w-6 h-6 text-black"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          )}
+        </button>
+      </div> */}
       <div className="md:flex w-full bg-white">
-        <Sidebar />
-        <div className="w-full md:w-5/6 p-9">
+        <SideNavbar />
+
+        <div className="w-full p-9 md:ml-32 lg:ml-56">
           <div className="md:flex mb-5 md:space-x-5 space-y-5 md:space-y-0">
             <div className="w-full md:w-2/3 p-8 rounded-md shadow-md shadow-[#bcbcbc29] border-[#bcbcbc20] border-[1px] bg-white">
               <p className="text-[#5f6577] text-base font-bold">
@@ -70,4 +109,4 @@ const dashboardPage = () => {
   );
 };
 
-export default dashboardPage;
+export default DashboardPage;
diff --git a/package-lock.json b/package-lock.json
index 5c1f7a8..8a8672f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
+        "@headlessui/react": "^1.7.12",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.6",
         "@next/font": "^13.1.3",
@@ -590,6 +591,21 @@
         "@floating-ui/core": "^1.1.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.12",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.12.tgz",
+      "integrity": "sha512-FhSx5V+Qp0GvbTpaxyS+ymGDDNntCacClWsk/d8Upbr19g3AsPbjfPk4+m2CgJGcuCB5Dz7LpUIOAbvQTyjL2g==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
diff --git a/package.json b/package.json
index 67ac881..73e617b 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@headlessui/react": "^1.7.12",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.6",
     "@next/font": "^13.1.3",