diff --git a/package-lock.json b/package-lock.json
index f8f90ae66..e0093957c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-fast-marquee": "^1.3.5",
+        "react-hot-toast": "^2.4.1",
         "react-loading-skeleton": "^3.1.0",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.4.0",
@@ -8553,6 +8554,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -14275,6 +14285,22 @@
         "react-dom": ">= 16.8.0 || 18.0.0"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 47a14febd..d5ff59fa3 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
+    "react-hot-toast": "^2.4.1",
     "react-loading-skeleton": "^3.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.4.0",
diff --git a/src/components/Products.jsx b/src/components/Products.jsx
index 71a43146a..89161631b 100644
--- a/src/components/Products.jsx
+++ b/src/components/Products.jsx
@@ -6,6 +6,7 @@ import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
 import { Link } from "react-router-dom";
+import toast from "react-hot-toast";
 
 const Products = () => {
   const [data, setData] = useState([]);
@@ -16,8 +17,8 @@ const Products = () => {
   const dispatch = useDispatch();
 
   const addProduct = (product) => {
-    dispatch(addCart(product))
-  }
+    dispatch(addCart(product));
+  };
 
   useEffect(() => {
     const getProducts = async () => {
@@ -68,23 +69,51 @@ const Products = () => {
   const filterProduct = (cat) => {
     const updatedList = data.filter((item) => item.category === cat);
     setFilter(updatedList);
-  }
+  };
+
   const ShowProducts = () => {
     return (
       <>
         <div className="buttons text-center py-5">
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => setFilter(data)}>All</button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("men's clothing")}>Men's Clothing</button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("women's clothing")}>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => setFilter(data)}
+          >
+            All
+          </button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("men's clothing")}
+          >
+            Men's Clothing
+          </button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("women's clothing")}
+          >
             Women's Clothing
           </button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("jewelery")}>Jewelery</button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("electronics")}>Electronics</button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("jewelery")}
+          >
+            Jewelery
+          </button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("electronics")}
+          >
+            Electronics
+          </button>
         </div>
 
         {filter.map((product) => {
           return (
-            <div id={product.id} key={product.id} className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
+            <div
+              id={product.id}
+              key={product.id}
+              className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4"
+            >
               <div className="card text-center h-100" key={product.id}>
                 <img
                   className="card-img-top p-3"
@@ -106,16 +135,24 @@ const Products = () => {
                     <li className="list-group-item">Vestibulum at eros</li> */}
                 </ul>
                 <div className="card-body">
-                  <Link to={"/product/" + product.id} className="btn btn-dark m-1">
+                  <Link
+                    to={"/product/" + product.id}
+                    className="btn btn-dark m-1"
+                  >
                     Buy Now
                   </Link>
-                  <button className="btn btn-dark m-1" onClick={() => addProduct(product)}>
+                  <button
+                    className="btn btn-dark m-1"
+                    onClick={() => {
+                      toast.success("Added to cart");
+                      addProduct(product);
+                    }}
+                  >
                     Add to Cart
                   </button>
                 </div>
               </div>
             </div>
-
           );
         })}
       </>
diff --git a/src/index.js b/src/index.js
index 4193bec37..553454b35 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,6 +19,7 @@ import {
   PageNotFound,
 } from "./pages";
 import ScrollToTop from "./components/ScrollToTop";
+import { Toaster } from "react-hot-toast";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -40,5 +41,6 @@ root.render(
         </Routes>
       </Provider>
     </ScrollToTop>
+    <Toaster />
   </BrowserRouter>
 );
diff --git a/src/redux/reducer/handleCart.js b/src/redux/reducer/handleCart.js
index df8824225..5fd63bcef 100644
--- a/src/redux/reducer/handleCart.js
+++ b/src/redux/reducer/handleCart.js
@@ -1,37 +1,3 @@
-// const cart = []
-
-// const handleCart = (state=cart, action) =>{
-//     const product = action.payload
-//     switch(action.type){
-//         case "ADDITEM":
-//             // Check if product already in cart
-//             const exist = state.find((x) => x.id === product.id)
-//             if(exist){
-//                 // Increase the quantity
-//                 return state.map((x)=>x.id ===product.id?{...x, qty: x.qty+1}:x)
-//             }
-//             else{
-//                 return [...state, {...product, qty:1}]
-//             }
-//             break;
-//         case "DELITEM":
-//             const exist2 = state.find((x) => x.id === product.id)
-//             if(exist2.qty === 1){
-//                 return state.filter((x)=>x.id!==exist2.id)
-//             }
-//             else{
-//                 return state.map((x)=> x.id===product.id?{...x, qty:x.qty-1}:x)
-//             }
-//             break;
-
-//         default:
-//             return state
-//             break;
-//     }
-// }
-
-// export default handleCart
-
 // Retrieve initial state from localStorage if available
 const getInitialCart = () => {
   const storedCart = localStorage.getItem("cart");