diff --git a/package.json b/package.json
index b7d4c1d1d..c0ff21dd0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite build; vite preview --host"
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433..4e56d5f79 100644
--- a/src/CartItem.jsx
+++ b/src/CartItem.jsx
@@ -1,68 +1,116 @@
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { removeItem, updateQuantity } from './CartSlice';
-import './CartItem.css';
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { removeItem, updateQuantity } from "./CartSlice";
+import "./CartItem.css";
 
 const CartItem = ({ onContinueShopping }) => {
-  const cart = useSelector(state => state.cart.items);
+  const cart = useSelector((state) => state.cart.items);
+  console.log("Cart:", cart);
   const dispatch = useDispatch();
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
- 
+    if (!cart || cart.length === 0) return 0;
+
+    return cart.reduce((total, item) => {
+      const itemCost = parseFloat(item.cost.replace("$", "")) || 0;
+      const itemQuantity = item.quantity || 0;
+      return total + itemCost * itemQuantity;
+    }, 0);
   };
 
   const handleContinueShopping = (e) => {
-   
+    onContinueShopping();
   };
 
-
-
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({ ...item, quantity: item.quantity + 1 }));
   };
 
   const handleDecrement = (item) => {
-   
+    if (item.quantity > 1) {
+      dispatch(updateQuantity({ ...item, quantity: item.quantity - 1 }));
+    }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const itemCost = parseFloat(item.cost.replace("$", "")) || 0;
+    const itemQuantity = item.quantity || 0;
+    return itemCost * itemQuantity;
+  };
+
+  const handleCheckoutShopping = (e) => {
+    alert("Functionality to be added for future reference");
   };
 
   return (
     <div className="cart-container">
-      <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
+      <h2 style={{ color: "black" }}>
+        Total Cart Amount: ${calculateTotalAmount()}
+      </h2>
       <div>
-        {cart.map(item => (
+        {cart.map((item) => (
           <div className="cart-item" key={item.name}>
             <img className="cart-item-image" src={item.image} alt={item.name} />
             <div className="cart-item-details">
               <div className="cart-item-name">{item.name}</div>
               <div className="cart-item-cost">{item.cost}</div>
               <div className="cart-item-quantity">
-                <button className="cart-item-button cart-item-button-dec" onClick={() => handleDecrement(item)}>-</button>
-                <span className="cart-item-quantity-value">{item.quantity}</span>
-                <button className="cart-item-button cart-item-button-inc" onClick={() => handleIncrement(item)}>+</button>
+                <button
+                  className="cart-item-button cart-item-button-dec"
+                  onClick={() => handleDecrement(item)}
+                >
+                  -
+                </button>
+                <span className="cart-item-quantity-value">
+                  {item.quantity}
+                </span>
+                <button
+                  className="cart-item-button cart-item-button-inc"
+                  onClick={() => handleIncrement(item)}
+                >
+                  +
+                </button>
+              </div>
+              <div className="cart-item-total">
+                Total: ${calculateTotalCost(item)}
               </div>
-              <div className="cart-item-total">Total: ${calculateTotalCost(item)}</div>
-              <button className="cart-item-delete" onClick={() => handleRemove(item)}>Delete</button>
+              <button
+                className="cart-item-delete"
+                onClick={() => handleRemove(item)}
+              >
+                Delete
+              </button>
             </div>
           </div>
         ))}
       </div>
-      <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></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={(e) => handleContinueShopping(e)}
+        >
+          Continue Shopping
+        </button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button
+          onClick={() => handleCheckoutShopping()}
+          className="get-started-button1"
+        >
+          Checkout
+        </button>
       </div>
     </div>
   );
 };
 
 export default CartItem;
-
-
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed..895fb6f5e 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -1,19 +1,29 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
 
 export const CartSlice = createSlice({
-  name: 'cart',
+  name: "cart",
   initialState: {
     items: [], // Initialize items as an empty array
   },
   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 itemToUpdate = state.items.find((item) => item.name === name);
+      if (itemToUpdate) {
+        itemToUpdate.quantity = quantity;
+      }
     },
   },
 });
diff --git a/src/ProductList.css b/src/ProductList.css
index 52f9c7a84..3e5b84fd5 100644
--- a/src/ProductList.css
+++ b/src/ProductList.css
@@ -210,6 +210,15 @@ body {
     transition-duration: 0.4s;
     cursor: pointer;
   }
+
+  .product-button:disabled {
+    background-color: #cccccc; /* Grey background */
+    color: #666666; /* Darker grey text */
+    cursor: not-allowed; /* Show "not allowed" cursor */
+  }
+  .product-button:disabled:hover {
+    background-color: #cccccc; /* Cancel hover effect */
+  }
   
   .product-button:hover {
     background-color: #45a049;
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 964b15d49..a71645df6 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,281 +1,413 @@
-import React, { useState,useEffect } from 'react';
-import './ProductList.css'
-import CartItem from './CartItem';
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import "./ProductList.css";
+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 [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 plantsArray = [
+  const cartItems = useSelector((state) => state.cart.items);
+
+  // Calculate the total number of items in the cart
+  const totalCartItems = cartItems.reduce(
+    (total, item) => total + item.quantity,
+    0
+  );
+
+  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
+    }));
+  };
+
+  const plantsArray = [
+    {
+      category: "Air Purifying Plants",
+      plants: [
+        {
+          name: "Snake Plant",
+          image:
+            "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg",
+          description: "Produces oxygen at night, improving air quality.",
+          cost: "$15",
+        },
+        {
+          name: "Spider Plant",
+          image:
+            "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg",
+          description: "Filters formaldehyde and xylene from the air.",
+          cost: "$12",
+        },
+        {
+          name: "Peace Lily",
+          image:
+            "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg",
+          description: "Removes mold spores and purifies the air.",
+          cost: "$18",
+        },
+        {
+          name: "Boston Fern",
+          image:
+            "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg",
+          description: "Adds humidity to the air and removes toxins.",
+          cost: "$20",
+        },
+        {
+          name: "Rubber Plant",
+          image:
+            "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg",
+          description: "Easy to care for and effective at removing toxins.",
+          cost: "$17",
+        },
+        {
+          name: "Aloe Vera",
+          image:
+            "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg",
+          description: "Purifies the air and has healing properties for skin.",
+          cost: "$14",
+        },
+      ],
+    },
+    {
+      category: "Aromatic Fragrant Plants",
+      plants: [
+        {
+          name: "Lavender",
+          image:
+            "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+          description: "Calming scent, used in aromatherapy.",
+          cost: "$20",
+        },
         {
-            category: "Air Purifying Plants",
-            plants: [
-                {
-                    name: "Snake Plant",
-                    image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg",
-                    description: "Produces oxygen at night, improving air quality.",
-                    cost: "$15"
-                },
-                {
-                    name: "Spider Plant",
-                    image: "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg",
-                    description: "Filters formaldehyde and xylene from the air.",
-                    cost: "$12"
-                },
-                {
-                    name: "Peace Lily",
-                    image: "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg",
-                    description: "Removes mold spores and purifies the air.",
-                    cost: "$18"
-                },
-                {
-                    name: "Boston Fern",
-                    image: "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg",
-                    description: "Adds humidity to the air and removes toxins.",
-                    cost: "$20"
-                },
-                {
-                    name: "Rubber Plant",
-                    image: "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg",
-                    description: "Easy to care for and effective at removing toxins.",
-                    cost: "$17"
-                },
-                {
-                    name: "Aloe Vera",
-                    image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg",
-                    description: "Purifies the air and has healing properties for skin.",
-                    cost: "$14"
-                }
-            ]
+          name: "Jasmine",
+          image:
+            "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+          description: "Sweet fragrance, promotes relaxation.",
+          cost: "$18",
         },
         {
-            category: "Aromatic Fragrant Plants",
-            plants: [
-                {
-                    name: "Lavender",
-                    image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-                    description: "Calming scent, used in aromatherapy.",
-                    cost: "$20"
-                },
-                {
-                    name: "Jasmine",
-                    image: "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-                    description: "Sweet fragrance, promotes relaxation.",
-                    cost: "$18"
-                },
-                {
-                    name: "Rosemary",
-                    image: "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg",
-                    description: "Invigorating scent, often used in cooking.",
-                    cost: "$15"
-                },
-                {
-                    name: "Mint",
-                    image: "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg",
-                    description: "Refreshing aroma, used in teas and cooking.",
-                    cost: "$12"
-                },
-                {
-                    name: "Lemon Balm",
-                    image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg",
-                    description: "Citrusy scent, relieves stress and promotes sleep.",
-                    cost: "$14"
-                },
-                {
-                    name: "Hyacinth",
-                    image: "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg",
-                    description: "Hyacinth is a beautiful flowering plant known for its fragrant.",
-                    cost: "$22"
-                }
-            ]
+          name: "Rosemary",
+          image:
+            "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg",
+          description: "Invigorating scent, often used in cooking.",
+          cost: "$15",
         },
         {
-            category: "Insect Repellent Plants",
-            plants: [
-                {
-                    name: "oregano",
-                    image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg",
-                    description: "The oregano plants contains compounds that can deter certain insects.",
-                    cost: "$10"
-                },
-                {
-                    name: "Marigold",
-                    image:"https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg",
-                    description: "Natural insect repellent, also adds color to the garden.",
-                    cost: "$8"
-                },
-                {
-                    name: "Geraniums",
-                    image: "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg",
-                    description: "Known for their insect-repelling properties while adding a pleasant scent.",
-                    cost: "$20"
-                },
-                {
-                    name: "Basil",
-                    image: "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg",
-                    description: "Repels flies and mosquitoes, also used in cooking.",
-                    cost: "$9"
-                },
-                {
-                    name: "Lavender",
-                    image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-                    description: "Calming scent, used in aromatherapy.",
-                    cost: "$20"
-                },
-                {
-                    name: "Catnip",
-                    image: "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg",
-                    description: "Repels mosquitoes and attracts cats.",
-                    cost: "$13"
-                }
-            ]
+          name: "Mint",
+          image:
+            "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg",
+          description: "Refreshing aroma, used in teas and cooking.",
+          cost: "$12",
         },
         {
-            category: "Medicinal Plants",
-            plants: [
-                {
-                    name: "Aloe Vera",
-                    image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg",
-                    description: "Soothing gel used for skin ailments.",
-                    cost: "$14"
-                },
-                {
-                    name: "Echinacea",
-                    image: "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg",
-                    description: "Boosts immune system, helps fight colds.",
-                    cost: "$16"
-                },
-                {
-                    name: "Peppermint",
-                    image: "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg",
-                    description: "Relieves digestive issues and headaches.",
-                    cost: "$13"
-                },
-                {
-                    name: "Lemon Balm",
-                    image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg",
-                    description: "Calms nerves and promotes relaxation.",
-                    cost: "$14"
-                },
-                {
-                    name: "Chamomile",
-                    image: "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg",
-                    description: "Soothes anxiety and promotes sleep.",
-                    cost: "$15"
-                },
-                {
-                    name: "Calendula",
-                    image: "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg",
-                    description: "Heals wounds and soothes skin irritations.",
-                    cost: "$12"
-                }
-            ]
+          name: "Lemon Balm",
+          image:
+            "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg",
+          description: "Citrusy scent, relieves stress and promotes sleep.",
+          cost: "$14",
         },
         {
-            category: "Low Maintenance Plants",
-            plants: [
-                {
-                    name: "ZZ Plant",
-                    image: "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-                    description: "Thrives in low light and requires minimal watering.",
-                    cost: "$25"
-                },
-                {
-                    name: "Pothos",
-                    image: "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg",
-                    description: "Tolerates neglect and can grow in various conditions.",
-                    cost: "$10"
-                },
-                {
-                    name: "Snake Plant",
-                    image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg",
-                    description: "Needs infrequent watering and is resilient to most pests.",
-                    cost: "$15"
-                },
-                {
-                    name: "Cast Iron Plant",
-                    image: "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg",
-                    description: "Hardy plant that tolerates low light and neglect.",
-                    cost: "$20"
-                },
-                {
-                    name: "Succulents",
-                    image: "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg",
-                    description: "Drought-tolerant plants with unique shapes and colors.",
-                    cost: "$18"
-                },
-                {
-                    name: "Aglaonema",
-                    image: "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg",
-                    description: "Requires minimal care and adds color to indoor spaces.",
-                    cost: "$22"
-                }
-            ]
-        }
-    ];
-   const styleObj={
-    backgroundColor: '#4CAF50',
-    color: '#fff!important',
-    padding: '15px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignIems: 'center',
-    fontSize: '20px',
-   }
-   const styleObjUl={
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '1100px',
-   }
-   const styleA={
-    color: 'white',
-    fontSize: '30px',
-    textDecoration: 'none',
-   }
-   const handleCartClick = (e) => {
+          name: "Hyacinth",
+          image:
+            "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg",
+          description:
+            "Hyacinth is a beautiful flowering plant known for its fragrant.",
+          cost: "$22",
+        },
+      ],
+    },
+    {
+      category: "Insect Repellent Plants",
+      plants: [
+        {
+          name: "oregano",
+          image:
+            "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg",
+          description:
+            "The oregano plants contains compounds that can deter certain insects.",
+          cost: "$10",
+        },
+        {
+          name: "Marigold",
+          image:
+            "https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg",
+          description:
+            "Natural insect repellent, also adds color to the garden.",
+          cost: "$8",
+        },
+        {
+          name: "Geraniums",
+          image:
+            "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg",
+          description:
+            "Known for their insect-repelling properties while adding a pleasant scent.",
+          cost: "$20",
+        },
+        {
+          name: "Basil",
+          image:
+            "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg",
+          description: "Repels flies and mosquitoes, also used in cooking.",
+          cost: "$9",
+        },
+        {
+          name: "Lavender",
+          image:
+            "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+          description: "Calming scent, used in aromatherapy.",
+          cost: "$20",
+        },
+        {
+          name: "Catnip",
+          image:
+            "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg",
+          description: "Repels mosquitoes and attracts cats.",
+          cost: "$13",
+        },
+      ],
+    },
+    {
+      category: "Medicinal Plants",
+      plants: [
+        {
+          name: "Aloe Vera",
+          image:
+            "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg",
+          description: "Soothing gel used for skin ailments.",
+          cost: "$14",
+        },
+        {
+          name: "Echinacea",
+          image:
+            "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg",
+          description: "Boosts immune system, helps fight colds.",
+          cost: "$16",
+        },
+        {
+          name: "Peppermint",
+          image:
+            "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg",
+          description: "Relieves digestive issues and headaches.",
+          cost: "$13",
+        },
+        {
+          name: "Lemon Balm",
+          image:
+            "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg",
+          description: "Calms nerves and promotes relaxation.",
+          cost: "$14",
+        },
+        {
+          name: "Chamomile",
+          image:
+            "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg",
+          description: "Soothes anxiety and promotes sleep.",
+          cost: "$15",
+        },
+        {
+          name: "Calendula",
+          image:
+            "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg",
+          description: "Heals wounds and soothes skin irritations.",
+          cost: "$12",
+        },
+      ],
+    },
+    {
+      category: "Low Maintenance Plants",
+      plants: [
+        {
+          name: "ZZ Plant",
+          image:
+            "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+          description: "Thrives in low light and requires minimal watering.",
+          cost: "$25",
+        },
+        {
+          name: "Pothos",
+          image:
+            "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg",
+          description: "Tolerates neglect and can grow in various conditions.",
+          cost: "$10",
+        },
+        {
+          name: "Snake Plant",
+          image:
+            "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg",
+          description:
+            "Needs infrequent watering and is resilient to most pests.",
+          cost: "$15",
+        },
+        {
+          name: "Cast Iron Plant",
+          image:
+            "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg",
+          description: "Hardy plant that tolerates low light and neglect.",
+          cost: "$20",
+        },
+        {
+          name: "Succulents",
+          image:
+            "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg",
+          description: "Drought-tolerant plants with unique shapes and colors.",
+          cost: "$18",
+        },
+        {
+          name: "Aglaonema",
+          image:
+            "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg",
+          description: "Requires minimal care and adds color to indoor spaces.",
+          cost: "$22",
+        },
+      ],
+    },
+  ];
+  const styleObj = {
+    backgroundColor: "#4CAF50",
+    color: "#fff!important",
+    padding: "15px",
+    display: "flex",
+    justifyContent: "space-between",
+    alignIems: "center",
+    fontSize: "20px",
+  };
+  const styleObjUl = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "1100px",
+  };
+  const styleA = {
+    color: "white",
+    fontSize: "30px",
+    textDecoration: "none",
+  };
+  const handleCartClick = (e) => {
     e.preventDefault();
     setShowCart(true); // Set showCart to true when cart icon is clicked
-};
-const handlePlantsClick = (e) => {
+  };
+  const handlePlantsClick = (e) => {
     e.preventDefault();
     setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked
     setShowCart(false); // Hide the cart when navigating to About Us
-};
+  };
 
-   const handleContinueShopping = (e) => {
-    e.preventDefault();
+  const handleContinueShopping = (e) => {
+    // e.preventDefault();
     setShowCart(false);
   };
-    return (
-        <div>
-             <div className="navbar" style={styleObj}>
-            <div className="tag">
-               <div className="luxury">
-               <img src="https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png" alt="" />
-               <a href="/" style={{textDecoration:'none'}}>
-                        <div>
-                    <h3 style={{color:'white'}}>Paradise Nursery</h3>
-                    <i style={{color:'white'}}>Where Green Meets Serenity</i>
-                    </div>
-                    </a>
-                </div>
-              
-            </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>
+  return (
+    <div>
+      <div className="navbar" style={styleObj}>
+        <div className="tag">
+          <div className="luxury">
+            <img
+              src="https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png"
+              alt=""
+            />
+            <a href="/" style={{ textDecoration: "none" }}>
+              <div>
+                <h3 style={{ color: "white" }}>Paradise Nursery</h3>
+                <i style={{ color: "white" }}>Where Green Meets Serenity</i>
+              </div>
+            </a>
+          </div>
+        </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"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    id="mainIconPathAttribute"
+                  ></path>
+                </svg>
+                {totalCartItems > 0 && (
+                  <span
+                    style={{
+                      position: "absolute",
+                      top: "10px",
+                      right: "15px",
+                      background: "red",
+                      color: "white",
+                      borderRadius: "50%",
+                      padding: "5px 10px",
+                      fontSize: "18px",
+                    }}
+                  >
+                    {totalCartItems}
+                  </span>
+                )}
+              </h1>
+            </a>
+          </div>
         </div>
-        {!showCart? (
+      </div>
+      {!showCart ? (
         <div className="product-grid">
-
-
+          {plantsArray.map((category, index) => (
+            <div key={index}>
+              <h1>
+                <div>{category.category}</div>
+              </h1>
+              <div className="product-list">
+                {category.plants.map((plant, plantIndex) => (
+                  <div className="product-card" key={plantIndex}>
+                    <img
+                      className="product-image"
+                      src={plant.image}
+                      alt={plant.name}
+                    />
+                    <div className="product-title">{plant.name}</div>
+                    <div className="product-description">
+                      {plant.description}
+                    </div>
+                    <div className="product-price">{plant.cost}</div>
+                    <button
+                      className="product-button"
+                      onClick={() => handleAddToCart(plant)}
+                      disabled={addedToCart[plant.name]}
+                    >
+                      Add To Cart
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
         </div>
- ) :  (
-    <CartItem onContinueShopping={handleContinueShopping}/>
-)}
+      ) : (
+        <CartItem onContinueShopping={handleContinueShopping} />
+      )}
     </div>
-    );
+  );
 }
 
 export default ProductList;
diff --git a/vite.config.js b/vite.config.js
index 4d190ae43..01eb32709 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "/shoppingreact",
+  base: "/e-plantShopping",
   plugins: [react()],
-})
+});