diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
index 66df146..e771b62 100644
--- a/client/src/components/Navbar.js
+++ b/client/src/components/Navbar.js
@@ -13,14 +13,26 @@ import {
   FaPhone,
   FaMoon,
   FaSun,
+
+  FaBars,
+  FaTimes
+
+  FaQuestionCircle
+
+
   FaQuestionCircle,
   FaBell
+
 } from 'react-icons/fa';
 import { HiOutlineUser } from "react-icons/hi";
 
 export default function Navbar() {
   const [darkMode, setDarkMode] = useState(false);
+
+  const [menuActive, setMenuActive] = useState(false);
+
   const [isEmergencyOpen, setIsEmergencyOpen] = useState(false);
+
   const { isAuthenticated, logout } = useContext(AuthContext);
 
   useEffect(() => {
@@ -31,8 +43,13 @@ export default function Navbar() {
     setDarkMode((prev) => !prev);
   };
 
+
+  const toggleMenu = () => {
+    setMenuActive(!menuActive);
+
   const toggleEmergencyPanel = () => {
     setIsEmergencyOpen(!isEmergencyOpen);
+
   };
 
   return (
@@ -45,7 +62,11 @@ export default function Navbar() {
         />
       </div>
 
-      <nav className="nav_menu">
+      <div className="navbar__toggle" onClick={toggleMenu} aria-label="Toggle menu">
+        {menuActive ? <FaTimes /> : <FaBars />}
+      </div>
+
+      <nav className={`nav_menu ${menuActive ? 'active' : ''}`}>
         <ul className="nav_link">
           <li><Link to="/#home"><FaHome /> <span>Home</span></Link></li>
           <li><Link to="/#about"><FaInfoCircle /> <span>About</span></Link></li>
diff --git a/client/src/components/styles.css b/client/src/components/styles.css
index af7ea4e..2f8c4c2 100644
--- a/client/src/components/styles.css
+++ b/client/src/components/styles.css
@@ -108,9 +108,21 @@ body {
   }
 
   .nav_menu.active {
-    max-height: 300px; 
+    max-height: 400px; 
+    background-color: white;
+    opacity: 0.95;
+    border-radius: 0 0 20px 20px;
+    box-shadow: 0 4px 8px rgba(0, 128, 0, 0.3);
+    padding: 10px 0;  
+    overflow-y: auto; 
+  }
+
+  body.dark-mode .nav_menu.active {
+    background-color: #23272f; 
+    opacity: 0.95;
   }
 
+
   .nav_link {
     flex-direction: column;
     gap: 15px;
@@ -123,6 +135,8 @@ body {
   }
 }
 
+
+
 body {
   background-color: white;
   color: #203394;