diff --git a/src/Product/Product.js b/src/Product/Product.js
index 4d5500b..213dc14 100644
--- a/src/Product/Product.js
+++ b/src/Product/Product.js
@@ -1,7 +1,23 @@
 import React from "react";
+import { useStateValue } from "../redux/StateProvider";
 import "./Product.css";
 
 function Product({ title, image, price, rating }) {
+  const [{ basket }, dispatch] = useStateValue();
+
+  const addToBasket = () => {
+    dispatch({
+      type: "ADD_TO_BASKET",
+      item: {
+        id: id,
+        title: title,
+        image: image,
+        price: price,
+        rating: rating,
+      },
+    });
+  };
+
   return (
     <section className="product">
       <article className="product__info">
@@ -21,7 +37,7 @@ function Product({ title, image, price, rating }) {
 
       <img src={image} alt="product info" />
 
-      <button>Add to Basket</button>
+      <button onClick={addToBasket}>Add to Basket</button>
     </section>
   );
 }