diff --git a/package.json b/package.json
index f208558..c6b3b04 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,12 @@
     "node": "~14.17.0"
   },
   "dependencies": {
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@mui/icons-material": "^5.1.1",
+    "@mui/material": "^5.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
diff --git a/public/staking1.png b/public/staking1.png
new file mode 100644
index 0000000..80f7af8
Binary files /dev/null and b/public/staking1.png differ
diff --git a/public/staking2.png b/public/staking2.png
new file mode 100644
index 0000000..be62a6a
Binary files /dev/null and b/public/staking2.png differ
diff --git a/public/validator-circle.png b/public/validator-circle.png
new file mode 100644
index 0000000..ca64d24
Binary files /dev/null and b/public/validator-circle.png differ
diff --git a/src/App.js b/src/App.js
index 61ad71f..b61a5b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { Header } from "./components/Header";
+import { Banner } from "./components/Banner";
 import { Cards } from "./components/Cards";
 import SmoothScroll from "smooth-scroll";
 import "./App.css";
@@ -15,6 +16,7 @@ import { TEXT_BROWN } from "./constants/colors";
 import clsx from "clsx";
 import Footer from "./components/Footer";
 import Roadmap from "./components/Roadmap";
+import Validator from "./components/Validator";
 
 export const scroll = new SmoothScroll('a[href*="#"]', {
   speed: 1000,
@@ -100,6 +102,7 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header />
+      <Banner />
       <div
         className={
           isXsScreenAndSmaller
@@ -149,6 +152,7 @@ const App = () => {
           <Cards />
         </div>
       </div>
+      <Validator />
       <Roadmap />
       <Footer />
     </ThemeProvider>
diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
new file mode 100644
index 0000000..886c7c6
--- /dev/null
+++ b/src/components/Banner.jsx
@@ -0,0 +1,65 @@
+import React from "react";
+import Paper from "@material-ui/core/Paper";
+import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
+import { makeStyles } from "@material-ui/core/styles";
+import { createTheme } from "@material-ui/core/styles";
+import { ThemeProvider } from "@material-ui/core/styles";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#FFFFFF",
+    },
+    secondary: {
+      main: "#000000",
+      fontSize: "2rem",
+    },
+  },
+});
+
+const useStyles = makeStyles((theme) => ({
+  "@global": {},
+  paper: {
+    textAlign: "center",
+    padding: "10px",
+    color: "white",
+    fontWeight: "600",
+    fontSize: "1.25em",
+    background: "linear-gradient(89.55deg, #71EA9E 0%, #7E3EB0 100%)",
+    lineHeight: "42px",
+  },
+  icon: {
+    paddingTop: "8px",
+    transform: "scale(1.5)",
+    "&:hover": {
+      color: "black",
+    },
+  },
+}));
+
+export function Banner() {
+  const classes = useStyles();
+  return (
+    <ThemeProvider theme={theme}>
+      {/* <Box
+        sx={{
+          p: 2,
+          bgcolor: "background.default",
+          display: "grid",
+          gridTemplateColumns: { md: "1fr 1fr" },
+          gap: 2,
+        }}
+      > */}{" "}
+      <Paper variant="outlined" className={classes.paper}>
+        We’re the first decentralized organisation to launch a validator node on
+        Solana.
+        <br />
+        Stake with us and earn up to 7% APY on your SOL!{" "}
+        <ArrowRightAltIcon
+          className={classes.icon}
+          onClick={(event) => (window.location.href = "http://google.com")}
+        />
+      </Paper>
+    </ThemeProvider>
+  );
+}
diff --git a/src/components/Faq.jsx b/src/components/Faq.jsx
new file mode 100644
index 0000000..c70f068
--- /dev/null
+++ b/src/components/Faq.jsx
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import RemoveIcon from '@mui/icons-material/Remove';
+import MuiAccordion from '@mui/material/Accordion';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+
+const Accordion = styled((props) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props) => (
+  <MuiAccordionSummary
+  disableGutters
+    expandIcon={<RemoveIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor: 'black',
+  color: 'white',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+//   borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function Faq() {
+  const [expanded, setExpanded] = React.useState('panel1');
+
+  const handleChange = (panel) => (event, newExpanded) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+
+  return (
+    <div>
+      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
+          <Typography>Collapsible Group Item #1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+        <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
+          <Typography>Collapsible Group Item #2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+        <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
+          <Typography>Collapsible Group Item #3</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+}
diff --git a/src/components/Roadmap.jsx b/src/components/Roadmap.jsx
index 52b6764..0a908f7 100644
--- a/src/components/Roadmap.jsx
+++ b/src/components/Roadmap.jsx
@@ -151,6 +151,13 @@ export default function Roadmap(props) {
       body: "",
       isActive: false,
     },
+    {
+      emoji: "⛓️",
+      emojiAria: "chains",
+      title: "Launch of DAO Validator",
+      body: "",
+      isActive: true,
+    },
     {
       emoji: "✈️",
       emojiAria: "airplane",
diff --git a/src/components/Validator.jsx b/src/components/Validator.jsx
new file mode 100644
index 0000000..390f2a1
--- /dev/null
+++ b/src/components/Validator.jsx
@@ -0,0 +1,333 @@
+import React from "react";
+import {
+  Grid,
+  GridItem,
+  Item,
+  Container,
+  createTheme,
+  makeStyles,
+  ThemeProvider,
+  Typography,
+  Box,
+  useMediaQuery,
+} from "@material-ui/core";
+import {
+  BANANA_ICON_YELLOW,
+  BUTTON_YELLOW,
+  LIGHT_GREY,
+  LIGHT_YELLOW,
+  TEXT_BROWN,
+  TEXT_GREY,
+  TWITTER_BLUE,
+} from "../constants/colors";
+import Faq from './Faq';
+import Timeline from "@material-ui/lab/Timeline";
+import TimelineItem from "@material-ui/lab/TimelineItem";
+import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
+import TimelineConnector from "@material-ui/lab/TimelineConnector";
+import TimelineContent from "@material-ui/lab/TimelineContent";
+import TimelineDot from "@material-ui/lab/TimelineDot";
+import clsx from "clsx";
+import { TimelineOppositeContent } from "@material-ui/lab";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: TWITTER_BLUE,
+    },
+    secondary: {
+      main: BUTTON_YELLOW,
+    },
+  },
+});
+
+const useStyles = makeStyles((theme) => ({
+  card: {
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+    paddingLeft: theme.spacing(6),
+    paddingRight: theme.spacing(6),
+    "&.small": {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+    },
+    "&.extra-small": {
+      paddingLeft: theme.spacing(2),
+      paddingRight: 0,
+    },
+  },
+  cardTitle: {
+    fontFamily: ["Poppins", "Open Sans", "serif"].join(","),
+    fontSize: 24,
+    fontWeight: 600,
+    color: TEXT_GREY,
+    textAlign: "left",
+    "&.active": {
+      color: TEXT_BROWN,
+    },
+  },
+  cardBody: {
+    fontFamily: "Open Sans",
+    fontSize: 18,
+    textAlign: "left",
+    color: TEXT_GREY,
+    marginTop: theme.spacing(2),
+    "&.active": {
+      color: TEXT_BROWN,
+    },
+  },
+  connector: {
+    backgroundColor: "#DDD",
+    "&.active": {
+      backgroundColor: BANANA_ICON_YELLOW,
+    },
+  },
+  dot: {
+    backgroundColor: "#DDD",
+    "&.active": {
+      backgroundColor: BANANA_ICON_YELLOW,
+    },
+    "&.first": {
+      marginTop: theme.spacing(5),
+    },
+    "&.last": {
+      marginBottom: theme.spacing(8),
+    },
+  },
+  introContainer: {
+    paddingTop: theme.spacing(10),
+    paddingBottom: theme.spacing(5),
+  },
+  paper: {
+    padding: theme.spacing(3),
+    backgroundColor: LIGHT_GREY,
+    "&.active": {
+      backgroundColor: LIGHT_YELLOW,
+    },
+  },
+  sectionTitle: {
+    fontSize: 32,
+    fontWeight: "600",
+  },
+  sectionBody: {
+    fontSize: 18,
+    fontFamily: "Open Sans",
+    marginTop: theme.spacing(2.5),
+  },
+  timelineContainer: {
+    paddingBottom: theme.spacing(10),
+  },
+  root: {
+    backgroundColor: "#000000",
+    width: "100%",
+    color: "white",
+    paddingTop: "100px",
+  },
+  verticallyCenterContent: {
+    display: "none",
+  },
+  validatorImg: {
+    width: "60%",
+  },
+  stakingImg: {
+    width: "100%",
+  },
+  title: {
+    fontSize: "3.25em",
+  },
+  info: {
+    fontSize: "1.25em",
+  },
+}));
+
+export default function Validator(props) {
+  const classes = useStyles();
+  const isSmScreenAndSmaller = useMediaQuery(theme.breakpoints.down("sm"));
+  const isXsScreenAndSmaller = useMediaQuery(theme.breakpoints.down("xs"));
+
+  const timelineCards = [
+    {
+      emoji: "🎉",
+      emojiAria: "celebration",
+      title: "Launch MonkeDAO",
+      body: "",
+      isActive: true,
+    },
+    {
+      emoji: "🤝",
+      emojiAria: "handshake",
+      title: "Community Building",
+      body: "",
+      isActive: true,
+    },
+    {
+      emoji: "🏦",
+      emojiAria: "bank",
+      title: "Launch DAO Treasury",
+      body: "",
+      isActive: false,
+    },
+    {
+      emoji: "✈️",
+      emojiAria: "airplane",
+      title: "Airdrop MonkeDAO Commemorative Tokens",
+      body: "We will take a snapshot of all verified monkes and airdrop a unique NFT, created by our talented in-house designers.",
+      isActive: false,
+    },
+    {
+      emoji: "🐒️",
+      emojiAria: "monkey",
+      title: "Launch Monke Pet",
+      body: "A unique NFT collection that provide benefits when held in the same wallet as a Gen2 Monke.",
+      isActive: false,
+    },
+    {
+      emoji: "⚖️",
+      emojiAria: "law",
+      title: "Introduction of DAO Governance Mechanism",
+      body: "",
+      isActive: false,
+    },
+    {
+      emoji: "👕",
+      emojiAria: "shirt",
+      title: "Monke Merchandise",
+      body: "",
+      isActive: false,
+    },
+    {
+      emoji: "📊",
+      emojiAria: "bar-chart",
+      title: "Launch MonkeTools",
+      body: "A series of useful tools that will automate essential processes for anyone interacting with the Solana ecosystem.",
+      isActive: false,
+    },
+    {
+      emoji: "🏘",
+      emojiAria: "houses",
+      title: "Launch MonkeDAO Village",
+      body: "More TBA.",
+      isActive: false,
+    },
+    {
+      emoji: "🙊",
+      emojiAria: "monkey",
+      title: "Fractionalization of selected Monkes to increase ownership",
+      body: "More TBA.",
+      isActive: false,
+    },
+
+    {
+      emoji: "📈",
+      emojiAria: "line-graph",
+      title: "Launch MonkeDAO Capital",
+      body: "More TBA.",
+      isActive: false,
+    },
+  ];
+  return (
+    <ThemeProvider theme={theme}>
+      <Box className={classes.root}>
+      <Grid
+        container
+        className={classes.root}
+        alignItems="center"
+        justifyContent="center"
+        direction="row"
+      >
+        <Grid item xs={3} align="center">
+          <img
+            alt="validator"
+            src="validator-circle.png"
+            className={classes.validatorImg}
+          />
+        </Grid>
+        <Grid item xs={3} align="left">
+          <h1 className={classes.title}>Our Validator</h1>
+          <p className={classes.info}>
+            It's official, we're now the first DAO to operate a node on the
+            Solana blockchain! We set out to generate value for our members and
+            the Solana community as a whole while being stewards of the Solana
+            ecosystem. We're hitting our stride and this is just the beginning.
+          </p>
+          <p className={classes.info}>
+            Staking for this pool is open to everyone! Commission rates help
+            fund the MonkeDAO and all its initiatives which aim to push the
+            Solana ecosystem forward.
+          </p>
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        className={classes.root}
+        alignItems="center"
+        justifyContent="center"
+        direction="row"
+      >
+        <Grid item xs={3} align="center">
+          <h1 className={classes.title}>How to stake with MonkeDAO</h1>
+          <p className={classes.info}>Any questions? Try our Staking FAQ.</p>
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        spacing={6}
+        className={classes.root}
+        alignItems="center"
+        justifyContent="center"
+        direction="row"
+      >
+        <Grid item xs={4} align="center">
+          <img
+            alt="staking"
+            src="staking1.png"
+            className={classes.stakingImg}
+          />
+        </Grid>
+        <Grid item xs={4} align="center">
+          <img
+            alt="staking"
+            src="staking2.png"
+            className={classes.stakingImg}
+          />
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        spacing={6}
+        className={classes.root}
+        alignItems="center"
+        justifyContent="center"
+        direction="row"
+      >
+        <Grid item xs={4} align="center">
+          <img
+            alt="staking"
+            src="staking1.png"
+            className={classes.stakingImg}
+          />
+        </Grid>
+        <Grid item xs={4} align="center">
+          <img
+            alt="staking"
+            src="staking2.png"
+            className={classes.stakingImg}
+          />
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        className={classes.root}
+        alignItems="center"
+        justifyContent="center"
+        direction="row"
+      >
+        <Grid item xs={6} align="center">
+          <h1 className={classes.title}>Staking FAQ</h1>
+          <Faq />
+        </Grid>
+      </Grid>
+      </Box>
+    </ThemeProvider>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
index bd09b9c..496b832 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1105,6 +1105,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
+  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz"
@@ -1161,11 +1168,107 @@
   resolved "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@emotion/babel-plugin@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
+  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
+"@emotion/cache@^11.6.0":
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.6.0.tgz#65fbdbbe4382f1991d8b20853c38e63ecccec9a1"
+  integrity sha512-ElbsWY1KMwEowkv42vGo0UPuLgtPYfIs9BxxVrmvsaJVvktknsHYYlx5NQ5g6zLDcOTyamlDc7FkRg2TAcQDKQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.10"
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/is-prop-valid@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz#cbd843d409dfaad90f9404e7c0404c55eae8c134"
+  integrity sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.6.0":
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.6.0.tgz#61fcb95c1e01255734c2c721cb9beabcf521eb0f"
+  integrity sha512-23MnRZFBN9+D1lHXC5pD6z4X9yhPxxtHr6f+iTGz6Fv6Rda0GdefPrsHL7otsEf+//7uqCdT5QtHeRxHCERzuw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.6.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@emotion/styled@^11.6.0":
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.6.0.tgz#9230d1a7bcb2ebf83c6a579f4c80e0664132d81d"
+  integrity sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.3.0"
+    "@emotion/is-prop-valid" "^1.1.1"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.0.0"
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^0.3.0":
   version "0.3.0"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz"
@@ -1487,6 +1590,92 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@mui/base@5.0.0-alpha.55":
+  version "5.0.0-alpha.55"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.55.tgz#564d6c9374b4cfe86a4493512356047636076d4f"
+  integrity sha512-caPa04xwZF5Gv7qkto32xRBwubNgkjbXQngqp8PN10DQ/XcLtoe4PqrSPjwWBH0iNUZSRDf2HPP71tIU7bdR7Q==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@emotion/is-prop-valid" "^1.1.1"
+    "@mui/utils" "^5.1.1"
+    "@popperjs/core" "^2.4.4"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+"@mui/icons-material@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.1.1.tgz#f3f44275855e924cdf5e379da87299d633854b53"
+  integrity sha512-tLM1/QhVAgcetEscZa8BlM1IRRaoNxjhFzQOIs5wAuuVhHSrB8zZCKugpZVIZ1nKyQqLgVEa9TbtWpo5jLrnRQ==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+
+"@mui/material@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.1.1.tgz#72ba1ce8c253697df96e24cd1f555d5c2569376d"
+  integrity sha512-3mhuKlWnTa1r5cJ8mV66NXXmOB6Ck564oq4X8Ai0CeHqj0f6xCBHOgWXQtX6Cc8Yhf81MJkaN92AECVUpUHqLQ==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@mui/base" "5.0.0-alpha.55"
+    "@mui/system" "^5.1.1"
+    "@mui/types" "^7.1.0"
+    "@mui/utils" "^5.1.1"
+    "@types/react-transition-group" "^4.4.4"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    hoist-non-react-statics "^3.3.2"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+
+"@mui/private-theming@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.1.1.tgz#3e9e91d81a8e69dcb5c4499236e26d684cd4a919"
+  integrity sha512-h+MGzBVSH7GgXou4aIraJhakygTYIWvvxvTm81Y6RmwRcrzv8szDQeRDiM7iOVjqsS33dXfMkTi7csRCgeErsg==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@mui/utils" "^5.1.1"
+    prop-types "^15.7.2"
+
+"@mui/styled-engine@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.1.1.tgz#eb6a54546e65527786ab40aef9e2f20cc2fa00f5"
+  integrity sha512-vThhmTezPjBcn6CEeVuFqB3wgANnxHgYXn0wsr+OIgevkgSHeRfVn6mpSa66oTFGb+paPtH4ASqeUvL5Sscg4w==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@emotion/cache" "^11.6.0"
+    prop-types "^15.7.2"
+
+"@mui/system@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.1.1.tgz#64bf13c9137fdd858834f3921ded276b6b9767c4"
+  integrity sha512-RWaM/7wAvSOX39r13in3KrLXWsd0cSkk1P/MOCW2eVY13MJIAuDUl5ZoF1uos9kWWJJge+lE77XWmYqXYrxPLw==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@mui/private-theming" "^5.1.1"
+    "@mui/styled-engine" "^5.1.1"
+    "@mui/types" "^7.1.0"
+    "@mui/utils" "^5.1.1"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    prop-types "^15.7.2"
+
+"@mui/types@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.0.tgz#5ed928c5a41cfbf9a4be82ea3bbdc47bcc9610d5"
+  integrity sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==
+
+"@mui/utils@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.1.1.tgz#3cb2c049731dacb3830336bc8011141e84434aad"
+  integrity sha512-rqakHf0IMaasDo1EcYqkx13VTxeoQoGf/3RxQuazQFKzF7d2uylFwNyb6bnUJGNe2/akiIMk/qiub58sYrwxVQ==
+  dependencies:
+    "@babel/runtime" "^7.16.3"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz"
@@ -1528,6 +1717,11 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.4.4":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz"
@@ -1868,7 +2062,7 @@
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.1.tgz"
   integrity sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw==
 
-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.4":
   version "15.7.4"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
@@ -1878,6 +2072,13 @@
   resolved "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
   version "4.4.2"
   resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz"
@@ -1885,6 +2086,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.4":
+  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.19"
   resolved "https://registry.npmjs.org/@types/react/-/react-17.0.19.tgz"
@@ -2700,7 +2908,7 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-macros@2.8.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.6.1:
   version "2.8.0"
   resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz"
   integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -3574,6 +3782,13 @@ convert-source-map@^0.3.3:
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz"
   integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=
 
+convert-source-map@^1.5.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
@@ -3972,6 +4187,11 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+csstype@^3.0.9:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
+  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
@@ -4550,6 +4770,11 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^1.14.1:
   version "1.14.3"
   resolved "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz"
@@ -5111,6 +5336,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz"
@@ -5569,7 +5799,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9247,7 +9477,7 @@ react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0":
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -9328,7 +9558,7 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-transition-group@^4.4.0:
+react-transition-group@^4.4.0, react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -10199,7 +10429,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -10537,6 +10767,11 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis@^4.0.10, stylis@^4.0.3:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"