diff --git a/src/pages/PropDrillingExercise.js b/src/pages/PropDrillingExercise.js
index 39a197a..51db389 100644
--- a/src/pages/PropDrillingExercise.js
+++ b/src/pages/PropDrillingExercise.js
@@ -1,11 +1,9 @@
 import React, { useState } from "react";
-import { Container, Button, Typography, Box, Grid } from "@mui/material"
+import { Container, Button, Typography, Box, Grid } from "@mui/material";
 import productOne from "../images/product1.gif";
 import productTwo from "../images/product2.gif";
 import ReactJson from "react-json-view";
-import WrapperBox from "../components/WrapperBox"
-
-
+import WrapperBox from "../components/WrapperBox";
 
 const RootComponent = (props) => {
   // eslint-disable-next-line
@@ -28,21 +26,48 @@ const RootComponent = (props) => {
   // Write a function called addProductToCart() that takes a product object as an argument
   // Example newProduct = { id: "p1", title: "Product 1", price: 1999 }
   // The function will add one new product into the cart
-
+  const addProductToCart = (newProduct) => {
+    const newProductList = cart.products.map((cartProduct) => {
+      if (cartProduct.id === newProduct.id) {
+        cartProduct.qty += 1;
+        cartProduct.price += newProduct.price;
+      }
+      return cartProduct;
+    });
+    const newTotalPrice = cart.totalPrice + newProduct.price;
+    setCart({ products: newProductList, totalPrice: newTotalPrice });
+  };
 
   // Step 2
   // Write a function called removeProductFromCart() that takes a product object as an argument
   // Example removedProduct = { id: "p1", title: "Product 1", price: 1999 }
   // The function will remove one product from the cart. The min value of quantity is 0
-
+  const removeProductFromCart = (removeProduct) => {
+    let newTotalPrice = cart.totalPrice;
+    const newProductList = cart.products.map((cartProduct) => {
+      if (cartProduct.id === removeProduct.id && cartProduct.qty > 0) {
+        cartProduct.qty -= 1;
+        cartProduct.price -= removeProduct.price;
+        newTotalPrice -= removeProduct.price;
+      }
+      return cartProduct;
+    });
+    setCart({ products: newProductList, totalPrice: newTotalPrice });
+  };
   // Step 3
   // Pass the functions to the product components to handle the click event of the Add/Remove buttons
 
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         RootComponent {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Box sx={{ textAlign: "start" }}>
@@ -57,7 +82,11 @@ const RootComponent = (props) => {
       </Box>
       <Grid container spacing={2} p="1rem">
         <Grid item md={6}>
-          <ProductPage products={products} />
+          <ProductPage
+            products={products}
+            addProduct={addProductToCart}
+            removeProduct={removeProductFromCart}
+          />
         </Grid>
         <Grid item md={6}>
           <CartPage cart={cart} />
@@ -70,18 +99,31 @@ const RootComponent = (props) => {
 const ProductPage = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
-
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Product Page {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
         <Grid item sm={6}>
-          <ProductOne product={props.products[0]} />
+          <ProductOne
+            product={props.products[0]}
+            addProduct={props.addProduct}
+            removeProduct={props.removeProduct}
+          />
         </Grid>
         <Grid item sm={6}>
-          <ProductTwo product={props.products[1]} />
+          <ProductTwo
+            product={props.products[1]}
+            addProduct={props.addProduct}
+            removeProduct={props.removeProduct}
+          />
         </Grid>
       </Grid>
     </WrapperBox>
@@ -91,9 +133,15 @@ const ProductPage = (props) => {
 const CartPage = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Cart Page {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
@@ -104,7 +152,9 @@ const CartPage = (props) => {
           <CartProductTwo product={props.cart.products[1]} />
         </Grid>
         <Grid item md={12}>
-          <Typography p="0.5rem" variant="h5">Total Price: 💵 {props.cart.totalPrice}</Typography>
+          <Typography p="0.5rem" variant="h5">
+            Total Price: 💵 {props.cart.totalPrice}
+          </Typography>
         </Grid>
       </Grid>
     </WrapperBox>
@@ -114,22 +164,38 @@ const CartPage = (props) => {
 const ProductOne = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         {props.product.title} {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
-      </Typography >
+      </Typography>
       <Grid container justifyContent="center">
         <Grid item xs={8}>
           <img src={productOne} alt="Product One" width="100%" />
-          <Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>💵 {props.product.price}</Typography>
+          <Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>
+            💵 {props.product.price}
+          </Typography>
         </Grid>
-        <Grid item xs={8} >
+        <Grid item xs={8}>
           <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <Button variant="success" sx={{ width: "5rem" }} >
+            <Button
+              variant="success"
+              sx={{ width: "5rem" }}
+              onClick={() => props.addProduct(props.product)}
+            >
               Add
             </Button>
-            <Button variant="error" sx={{ width: "5rem" }}>
+            <Button
+              variant="error"
+              sx={{ width: "5rem" }}
+              onClick={() => props.removeProduct(props.product)}
+            >
               Remove
             </Button>
           </div>
@@ -140,25 +206,42 @@ const ProductOne = (props) => {
 };
 
 const ProductTwo = (props) => {
-
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         {props.product.title} {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container justifyContent="center">
         <Grid item xs={8}>
           <img src={productTwo} alt="Product Two" width="100%" />
-          <Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>💵 {props.product.price}</Typography>
+          <Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>
+            💵 {props.product.price}
+          </Typography>
         </Grid>
-        <Grid item xs={8} >
+        <Grid item xs={8}>
           <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <Button variant="success" size="sm" style={{ width: "5rem" }}>
+            <Button
+              variant="success"
+              size="sm"
+              style={{ width: "5rem" }}
+              onClick={() => props.addProduct(props.product)}
+            >
               Add
             </Button>
-            <Button variant="error" size="sm" style={{ width: "5rem" }}>
+            <Button
+              variant="error"
+              size="sm"
+              style={{ width: "5rem" }}
+              onClick={() => props.removeProduct(props.product)}
+            >
               Remove
             </Button>
           </div>
@@ -171,14 +254,24 @@ const ProductTwo = (props) => {
 const CartProductOne = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         CartProduct 1 {`({`}
-        <Box component="span" sx={{ color: "warning.main" }} >{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
-      <Box >
-        <Typography p="0.5rem" variant="h6">Quantity: {props.product.qty}</Typography>
-        <Typography p="0.5rem" variant="h6">Price: 💵 {props.product.price}</Typography>
+      <Box>
+        <Typography p="0.5rem" variant="h6">
+          Quantity: {props.product.qty}
+        </Typography>
+        <Typography p="0.5rem" variant="h6">
+          Price: 💵 {props.product.price}
+        </Typography>
       </Box>
     </WrapperBox>
   );
@@ -187,14 +280,24 @@ const CartProductOne = (props) => {
 const CartProductTwo = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         CartProduct 2 {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
-      </Typography >
+      </Typography>
       <Box>
-        <Typography p="0.5rem" variant="h6">Quantity: {props.product.qty}</Typography>
-        <Typography p="0.5rem" variant="h6">Price: 💵 {props.product.price}</Typography>
+        <Typography p="0.5rem" variant="h6">
+          Quantity: {props.product.qty}
+        </Typography>
+        <Typography p="0.5rem" variant="h6">
+          Price: 💵 {props.product.price}
+        </Typography>
       </Box>
     </WrapperBox>
   );
@@ -204,7 +307,9 @@ const PropDrillingExercise = () => {
   return (
     <Container>
       <br />
-      <Typography p="0.5rem" variant="h6">How to add products to the cart?</Typography>
+      <Typography p="0.5rem" variant="h6">
+        How to add products to the cart?
+      </Typography>
       <br />
       <RootComponent />
     </Container>
diff --git a/src/pages/ReduxExercise.js b/src/pages/ReduxExercise.js
index a25d9c6..f761b29 100644
--- a/src/pages/ReduxExercise.js
+++ b/src/pages/ReduxExercise.js
@@ -1,17 +1,24 @@
 import React from "react";
-import { Container, Button, Typography, Box, Grid } from "@mui/material"
+import { Container, Button, Typography, Box, Grid } from "@mui/material";
 import productOne from "../images/product1.gif";
 import productTwo from "../images/product2.gif";
 import ReactJson from "react-json-view";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import WrapperBox from "../components/WrapperBox";
+import { addToCart, removeCart } from "../service/cart/slice";
 
 const RootComponent = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         RootComponent {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
@@ -29,9 +36,15 @@ const RootComponent = (props) => {
 const ProductPage = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Product Page {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
@@ -49,13 +62,19 @@ const ProductPage = (props) => {
 const CartPage = (props) => {
   // Step 6
   // Replace the line below to get data of the second product from state.cart.totalPrice
-  const totalPrice = "...";
+  const totalPrice = useSelector((state) => state.cart.totalPrice);
 
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Cart Page {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
@@ -66,7 +85,9 @@ const CartPage = (props) => {
           <CartProductTwo />
         </Grid>
         <Grid item xs={12}>
-          <Typography p="0.5rem" variant="h5">Total Price: 💵 {totalPrice}</Typography>
+          <Typography p="0.5rem" variant="h5">
+            Total Price: 💵 {totalPrice}
+          </Typography>
         </Grid>
       </Grid>
     </WrapperBox>
@@ -77,7 +98,7 @@ const ProductOne = (props) => {
   // Step 4
   // Replace the line below to get data of the first product from state.product
   // You should see the price is updated
-  const product = { id: "...", title: "...", price: "..." };
+  const product = useSelector((state) => state.product[0]);
 
   // Step 7
   // Define: const dispatch = useDispatch();
@@ -87,6 +108,13 @@ const ProductOne = (props) => {
   // eslint-disable-next-line
   const dispatch = useDispatch();
 
+  const addProduct = () => {
+    dispatch(addToCart(product));
+  };
+  const removeProduct = () => {
+    dispatch(removeCart(product));
+  };
+
   // Step 8
   // Create a function to handle click event of the button Remove
   // In the function, dispatch cartActions.removeProduct(product) to trigger the action remove product from the cart
@@ -94,28 +122,44 @@ const ProductOne = (props) => {
 
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         {product.title} {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
-      </Typography >
+      </Typography>
       <Grid container justifyContent="center">
         <Grid item xs={8}>
           <img src={productOne} alt="Product One" width="100%" />
-          <Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>💵 {product.price}</Typography>
+          <Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>
+            💵 {product.price}
+          </Typography>
         </Grid>
-        <Grid item xs={8} >
+        <Grid item xs={8}>
           <div style={{ display: "flex", justifyContent: "space-around" }}>
-            <Button variant="success" sx={{ width: "5rem" }}>
+            <Button
+              variant="success"
+              sx={{ width: "5rem" }}
+              onClick={addProduct}
+            >
               Add
             </Button>
-            <Button variant="error" sx={{ width: "5rem" }}>
+            <Button
+              variant="error"
+              sx={{ width: "5rem" }}
+              onClick={removeProduct}
+            >
               Remove
             </Button>
           </div>
         </Grid>
       </Grid>
-    </WrapperBox >
+    </WrapperBox>
   );
 };
 
@@ -123,29 +167,53 @@ const ProductTwo = (props) => {
   // Step 5
   // Replace the line below to get data of the second product from state.product
   // You should see the price is updated
-  const product = { id: "...", title: "...", price: "..." };
+  const product = useSelector((state) => state.product[1]);
 
   // Step 9
   // Repeat step 7 and 8 for this component
+  const dispatch = useDispatch();
+
+  const addProduct = () => {
+    dispatch(addToCart(product));
+  };
 
+  const removeProduct = () => {
+    dispatch(removeCart(product));
+  };
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         {product.title} {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container justifyContent="center">
         <Grid item xs={8}>
           <img src={productTwo} alt="Product Two" width="100%" />
-          <Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>💵 {product.price}</Typography>
+          <Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>
+            💵 {product.price}
+          </Typography>
         </Grid>
-        <Grid item xs={8} >
+        <Grid item xs={8}>
           <div style={{ display: "flex", justifyContent: "space-around" }}>
-            <Button variant="success" sx={{ width: "5rem" }}>
+            <Button
+              variant="success"
+              sx={{ width: "5rem" }}
+              onClick={addProduct}
+            >
               Add
             </Button>
-            <Button variant="error" sx={{ width: "5rem" }}>
+            <Button
+              variant="error"
+              sx={{ width: "5rem" }}
+              onClick={removeProduct}
+            >
               Remove
             </Button>
           </div>
@@ -159,19 +227,30 @@ const CartProductOne = (props) => {
   // Step 2
   // Replace the line below to get data of the first product from state.cart.products
   // Change the price of products in `service/cart/slice.js` to see the effect
-  const product = { price: "...", qty: "..." };
+  const product = useSelector((state) => state.cart.products[0]);
+  console.log("product", product);
 
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         CartProduct 1 {`({`}
-        <Box component="span" sx={{ color: "warning.main" }} >{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Container fluid="true">
-        <Box >
-          <Typography p="0.5rem" variant="h6">Quantity: {product.qty}</Typography>
-          <Typography p="0.5rem" variant="h6">Price: 💵 {product.price}</Typography>
+        <Box>
+          <Typography p="0.5rem" variant="h6">
+            Quantity: {product.qty}
+          </Typography>
+          <Typography p="0.5rem" variant="h6">
+            Price: 💵 {product.price}
+          </Typography>
         </Box>
       </Container>
     </WrapperBox>
@@ -182,18 +261,28 @@ const CartProductTwo = (props) => {
   // Step 3
   // Replace the line below to get data of the second product from state.cart.products
   // Change the price of products in `service/cart/slice.js` to see the effect
-  const product = { price: "...", qty: "..." };
+  const product = useSelector((state) => state.cart.products[1]);
 
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         CartProduct 2 {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
-      </Typography >
+      </Typography>
       <Box>
-        <Typography p="0.5rem" variant="h6">Quantity: {product.qty}</Typography>
-        <Typography p="0.5rem" variant="h6">Price: 💵 {product.price}</Typography>
+        <Typography p="0.5rem" variant="h6">
+          Quantity: {product.qty}
+        </Typography>
+        <Typography p="0.5rem" variant="h6">
+          Price: 💵 {product.price}
+        </Typography>
       </Box>
     </WrapperBox>
   );
@@ -204,15 +293,21 @@ const Store = (props) => {
   // use useSelector() to get the data of products and cart in the store
   // pass {cart, product} to the src attribute of the component <ReactJson/>
 
+  const products = useSelector((state) => state.product);
+  const cart = useSelector((state) => state.cart);
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Store
       </Typography>
       <Box sx={{ textAlign: "start" }}>
         <ReactJson
           name="store"
-          src={{}}
+          src={{ products, cart }}
           theme="monokai"
           displayDataTypes={false}
           displayObjectSize={false}
diff --git a/src/pages/ReduxFinal.js b/src/pages/ReduxFinal.js
index 7987ede..2caec36 100644
--- a/src/pages/ReduxFinal.js
+++ b/src/pages/ReduxFinal.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Container, Button, Typography, Box, Grid } from "@mui/material"
+import { Container, Button, Typography, Box, Grid } from "@mui/material";
 import productOne from "../images/product1.gif";
 import productTwo from "../images/product2.gif";
 import ReactJson from "react-json-view";
@@ -10,9 +10,15 @@ import { addToCart, removeCart } from "../service/cart/slice";
 const RootComponent = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         RootComponent {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
@@ -30,9 +36,15 @@ const RootComponent = (props) => {
 const ProductPage = (props) => {
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Product Page {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
@@ -54,9 +66,15 @@ const CartPage = (props) => {
 
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Cart Page {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container spacing={2} p="1rem">
@@ -67,7 +85,9 @@ const CartPage = (props) => {
           <CartProductTwo />
         </Grid>
         <Grid item sx={12}>
-          <Typography p="0.5rem" variant="h5">Total Price: 💵 {totalPrice}</Typography>
+          <Typography p="0.5rem" variant="h5">
+            Total Price: 💵 {totalPrice}
+          </Typography>
         </Grid>
       </Grid>
     </WrapperBox>
@@ -80,7 +100,6 @@ const ProductOne = (props) => {
   // You should see the price is updated
   const product = useSelector((state) => state.product[0]);
 
-
   // Step 7
   // Define: const dispatch = useDispatch();
   // Create a function to handle click event of the button Add
@@ -104,22 +123,31 @@ const ProductOne = (props) => {
 
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         {product.title} {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
-      </Typography >
+      </Typography>
       <Grid container justifyContent="center">
         <Grid item xs={8}>
           <img src={productOne} alt="Product One" width="100%" />
-          <Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>💵 {product.price}</Typography>
+          <Typography p="0.5rem" variant="h6" sx={{ color: "success.main" }}>
+            💵 {product.price}
+          </Typography>
         </Grid>
-        <Grid item xs={8} >
+        <Grid item xs={8}>
           <div style={{ display: "flex", justifyContent: "space-around" }}>
             <Button
               variant="success"
               sx={{ width: "5rem" }}
-              onClick={addProduct}>
+              onClick={addProduct}
+            >
               Add
             </Button>
             <Button
@@ -132,7 +160,7 @@ const ProductOne = (props) => {
           </div>
         </Grid>
       </Grid>
-    </WrapperBox >
+    </WrapperBox>
   );
 };
 
@@ -156,22 +184,31 @@ const ProductTwo = (props) => {
   };
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         {product.title} {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Grid container justifyContent="center">
         <Grid item xs={8}>
           <img src={productTwo} alt="Product Two" width="100%" />
-          <Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>💵 {product.price}</Typography>
+          <Typography p="0.5rem" variant="h5" sx={{ color: "success.main" }}>
+            💵 {product.price}
+          </Typography>
         </Grid>
-        <Grid item xs={8} >
+        <Grid item xs={8}>
           <div style={{ display: "flex", justifyContent: "space-around" }}>
             <Button
               variant="success"
               sx={{ width: "5rem" }}
-              onClick={addProduct}>
+              onClick={addProduct}
+            >
               Add
             </Button>
             <Button
@@ -193,18 +230,28 @@ const CartProductOne = (props) => {
   // Replace the line below to get data of the first product from state.cart.products
   // Change the price of products in `cart.reducer.js` to see the effect
   const product = useSelector((state) => state.cart.products[0]);
-  console.log("prodcut", product)
+  console.log("prodcut", product);
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         CartProduct 1 {`({`}
-        <Box component="span" sx={{ color: "warning.main" }} >{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
       </Typography>
       <Container fluid="true">
-        <Box >
-          <Typography p="0.5rem" variant="h6">Quantity: {product.qty}</Typography>
-          <Typography p="0.5rem" variant="h6">Price: 💵 {product.price}</Typography>
+        <Box>
+          <Typography p="0.5rem" variant="h6">
+            Quantity: {product.qty}
+          </Typography>
+          <Typography p="0.5rem" variant="h6">
+            Price: 💵 {product.price}
+          </Typography>
         </Box>
       </Container>
     </WrapperBox>
@@ -217,17 +264,26 @@ const CartProductTwo = (props) => {
   // Change the price of products in `cart.reducer.js` to see the effect
   const product = useSelector((state) => state.cart.products[1]);
 
-
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         CartProduct 2 {`({`}
-        <Box component="span" sx={{ color: "warning.main" }}>{Object.keys(props).join(", ")}</Box>
+        <Box component="span" sx={{ color: "warning.main" }}>
+          {Object.keys(props).join(", ")}
+        </Box>
         {`})`}
-      </Typography >
+      </Typography>
       <Box>
-        <Typography p="0.5rem" variant="h6">Quantity: {product.qty}</Typography>
-        <Typography p="0.5rem" variant="h6">Price: 💵 {product.price}</Typography>
+        <Typography p="0.5rem" variant="h6">
+          Quantity: {product.qty}
+        </Typography>
+        <Typography p="0.5rem" variant="h6">
+          Price: 💵 {product.price}
+        </Typography>
       </Box>
     </WrapperBox>
   );
@@ -241,7 +297,11 @@ const Store = (props) => {
   const cart = useSelector((state) => state.cart);
   return (
     <WrapperBox>
-      <Typography p="0.5rem" variant="h5" sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}>
+      <Typography
+        p="0.5rem"
+        variant="h5"
+        sx={{ backgroundColor: "primary.main", color: "primary.contrastText" }}
+      >
         Store
       </Typography>
       <Box sx={{ textAlign: "start" }}>