diff --git a/src/pages/cart/cart-item.js b/src/pages/cart/cart-item.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..1c6ab98b262506af73f107587936c7d6e58dd828 100644
--- a/src/pages/cart/cart-item.js
+++ b/src/pages/cart/cart-item.js
@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+import { ShopContext } from "../../context/shop-context";
+
+export const CartItem = (props) => {
+  const { id, productName, price, productImage } = props.data;
+  const { cartItems, addToCart, removeFromCart, updateCartItemCount } =
+    useContext(ShopContext);
+
+  return (
+    <div className="cartItem">
+      <img src={productImage} />
+      <div className="description">
+        <p>
+          <b>{productName}</b>
+        </p>
+        <p> Price: ${price}</p>
+        <div className="countHandler">
+          <button onClick={() => removeFromCart(id)}> - </button>
+          <input
+            value={cartItems[id]}
+            onChange={(e) => updateCartItemCount(Number(e.target.value), id)}
+          />
+          <button onClick={() => addToCart(id)}> + </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/cart/cart.css b/src/pages/cart/cart.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..c02d6e0f99082135076115bc1eb7c9d65cca9311 100644
--- a/src/pages/cart/cart.css
+++ b/src/pages/cart/cart.css
@@ -0,0 +1,44 @@
+.cart {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .cartItem {
+    width: 700px;
+    height: 250px;
+    display: flex;
+  
+    align-items: center;
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+    border-radius: 25px;
+    margin: 30px;
+  }
+  
+  .cartItem img {
+    width: 200px;
+  }
+  
+  .cartItem .description {
+    width: 100%;
+    font-size: 30px;
+  }
+  
+  .countHandler input {
+    width: 40px;
+    text-align: center;
+    font-weight: bolder;
+  }
+  
+  .checkout button {
+    width: 150px;
+    height: 50px;
+    background-color: rgb(19, 19, 19);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    margin: 10px;
+    cursor: pointer;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/cart/cart.js b/src/pages/cart/cart.js
index 5e8dbf45ed3f38029912e6de82d7fe404ba486b4..c33c2aa3fe306fbf70b4c9d55e68654d2f5b8c79 100644
--- a/src/pages/cart/cart.js
+++ b/src/pages/cart/cart.js
@@ -7,6 +7,8 @@ import { useNavigate } from "react-router-dom";
 import "./cart.css";
 export const Cart = () => {
   const { cartItems, getTotalCartAmount, checkout } = useContext(ShopContext);
+  const totalAmount = getTotalCartAmount();
+
   const navigate = useNavigate();
 
   return (
@@ -22,6 +24,23 @@ export const Cart = () => {
         })}
       </div>
 
+      {totalAmount > 0 ? (
+        <div className="checkout">
+          <p> Subtotal: ${totalAmount} </p>
+          <button onClick={() => navigate("/")}> Continue Shopping </button>
+          <button
+            onClick={() => {
+              checkout();
+              navigate("/checkout");
+            }}
+          >
+            {" "}
+            Checkout{" "}
+          </button>
+        </div>
+      ) : (
+        <h1> Your Shopping Cart is Empty</h1>
+      )}
     </div>
   );
 };