diff --git a/addAddress.html b/addAddress.html
index 68776be..7a260ad 100644
--- a/addAddress.html
+++ b/addAddress.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/addressDetails.html b/addressDetails.html
index 65e740f..83b4a21 100644
--- a/addressDetails.html
+++ b/addressDetails.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/addresses.html b/addresses.html
index 70e8c84..71b10bd 100644
--- a/addresses.html
+++ b/addresses.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/carts.html b/carts.html
index fc0f0d0..5e7bc6d 100644
--- a/carts.html
+++ b/carts.html
@@ -33,7 +33,7 @@
         <span class="toggler-icon bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
             <a class="nav-link " aria-current="page" href="index.html">Home</a>
diff --git a/changePass.html b/changePass.html
index 359d329..cf2b597 100644
--- a/changePass.html
+++ b/changePass.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/checkOut.html b/checkOut.html
index b433694..e67c641 100644
--- a/checkOut.html
+++ b/checkOut.html
@@ -33,7 +33,7 @@
         <span class="toggler-icon bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
             <a class="nav-link " aria-current="page" href="index.html">Home</a>
diff --git a/checkOutDetails.html b/checkOutDetails.html
index b0642b8..fab1bb7 100644
--- a/checkOutDetails.html
+++ b/checkOutDetails.html
@@ -33,7 +33,7 @@
         <span class="toggler-icon bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
             <a class="nav-link " aria-current="page" href="index.html">Home</a>
diff --git a/css/style.css b/css/style.css
index 19bd357..f999819 100644
--- a/css/style.css
+++ b/css/style.css
@@ -220,19 +220,6 @@ html::-webkit-scrollbar-track {
 
 .navbar-nav {
   margin: 0 !important;
-  gap: 22px;
-}
-.navbar-collapse {
-  justify-content: space-between;
-}
-.navbar-brand {
-  font-size: 36px;
-  line-height: 44px;
-}
-.navbar-nav .nav-link {
-  font-size: 16px;
-  line-height: 21px;
-  color: black;
 }
 .navbar-nav .nav-link.active {
   color: var(--main_color);
@@ -244,8 +231,6 @@ html::-webkit-scrollbar-track {
   gap: 12px;
 }
 
-.navbar .dropdown {
-}
 .navbar .dropdown h4 {
   font-size: 16px;
   line-height: 21px;
@@ -284,7 +269,7 @@ html::-webkit-scrollbar-track {
 }
 .navbar .dropdown-menu {
   right: auto;
-  left: 50% !important;
+  left: 38% !important;
   transform: translateX(-50%) !important;
 }
 
@@ -304,6 +289,36 @@ html::-webkit-scrollbar-track {
   line-height: 21px;
   color: #4e4e4e;
 }
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: -250px;
+  width: 250px;
+  height: 100%;
+  background-color: white;
+  overflow-y: auto;
+  transition: left 0.2s ease-in-out;
+  z-index: 999;
+}
+
+.sidebar.show {
+  left: 0;
+}
+
+.sidebar .nav-item {
+  padding: 15px;
+}
+
+.end_nav {
+  bottom: 20px;
+  left: 20px;
+  width: 100%;
+}
+
+.navbar-toggler-icon {
+  background-color: #fff;
+}
 @media (min-width: 992px) {
   .navbar-expand-lg {
     flex-wrap: nowrap;
diff --git a/fav.html b/fav.html
index 297716a..5b3549d 100644
--- a/fav.html
+++ b/fav.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/forgetPass.html b/forgetPass.html
index 002e3c7..b820474 100644
--- a/forgetPass.html
+++ b/forgetPass.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/index.html b/index.html
index 434d467..b33a308 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@
         <span class="toggler-icon bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="index.html">Home</a>
diff --git a/login.html b/login.html
index 4865f8f..8066864 100644
--- a/login.html
+++ b/login.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/menu.html b/menu.html
index 39b29c2..1679a61 100644
--- a/menu.html
+++ b/menu.html
@@ -33,7 +33,7 @@
         <span class="toggler-icon bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
             <a class="nav-link " aria-current="page" href="index.html">Home</a>
diff --git a/newPassword.html b/newPassword.html
index d0f9684..5907083 100644
--- a/newPassword.html
+++ b/newPassword.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/orderSuccsses.html b/orderSuccsses.html
index 484399a..e421c28 100644
--- a/orderSuccsses.html
+++ b/orderSuccsses.html
@@ -33,7 +33,7 @@
         <span class="toggler-icon bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
             <a class="nav-link " aria-current="page" href="index.html">Home</a>
diff --git a/orders.html b/orders.html
index b8d70ec..0bcb012 100644
--- a/orders.html
+++ b/orders.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/paymentMethod.html b/paymentMethod.html
index fbe172c..300b1f7 100644
--- a/paymentMethod.html
+++ b/paymentMethod.html
@@ -33,7 +33,7 @@
         <span class="toggler-icon bottom-bar"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
             <a class="nav-link " aria-current="page" href="index.html">Home</a>
diff --git a/profile.html b/profile.html
index 53fed99..d500e5c 100644
--- a/profile.html
+++ b/profile.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/signUp.html b/signUp.html
index af06e0b..9c52b89 100644
--- a/signUp.html
+++ b/signUp.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/verify.html b/verify.html
index 39e96ba..1e6504a 100644
--- a/verify.html
+++ b/verify.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>
diff --git a/viewOrder.html b/viewOrder.html
index 198d06d..13f17a1 100644
--- a/viewOrder.html
+++ b/viewOrder.html
@@ -45,7 +45,7 @@
           <span class="toggler-icon bottom-bar"></span>
         </button>
 
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <div class="collapse navbar-collapse sidebar" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" aria-current="page" href="index.html">Home</a>