diff --git a/package-lock.json b/package-lock.json
index f38fe5e8b..7d3584170 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5498,6 +5498,11 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "es6-symbol": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -13256,6 +13261,22 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "requires": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      },
+      "dependencies": {
+        "promise-polyfill": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+          "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+        }
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index d9fa4acab..6f3492f89 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "react-currency-format": "^1.0.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "sweetalert": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/CheckoutProduct.js b/src/CheckoutProduct.js
index b8e58dc9c..375cbe7de 100644
--- a/src/CheckoutProduct.js
+++ b/src/CheckoutProduct.js
@@ -1,11 +1,20 @@
 import React from 'react';
 import './CheckoutProduct.css'
 import { useStateValue } from "./StateProvider";
+import swal from 'sweetalert';
+
 
 function CheckoutProduct({ id, image, title, price, rating, hideButton }) {
     const [{ basket }, dispatch] = useStateValue();
 
     const removeFromBasket = () => {
+
+        swal({
+            title: "Product has been removed from the cart.",
+            icon: "success",
+            dangerMode: true,
+          })
+
         // remove the item from the basket
         dispatch({
             type: 'REMOVE_FROM_BASKET',
diff --git a/src/Orders.js b/src/Orders.js
index f3fbf2caf..5bbd6c3cf 100644
--- a/src/Orders.js
+++ b/src/Orders.js
@@ -29,6 +29,8 @@ function Orders() {
 
     return (
         <div className='orders'>
+        {orders ? (
+            <div>
             <h1>Your Orders</h1>
 
             <div className='orders__order'>
@@ -36,6 +38,13 @@ function Orders() {
                     <Order order={order} />
                 ))}
             </div>
+            </div>
+            
+        ) : (
+            <h2>No orders</h2>
+        )
+    }
+            
         </div>
     )
 }
diff --git a/src/Product.js b/src/Product.js
index cee9e25b7..54610694b 100644
--- a/src/Product.js
+++ b/src/Product.js
@@ -1,11 +1,21 @@
 import React from "react";
 import "./Product.css";
 import { useStateValue } from "./StateProvider";
+import swal from 'sweetalert';
+
 
 function Product({ id, title, image, price, rating }) {
   const [{ basket }, dispatch] = useStateValue();
 
   const addToBasket = () => {
+
+    swal({
+      title: "Product Added to cart.",
+      icon: "success",
+      dangerMode: false,
+    })
+
+
     // dispatch the item into the data layer
     dispatch({
       type: "ADD_TO_BASKET",