diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433f..f3267192b3 100644
--- a/src/CartItem.jsx
+++ b/src/CartItem.jsx
@@ -9,27 +9,45 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
- 
+    let total = 0;
+    cart.forEach(item => {
+      const quantity = item.quantity;
+      const cost = parseFloat(item.cost.substring(1)); // Remove "$" and convert to number
+      total += quantity * cost;
+    });
+    return total.toFixed(2);
   };
 
   const handleContinueShopping = (e) => {
-   
+    if (onContinueShopping) {
+      onContinueShopping(e);
+    }
   };
 
-
+  const handleCheckoutShopping = (e) => {
+    alert('Functionality to be added for future reference');
+  };
 
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({ name: item.name, quantity: item.quantity + 1 }));
   };
 
   const handleDecrement = (item) => {
-   
+    if (item.quantity > 1) {
+      dispatch(updateQuantity({ name: item.name, quantity: item.quantity - 1 }));
+    } else {
+      dispatch(removeItem(item.name));
+    }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const cost = parseFloat(item.cost.substring(1));
+    return (cost * item.quantity).toFixed(2);
   };
 
   return (
@@ -55,14 +73,12 @@ const CartItem = ({ onContinueShopping }) => {
       </div>
       <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></div>
       <div className="continue_shopping_btn">
-        <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
+        <button className="get-started-button" onClick={handleContinueShopping}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1" onClick={handleCheckoutShopping}>Checkout</button>
       </div>
     </div>
   );
 };
 
 export default CartItem;
-
-
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed0..04a3e3b0dd 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -6,14 +6,29 @@ export const CartSlice = createSlice({
     items: [], // Initialize items as an empty array
   },
   reducers: {
-    addItem: (state, action) => {
-    
-    },
+   addItem: (state, action) => {
+  const { name, image, cost } = action.payload; // Destructure product details from the action payload
+  // Check if the item already exists in the cart by comparing names
+  const existingItem = state.items.find(item => item.name === name);
+  if (existingItem) {
+    // If item already exists in the cart, increase its quantity
+    existingItem.quantity++;
+  } else {
+    // If item does not exist, add it to the cart with quantity 1
+    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; // Destructure the product name and new quantity from the action payload
+// Find the item in the cart that matches the given name
+const itemToUpdate = state.items.find(item => item.name === name);
+if (itemToUpdate) {
+  itemToUpdate.quantity = quantity; // If the item is found, update its quantity to the new value
+}
     },
   },
 });
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 7682c04fc4..f14481885b 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,10 +1,27 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { useDispatch, useSelector } from 'react-redux';
+import { addItem } from './CartSlice';
+
 function ProductList({ onHomeClick }) {
+    const [addedToCart, setAddedToCart] = useState({});
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
-
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action)
+      
+        setAddedToCart((prevState) => ({ // Update the local state to reflect that the product has been added
+          ...prevState, // Spread the previous state to retain existing entries
+          [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added
+        }));
+      };
+      const calculateTotalQuantity = () => {
+        return CartItems ? CartItems.reduce((total, item) => total + item.quantity, 0) : 0;
+         };
+    const dispatch = useDispatch();
+    
+    const cartItems = useSelector(state => state.cart.items);
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -274,12 +291,41 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
-
+{plantsArray.map((category, index) => ( // Loop through each category in plantsArray
+  <div key={index}> {/* Unique key for each category div */}
+    <h1>
+      <div>{category.category}</div> {/* Display the category name */}
+    </h1>
+    <div className="product-list"> {/* Container for the list of plant cards */}
+      {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
+        <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
+          <img 
+            className="product-image" 
+            src={plant.image} // Display the plant image
+            alt={plant.name} // Alt text for accessibility
+          />
+          <div className="product-title">{plant.name}</div> {/* Display plant name */}
+          {/* Display other plant details like description and cost */}
+          <div className="product-description">{plant.description}</div> {/* Display plant description */}
+          <div className="product-cost">${plant.cost}</div> {/* Display plant cost */}
+          <button
+            className="product-button"
+            onClick={() => handleAddToCart(plant)} // Handle adding plant to cart
+          >
+            Add to Cart
+          </button>
+        </div>
+      ))}
+    </div>
+  </div>
+))}
 
                 </div>
             ) : (
                 <CartItem onContinueShopping={handleContinueShopping} />
             )}
+
+            
         </div>
     );
 }
diff --git a/src/store.js b/src/store.js
index 54d0d6d66e..03d7aa5441 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,8 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import cartReducer from './CartSlice';
- const store = configureStore({
+// Create a Redux store using configureStore from Redux Toolkit
+const store = configureStore({
+    // Define the root reducer object
     reducer: {
+        // 'cart' is the name of the slice in the store, and it's managed by cartReducer
         cart: cartReducer,
     },
 });
-export default store
+
+export default store; // Export the store for use in the app (e.g., in <Provider store={store}>)