diff --git a/package.json b/package.json
index c7f8f15..95bb3b2 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,16 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.24.0",
     "bcryptjs": "^2.4.3",
+    "bootstrap": "^5.1.3",
+    "dotenv": "^10.0.0",
     "feather-icons-react": "^0.5.0",
     "firebase": "^9.4.0",
     "graphql": "^16.0.1",
     "moment": "^2.29.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
+    "react-number-format": "^4.8.0",
     "react-google-recaptcha": "^2.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
diff --git a/public/images/img1.jpg b/public/images/img1.jpg
new file mode 100644
index 0000000..2c19efc
Binary files /dev/null and b/public/images/img1.jpg differ
diff --git a/public/images/img10.jpg b/public/images/img10.jpg
new file mode 100644
index 0000000..761541d
Binary files /dev/null and b/public/images/img10.jpg differ
diff --git a/public/images/img11.jpg b/public/images/img11.jpg
new file mode 100644
index 0000000..2538a13
Binary files /dev/null and b/public/images/img11.jpg differ
diff --git a/public/images/img12.jpg b/public/images/img12.jpg
new file mode 100644
index 0000000..a043bcc
Binary files /dev/null and b/public/images/img12.jpg differ
diff --git a/public/images/img2.jpg b/public/images/img2.jpg
new file mode 100644
index 0000000..ea8f3c3
Binary files /dev/null and b/public/images/img2.jpg differ
diff --git a/public/images/img3.jpg b/public/images/img3.jpg
new file mode 100644
index 0000000..2c5d0d1
Binary files /dev/null and b/public/images/img3.jpg differ
diff --git a/public/images/img4.jpg b/public/images/img4.jpg
new file mode 100644
index 0000000..9f01f36
Binary files /dev/null and b/public/images/img4.jpg differ
diff --git a/public/images/img5.jpg b/public/images/img5.jpg
new file mode 100644
index 0000000..66914b5
Binary files /dev/null and b/public/images/img5.jpg differ
diff --git a/public/images/img6.jpg b/public/images/img6.jpg
new file mode 100644
index 0000000..4d22b3a
Binary files /dev/null and b/public/images/img6.jpg differ
diff --git a/public/images/img7.jpg b/public/images/img7.jpg
new file mode 100644
index 0000000..8a9b881
Binary files /dev/null and b/public/images/img7.jpg differ
diff --git a/public/images/img8.jpg b/public/images/img8.jpg
new file mode 100644
index 0000000..c8a67a8
Binary files /dev/null and b/public/images/img8.jpg differ
diff --git a/public/images/img9.jpg b/public/images/img9.jpg
new file mode 100644
index 0000000..d38583b
Binary files /dev/null and b/public/images/img9.jpg differ
diff --git a/public/index.html b/public/index.html
index 60c4323..57de908 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
+      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
+      crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/DummyData/FilterOptions.js b/src/DummyData/FilterOptions.js
new file mode 100644
index 0000000..eb387b5
--- /dev/null
+++ b/src/DummyData/FilterOptions.js
@@ -0,0 +1,40 @@
+const filterOptions1 = [
+  {
+    header: "Language",
+    options: [
+      { text: "English ", id: 1 },
+      { text: " Hindi", id: 2 },
+      { text: "Marathi", id: 3 },
+      { text: "Tamil", id: 4 },
+    ],
+  },
+  {
+    header: "Condition",
+    options: [
+      { text: "New ", id: 5 },
+      { text: " Old", id: 6 },
+    ],
+  },
+  {
+    header: "Format",
+    options: [
+      { text: "Audio ", id: 7 },
+      { text: " Hard Copy", id: 8 },
+      { text: "E-Book", id: 9 },
+    ],
+  },
+];
+
+const filterOptions2 = [
+  {
+    header: "Price - Range",
+    options: [
+      { text: "Under $200", id: 10 },
+      { text: "$200-$400", id: 11 },
+      { text: "$400-$600", id: 12 },
+      { text: "Above $600", id: 13 },
+    ],
+  },
+];
+
+export { filterOptions1, filterOptions2 };
diff --git a/src/DummyData/bookData.js b/src/DummyData/bookData.js
new file mode 100644
index 0000000..d39ea69
--- /dev/null
+++ b/src/DummyData/bookData.js
@@ -0,0 +1,79 @@
+const book_card = [
+  {
+    id: 1,
+    name: 'LIFE LOVE BOOKS ',
+    description: 'Love your life',
+    price: 450,
+    currency: '$',
+    img: './images/img1.jpg'
+  },
+  {
+    id: 2,
+    name: 'THINK STRAIGHT ',
+    description: 'How to think straight and avoid distractions',
+    price: 500,
+    currency: '$',
+    img: './images/img2.jpg'
+  },
+  {
+    id: 3,
+    name: 'THE 5 A.M. CLUB ',
+    description: 'Get up early and Elevate your life',
+    price: 350,
+    currency: '$',
+    img: './images/img3.jpg'
+  },
+  {
+    id: 4,
+    name: 'LIMITLESS ',
+    description: 'How to be LIMITLESS',
+    price: 600,
+    currency: '$',
+    img: './images/img4.jpg'
+  },
+  {
+    id: 5,
+    name: 'GMAT',
+    description: 'Get your best score',
+    price: 1000,
+    currency: '$',
+    img: './images/img5.jpg'
+  },
+  {
+    id: 6,
+    name: 'GRE',
+    description: 'Pass the test with high perentage',
+    price: 1500,
+    currency: '$',
+    img: './images/img6.jpg'
+  },
+  {
+    id: 7,
+    type: 3,
+    name: 'Kalki',
+    description: 'Kal Kyu Aaj Kyu nahi?',
+    price: 500,
+    currency: '$',
+    img: './images/img12.jpg'
+  },
+  {
+    id: 8,
+    type: 3,
+    name: 'PrernaDayak Katha ',
+    description: 'Ek katha',
+    price: 550,
+    currency: '$',
+    img: './images/img11.jpg'
+  },
+  {
+    id: 9,
+    type: 4,
+    name: 'Tamil1',
+    description: 'Be healthy , Be Fit',
+    price: 750,
+    currency: '$',
+    img: './images/img10.jpg'
+  }
+];
+
+export default book_card;
diff --git a/src/DummyData/cartData.js b/src/DummyData/cartData.js
new file mode 100644
index 0000000..3e1761c
--- /dev/null
+++ b/src/DummyData/cartData.js
@@ -0,0 +1,24 @@
+const items = [
+  {
+    title: 'LIFE LOVE BOOKS',
+    description: "Love your life , it has to offer a lot more than you expect",
+    stock: 'In Stock',
+    image: './images/img1.jpg',
+    price: '450',
+    quantity: 1
+  },
+  {
+    title: 'THINK STRAIGHT ',
+    description: "Think Straight and achieve whatever you want to",
+    stock: 'In Stock',
+    image: './images/img2.jpg',
+    price: '500',
+    quantity: 2
+  }
+];
+
+const itemsFixPrice = items.map((item) => item.price);
+
+export { itemsFixPrice };
+
+export default items;
diff --git a/src/components/Cart/AddressModal.js b/src/components/Cart/AddressModal.js
new file mode 100644
index 0000000..ec72f18
--- /dev/null
+++ b/src/components/Cart/AddressModal.js
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import { Button, Modal, Row, Col, Form } from 'react-bootstrap';
+import { Address } from './styledComponents';
+
+function AddressModal({ show, onHide }) {
+  return (
+    <Address>
+      <Modal size="lg" show={show}>
+        <Modal.Header closeButton onClick={onHide}>
+          <Modal.Title>Please enter your address</Modal.Title>
+        </Modal.Header>
+        <Form>
+          <Modal.Body>
+            <Row>
+              <Col>
+                <Form.Group controlId="First_Name">
+                  <Form.Label>First Name</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your First Name "
+                    required
+                  />
+                </Form.Group>
+              </Col>
+              <Col>
+                <Form.Group controlId="Last_Name">
+                  <Form.Label>Last Name</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your Last Name "
+                    required
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <Form.Group controlId="First_Name">
+                  <Form.Label>Email Address</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your Email Address"
+                    required
+                  />
+                </Form.Group>
+              </Col>
+              <Col>
+                <Form.Group controlId="Last_Name">
+                  <Form.Label>Phone Number</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your Phone Number"
+                    required
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <Form.Group controlId="First_Name">
+                  <Form.Label>Current Address</Form.Label>
+                  <Form.Control
+                    rows={3}
+                    as="textarea"
+                    placeholder="Your Current Address"
+                    required
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+          </Modal.Body>
+        </Form>
+        <Modal.Footer>
+          <Button className="closeButton" onClick={onHide} variant="dark">
+            Close
+          </Button>
+          <Button className="payButton" onClick={onHide} variant="dark">
+            Proceed to Pay
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </Address>
+  );
+}
+
+export default AddressModal;
diff --git a/src/components/Cart/CartItem.js b/src/components/Cart/CartItem.js
new file mode 100644
index 0000000..9674e82
--- /dev/null
+++ b/src/components/Cart/CartItem.js
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import NumberFormat from 'react-number-format';
+import { Item, ItemActions, ItemImage, ItemInfo } from './styledComponents';
+
+const CartItem = ({ index, item, changeItemQuantity, deleteItem }) => {
+  const { title, stock, price, quantity, image, description} = item;
+
+  return (
+    <Item>
+      <ItemImage>
+        <img className="img" src={image} alt="" />
+      </ItemImage>
+
+      <ItemInfo>
+        <div className="infoTitle">
+          <h2>{title}</h2>
+          <p>{description}</p>
+        </div>
+       
+
+        <ItemActions>
+          <div className="itemQuantity">
+            <select className = "Select"
+              value={quantity}
+              onChange={(event) => changeItemQuantity(event, index)}>
+              <option value="1">Qty: 1</option>
+              <option value="2">Qty: 2</option>
+              <option value="3">Qty: 3</option>
+              <option value="4">Qty: 4</option>
+              <option value="5">Qty: 5</option>
+              <option value="6">Qty: 6</option>
+              <option value="7">Qty: 7</option>
+              <option value="8">Qty: 8</option>
+              <option value="9">Qty: 9</option>
+            </select>
+          </div>
+          <div className="itemActionsDivider">|</div>
+          <i className = "fa-solid fa-trash itemDelete" onClick={deleteItem.bind(this, index)}>
+         
+          </i>
+        </ItemActions>
+      </ItemInfo>
+      <div className="Price">
+        <NumberFormat
+          value={price}
+          displayType={'text'}
+          thousandSeparator={true}
+          prefix={'$'}
+          decimalScale={2}
+        />
+      </div>
+    </Item>
+  );
+};
+
+export default CartItem;
diff --git a/src/components/Cart/CartItems.js b/src/components/Cart/CartItems.js
new file mode 100644
index 0000000..aea0f4a
--- /dev/null
+++ b/src/components/Cart/CartItems.js
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { v4 as uuidv4 } from 'uuid';
+import CartItem from './CartItem';
+import { Items } from './styledComponents';
+
+const CartItems = ({ items, setCartItems, fixedPrice }) => {
+  const changeItemQuantity = (event, index) => {
+    const newItems = [...items];
+    newItems[index].quantity = event.target.value;
+    newItems[index].price = fixedPrice[index] * newItems[index].quantity;
+    setCartItems(newItems);
+  };
+
+  const deleteItem = (indexToDelete) => {
+    const newItems = items.filter((item, index) => {
+      return index !== indexToDelete;
+    });
+    setCartItems(newItems);
+  };
+
+  return (
+    <Items>
+      <h1>Shopping Cart</h1>
+      <hr />
+      <div>
+        {items.map((item, index) => (
+          <CartItem
+            key={uuidv4()}
+            index={index}
+            item={item}
+            changeItemQuantity={changeItemQuantity}
+            deleteItem={deleteItem}
+          />
+        ))}
+      </div>
+    </Items>
+  );
+};
+
+export default CartItems;
diff --git a/src/components/Cart/CartTotal.js b/src/components/Cart/CartTotal.js
new file mode 100644
index 0000000..90c9556
--- /dev/null
+++ b/src/components/Cart/CartTotal.js
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import NumberFormat from 'react-number-format';
+import AddressModal from './AddressModal';
+import { ItemTotal } from './styledComponents';
+
+const CartTotal = ({ items }) => {
+  const [show, setShow] = useState(false);
+
+  const getTotalPrice = () => {
+    let totalPrice = 0;
+    items.map((item) => (totalPrice += item.price * item.quantity));
+    return totalPrice;
+  };
+
+  const getTotalTtems = () => {
+    let totalTtems = 0;
+    items.forEach((item) => {
+      totalTtems += parseInt(item.quantity);
+    });
+    return totalTtems;
+  };
+
+  const onClick = () => {
+    setShow(true);
+  };
+
+  const onHide = () => {
+    setShow(false);
+  };
+
+  return (
+    <>
+      <AddressModal show={show} onHide={onHide} />
+      <ItemTotal>
+        <h4>
+          Subtotal({getTotalTtems()} items):
+          <span className="itemTotal-price">
+            <NumberFormat
+              value={getTotalPrice()}
+              displayType={'text'}
+              thousandSeparator={true}
+              prefix={'$'}
+              decimalScale={2}
+            />
+          </span>
+        </h4>
+        <button onClick={onClick}>Proceed to checkout</button>
+      </ItemTotal>
+    </>
+  );
+};
+
+export default CartTotal;
diff --git a/src/components/Cart/index.js b/src/components/Cart/index.js
new file mode 100644
index 0000000..b320442
--- /dev/null
+++ b/src/components/Cart/index.js
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import items, { itemsFixPrice } from '../../DummyData/cartData';
+import { Footer } from '../common';
+import Header from '../common/header';
+import CartItems from './CartItems';
+import CartTotal from './CartTotal';
+import { CartMain } from './styledComponents';
+
+
+function Cart() {
+  const [cartItems, setCartItems] = useState(items);
+  const [fixedPrice, setFixedPrice] = useState(itemsFixPrice);
+  return (
+    <>
+    <Header />
+      <CartMain>
+      <CartItems
+        items={cartItems}
+        setCartItems={setCartItems}
+        fixedPrice={fixedPrice}
+      />
+      <CartTotal items={cartItems} />
+      </CartMain>
+      <Footer />
+    </>
+  );
+}
+
+export default Cart;
diff --git a/src/components/Cart/styledComponents.js b/src/components/Cart/styledComponents.js
new file mode 100644
index 0000000..66fe5fe
--- /dev/null
+++ b/src/components/Cart/styledComponents.js
@@ -0,0 +1,187 @@
+import styled from 'styled-components';
+
+const CartMain = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 14px 18px 0 18px;
+  align-items: flex-start;
+  @media (min-width: 992px) {
+    flex-direction: row;
+  }
+`;
+
+const Item = styled.div`
+  display: flex;
+  border-bottom: 1px solid #ddd;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  flex-direction: column;
+  @media (min-width: 992px) {
+    flex-direction: row;
+  }
+
+  .Price {
+    font-size: 18px;
+    font-weight: 700;
+    margin-left: 16px;
+    padding-top: 10px;
+    padding-top: 10px;
+    @media (min-width: 992px) {
+      padding-top: 0px;
+      padding-top: 0px;
+    }
+  }
+`;
+
+const ItemInfo = styled.div`
+  display: flex;
+  .infoTitle {
+    margin-left: 16px;
+    max-width: 250px;
+  }
+  .infoStock {
+    margin-top: 4px;
+    color: #007600;
+    margin-left: 16px;
+  }
+
+  @media (min-width: 992px) {
+    flex-grow: 1;
+  }
+`;
+
+const ItemActions = styled.div`
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+
+  .itemQuantity {
+    .Select {
+      background-color: #f2f2f2;
+      padding: 9px;
+      border-radius: 7px;
+      box-shadow: 0 5px 5px rgba(15, 17, 17, 0.15);
+      cursor: pointer;
+    }
+  }
+
+  .itemActionsDivider {
+    margin-left: 8px;
+    margin-right: 8px;
+    color: #dddddd;
+    font-weight: bold;
+  }
+
+  .itemDelete {
+    color: black;
+    cursor: pointer;
+  }
+`;
+
+const ItemImage = styled.div`
+  width: 180px;
+  height: 180px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  padding-bottom: 12px;
+  margin-right: 1px;
+  .img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+`;
+
+const Items = styled.div`
+  background-color: white;
+  flex: 0.9;
+  margin-right: 18px;
+  padding: 20px;
+  min-width: 80vw;
+  max-width: 80vw;
+
+  @media (min-width: 992px) {
+    min-width: auto;
+  }
+`;
+
+const ItemTotal = styled.div`
+  background-color: white;
+  padding: 20px;
+  padding-top: 0;
+  min-width: 80vw;
+  margin-right: 18px;
+  max-width: 80vw;
+
+  @media (min-width: 992px) {
+    background-color: white;
+    flex: 0.3;
+    padding: 20px;
+    min-width: 300px;
+    margin-top: 0;
+  }
+
+  h3 {
+    @media (min-width: 992px) {
+      margin-left: 0;
+    }
+  }
+
+  .itemTotal-price {
+    @media (min-width: 992px) {
+      margin-left: 8px;
+    }
+  }
+
+  button {
+    background-color: black;
+    transition: all 0.4s ease;
+    border-radius: 35px;
+    color: white;
+    font-size: 16px;
+    width: 280px;
+    border: 2px solid black;
+    padding: 4px 8px;
+    cursor: pointer;
+    margin-left: 16px;
+    text-align: left;
+    &: hover {
+      background-color: white;
+      color: black;
+    }
+    @media (min-width: 992px) {
+      margin-left: 0;
+      text-align: center;
+      width: 300px;
+    }
+  }
+`;
+
+const Address = styled.div`
+
+Modal{
+  Modal.Footer {
+.closeButton{
+  border-radius = 35px;
+  &:hover {
+    background-color: white;
+    color: black;
+  }
+}
+  }
+}
+
+
+`;
+
+export {
+  CartMain,
+  Item,
+  ItemInfo,
+  ItemActions,
+  ItemImage,
+  Items,
+  ItemTotal,
+  Address
+};
diff --git a/src/components/ProductListingPage/Body.js b/src/components/ProductListingPage/Body.js
new file mode 100644
index 0000000..94922b3
--- /dev/null
+++ b/src/components/ProductListingPage/Body.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import book_card from '../../DummyData/bookData';
+
+import {
+  Button,
+  Card,
+  CardHeader,
+  Content,
+  H2,
+  Image
+} from './styledComponents';
+
+const Body = () => {
+  const listItems = book_card.map((item) => (
+    <Card key={item.id}>
+      <div className="card_img">
+        <Image alt="img" src={item.img} />
+      </div>
+      <CardHeader>
+        <h1 color>{item.name}</h1>
+        <p>{item.description}</p>
+        <p className="price">
+          {item.price}
+          <span>{item.currency}</span>
+        </p>
+        <Button>Add to cart</Button>
+      </CardHeader>
+    </Card>
+  ));
+
+  return <Content>{listItems}</Content>;
+};
+
+export default Body;
diff --git a/src/components/ProductListingPage/Index.js b/src/components/ProductListingPage/Index.js
new file mode 100644
index 0000000..ba6d516
--- /dev/null
+++ b/src/components/ProductListingPage/Index.js
@@ -0,0 +1 @@
+export { default } from './ProductListingPage';
diff --git a/src/components/ProductListingPage/ProductListingPage.js b/src/components/ProductListingPage/ProductListingPage.js
new file mode 100644
index 0000000..0d93cd6
--- /dev/null
+++ b/src/components/ProductListingPage/ProductListingPage.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Footer } from '../common';
+import Header from '../common/header';
+import Body from './Body';
+import SideBar from './SideBar';
+import { Container, ProductListing } from './styledComponents';
+
+function ProductListingPage() {
+  return (
+    <>
+    <Header />
+      <ProductListing>
+        <SideBar />
+        <Container>
+          <Body />
+        </Container>
+      </ProductListing>
+      <Footer />
+    </>
+  );
+}
+
+export default ProductListingPage;
diff --git a/src/components/ProductListingPage/SideBar.js b/src/components/ProductListingPage/SideBar.js
new file mode 100644
index 0000000..0d92340
--- /dev/null
+++ b/src/components/ProductListingPage/SideBar.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { filterOptions1, filterOptions2 } from '../../DummyData/FilterOptions';
+
+import StarRating from '../common/StarRating/StarRating';
+
+import {
+  CheckBox,
+  Option,
+  Options,
+  Sidebar,
+  SidebarOptions
+} from './styledComponents';
+
+function SideBar(props) {
+  const [rating, setRating] = useState(0);
+
+  return (
+    <Sidebar>
+      <Option>
+        {filterOptions1.map((options) => (
+          <SidebarOptions>
+            <h2>{options.header}</h2>
+            {options.options.map((d) => (
+              <CheckBox>
+                <input type="checkbox"></input>
+                <span>
+                  <Options>{d.text}</Options>
+                </span>
+              </CheckBox>
+            ))}
+          </SidebarOptions>
+        ))}
+
+        <SidebarOptions>
+          <h2>Customer review</h2>
+          <StarRating rating={rating} onRating={(rate) => setRating(rate)} />
+        </SidebarOptions>
+
+        {filterOptions2.map((options) => (
+          <SidebarOptions>
+            <h2>{options.header}</h2>
+            {options.options.map((d) => (
+              <Options>{d.text}</Options>
+            ))}
+          </SidebarOptions>
+        ))}
+      </Option>
+    </Sidebar>
+  );
+}
+
+export default SideBar;
diff --git a/src/components/ProductListingPage/styledComponents.js b/src/components/ProductListingPage/styledComponents.js
new file mode 100644
index 0000000..7750025
--- /dev/null
+++ b/src/components/ProductListingPage/styledComponents.js
@@ -0,0 +1,135 @@
+import styled from 'styled-components';
+
+const ProductListing = styled.div`
+  display: Flex;
+`;
+
+const Image = styled.img`
+ height: 250px;
+ width: 190px;
+ margin-top: -5vw;
+  transform: scale(0.8);
+  transition: all 1s ease-in-out;
+  &: hover {
+    background-color: lightgrey;
+    transform: scale(1.1);
+    cursor: pointer;
+  }
+}
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex: 70%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 50px auto;
+  padding: 50px 0 0;
+  box-sizing: border-box;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const Card = styled.div`
+  padding: 10px;
+  width: 30%;
+  border-radius: 15px;
+  display: flex;
+
+  flex-direction: column;
+  position: relative;
+  justify-content: center;
+  text-align: center;
+  transform: scale(0.8);
+  transition: all 1s ease-in-out;
+  margin-bottom: 50px;
+  align-items: center;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 30px 50px 20px 50px;
+  box-sizing: border-box;
+  background-color: white;
+  flex-wrap: wrap;
+`;
+
+const CardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 25px 0;
+  align-items: center;
+`;
+
+const Button = styled.button`
+  width: 130px;
+  height: 35px;
+  font-size: 14px;
+  border-radius: 35px;
+  background-color: black;
+  cursor:pointer;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  position: relative;
+  &: hover {
+    background-color: white;
+    color: black;
+  }
+`;
+
+const Sidebar = styled.div`
+  display: flex;
+  flex: 30%;
+  color: #40394d;
+  flex-direction: column;
+  align-items: center;
+  background-color: #e3eafa;
+`;
+
+const SidebarOptions = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Option = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const CheckBox = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: -4px;
+`;
+
+const Options = styled.p`
+  color: #808080;
+  cursor: pointer;
+
+  &:hover {
+    color: #242526;
+  }
+`;
+
+export {
+  Image,
+  Content,
+  Card,
+  CardHeader,
+  Button,
+  Sidebar,
+  SidebarOptions,
+  CheckBox,
+  Options,
+  Container,
+  ProductListing,
+  Option
+};
diff --git a/src/components/Sample.json b/src/components/Sample.json
new file mode 100644
index 0000000..3417d43
--- /dev/null
+++ b/src/components/Sample.json
@@ -0,0 +1,3 @@
+{
+    "name" : "gagan"
+}
\ No newline at end of file
diff --git a/src/components/auth/index.js b/src/components/auth/index.js
new file mode 100644
index 0000000..07232da
--- /dev/null
+++ b/src/components/auth/index.js
@@ -0,0 +1 @@
+//import signin and signup
diff --git a/src/components/common/StarRating/StarRating.js b/src/components/common/StarRating/StarRating.js
new file mode 100644
index 0000000..ddf337d
--- /dev/null
+++ b/src/components/common/StarRating/StarRating.js
@@ -0,0 +1,56 @@
+import React, { useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const StarRating = ({ count, rating, color, onRating }) => {
+  const [hoverRating, setHoverRating] = useState(0);
+
+  const getColor = (index) => {
+    if (hoverRating >= index) {
+      return color.filled;
+    } else if (!hoverRating && rating >= index) {
+      return color.filled;
+    }
+    return color.unfilled;
+  };
+
+  const star = useMemo(() => {
+    return Array(count)
+      .fill(0)
+      .map((_, i) => i + 1)
+      .map((idx) => {
+        console.log(idx);
+        return (
+          <i
+            key={idx}
+            onMouseEnter={() => setHoverRating(idx)}
+            onMouseLeave={() => setHoverRating(0)}
+            style={{ color: getColor(idx), cursor: 'pointer' }}
+            className="fas fa-star"
+            onClick={() => onRating(idx)}></i>
+        );
+      });
+  }, [count, rating, hoverRating]);
+
+  return <div>{star}</div>;
+};
+
+StarRating.propTypes = {
+  count: PropTypes.number,
+  rating: PropTypes.number,
+  color: {
+    filled: PropTypes.string,
+    unfilled: PropTypes.string
+  },
+  onRating: PropTypes.func
+};
+
+StarRating.defaultProps = {
+  count: 5,
+  rating: 0,
+  color: {
+    filled: '#56504E',
+    unfilled: '#E0AC9D'
+  }
+};
+
+export default StarRating;
diff --git a/src/components/common/footer/styledComponents.js b/src/components/common/footer/styledComponents.js
index ae7bf1f..1cc10e0 100644
--- a/src/components/common/footer/styledComponents.js
+++ b/src/components/common/footer/styledComponents.js
@@ -6,7 +6,6 @@ export const FooterContainer = styled.div`
   align-items: center;
   flex-wrap: wrap;
   width: 100%;
-  box-sizing: border-box;
   height: 100vh;
   background-color: ${(props) => props.theme.colors.primary};
   color: ${(props) => props.theme.colors.secondary};
diff --git a/src/components/common/header/index.js b/src/components/common/header/index.js
index e7ae85c..3490c1b 100644
--- a/src/components/common/header/index.js
+++ b/src/components/common/header/index.js
@@ -8,8 +8,9 @@ import {
   HeaderRight,
   HamburgerContainer
 } from './styledComponents';
-import { SearchBar } from '..';
+
 import FeatherIcon from 'feather-icons-react';
+import SearchBar from '../search';
 
 const getHeaderRight = ({ profileName }) => (
   <HeaderRight>
@@ -45,4 +46,4 @@ function Header({ title = 'The BookTown', profileName = 'TP' }) {
 }
 
 Header.propTypes = {};
-export default Header;
+export default Header;
\ No newline at end of file
diff --git a/src/config/appTheme.js b/src/config/appTheme.js
index 22149ab..840d40d 100644
--- a/src/config/appTheme.js
+++ b/src/config/appTheme.js
@@ -68,7 +68,7 @@ const theme = {
       fontWeight: '400'
     }
   },
-  size: {
+ size: {
     radius: '16px',
     xsm: '5px',
     sm: '12px',
@@ -84,6 +84,9 @@ const theme = {
     desktopL: '1440px',
     desktopXL: '1680px'
   }
-};
+ 
+}
+  
+
 
 export default theme;
diff --git a/src/router/index.js b/src/router/index.js
index 7aca42e..1d76274 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,7 +9,7 @@ const TheBookTownApplication = () => (
         <ProtectiveRouter
           path={route.path}
           component={route.component}
-          {...route}
+          route={route}
         />
       ) : (
         <Route
diff --git a/src/router/routes.js b/src/router/routes.js
index e61f3cd..b329c98 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,6 +1,10 @@
+import Cart from '../components/Cart';
 import HomeComponent from '../components/home/homeComponent';
+import ProductListingPage from '../components/ProductListingPage';
+
 import SignIn from '../components/auth/signin/signinComponent';
 import SignUp from '../components/auth/signup/signupComponent';
+
 const routes = [
   {
     path: '/',
@@ -13,7 +17,7 @@ const routes = [
   },
   {
     path: '/products-listing',
-    component: <div> product </div>,
+    component: ProductListingPage,
     meta: { authorizedRoles: [] },
     name: 'product-listing',
     key: 'product',
@@ -21,7 +25,7 @@ const routes = [
   },
   {
     path: '/cart',
-    component: <div> cart </div>,
+    component: Cart,
     meta: { authorizedRoles: [] },
     name: 'product-listing',
     key: 'cart',
diff --git a/src/sample.json b/src/sample.json
new file mode 100644
index 0000000..3417d43
--- /dev/null
+++ b/src/sample.json
@@ -0,0 +1,3 @@
+{
+    "name" : "gagan"
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 04a58ba..d69120d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1873,7 +1873,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.15.4", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@@ -2663,6 +2663,11 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.10.1":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -2716,6 +2721,13 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
+"@react-aria/ssr@^3.0.1":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.1.0.tgz#b7163e6224725c30121932a8d1422ef91d1fab22"
+  integrity sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
 "@reduxjs/toolkit@^1.6.2":
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.6.2.tgz#2f2b5365df77dd6697da28fdf44f33501ed9ba37"
@@ -2726,6 +2738,41 @@
     redux-thunk "^2.3.0"
     reselect "^4.0.0"
 
+"@restart/context@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@restart/context/-/context-2.1.4.tgz#a99d87c299a34c28bd85bb489cb07bfd23149c02"
+  integrity sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==
+
+"@restart/hooks@^0.3.26":
+  version "0.3.27"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.3.27.tgz#91f356d66d4699a8cd8b3d008402708b6a9dc505"
+  integrity sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==
+  dependencies:
+    dequal "^2.0.2"
+
+"@restart/hooks@^0.4.0":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.1.tgz#716b1fd7a67650a6d4ed441b5d704b4f73ca2612"
+  integrity sha512-87UMGZcFwbj0Gr+8eEBAzL6H8xF5pMwq/S3LWeFK9cg4+lTqLFMsiVQFT4ncMJzqgpdD7T6ktF8PsEHeN2O+MQ==
+  dependencies:
+    dequal "^2.0.2"
+
+"@restart/ui@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-0.2.3.tgz#8b68aa2ca07af799a65b288cc3c6039915c46a4c"
+  integrity sha512-FDhtjIR9QvUfMwvFsgVurRA1qdYxM0F0S07acywjG7gNI2YmQo78rtCYIe553V/pyBjEjaKAg3fzBFCocFTqyQ==
+  dependencies:
+    "@babel/runtime" "^7.13.16"
+    "@popperjs/core" "^2.10.1"
+    "@react-aria/ssr" "^3.0.1"
+    "@restart/hooks" "^0.4.0"
+    "@types/warning" "^3.0.0"
+    dequal "^2.0.2"
+    dom-helpers "^5.2.0"
+    prop-types "^15.7.2"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -3012,6 +3059,11 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
   integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
 
+"@types/invariant@^2.2.33":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -3089,7 +3141,7 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.1.tgz#374e31645d58cb18a07b3ecd8e9dede4deb2cccd"
   integrity sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.3":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
@@ -3109,6 +3161,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-transition-group@^4.4.1":
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
+  integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.34"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.34.tgz#797b66d359b692e3f19991b6b07e4b0c706c0102"
@@ -3118,6 +3177,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@>=16.14.8", "@types/react@>=16.9.11":
+  version "17.0.35"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.35.tgz#217164cf830267d56cd1aec09dcf25a541eedd4c"
+  integrity sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -3159,6 +3227,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
+
 "@types/webpack-sources@*":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
@@ -4187,6 +4260,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4645,6 +4723,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -5448,6 +5531,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -5559,6 +5647,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -7302,6 +7398,13 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -8546,7 +8649,7 @@ long@^4.0.0:
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
   integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
 
-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -10423,6 +10526,14 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
+prop-types-extra@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
+  integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
+  dependencies:
+    react-is "^16.3.2"
+    warning "^4.0.0"
+
 prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -10623,6 +10734,29 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-bootstrap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.0.2.tgz#ec3492513066038bcf612ab8fcab46f88d254ab9"
+  integrity sha512-QuMqJ+WJmd6dUyOys6OF3nr6T/FjUVAoEMbSjsFrwVufJtvMox0SU1Dvz/cDID+Dl6Rz2RLcJzyqkdl+DEK2Gg==
+  dependencies:
+    "@babel/runtime" "^7.14.0"
+    "@restart/context" "^2.1.4"
+    "@restart/hooks" "^0.3.26"
+    "@restart/ui" "^0.2.3"
+    "@types/invariant" "^2.2.33"
+    "@types/prop-types" "^15.7.3"
+    "@types/react" ">=16.14.8"
+    "@types/react-transition-group" "^4.4.1"
+    "@types/warning" "^3.0.0"
+    classnames "^2.3.1"
+    dom-helpers "^5.2.1"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    prop-types-extra "^1.1.0"
+    react-transition-group "^4.4.1"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"
@@ -10667,7 +10801,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10682,6 +10816,18 @@ react-is@^17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-number-format@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.8.0.tgz#2ec5efbe7f45c4b1b8951d34774f30e4c69040a4"
+  integrity sha512-oGGiQpqzvKTR5PD2/AJbyUsci8jyupaoKxpuSPevjpWHMhFkUtmo390t+EIpJOgnuAHZogLu6PHiXgb/OXETKA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-redux@^7.2.6:
   version "7.2.6"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.6.tgz#49633a24fe552b5f9caf58feb8a138936ddfe9aa"
@@ -10794,6 +10940,16 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-transition-group@^4.4.1:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -12491,6 +12647,16 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -12759,6 +12925,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^4.0.0, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"