diff --git a/package-lock.json b/package-lock.json
index ff3c00a..39af495 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -810,6 +810,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz",
+      "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.3",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz",
@@ -1909,6 +1917,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz",
+      "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==",
+      "dependencies": {
+        "@remix-run/router": "1.10.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.17.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz",
+      "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==",
+      "dependencies": {
+        "@remix-run/router": "1.10.0",
+        "react-router": "6.17.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 2c1e935..8b21bbe 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.2",
     "react-icons": "^4.11.0",
+    "react-router-dom": "^6.17.0",
     "web-vitals": "^2.1.4"
   },
   "repository": {
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index 3e0df5b..30bd6ff 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -1,17 +1,53 @@
-import React from "react";
-import Logo from "../assets/gdsc-logo.png";
+import React, { useState } from "react";
+import { FaBars, FaTimes } from "react-icons/fa";
+import Logo from "../assets/gdsc-logo.png"
 const Navbar = () => {
+  const [click, setClick] = useState(false);
+
   return (
-    <div className="w-[100%]  flex justify-center items-center py-6 relative">
-      <div className="flex justify-center items-center absolute left-[5vw] gap-1">
+    <div className="w-[100%] h-[12vh]  flex justify-between md:justify-center  lg:justify-center items-center px-[5vw] md:px-0 lg:px-0 py-6 relative">
+      <div className="flex justify-center items-center md:absolute lg:absolute md:left-[5vw] lg:left-[5vw] gap-1">
         <img src={Logo} alt="image" className="h-[3.5rem]" />
         <h1 className="font-bold text-lg text-[#767676]">GDSC AEC</h1>
       </div>
+
+      <div
+        className="p-3 rounded-full block lg:hidden md:hidden z-40 "
+        style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+      >
+        {click ? (
+          <FaTimes onClick={() => setClick(!click)} className="z-20 relative hover:cursor-pointer"/>
+        ) : (
+          <FaBars onClick={() => setClick(!click)} className="z-20 relative hover:cursor-pointer" />
+        )}
+        {click && (
+          <div
+            className="w-[10rem] h-[12rem] bg-white absolute z-10 top-0 right-0 block lg:hidden md:hidden rounded-lg border-t-[20px] border-[#ef5454] "
+            style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+          >
+            <ul className=" flex flex-col justify-center mt-[6vh] gap-2 items-center text-md text-[#535353]">
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                About us
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+               Event
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+              Our team
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                Contact
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+
       <div
         style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
-        className="  px-[5em] rounded-full "
+        className="  px-[5em] rounded-full hidden md:block lg:block md:ml-[20vw] lg:ml-0"
       >
-        <ul className=" flex justify-center items-center  gap-12 drop-shadow-2xl text-sm h-[6.4vh] text-[#535353] transition-all delay-300">
+        <ul className=" flex justify-center items-center  gap-12 text-sm h-[6.4vh] text-[#535353] transition-all delay-300">
           <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
             About us
           </li>
@@ -19,7 +55,7 @@ const Navbar = () => {
             Event
           </li>
           <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
-            Our Team
+            Our team
           </li>
           <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
             Contact
@@ -31,3 +67,4 @@ const Navbar = () => {
 };
 
 export default Navbar;
+