diff --git a/package-lock.json b/package-lock.json
index 798189a..ec9ab39 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.11.0",
+        "react-router-dom": "^6.17.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -839,6 +840,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",
@@ -1930,6 +1939,36 @@
         "react": "*"
       }
     },
+    "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 1767f57..9858e8d 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
+    "react-router-dom": "^6.17.0",
     "web-vitals": "^2.1.4"
   },
   "repository": {
diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
new file mode 100644
index 0000000..5c0c055
--- /dev/null
+++ b/src/components/NavBar/NavBar.css
@@ -0,0 +1,3 @@
+.active{
+    border-bottom: 2px solid rgb(107, 161, 215);
+}
\ No newline at end of file
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index a9da52e..53624c0 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -1,22 +1,71 @@
-import React from 'react'
-import Logo from '../../Assests/gdsc-logo.png'
+import React, { useState } from "react";
+import { FaBars, FaTimes } from "react-icons/fa";
+import Logo from "../../Assests/gdsc-logo.png";
+import { NavLink } from "react-router-dom";
+import "./NavBar.css";
 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'>
-            <img src={Logo} alt="image" className='h-[3.5rem]'/>
-            <h1 className='font-bold text-lg text-[#767676]'>GDSC AEC</h1>
-        </div>
-      <div style={{boxShadow:' 0 0 10px rgba(0, 0, 0, 0.2)'}}    className='  px-[5em] rounded-full '>
-        <ul className=' flex justify-center items-center  gap-12 drop-shadow-2xl 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>
-            <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>
+    <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-[12rem] h-[20rem] bg-white absolute z-10 top-0 right-0 block lg:hidden md:hidden rounded-lg"
+            style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+          >
+            <ul className=" flex flex-col justify-center mt-[13vh] gap-4 items-center text-md text-[#535353]">
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/">About us</NavLink>
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/event">Event</NavLink>
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/team">Our team</NavLink>
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/contact">Contact</NavLink>
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+
+      <div
+        style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+        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 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">
+            <NavLink to="/">About us</NavLink>
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            <NavLink to="/about">Event</NavLink>
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            <NavLink to="/team">Our team</NavLink>
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            <NavLink to="/contact">Contact</NavLink>
+          </li>
         </ul>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;
diff --git a/src/index.jsx b/src/index.jsx
index c812139..7296479 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,12 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function