diff --git a/frontend/package.json b/frontend/package.json
index a1695e2e..8f7a92f8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "dotenv": "^16.4.5",
     "framer-motion": "^11.5.6",
     "gsap": "^3.12.5",
+    "js-cookie": "^3.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
diff --git a/frontend/src/components/Pages/Login.jsx b/frontend/src/components/Pages/Login.jsx
index 49e52855..dd6588ce 100644
--- a/frontend/src/components/Pages/Login.jsx
+++ b/frontend/src/components/Pages/Login.jsx
@@ -2,7 +2,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import photo from '../../assets/login.png';
 import React, { useState } from 'react';
 import { message } from 'antd';
-
+import Cookies from 'js-cookie'
 const Login = () => {
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
   const [data, setData] = useState({
@@ -34,8 +34,10 @@ const Login = () => {
         throw new Error(result.message || 'Login failed');
       }
       // Handle successful login (e.g., store token, redirect)
-      const token=result.token;
-      localStorage.setItem("token",JSON.stringify(token));
+      Cookies.set('authToken',result.token,{
+        expire:'1h',
+        secure:true
+      });
       message.success('Login successful');
       navigate('/');
     } catch (err) {
diff --git a/frontend/src/components/Shared/Navbar.jsx b/frontend/src/components/Shared/Navbar.jsx
index a3c70a7d..4993a7ae 100644
--- a/frontend/src/components/Shared/Navbar.jsx
+++ b/frontend/src/components/Shared/Navbar.jsx
@@ -1,13 +1,14 @@
 import { useState, useEffect } from 'react';
 import Logo from '../../assets/Logo/playcafe.png';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import Cookies from 'js-cookie'
 
 const Navbar = () => {
   const [isloggedIn, setisloggedIn] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const token=localStorage.getItem("token");
+  const [token,setToken] = useState(Cookies.get('authToken'));
   const location = useLocation();
   const navigate = useNavigate(); // Correctly initialize useNavigate
 
@@ -18,7 +19,9 @@ const Navbar = () => {
     { name: 'RESERVATION', path: '/reservation' },
     { name: 'BOARDGAMES', path: '/boardgame' },
   ];
-
+  useEffect(() => {
+    setToken(Cookies.get('authToken'));
+  });
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
@@ -30,6 +33,7 @@ const Navbar = () => {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
+    
   }, []);
 
   const toggleMenu = () => {
@@ -39,7 +43,8 @@ const Navbar = () => {
   const handleLogout = () => {
     // setisloggedIn(false); // Set isLoggedIn to false on confirmation
     //managing log in , logout using jwt tokens 
-    localStorage.removeItem("token");
+    Cookies.remove("authToken");
+    setToken(null);
     setIsModalOpen(false); // Close the modal
     setIsMenuOpen(false) // after getting logged out close the menu if it is open
     navigate("/login");//navigate to login after get logged out