diff --git a/src/AboutUs.jsx b/src/AboutUs.jsx
index 2341581c57..d1067cb1c6 100644
--- a/src/AboutUs.jsx
+++ b/src/AboutUs.jsx
@@ -1,29 +1,34 @@
-import React from 'react';
-import './AboutUs.css';
+import React from "react";
+import "./AboutUs.css";
 
 function AboutUs() {
   return (
     <div className="about-us-container">
       {/* <h1 className="about-us-heading">About Us</h1> */}
-      <p className="about-us-description">Welcome to Paradise Nursery, where green meets serenity!</p>
+      <p className="about-us-description">
+        Welcome to Paradise Nursery, where green meets serenity!
+      </p>
       <p className="about-us-content">
-        At Paradise Nursery, we are passionate about bringing nature closer to you. Our mission is to provide a wide range of 
-        high-quality plants that not only enhance the beauty of your surroundings but also contribute to a healthier and 
-        more sustainable lifestyle. From air-purifying plants to aromatic fragrant ones, we have something for every 
-        plant enthusiast.
+        At Paradise Nursery, we are passionate about bringing nature closer to
+        you. Our mission is to provide a wide range of high-quality plants that
+        not only enhance the beauty of your surroundings but also contribute to
+        a healthier and more sustainable lifestyle. From air-purifying plants to
+        aromatic fragrant ones, we have something for every plant enthusiast.
       </p>
       {/* <p className="plant_logo_left"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
       <p className="about-us-content">
-        Our team of experts is dedicated to ensuring that each plant meets our strict standards of quality and care. 
-        Whether you're a seasoned gardener or just starting your green journey, we're here to support you every step of 
-        the way. Feel free to explore our collection, ask questions, and let us help you find the perfect plant for your 
-        home or office.
+        Our team of experts is dedicated to ensuring that each plant meets our
+        strict standards of quality and care. Whether you're a seasoned gardener
+        or just starting your green journey, we're here to support you every
+        step of the way. Feel free to explore our collection, ask questions, and
+        let us help you find the perfect plant for your home or office.
       </p>
       {/* <p className="plant_logo_right"><img src="https://p1.hiclipart.com/preview/922/979/640/green-leaf-logo-emoji-seedling-emoticon-sticker-plant-plant-stem-flower-png-clipart-thumbnail.jpg" height='50px' width='50px' alt="" /></p> */}
 
       <p className="about-us-content">
-        Join us in our mission to create a greener, healthier world. Visit Paradise Nursery today and experience the 
-        beauty of nature right at your doorstep.
+        Join us in our mission to create a greener, healthier world. Visit
+        Paradise Nursery today and experience the beauty of nature right at your
+        doorstep.
       </p>
     </div>
   );
diff --git a/src/App.jsx b/src/App.jsx
index 799372d75d..8647adbdde 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,9 @@
-
-import React, { useState } from 'react';
-import ProductList from './ProductList';
-import './App.css';
-import AboutUs from './AboutUs';
+import React, { useState } from "react";
+import ProductList from "./ProductList";
+import "./App.css";
+import AboutUs from "./AboutUs";
 
 function App() {
-  
   const [showProductList, setShowProductList] = useState(false);
 
   const handleGetStartedClick = () => {
@@ -18,32 +16,33 @@ function App() {
 
   return (
     <div className="app-container">
-      <div className={`landing-page ${showProductList ? 'fade-out' : ''}`}>
+      <div className={`landing-page ${showProductList ? "fade-out" : ""}`}>
         <div className="background-image"></div>
         <div className="content">
-         <div className="landing_content">
-         <h1>Welcome To Paradise Nursery</h1>
-          <div className="divider"></div>
-          <p>Where Green Meets Serenity</p>
-         
-          <button className="get-started-button" onClick={handleGetStartedClick}>
-            Get Started
-          </button>
-         </div>
-          <div className="aboutus_container">
-          <AboutUs/>
+          <div className="landing_content">
+            <h1>Welcome To Paradise Nursery</h1>
+            <div className="divider"></div>
+            <p>Where Green Meets Serenity</p>
+
+            <button
+              className="get-started-button"
+              onClick={handleGetStartedClick}
+            >
+              Get Started
+            </button>
           </div>
+          <div className="aboutus_container">
+            <AboutUs />
           </div>
-
+        </div>
       </div>
-      <div className={`product-list-container ${showProductList ? 'visible' : ''}`}>
-        <ProductList onHomeClick={handleHomeClick}/>
+      <div
+        className={`product-list-container ${showProductList ? "visible" : ""}`}
+      >
+        <ProductList onHomeClick={handleHomeClick} />
       </div>
     </div>
   );
 }
 
 export default App;
-
-
-
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433f..56ec35a946 100644
--- a/src/CartItem.jsx
+++ b/src/CartItem.jsx
@@ -1,68 +1,126 @@
-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);
   const dispatch = useDispatch();
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
- 
+    let sum = 0;
+    cart.forEach((element) => {
+      sum += parseFloat(element.cost.substring(1)) * element.quantity;
+    });
+    console.log(sum);
+    return sum;
   };
 
-  const handleContinueShopping = (e) => {
-   
+  const handleCheckoutShopping = (e) => {
+    alert(
+      `Your product will be shipped:\n${calculateTotalAmount()}$ is price.`
+    );
   };
 
-
-
   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,
+        })
+      );
+    }
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem(item.name));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    return item.quantity * parseFloat(item.cost.substring(1));
+  };
+
+  const handleContinueShopping = (e) => {
+    if (onContinueShopping) {
+      onContinueShopping();
+    }
   };
 
   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
+          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..e514b84b44 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -1,19 +1,34 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
+import { act } from "react";
 
 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; // 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..91e5b95a59 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,287 +1,384 @@
-import React, { useState, useEffect } from 'react';
-import './ProductList.css'
-import CartItem from './CartItem';
+import React, { useState, useEffect, createRef } from "react";
+import "./ProductList.css";
+import CartItem from "./CartItem";
+import { useDispatch, useSelector } from "react-redux";
+import { addItem } from "./CartSlice";
 function ProductList({ onHomeClick }) {
-    const [showCart, setShowCart] = useState(false);
-    const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
-
-    const plantsArray = [
+  const [showCart, setShowCart] = useState(false);
+  const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+  const cart = useSelector((state) => state.cart.items);
+  const plantsArray = [
+    {
+      category: "Air Purifying Plants",
+      plants: [
         {
-            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: "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",
         },
         {
-            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: "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",
         },
         {
-            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: "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",
         },
         {
-            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: "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",
         },
         {
-            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 handleHomeClick = (e) => {
-        e.preventDefault();
-        onHomeClick();
-    };
+          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",
+        },
+        {
+          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",
+        },
+      ],
+    },
+    {
+      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) => {
-        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 handleHomeClick = (e) => {
+    e.preventDefault();
+    onHomeClick();
+  };
 
-    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="/" onClick={(e) => handleHomeClick(e)}>
-                            <div>
-                                <h3 style={{ color: 'white' }}>Paradise Nursery</h3>
-                                <i style={{ color: 'white' }}>Where Green Meets Serenity</i>
-                            </div>
-                        </a>
-                    </div>
+  const handleCartClick = (e) => {
+    e.preventDefault();
+    setShowCart(true); // Set showCart to true when cart icon is clicked
+  };
+  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
+  };
 
-                </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>
-            </div>
-            {!showCart ? (
-                <div className="product-grid">
+  const handleContinueShopping = (e) => {
+    e.preventDefault();
+    setShowCart(false);
+  };
+  const dispatcher = useDispatch();
+  const handleAddToCart = (plant, e) => {
+    e.style.backgroundColor = "red";
+    e.innerText = "Added to cart";
 
+    dispatcher(addItem(plant));
+    e.preventDefault();
+  };
 
-                </div>
-            ) : (
-                <CartItem onContinueShopping={handleContinueShopping} />
-            )}
+  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="/" onClick={(e) => handleHomeClick(e)}>
+              <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>
+      </div>
+      {!showCart ? (
+        <div className="product-grid">
+          {plantsArray.map((p) =>
+            p.plants.map((plant, index) => (
+              <div className="product-card" key={index}>
+                <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-cost">${plant.cost}</div>
+                <button
+                  className="product-button"
+                  onClick={(e) => handleAddToCart(plant, e.currentTarget)}
+                >
+                  Add to Cart
+                </button>
+              </div>
+            ))
+          )}
         </div>
-    );
+      ) : (
+        <CartItem onContinueShopping={handleContinueShopping} />
+      )}
+    </div>
+  );
 }
 
 export default ProductList;
diff --git a/src/main.jsx b/src/main.jsx
index 9ea042ec2b..5211cfb61c 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,13 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
-import { Provider } from 'react-redux'
-import store from './store.js'
-ReactDOM.createRoot(document.getElementById('root')).render(
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+import { Provider } from "react-redux";
+import store from "./store.js";
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <Provider store={store}>
-    <App />
+      <App />
     </Provider>
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/vite.config.js b/vite.config.js
index 4d190ae430..e28102f3a3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,9 @@
-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",
   plugins: [react()],
-})
+  base: "/", // VAŽNO za Vercel/korenski domen
+});