diff --git a/README.md b/README.md
index 5ca0c37..9049ec6 100644
--- a/README.md
+++ b/README.md
@@ -19,11 +19,25 @@ Step and Stride is a premier online shoe store built using React, offering a wid
 
 - **Frontend**: Built with React, ensuring a smooth and dynamic user experience.
 - **Styling**: CSS-in-JS for easy and maintainable styling solutions.
-- **Payment Processing**: Integrated secure payment processing for a seamless checkout experience.
-- **Order Tracking**: Real-time order tracking functionality to keep customers informed.
-
-## Contact Us
-
-If you have any questions or need assistance, feel free to reach out to our customer support team at support@stepandstride.com.
-
-Happy Shoe Shopping at Step and Stride!
\ No newline at end of file
+    ## In Progress
+    - **Payment Processing**: Integrated secure payment processing for a seamless checkout experience.
+    - **Order Tracking**: Real-time order tracking functionality to keep customers informed.
+## Getting started
+ - Clone this repository to your local machine.
+ - Run `npm install` to install the necessary dependencies.
+ - Start the development server with `npm start`.
+ - Run json server with `npm run start-server`
+
+## API Endpoints
+ - `POST /users` :Create a new user
+ - `GET /users/:id` :Retrieve a specific user
+ - `GET /sneakers/:id` :Retrieve a specific item
+ - `POST /orders` :Create a new order
+ - `GET /orders/:id` :Retrieve a specific order
+
+## Contributing
+ We welcome contributions from the community to enhance the Step and Stride Shoe Store. If you'd like to contribute, please fork this repository, make your changes, and submit a pull request.
+## License
+ This project is licensed under the MIT License - see the [LICENSE]('./LICENSE') file for details.
+
+    Happy Stepping!
\ No newline at end of file
diff --git a/db.json b/db.json
index 65c41ec..a4d57c3 100644
--- a/db.json
+++ b/db.json
@@ -11,42 +11,6 @@
       "email": "leon@gmail.com",
       "password": "1234",
       "id": 2
-    },
-    {
-      "name": "leon",
-      "email": "leon@gmail.com",
-      "password": "1234",
-      "id": 3
-    },
-    {
-      "email": "leon@gmail.com",
-      "password": "1234",
-      "id": 4
-    },
-    {
-      "name": "joel",
-      "email": "joelmaina@gmail.com",
-      "password": "maina560",
-      "id": 5
-    },
-    {
-      "name": "joel",
-      "email": "joelmaina@gmail.com",
-      "password": "maina560",
-      "id": 6
-    },
-    {
-      "name": "joel",
-      "email": "joelmaina@gmail.com",
-      "password": "maina560",
-      "id": 7
-    },
-    {
-      "name": "joel",
-      "email": "joelmaina@gmail.com",
-      "password": "maina560",
-      "id": 8
-
     }
   ],
   "sneakers": [
diff --git a/src/App.js b/src/App.js
index 361df55..33756ac 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,9 +12,10 @@ import Contact from './components/Contact';
 import ShoppingCart from './components/cart';
 import Checkout from './components/Checkout'; 
 import { useCart } from './components/CartContext';
+import OrderTrack from './components/OrderTrack';
 
 function App() {
-  const { cart, addToCart, removeFromCart } = useCart();
+  const { cart,setCart, addToCart, removeFromCart } = useCart();
   useEffect(() => {
     document.title = 'Step & Stride'; 
   }, []);
@@ -27,8 +28,9 @@ function App() {
         <Route path="/login" element={<LoginSignup />} />
         <Route path="/products/:id" element={<ProductDetail />} />
         <Route path="/contact" element={<Contact />} />
-        <Route path="/cart" element={<ShoppingCart cart={cart} addToCart={addToCart} removeFromCart={removeFromCart}/>} />
+        <Route path="/cart" element={<ShoppingCart setCart={setCart} cart={cart} addToCart={addToCart} removeFromCart={removeFromCart}/>} />
         <Route path="/checkout" element={<Checkout />} /> 
+        <Route path="/orders" element={<OrderTrack />} />
       </Routes>
       <Footer />
     </div>
diff --git a/src/components/CartContext.js b/src/components/CartContext.js
index d9df201..6f9b0d3 100644
--- a/src/components/CartContext.js
+++ b/src/components/CartContext.js
@@ -19,7 +19,7 @@ const removeFromCart = (itemId) => {
     setCart((prevCart) => prevCart.filter(item => item.id !== itemId));
 };
   return (
-    <CartContext.Provider value={{ cart, addToCart ,removeFromCart}}>
+    <CartContext.Provider value={{ cart,setCart, addToCart ,removeFromCart}}>
       {children}
     </CartContext.Provider>
   );
diff --git a/src/components/CartItem.js b/src/components/CartItem.js
index 8937669..ed6739d 100644
--- a/src/components/CartItem.js
+++ b/src/components/CartItem.js
@@ -1,28 +1,27 @@
-
-import React from 'react';
-export default function CartItem ({item, handleDelete}){
-    return(
-     <div id="cartContainer">
-        <div id="cart1">
-             <div id="cartimage">
-                <img src={item.imageURL}alt={item.name}/>
-                <div id="cartname">
-                    <h3>{item.name}</h3>
-                    <p>
-                        {item.gender}
-                    </p>
-                </div>
-             </div>
-             <p><b>${item.price}</b></p>
-        </div>
-        <div id="cart2">
-            <div></div>
-            <button onClick={() => handleDelete(item.id)}id="btnCart">🗑️Remove</button>
-            
-            </div>
-            
-            </div>
-    )
-
-
-}
\ No newline at end of file
+
+import React from 'react';
+
+export default function CartItem({ item, handleDelete, handleIncrease, handleDecrease }) {
+  return (
+    <div id="cartContainer">
+      <div id="cart1">
+        <div id="cartimage">
+          <img src={item.imageURL} alt={item.name} />
+          <div id="cartname">
+            <h3>{item.name}</h3>
+            <p>{item.gender}</p>
+          </div>
+        </div>
+        <p><b>${item.price}</b></p>
+      </div>
+      <div id="cart2">
+        <div>
+          <button onClick={() => handleDecrease(item.id)} id="btnCart">-</button>
+          <span>{item.quantity}</span>
+          <button onClick={() => handleIncrease(item.id)} id="btnCart">+</button>
+        </div>
+        <button onClick={() => handleDelete(item.id)} id="btnCart">🗑️Remove</button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Checkout.js b/src/components/Checkout.js
index a13d1cd..1c595a0 100644
--- a/src/components/Checkout.js
+++ b/src/components/Checkout.js
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import { useNavigate} from "react-router-dom"
+import CartItem from './CartItem';
 
 const CheckoutContainer = styled.div`
   padding: 40px;
@@ -46,7 +48,7 @@ const SubmitButton = styled.button`
   }
 `;
 
-function Checkout() {
+function Checkout({emptyCart}) {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [address, setAddress] = useState("");
@@ -75,8 +77,16 @@ function Checkout() {
       console.error("An error occurred", error);
     }
   };
-
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+      navigate(-1);
+    };
+   const handleClick=()=>{
+     emptyCart();
+   } 
   return (
+    <>
+     <p id="back" onClick={handleGoBack} style={{fontSize:"30px",position:"absolute", marginLeft:"40px",marginTop:"40px",color:"black"}}>←<span style={{fontSize:"30px"}}>Back</span></p>
     <CheckoutContainer>
       
       <CheckoutForm onSubmit={handleSubmit}>
@@ -150,9 +160,10 @@ function Checkout() {
           </FormField>
         )}
         
-        <SubmitButton type="submit">Place Order</SubmitButton>
+        <SubmitButton type="submit" onClick={handleClick}>Place Order</SubmitButton>
       </CheckoutForm>
     </CheckoutContainer>
+    </>
   );
 }
 
diff --git a/src/components/Contact.js b/src/components/Contact.js
index 53e57d9..78a7b23 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import styled from "styled-components";
+import {useNavigate} from "react-router-dom";
 
 const ContactContainer = styled.div`
   padding: 40px; 
@@ -98,7 +99,10 @@ function Contact() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
-
+  const navigate = useNavigate();
+  const handleGoBack = () => {
+      navigate(-1);
+    };
   const handleSubmit = (event) => {
     event.preventDefault();
     
@@ -112,6 +116,8 @@ function Contact() {
   };
 
   return (
+    <>
+    <p id="back" onClick={handleGoBack} style={{fontSize:"30px",position:"absolute", marginLeft:"40px",marginTop:"3px",color:"black"}}>←<span style={{fontSize:"30px"}}>Back</span></p>
     <ContactContainer>
       
       <ContactForm onSubmit={handleSubmit}>
@@ -169,6 +175,7 @@ function Contact() {
         </ContactMethod>
       </ContactMethods>
     </ContactContainer>
+    </>
   );
 }
 
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 8867227..a614b8c 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -10,7 +10,7 @@ const Nav = styled.nav`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30px 30px;
+  padding: 20px 30px;
   border-radius: 4px;
 `;
 
@@ -53,7 +53,7 @@ function Navbar({ cartLength }) {
   return (
     <Nav>
       <Logo>
-        <span>Step & Stride</span>
+        <NavLink to="/">Step & Stride</NavLink>
       </Logo>
       <LinksContainer>
         <List>
@@ -61,17 +61,24 @@ function Navbar({ cartLength }) {
             <NavLink to="/">Home</NavLink>
           </ListItem>
           <ListItem>
-            <NavLink to="/contact">Contact</NavLink>
+          <NavLink to="/orders" >Orders</NavLink>
           </ListItem>
           <ListItem>
-            <NavLink to="/login">Login</NavLink>
+            <NavLink to="/contact">Contact</NavLink>
           </ListItem>
+          
+          
         </List>
+
       </LinksContainer>
+      
+       <NavLink style={{padding:"20px"}} to="/login">Login</NavLink>
+         
       <NavLink to="/cart" className="length">
         <CartIcon id="ca" icon={faShoppingCart} size="lg" />
         <p id="count">{cartLength}</p>
       </NavLink>
+      
     </Nav>
   );
 }
diff --git a/src/components/OrderTrack.js b/src/components/OrderTrack.js
index 0e0d4a6..83b32b8 100644
--- a/src/components/OrderTrack.js
+++ b/src/components/OrderTrack.js
@@ -1,9 +1,12 @@
 import React, { useState } from "react";
-
+import {useNavigate} from "react-router-dom";
 export default function OrderTrack() {
     const [orderId, setOrderId] = useState("");
     const [order, setOrder] = useState({});
-
+    const navigate = useNavigate();
+    const handleGoBack = () => {
+      navigate(-1);
+    };
     function searchOrder() {
         fetch(`http://localhost:3030/orders/${orderId}`)
             .then(resp => resp.json())
@@ -13,7 +16,10 @@ export default function OrderTrack() {
     const status = ["Follow your Order", "We've got it", "On its way", "With your courier", "Delivered"];
 
     return (
+        <>
+              <p id="back" onClick={handleGoBack} style={{fontSize:"30px",position:"absolute", marginLeft:"40px",marginTop:"40px",color:"black"}}>←<span style={{fontSize:"30px"}}>Back</span></p>
         <div id="track">
+            
             <h4>Search Order</h4>
             <input className="filter"
                 type="text"
@@ -43,5 +49,7 @@ export default function OrderTrack() {
                 
             </div>
         </div>
+        
+        </>
     );
 }
diff --git a/src/components/cart.css b/src/components/cart.css
index 289fb97..dd6336f 100644
--- a/src/components/cart.css
+++ b/src/components/cart.css
@@ -46,7 +46,6 @@ align-items: center;
     border-radius: 4px;
   }
 .shopping-cart{
-
     width: 70%;
     padding-left:30px;
     margin-left: 10%;
@@ -70,29 +69,24 @@ align-items: center;
 
 }
 
-
 #cartimage{
     display: flex;
     justify-content: flex-end;
 }
-
 #cartimage img{
     width: 100px;
 
 }
-
 #cart img{
     display: flex;
     flex-direction: column;
 }
-
 #list{
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
-
 #cartItem{
     /* border: 1px solid black; */
     display: flex;
@@ -116,4 +110,3 @@ align-items: center;
     border-radius: 4px;
     padding: 5px;
 }
-
diff --git a/src/components/cart.js b/src/components/cart.js
index 1f9acc1..dccfc8b 100644
--- a/src/components/cart.js
+++ b/src/components/cart.js
@@ -2,76 +2,36 @@ import React, { useState } from 'react';
 import { useNavigate, NavLink } from "react-router-dom"
 import './cart.css';
 import CartItem from './CartItem';
-
-function ShoppingCart({ cart, removeFromCart }) {
+function ShoppingCart({ cart, removeFromCart,setCart }) {
       const calculateTotalPrice = () => {
         return cart.reduce((total, item) => total + item.price, 0);
     };
 
-
   const [totalPrice, setTotalPrice] = useState(0);
   const navigate = useNavigate();
   const handleGoBack = () => {
       navigate(-1);
     };
-  // const addToCart = (item) => {
-  //   const updatedCart = [...cartItems, item];
-  //   setCartItems(updatedCart);
-  //   calculateTotalPrice(updatedCart);
-  // }
-  // removeFromCart(state, action) 
-  //   state.cartItems.map((cartItem) => {
-  //     if (cartItem.id === action.payload.id) {
-  //       const nextCartItems = state.cartItems.filter(
-  //         (item) => item.id !== cartItem.id
-  //       );
-
-  //       state.cartItems = nextCartItems;
-
-  //       toast.error("Product removed from cart", {
-  //         position: "bottom-left",
-  //       });
-  //     }
-  //     localStorage.setItem("cartItems", JSON.stringify(state.cartItems));
-  //     return state;
-  //   })
-  // }
-  // getTotals(state, action){
-  //   let { total, quantity } = state.cartItems.reduce(
-  //     (cartTotal, cartItem) => {
-  //       const { price, cartQuantity } = cartItem;
-  //       const itemTotal = price * cartQuantity;
-
-  //       cartTotal.total += itemTotal;
-  //       cartTotal.quantity += cartQuantity;
-
-  //       return cartTotal;
-  //     },
-  //     {
-  //       total: 0,
-  //       quantity: 0,
-  //     }
-  //   );
-  //   total = parseFloat(total.toFixed(2));
-  //   state.cartTotalQuantity = quantity;
-  //   state.cartTotalAmount = total;
-
-  // // function clearCart(state, action) {
-  // //   state.cartItems = [];
-  // //   localStorage.setItem("cartItems", JSON.stringify(state.cartItems));
-  // //   toast.error("Cart cleared", { position: "bottom-left" });
- 
-  // // };
+    const handleIncrease = (itemId) => {
+      const updatedCart = cart.map((item) => {
+        if (item.id === itemId && item.quantity > 1) {
+          return { ...item, quantity: item.quantity + 1 };
+        }
+        return item;
+      });
+      setCart(updatedCart);
+    };
 
-  // const clearCart = () => {
-  //   setCartItems([]);
-  //   calculateTotalPrice([]);
-  // };
+    const handleDecrease = (itemId) => {
+      const updatedCart = cart.map((item) => {
+        if (item.id === itemId && item.quantity > 1) {
+          return { ...item, quantity: item.quantity - 1 };
+        }
+        return item;
+      });
+      setCart(updatedCart);
 
-  // const calculateTotalPrice = (cart) => {
-  //   const total = cart.reduce((acc, item) => acc + item.price, 0);
-  //   setTotalPrice(total);
-  // };
+    };
 
   return (
 
@@ -88,6 +48,7 @@ function ShoppingCart({ cart, removeFromCart }) {
       
       <div className="container">
       <div className="head">
+     
             <p>My Cart</p>
             
           </div>
@@ -103,33 +64,30 @@ function ShoppingCart({ cart, removeFromCart }) {
         
           <div id="cartItem">
             {cart.length === 0 ? (
-              <p>Your cart is empty</p>
+              <p>Your cart is empty</p> 
+              
+
             ) : (
 
               <>
-
-             
-
-                {cart.map((item, index) => (
-                <CartItem key={index} item={item} handleDelete={removeFromCart}/>
+                  {cart.map((item, index) => (
+                  <CartItem
+                    key={index}
+                    item={item}
+                    handleDelete={removeFromCart}
+                    handleIncrease={handleIncrease}
+                    handleDecrease={handleDecrease} 
+                  />
                 ))}
               </>
             )}
           </div>
-          
-         
         </div>
       </div>
-      {/* <OrderTrack /> */}
-      <div>
-     
-</div>
-
-     
-</div>
-
-  
+    </div>
   );
-                }
+}
 
-export default ShoppingCart;
\ No newline at end of file
+export default ShoppingCart;
+
+