diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433..fb96816d6 100644
--- a/src/CartItem.jsx
+++ b/src/CartItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { removeItem, updateQuantity } from './CartSlice';
+import { addItem, removeItem, updateQuantity } from './CartSlice';
 import './CartItem.css';
 
 const CartItem = ({ onContinueShopping }) => {
@@ -9,27 +9,39 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
- 
+    let totalAmount=0;
+    cart.map((plant)=>{
+      totalAmount+=parseInt(plant.cost.slice(1))*plant.quantity;
+    })                                             
+    return totalAmount;
   };
 
   const handleContinueShopping = (e) => {
-   
+    onContinueShopping(e);
   };
 
-
-
+  const handleCheckoutShopping = (e) => {
+    alert('Functionality to be added for future reference');
+  };
   const handleIncrement = (item) => {
+    dispatch(addItem(item));
   };
 
   const handleDecrement = (item) => {
-   
+    if(item.quantity===1){
+      dispatch(removeItem(item.name));
+    } else{
+      dispatch(updateQuantity({name:item.name,quantity:item.quantity-1}));
+    }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    return item.quantity*parseInt(item.cost.slice(1));
   };
 
   return (
@@ -57,12 +69,10 @@ const CartItem = ({ onContinueShopping }) => {
       <div className="continue_shopping_btn">
         <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1"onClick={(e) => handleCheckoutShopping(e)} >Checkout</button>
       </div>
     </div>
   );
 };
 
-export default CartItem;
-
-
+export default CartItem;
\ No newline at end of file
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed..2f4d94c7c 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -7,11 +7,26 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-    
-    },
+        const { name, image, cost } = action.payload;
+        const existingItem = state.items.find(item => item.name === name);
+        if (existingItem) {
+          existingItem.quantity++;
+        } else {
+          state.items.push({ name, image, cost, quantity: 1 });
+        }
+      },
     removeItem: (state, action) => {
+        state.items = state.items.filter(item => item.name !== action.payload);
     },
     updateQuantity: (state, action) => {
+        const {name,quantity}=action.payload;
+        const existing=state.items.find((plant)=>plant.name===name);
+        if(existing){
+          let updateCost=quantity-existing.quantity;
+          existing.quantity=quantity;
+          state.totalQuantity+=updateCost;
+        
+}
 
     
     },
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 964b15d49..9d0110f3f 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,10 +1,16 @@
 import React, { useState,useEffect } from 'react';
-import './ProductList.css'
+import './ProductList.css';
+import { useDispatch,useSelector } from 'react-redux';
 import CartItem from './CartItem';
+import {addItem} from './CartSlice';
 function ProductList() {
     const [showCart, setShowCart] = useState(false); 
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
-
+    const [addedtoCart,setAddedtoCart]=useState({});
+    const dispatch=useDispatch();
+    const totalQuantity=useSelector((state)=>state.cart.totalQuantity);
+    const items=useSelector((state)=>state.cart.items);
+    
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -246,6 +252,12 @@ const handlePlantsClick = (e) => {
     e.preventDefault();
     setShowCart(false);
   };
+  const handleAddtoCart=(product)=>{
+    dispatch(addItem(product));
+    setAddedtoCart((prevState)=>({
+        ...prevState,[product.name]:true,
+    }));
+}
     return (
         <div>
              <div className="navbar" style={styleObj}>
@@ -263,19 +275,42 @@ const handlePlantsClick = (e) => {
             </div>
             <div style={styleObjUl}>
                 <div> <a href="#" onClick={(e)=>handlePlantsClick(e)} style={styleA}>Plants</a></div>
-                <div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg></h1></a></div>
+                <div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><text x="115" y="147" fill="white">{totalQuantity}</text><rect width="156" height="156" fill='none' ></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg></h1></a></div>
             </div>
         </div>
         {!showCart? (
         <div className="product-grid">
+            {
+                plantsArray.map((item,index)=>(
+                    <div key={index}>
+                        <h1><div>{item.category}</div></h1>
+                        <div className='product-list'>
+                            {item.plants.map((plant,pindex)=>(
+                                <div className='product-card' key={pindex}>
+                                    <img className='product-image' src={plant.image}/>
+                                    <div className='product-title'>{plant.name}</div>
+                                    <div className='product-price'>{plant.cost}</div>
+                                    <div>{plant.description}</div>
+                                    { !items.find((sample)=>sample.name===plant.name)?(
+                                    <button className="product-button" onClick={()=>handleAddtoCart(plant)}>Add to Cart</button>
+                                     ):(<h3 className='product-button added-to-cart'>Added to Cart</h3>)    
+                                }   
+                                    </div>
+                            ))    
+                            }
+                        </div>
+                        </div>
+
+                ))
+            }
 
 
         </div>
  ) :  (
-    <CartItem onContinueShopping={handleContinueShopping}/>
+    <CartItem onContinueShopping ={handleContinueShopping}/>
 )}
     </div>
     );
 }
 
-export default ProductList;
+export default ProductList;
\ No newline at end of file