diff --git a/.dependencygraph/data.json b/.dependencygraph/data.json
new file mode 100644
index 000000000..8b705deca
--- /dev/null
+++ b/.dependencygraph/data.json
@@ -0,0 +1 @@
+{"dependencyTree":{"children":[]},"dependencyNodes":{}}
\ No newline at end of file
diff --git a/.dependencygraph/setting.json b/.dependencygraph/setting.json
new file mode 100644
index 000000000..d439092c8
--- /dev/null
+++ b/.dependencygraph/setting.json
@@ -0,0 +1,15 @@
+{
+  "entryFilePath": "src\\extension.ts",
+  "alias": {
+    "@": "./src"
+  },
+  "resolveExtensions": [
+    ".js",
+    ".jsx",
+    ".ts",
+    ".tsx",
+    ".vue",
+    ".scss",
+    ".less"
+  ]
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index af7843d84..984e118a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1212,13 +1212,13 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/react": {
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.0.tgz",
       "integrity": "sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1678,7 +1678,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433..c740f688e 100644
--- a/src/CartItem.jsx
+++ b/src/CartItem.jsx
@@ -9,16 +9,31 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
- 
-  };
+    let total = 0;
+
+    if (!cart || cart.length === 0) return total;
+
+    cart.forEach(item => {
+        // Extract cost (remove $ and convert to number)
+        const cost = parseFloat(item.cost.substring(1));
+        // Get quantity
+        const quantity = item.quantity || 0;
+        // Add to running total
+        total += cost * quantity;
+    });
+
+    // Return formatted total with 2 decimal places
+    return total.toFixed(2);
+};
 
   const handleContinueShopping = (e) => {
    
   };
 
 
-
   const handleIncrement = (item) => {
+    const updatedItem = { ...item, quantity: item.quantity + 1 };
+    dispatch(updateQuantity(updatedItem));
   };
 
   const handleDecrement = (item) => {
@@ -30,7 +45,10 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
-  };
+    if (!item) return "0.00";
+    const cost = parseFloat(item.cost.substring(1));
+    return (cost * item.quantity).toFixed(2);
+};
 
   return (
     <div className="cart-container">
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed..07eed8d55 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -7,17 +7,30 @@ 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) => {
 
-    
-    },
-  },
+    updateQuantity: (state, action) => {
+      const { name, quantity } = action.payload;
+      const itemToUpdate = state.items.find(item => item.name === name);
+      if (itemToUpdate) {
+        itemToUpdate.quantity = quantity;
+      }
+    }
+  }
 });
 
 export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
 
 export default CartSlice.reducer;
+ 
\ No newline at end of file
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 7682c04fc..7ff6bc4fb 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,9 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { useDispatch } from 'react-redux';
+import CartSlice, { addItem, removeItem, updateQuantity } from './CartSlice'; // Import the reducer
+
+
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const [addedToCart, setAddedToCart] = useState({}); // State to store the items added to the cart
+    const [cartItems, setCartItems] = useState([]); // State to store the items in the cart
+    const dispatch = useDispatch();
+    
+    
 
     const plantsArray = [
         {
@@ -252,6 +261,16 @@ function ProductList({ onHomeClick }) {
         e.preventDefault();
         setShowCart(false);
     };
+
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product));
+        setAddedToCart((prevState) => ({
+           ...prevState,
+           [product.name]: true, // Set the product name as key and value as true to indicate it's added to cart
+         }));
+      };
+    
+
     return (
         <div>
             <div className="navbar" style={styleObj}>
@@ -274,8 +293,24 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
-
-
+                    <div className="product-grid">
+                        {plantsArray.map((category, index) => (
+                            <div key={index}>
+                                <h1>{category.category}</h1>
+                                <div className="product-list">
+                                    {category.plants.map((plant, plantIndex) => (
+                                        <div className="product-card" key={plantIndex}>
+                                            <div className="product-title">{plant.name}</div>
+                                            <img className="product-image" src={plant.image} alt={plant.name}/>
+                                            <h5>{plant.description}</h5>
+                                            <h3>{plant.cost}</h3>
+                                            <button className="product-button" onClick={() => handleAddToCart(plant)}>Add to Cart</button>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
                 </div>
             ) : (
                 <CartItem onContinueShopping={handleContinueShopping} />