diff --git a/apollo/ui/BUILD.bazel b/apollo/ui/BUILD.bazel
index 19c75ace..b5738d1d 100644
--- a/apollo/ui/BUILD.bazel
+++ b/apollo/ui/BUILD.bazel
@@ -26,10 +26,13 @@ resf_frontend(
         "//common/mui",
         "//common/ui",
         "//tailwind:css",
-        "@npm//@mui/icons-material",
-        "@npm//@mui/material",
-        "@npm//@mui/styles",
-        "@npm//@mui/x-data-grid",
+        "@npm//@chakra-ui/react",
+        "@npm//@chakra-ui/icons",
+        "@npm//@emotion/unitless",
+        "@npm//framer-motion",
+        "@npm//framesync",
+        "@npm//popmotion",
+        "@npm//style-value-types",
         "@npm//await-to-js",
         "@npm//react",
         "@npm//react-dom",
diff --git a/apollo/ui/src/components/Overview.tsx b/apollo/ui/src/components/Overview.tsx
index e6797956..6c36467d 100644
--- a/apollo/ui/src/components/Overview.tsx
+++ b/apollo/ui/src/components/Overview.tsx
@@ -30,180 +30,468 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-import React from 'react';
 import {
-  DataGrid,
-  GridColDef,
-  GridColumns,
-  GridRowsProp,
-} from '@mui/x-data-grid';
+  AddIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ChevronDownIcon,
+  MinusIcon,
+  SearchIcon,
+} from '@chakra-ui/icons';
 import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
+  ButtonGroup,
   FormControl,
-  InputLabel,
-  MenuItem,
+  FormLabel,
+  HStack,
+  IconButton,
+  Input,
+  InputGroup,
+  InputLeftElement,
   Select,
-  CircularProgress,
-  TextField,
-  Container,
-  Typography,
-  Divider,
-} from '@mui/material';
+  Spinner,
+  Stack,
+  Table,
+  TableColumnHeaderProps,
+  TableContainer,
+  Tbody,
+  Td,
+  Text,
+  Th,
+  Thead,
+  Tr,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import {
+  severityToBadge,
+  severityToText,
+  typeToBadge,
+  typeToText,
+} from 'apollo/ui/src/enumToText';
+import {
+  ListAdvisoriesFiltersSeverityEnum,
+  ListAdvisoriesFiltersTypeEnum,
+} from 'bazel-bin/apollo/proto/v1/client_typescript';
+import {
+  AdvisorySeverity,
+  V1Advisory,
+  V1AdvisoryType,
+} from 'bazel-bin/apollo/proto/v1/client_typescript/models';
+import { reqap } from 'common/ui/reqap';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import {
-  V1Advisory,
-  V1ListAdvisoriesResponse,
-} from 'bazel-bin/apollo/proto/v1/client_typescript/models';
 import { api } from '../api';
-import { reqap } from 'common/ui/reqap';
-import { severityToBadge, typeToBadge } from 'apollo/ui/src/enumToText';
+import { COLOR_RESF_GREEN } from '../styles';
 
 export const Overview = () => {
-  // When advisories is set to null that means an error has occurred
-  // Undefined means loading
-  const [advisories, setAdvisories] = React.useState<
-    V1Advisory[] | undefined | null
-  >();
-  const [pageSize, setPageSize] = React.useState(25);
-  const [page, setPage] = React.useState(0);
-  const [total, setTotal] = React.useState(0);
-  const [filterSynopsis, setFilterSynopsis] = React.useState<
-    string | undefined
-  >();
-  const [filterCve, setFilterCve] = React.useState<string | undefined>();
+  const inputBackground = useColorModeValue('white', 'gray.800');
 
-  React.useEffect(() => {
-      const timer = setTimeout(() => {
-        (async () => {
-          let err, res: void | V1ListAdvisoriesResponse | undefined;
-          [err, res] = await reqap(() =>
-            api.listAdvisories({
-              page,
-              limit: pageSize,
-              filtersSynopsis: filterSynopsis,
-              filtersCve: filterCve,
-            })
-          );
-          if (err || !res) {
-            setAdvisories(null);
-            return;
-          }
+  const [advisories, setAdvisories] = useState<V1Advisory[]>();
+  const [lastUpdated, setLastUpdated] = useState<Date>();
+  const [total, setTotal] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
 
-          if (res) {
-            setAdvisories(res.advisories);
-            setTotal(parseInt(res.total || '0'));
-          }
-        })().then();
-      }, 500);
+  // Request State
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(25);
+  const [filtersKeyword, setFiltersKeyword] = useState<string>();
+  const [filterBefore, setFilterBefore] = useState<Date>();
+  const [filterAfter, setFilterAfter] = useState<Date>();
+  const [filtersType, setFiltersType] =
+    useState<keyof typeof ListAdvisoriesFiltersTypeEnum>();
+  const [filtersSeverity, setFiltersSeverity] =
+    useState<keyof typeof ListAdvisoriesFiltersSeverityEnum>();
 
-      return () => clearTimeout(timer);
-  }, [pageSize, page, filterSynopsis, filterCve]);
+  useEffect(() => {
+    const fetch = async () => {
+      setIsLoading(true);
+      const [err, res] = await reqap(() =>
+        api.listAdvisories({
+          page,
+          limit: pageSize,
+          filtersKeyword,
+          filtersBefore: filterBefore,
+          filtersAfter: filterAfter,
+          filtersSeverity: filtersSeverity
+            ? ListAdvisoriesFiltersSeverityEnum[filtersSeverity]
+            : undefined,
+          filtersType: filtersType
+            ? ListAdvisoriesFiltersTypeEnum[filtersType]
+            : undefined,
+        })
+      );
 
-  const columns: GridColDef[] = [
-    {
-      field: 'id',
-      headerName: 'Advisory',
-      width: 150,
-      sortable: false,
-      renderCell: (params) => (
-        <Link
-          className="no-underline text-peridot-primary visited:text-purple-500"
-          to={`/${params.value}`}
-        >
-          {params.value}
-        </Link>
-      ),
-    },
-    {
-      field: 'synopsis',
-      headerName: 'Synopsis',
-      width: 450,
-      sortable: false,
-    },
-    {
-      field: 'severity',
-      headerName: 'Severity',
-      width: 150,
-      sortable: false,
-      renderCell: (params) => severityToBadge(params.value, 'small'),
-    },
-    {
-      field: 'products',
-      headerName: 'Products',
-      width: 450,
-      sortable: false,
-    },
-    {
-      field: 'publish_date',
-      headerName: 'Publish date',
-      width: 170,
-      sortable: false,
-    },
-  ];
+      setIsLoading(false);
+
+      if (err || !res) {
+        setIsError(true);
+        setAdvisories(undefined);
+        return;
+      }
+
+      setIsError(false);
+
+      if (res) {
+        setAdvisories(res.advisories);
+        setLastUpdated(res.lastUpdated);
+        setTotal(parseInt(res.total || '0'));
+      }
+    };
+
+    const timer = setTimeout(() => fetch(), 500);
+
+    return () => clearTimeout(timer);
+  }, [
+    pageSize,
+    page,
+    filtersKeyword,
+    filterBefore,
+    filterAfter,
+    filtersSeverity,
+    filtersType,
+  ]);
+
+  // TODO: Figure out why sticky isn't sticking
+  const stickyProps: TableColumnHeaderProps = {
+    position: 'sticky',
+    top: '0px',
+    zIndex: '10',
+    scope: 'col',
+  };
+
+  const lastPage = total < pageSize ? 0 : Math.ceil(total / pageSize) - 1;
 
   return (
-    <div className="w-full">
-      {advisories === undefined && <CircularProgress />}
-      {advisories === null && (
-        <h2 className="text-lg text-red-800 font-bold">
-          Oh no! Something has gone wrong!
-        </h2>
-      )}
-      {advisories && (
-        <>
-          <Container
-            maxWidth={false}
-            className="flex items-center space-x-4 bg-white"
-            style={{ paddingTop: '0.5rem', paddingBottom: '0.5rem' }}
+    <Box
+      w="100%"
+      h="100%"
+      display="flex"
+      flexDirection="column"
+      p={4}
+      alignItems="stretch"
+    >
+      <Stack
+        direction={{
+          sm: 'column',
+          lg: 'row',
+        }}
+        alignItems={{
+          sm: 'stretch',
+          lg: 'flex-end',
+        }}
+      >
+        <InputGroup>
+          <InputLeftElement>
+            <SearchIcon />
+          </InputLeftElement>
+          <Input
+            type="search"
+            aria-label="Keyword search"
+            placeholder="Keyword Search"
+            flexGrow={1}
+            width="200px"
+            variant="filled"
+            borderRadius="0"
+            backgroundColor={inputBackground}
+            onChange={(e) => setFiltersKeyword(e.target.value)}
+          />
+        </InputGroup>
+        <HStack>
+          <FormControl width="180px" flexShrink={0} flexGrow={1}>
+            <FormLabel fontSize="sm">Type</FormLabel>
+            <Select
+              aria-label="Type"
+              placeholder="All"
+              variant="filled"
+              background={inputBackground}
+              borderRadius="0"
+              value={filtersType}
+              onChange={(e) => {
+                if (e.currentTarget.value !== 'Security') {
+                  setFiltersSeverity(undefined);
+                }
+
+                setFiltersType(
+                  e.currentTarget
+                    .value as keyof typeof ListAdvisoriesFiltersTypeEnum
+                );
+              }}
+            >
+              {Object.keys(ListAdvisoriesFiltersTypeEnum)
+                .sort((a, b) => a.localeCompare(b))
+                .filter((a) => a !== 'Unknown')
+                .map((s) => (
+                  <option key={s} value={s}>
+                    {s}
+                  </option>
+                ))}
+            </Select>
+          </FormControl>
+          {filtersType === 'Security' && (
+            <FormControl width="180px" flexShrink={0} flexGrow={1}>
+              <FormLabel fontSize="sm">Severity</FormLabel>
+              <Select
+                aria-label="Severity"
+                placeholder="All"
+                variant="filled"
+                background={inputBackground}
+                borderRadius="0"
+                value={filtersSeverity}
+                onChange={(e) =>
+                  setFiltersSeverity(
+                    e.currentTarget
+                      .value as keyof typeof ListAdvisoriesFiltersSeverityEnum
+                  )
+                }
+              >
+                {Object.keys(ListAdvisoriesFiltersSeverityEnum)
+                  .sort((a, b) => a.localeCompare(b))
+                  .filter((a) => a !== 'Unknown')
+                  .map((s) => (
+                    <option key={s} value={s}>
+                      {s}
+                    </option>
+                  ))}
+              </Select>
+            </FormControl>
+          )}
+        </HStack>
+        <HStack>
+          <FormControl width="180px" flexShrink={0} flexGrow={1}>
+            <FormLabel fontSize="sm">After</FormLabel>
+            <Input
+              type="date"
+              variant="filled"
+              background={inputBackground}
+              borderRadius="0"
+              max={
+                filterBefore
+                  ? filterBefore.toLocaleDateString('en-ca')
+                  : new Date().toLocaleDateString('en-ca')
+              }
+              value={filterAfter?.toLocaleDateString('en-ca') || ''}
+              onChange={(e) => {
+                const newVal = e.currentTarget.value;
+                console.log(newVal);
+
+                if (!newVal) {
+                  setFilterAfter(undefined);
+                }
+
+                const asDate = new Date(newVal);
+                if (!(asDate instanceof Date) || isNaN(asDate.getTime())) {
+                  // Check value parses as a date
+                  return;
+                }
+
+                const [year, month, date] = newVal.split('-').map(Number);
+
+                setFilterAfter(new Date(year, month - 1, date));
+              }}
+            />
+          </FormControl>
+          <FormControl width="180px" flexShrink={0} flexGrow={1}>
+            <FormLabel fontSize="sm">Before</FormLabel>
+            <Input
+              type="date"
+              variant="filled"
+              background={inputBackground}
+              borderRadius="0"
+              min={filterAfter?.toLocaleDateString('en-ca')}
+              max={new Date().toLocaleDateString('en-ca')}
+              value={filterBefore?.toLocaleDateString('en-ca') || ''}
+              onChange={(e) => {
+                const newVal = e.currentTarget.value;
+
+                if (!newVal) {
+                  setFilterBefore(undefined);
+                }
+
+                const asDate = new Date(newVal);
+                if (!(asDate instanceof Date) || isNaN(asDate.getTime())) {
+                  // Check value parses as a date
+                  return;
+                }
+
+                const [year, month, date] = newVal.split('-').map(Number);
+
+                setFilterBefore(new Date(year, month - 1, date));
+              }}
+            />
+          </FormControl>
+        </HStack>
+      </Stack>
+      <HStack my={4} justifyContent="space-between" flexWrap="wrap">
+        <Text fontStyle="italic" fontSize="xs">
+          Last updated {lastUpdated?.toLocaleString() || 'never'}
+        </Text>
+        <HStack>
+          <Text fontSize="xs">
+            Displaying {(page * pageSize + 1).toLocaleString()}-
+            {Math.min(total, page * pageSize + pageSize).toLocaleString()} of{' '}
+            {total.toLocaleString()}
+          </Text>
+          <ButtonGroup
+            size="xs"
+            isAttached
+            alignItems="stretch"
+            colorScheme="blackAlpha"
           >
-            <Typography variant="overline">Filters</Typography>
-            <TextField
-              label="Synopsis"
-              variant="outlined"
-              size="small"
-              onChange={(e) => setFilterSynopsis(e.target.value)}
+            <IconButton
+              aria-label="First Page"
+              icon={<ArrowLeftIcon fontSize="8px" />}
+              disabled={page <= 0}
+              onClick={() => setPage(0)}
             />
-            <TextField
-              label="CVE"
-              variant="outlined"
-              size="small"
-              onChange={(e) => setFilterCve(e.target.value)}
+            <IconButton
+              aria-label="Previous Page"
+              icon={<MinusIcon fontSize="8px" />}
+              disabled={page <= 0}
+              onClick={() => setPage((old) => old - 1)}
             />
-          </Container>
-          <Divider />
-          <Container maxWidth={false} disableGutters>
-            <DataGrid
-              autoHeight
-              pagination
-              disableSelectionOnClick
-              disableDensitySelector
-              disableColumnSelector
-              disableColumnMenu
-              className="bg-white"
-              style={{ borderRadius: 0, border: 0 }}
-              rows={advisories.map((advisory: V1Advisory) => ({
-                id: advisory.name,
-                synopsis: advisory.synopsis,
-                severity: advisory.severity,
-                products: advisory.affectedProducts?.join(', '),
-                publish_date: Intl.DateTimeFormat('en-US', {
-                  day: '2-digit',
-                  month: 'short',
-                  year: 'numeric',
-                }).format(advisory.publishedAt),
-              }))}
-              rowsPerPageOptions={[10, 25, 50, 100]}
-              rowCount={total}
-              paginationMode="server"
-              columns={columns}
-              density="compact"
-              pageSize={pageSize}
-              onPageChange={(page) => setPage(page)}
-              onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
+            <Text
+              fontSize="xs"
+              // borderTop="1px solid"
+              // borderBottom="1px solid"
+              borderColor="gray.200"
+              backgroundColor="white"
+              lineHeight="24px"
+              px={2}
+            >
+              {(page + 1).toLocaleString()} / {(lastPage + 1).toLocaleString()}
+            </Text>
+            <IconButton
+              aria-label="Next Page"
+              icon={<AddIcon fontSize="8px" />}
+              disabled={page >= lastPage}
+              onClick={() => setPage((old) => old + 1)}
             />
-          </Container>
-        </>
+            <IconButton
+              aria-label="Last Page"
+              icon={<ArrowRightIcon fontSize="8px" />}
+              disabled={page >= lastPage}
+              onClick={() => setPage(lastPage)}
+            />
+          </ButtonGroup>
+        </HStack>
+      </HStack>
+      {isLoading ? (
+        <Spinner
+          m="auto"
+          size="xl"
+          alignSelf="center"
+          color={COLOR_RESF_GREEN}
+          thickness="3px"
+        />
+      ) : isError ? (
+        <Alert
+          status="error"
+          m="auto"
+          flexDirection="column"
+          width="300px"
+          borderRadius="md"
+        >
+          <AlertIcon mr="0" />
+          <AlertTitle>Something has gone wrong</AlertTitle>
+          <AlertDescription>Failed to load errata</AlertDescription>
+        </Alert>
+      ) : (
+        <Box backgroundColor="white" boxShadow="base">
+          <TableContainer>
+            <Table size="sm" variant="striped">
+              <Thead>
+                <Tr>
+                  <Th {...stickyProps} width="36px" />
+                  <Th {...stickyProps}>Advisory</Th>
+                  <Th {...stickyProps}>Synopsis</Th>
+                  <Th {...stickyProps}>Type / Severity</Th>
+                  <Th {...stickyProps}>Products</Th>
+                  <Th {...stickyProps}>
+                    <HStack spacing={1}>
+                      <Text>Issue Date</Text>
+                      <ChevronDownIcon />
+                    </HStack>
+                  </Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {!advisories?.length && (
+                  <Tr>
+                    <Td colSpan={6} textAlign="center">
+                      <Text>No rows found</Text>
+                    </Td>
+                  </Tr>
+                )}
+                {advisories?.map((a) => (
+                  <Tr key={a.name}>
+                    <Td textAlign="center" pr={0}>
+                      {severityToBadge(a.severity)}
+                    </Td>
+                    <Td>
+                      <Link
+                        className="text-peridot-primary visited:text-purple-500"
+                        to={`/${a.name}`}
+                      >
+                        {a.name}
+                      </Link>
+                    </Td>
+                    <Td>
+                      {a.synopsis?.replace(
+                        /^(Critical|Important|Moderate|Low): /,
+                        ''
+                      )}
+                    </Td>
+                    <Td>
+                      {typeToText(a.type)}
+                      {a.type === V1AdvisoryType.Security
+                        ? ` / ${severityToText(a.severity)}`
+                        : ''}
+                    </Td>
+                    <Td>{a.affectedProducts?.join(', ')}</Td>
+                    <Td>
+                      {Intl.DateTimeFormat(undefined, {
+                        day: '2-digit',
+                        month: 'short',
+                        year: 'numeric',
+                      }).format(a.publishedAt)}
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </TableContainer>
+        </Box>
       )}
-    </div>
+      <HStack justifyContent="flex-end" mt={4}>
+        <Text as="label" htmlFor="row-count" fontSize="sm">
+          Rows per page:
+        </Text>
+        <Select
+          id="row-count"
+          name="row-count"
+          variant="filled"
+          backgroundColor={inputBackground}
+          width="100px"
+          size="sm"
+          value={pageSize}
+          onChange={(e) => {
+            setPage(0);
+            setPageSize(Number(e.currentTarget.value));
+          }}
+        >
+          {[10, 25, 50, 100].map((count) => (
+            <option key={count} value={count}>
+              {count.toLocaleString()}
+            </option>
+          ))}
+        </Select>
+      </HStack>
+    </Box>
   );
 };
diff --git a/apollo/ui/src/components/Root.tsx b/apollo/ui/src/components/Root.tsx
index c5ce7f62..ae5f3466 100644
--- a/apollo/ui/src/components/Root.tsx
+++ b/apollo/ui/src/components/Root.tsx
@@ -30,108 +30,55 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-import React from 'react';
-
-import {
-  AppBar,
-  Toolbar,
-  Container,
-  CssBaseline,
-  Drawer,
-  Divider,
-  IconButton,
-  List,
-} from '@mui/material';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import MenuIcon from '@mui/icons-material/Menu';
-
-import { useStyles } from '../styles';
-import { Switch, Route } from 'react-router';
-import { Overview } from './Overview';
-import { Link } from 'react-router-dom';
+import { Box, HStack, Text } from '@chakra-ui/react';
 import { RESFLogo } from 'common/ui/RESFLogo';
-import classnames from 'classnames';
+import React from 'react';
+import { Route, Switch } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import { COLOR_RESF_BLUE, COLOR_RESF_GREEN } from '../styles';
+import { Overview } from './Overview';
 import { ShowErrata } from './ShowErrata';
 
 export const Root = () => {
-  const [open, setOpen] = React.useState(false);
-  const classes = useStyles();
-
-  const handleDrawerClose = () => {
-    setOpen(false);
-  };
-
-  const handleDrawerOpen = () => {
-    setOpen(true);
-  };
-
-  const inManage = location.pathname.startsWith('/manage');
-
   return (
-    <div className={classes.root}>
-      <AppBar
-        position="absolute"
-        className={classnames(
-          inManage && classes.appBar,
-          open && classes.appBarShift
-        )}
+    <Box
+      display="flex"
+      width="100%"
+      minHeight="100vh"
+      flexDirection="column"
+      alignItems="stretch"
+    >
+      <Box
+        background={`linear-gradient(to right, ${COLOR_RESF_GREEN}, ${COLOR_RESF_BLUE})`}
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        py="1"
+        px={4}
       >
-        <Toolbar className={classes.toolbar}>
-          {inManage && (
-            <IconButton
-              edge="start"
-              color="inherit"
-              aria-label="open drawer"
-              onClick={handleDrawerOpen}
-              className={classnames(
-                classes.menuButton,
-                open && classes.menuButtonHidden
-              )}
+        <Link to="/" className="no-underline text-white">
+          <HStack flexGrow={1} height="90%" spacing="2">
+            <RESFLogo className="fill-current text-white" />
+            <Text
+              borderLeft="1px solid"
+              pl="2"
+              lineHeight="30px"
+              fontSize="xl"
+              fontWeight="300"
+              color="white"
             >
-              <MenuIcon />
-            </IconButton>
-          )}
-          <Link to="/" className="no-underline text-white">
-            <div
-              className={classnames(
-                classes.title,
-                'flex items-center space-x-4'
-              )}
-            >
-              <RESFLogo className="fill-current text-white" />
-              <div className="font-bold text-lg text-white no-underline">
-                Product Errata{inManage && ' (Admin)'}
-              </div>
-            </div>
-          </Link>
-        </Toolbar>
-      </AppBar>
-      {inManage && (
-        <Drawer
-          variant="permanent"
-          classes={{
-            paper: classnames(
-              classes.drawerPaper,
-              !open && classes.drawerPaperClose
-            ),
-          }}
-          open={open}
-        >
-          <div className={classes.toolbarIcon}>
-            <IconButton onClick={handleDrawerClose}>
-              <ChevronLeftIcon />
-            </IconButton>
-          </div>
-          <Divider />
-        </Drawer>
-      )}
-      <main className={classes.content}>
-        <div className={classes.appBarSpacer} />
+              Product Errata
+            </Text>
+          </HStack>
+        </Link>
+      </Box>
+      <Box as="main" flexGrow={1} overflow="auto">
         <Switch>
           <Route path="/" exact component={Overview} />
           <Route path="/:id" component={ShowErrata} />
         </Switch>
-      </main>
-    </div>
+      </Box>
+    </Box>
   );
 };
diff --git a/apollo/ui/src/components/ShowErrata.tsx b/apollo/ui/src/components/ShowErrata.tsx
index 175ce83b..7a3d6c5c 100644
--- a/apollo/ui/src/components/ShowErrata.tsx
+++ b/apollo/ui/src/components/ShowErrata.tsx
@@ -30,25 +30,38 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-import React from 'react';
 import {
-  V1Advisory,
-  V1GetAdvisoryResponse,
-} from 'bazel-bin/apollo/proto/v1/client_typescript';
-import { reqap } from 'common/ui/reqap';
-import { api } from '../api';
-import { RouteComponentProps } from 'react-router';
-import {
-  Card,
-  CardContent,
-  Chip,
-  CircularProgress,
-  Paper,
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Heading,
+  HStack,
+  Link,
+  ListItem,
+  Spinner,
   Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
   Tabs,
-  Typography,
-} from '@mui/material';
-import { severityToBadge, severityToText, typeToText } from 'apollo/ui/src/enumToText';
+  Text,
+  UnorderedList,
+  VStack,
+} from '@chakra-ui/react';
+import { severityToBadge, typeToText } from 'apollo/ui/src/enumToText';
+import { V1Advisory } from 'bazel-bin/apollo/proto/v1/client_typescript';
+import { reqap } from 'common/ui/reqap';
+import React, { useState } from 'react';
+import { RouteComponentProps } from 'react-router';
+import { Link as RouterLink } from 'react-router-dom';
+
+import { api } from '../api';
+import { COLOR_RESF_BLUE, COLOR_RESF_GREEN } from '../styles';
 
 interface ShowErrataParams {
   id: string;
@@ -58,182 +71,249 @@ export interface ShowErrataProps
   extends RouteComponentProps<ShowErrataParams> {}
 
 export const ShowErrata = (props: ShowErrataProps) => {
-  const [errata, setErrata] = React.useState<
-    V1Advisory | undefined | null
-  >();
-  const [tabValue, setTabValue] = React.useState(0);
+  const id = props.match.params.id;
+
+  const [errata, setErrata] = useState<V1Advisory>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
 
   React.useEffect(() => {
-    (async () => {
-      let err, res: void | V1GetAdvisoryResponse | undefined;
-      [err, res] = await reqap(() =>
-        api.getAdvisory({ id: props.match.params.id })
-      );
+    const fetch = async () => {
+      setIsLoading(true);
+
+      const [err, res] = await reqap(() => api.getAdvisory({ id }));
+
+      setIsLoading(false);
+
       if (err || !res) {
-        setErrata(null);
+        setIsError(true);
+        setErrata(undefined);
         return;
       }
 
-      if (res) {
-        setErrata(res.advisory);
-      }
-    })().then();
-  }, []);
+      setIsError(false);
 
-  const handleTabChange = ({}, val: number) => {
-    setTabValue(val);
-  };
+      setErrata(res.advisory);
+    };
+
+    fetch();
+  }, [id]);
 
   return (
-    <div>
-      {errata === undefined && <CircularProgress />}
-      {errata === null && (
-        <Typography variant="h2" className="text-lg text-red-800 font-bold">
-          Oh no! Something has gone wrong!
-        </Typography>
-      )}
-      {errata && (
-        <>
-          <div className="flex items-center justify-between mt-4 mb-6">
-            <Typography variant="h5">{errata.name} </Typography>
-            <div className="flex space-x-4 h-full">
-              {severityToBadge(errata.severity)}
-              <Chip
-                color="primary"
-                label={`Issued at ${errata.publishedAt?.toLocaleDateString()}`}
-              />
-            </div>
-          </div>
-          <Card>
-            <Paper square>
-              <Tabs
-                value={tabValue}
-                indicatorColor="primary"
-                textColor="primary"
-                onChange={handleTabChange}
-                aria-label="disabled tabs example"
+    <Box
+      w="100%"
+      h="100%"
+      display="flex"
+      flexDirection="column"
+      p={4}
+      alignItems="stretch"
+      maxWidth="1300px"
+      m="auto"
+    >
+      <Breadcrumb mb={4}>
+        <BreadcrumbItem>
+          <BreadcrumbLink as={RouterLink} to="/">
+            Product Errata
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbItem>
+          <BreadcrumbLink isCurrentPage>{id}</BreadcrumbLink>
+        </BreadcrumbItem>
+      </Breadcrumb>
+      {isLoading ? (
+        <Spinner
+          m="auto"
+          size="xl"
+          alignSelf="center"
+          color={COLOR_RESF_GREEN}
+          thickness="3px"
+        />
+      ) : isError ? (
+        <Alert
+          status="error"
+          m="auto"
+          flexDirection="column"
+          width="300px"
+          borderRadius="md"
+        >
+          <AlertIcon mr="0" />
+          <AlertTitle>Something has gone wrong</AlertTitle>
+          <AlertDescription>Failed to load errata</AlertDescription>
+        </Alert>
+      ) : (
+        errata && (
+          <>
+            <HStack
+              alignItems="center"
+              backgroundColor="white"
+              py="2"
+              px="4"
+              spacing="6"
+              mb={2}
+            >
+              {severityToBadge(errata.severity, 40)}
+              <VStack alignItems="stretch" spacing="0" flexGrow={1}>
+                <HStack justifyContent="space-between">
+                  <Text fontSize="lg" fontWeight="bold">
+                    {errata.name}
+                  </Text>
+                </HStack>
+                <Text fontSize="sm">{errata.synopsis}</Text>
+              </VStack>
+            </HStack>
+            <Tabs backgroundColor="white" p="2">
+              <TabList>
+                <Tab>Erratum</Tab>
+                <Tab>Affected Packages</Tab>
+              </TabList>
+              <Box
+                display="flex"
+                flexDir="row"
+                alignItems="stretch"
+                flexWrap="wrap"
+                justifyContent="space-between"
               >
-                <Tab value={0} label="Erratum" />
-                <Tab value={1} label="Affected packages" />
-              </Tabs>
-            </Paper>
-            {tabValue === 0 && (
-              <CardContent className="max-w-5xl space-y-4">
-                <div>
-                  <Typography variant="h6">Synopsis</Typography>
-                  {errata.synopsis}
-                </div>
-                <div>
-                  <Typography variant="h6">Type</Typography>
-                  {typeToText(errata.type)}
-                </div>
-                <div>
-                  <Typography variant="h6">Severity</Typography>
-                  {severityToText(errata.severity)}
-                </div>
-                <div>
-                  <Typography variant="h6">Topic</Typography>
-                  {errata.topic?.split('\n').map((x) => (
-                    <p>{x}</p>
-                  ))}
-                </div>
-                <div>
-                  <Typography variant="h6">Description</Typography>
-                  {errata.description?.split('\n').map((x) => (
-                    <p>{x}</p>
-                  ))}
-                </div>
-                <div>
-                  <Typography variant="h6">Affected products</Typography>
-                  <ul>
-                    {errata.affectedProducts?.map((x) => (
-                      <li>{x}</li>
+                <TabPanels maxWidth="850px" px="2">
+                  <TabPanel>
+                    <Heading as="h2" size="md">
+                      Topic
+                    </Heading>
+                    {errata.topic?.split('\n').map((p, i) => (
+                      <Text key={i} mt={2}>
+                        {p}
+                      </Text>
                     ))}
-                  </ul>
-                </div>
-                <div>
-                  <Typography variant="h6">Fixes</Typography>
-                  <ul>
-                    {errata.fixes?.map((x) => (
-                      <li>
-                        <a
-                          href={x.sourceLink}
-                          target="_blank"
-                        >
-                          {x.sourceBy} - {x.ticket}
-                        </a>
-                      </li>
+                    <Heading as="h2" size="md" mt={4}>
+                      Description
+                    </Heading>
+                    {errata.description?.split('\n').map((p, i) => (
+                      <Text key={i} mt={2}>
+                        {p}
+                      </Text>
                     ))}
-                  </ul>
-                </div>
-                <div>
-                  <Typography variant="h6">CVEs</Typography>
-                  <ul>
-                    {errata.cves?.map((x) => {
-                      let text = `${x.name}${
-                        x.sourceBy !== '' && ` (Source: ${x.sourceBy})`
-                      }`;
+                  </TabPanel>
+                  <TabPanel>
+                    <VStack alignItems="flex-start" spacing="6">
+                      {Object.keys(errata.rpms || {}).map((product) => (
+                        <div key={product}>
+                          <Heading as="h2" size="lg" mb={4} fontWeight="300">
+                            {product}
+                          </Heading>
+                          <Heading as="h3" size="md" mt={2}>
+                            SRPMs
+                          </Heading>
+                          <UnorderedList pl="4">
+                            {errata.rpms?.[product]?.nvras
+                              ?.filter((x) => x.indexOf('.src.rpm') !== -1)
+                              .map((x) => (
+                                <ListItem key={x}>{x}</ListItem>
+                              ))}
+                          </UnorderedList>
+                          <Heading as="h3" size="md" mt={2}>
+                            RPMs
+                          </Heading>
+                          <UnorderedList pl="4">
+                            {errata.rpms?.[product]?.nvras
+                              ?.filter((x) => x.indexOf('.src.rpm') === -1)
+                              .map((x) => (
+                                <ListItem key={x}>{x}</ListItem>
+                              ))}
+                          </UnorderedList>
+                        </div>
+                      ))}
+                    </VStack>
+                  </TabPanel>
+                </TabPanels>
+                <VStack
+                  py="4"
+                  px="8"
+                  alignItems="flex-start"
+                  minWidth="300px"
+                  spacing="5"
+                  flexShrink={0}
+                  backgroundColor="gray.100"
+                >
+                  <Text>
+                    <b>Issued:</b> {errata.publishedAt?.toLocaleDateString()}
+                  </Text>
+                  <Text>
+                    <b>Type:</b> {typeToText(errata.type)}
+                  </Text>
+                  <Box>
+                    <Text fontWeight="bold">
+                      Affected Product
+                      {(errata.affectedProducts?.length || 0) > 1 ? 's' : ''}
+                    </Text>
+                    <UnorderedList>
+                      {errata.affectedProducts?.map((x, idx) => (
+                        <ListItem key={idx}>{x}</ListItem>
+                      ))}
+                    </UnorderedList>
+                  </Box>
+                  <Box>
+                    <Text fontWeight="bold">Fixes</Text>
+                    <UnorderedList>
+                      {errata.fixes?.map((x, idx) => (
+                        <ListItem key={idx}>
+                          <Link
+                            href={x.sourceLink}
+                            isExternal
+                            color={COLOR_RESF_BLUE}
+                          >
+                            {x.sourceBy} - {x.ticket}
+                          </Link>
+                        </ListItem>
+                      ))}
+                    </UnorderedList>
+                  </Box>
+                  <Box>
+                    <Text fontWeight="bold">CVEs</Text>
+                    <UnorderedList>
+                      {!!errata.cves?.length ? (
+                        errata.cves?.map((x, idx) => {
+                          let text = `${x.name}${
+                            x.sourceBy !== '' && ` (Source: ${x.sourceBy})`
+                          }`;
 
-                      return (
-                        <li>
-                          {x.sourceLink === '' ? (
-                            <span>{text}</span>
-                          ) : (
-                            <a href={x.sourceLink} target="_blank">
-                              {text}
-                            </a>
-                          )}
-                        </li>
-                      );
-                    })}
-                    {errata.cves?.length === 0 && <li>No CVEs</li>}
-                  </ul>
-                </div>
-                <div>
-                  <Typography variant="h6">References</Typography>
-                  <ul>
-                    {errata.references?.map((x) => (
-                      <li>{x}</li>
-                    ))}
-                    {errata.references?.length === 0 && <li>No references</li>}
-                  </ul>
-                </div>
-              </CardContent>
-            )}
-            {tabValue === 1 && (
-              <CardContent className="max-w-5xl">
-                <div className="space-x-4 divide-y py-2">
-                  {Object.keys(errata.rpms || {}).map(product => (
-                    <div className="space-y-4">
-                      <Typography variant="h6">{product}</Typography>
-                      <div>
-                        <Typography variant="subtitle1">SRPMs</Typography>
-                        <ul>
-                          {errata.rpms[product].nvras
-                          ?.filter((x) => x.indexOf('.src.rpm') !== -1)
-                          .map((x) => (
-                            <li>{x}</li>
-                          ))}
-                        </ul>
-                      </div>
-                      <div>
-                        <Typography variant="subtitle1">RPMs</Typography>
-                        <ul>
-                          {errata.rpms[product].nvras
-                          ?.filter((x) => x.indexOf('.src.rpm') === -1)
-                          .map((x) => (
-                            <li>{x}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            )}
-          </Card>
-        </>
+                          return (
+                            <ListItem key={idx}>
+                              {x.sourceLink === '' ? (
+                                <span>{text}</span>
+                              ) : (
+                                <Link
+                                  href={x.sourceLink}
+                                  isExternal
+                                  color={COLOR_RESF_BLUE}
+                                >
+                                  {text}
+                                </Link>
+                              )}
+                            </ListItem>
+                          );
+                        })
+                      ) : (
+                        <ListItem>No CVEs</ListItem>
+                      )}
+                    </UnorderedList>
+                  </Box>
+                  <Box>
+                    <Text fontWeight="bold">References</Text>
+                    <UnorderedList>
+                      {!!errata.references?.length ? (
+                        errata.references?.map((x, idx) => (
+                          <ListItem key={idx}>{x}</ListItem>
+                        ))
+                      ) : (
+                        <ListItem>No references</ListItem>
+                      )}
+                    </UnorderedList>
+                  </Box>
+                </VStack>
+              </Box>
+            </Tabs>
+          </>
+        )
       )}
-    </div>
+    </Box>
   );
 };
diff --git a/apollo/ui/src/entrypoint.tsx b/apollo/ui/src/entrypoint.tsx
index 19cbe703..1dae4dde 100644
--- a/apollo/ui/src/entrypoint.tsx
+++ b/apollo/ui/src/entrypoint.tsx
@@ -30,23 +30,21 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
+import 'tailwind/tailwind.css';
+
+import { ChakraProvider } from '@chakra-ui/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
-import CssBaseline from '@mui/material/CssBaseline';
 
 import { Root } from './components/Root';
 
-import 'tailwind/tailwind.css';
-import { PeridotThemeProvider } from 'common/mui/theme';
-
 export const app = () => {
   ReactDOM.render(
     <BrowserRouter>
-      <CssBaseline />
-      <PeridotThemeProvider>
+      <ChakraProvider>
         <Root />
-      </PeridotThemeProvider>
+      </ChakraProvider>
     </BrowserRouter>,
     document.getElementById('root')
   );
diff --git a/apollo/ui/src/enumToText.tsx b/apollo/ui/src/enumToText.tsx
index 087da649..5a688880 100644
--- a/apollo/ui/src/enumToText.tsx
+++ b/apollo/ui/src/enumToText.tsx
@@ -29,13 +29,10 @@
  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
  * POSSIBILITY OF SUCH DAMAGE.
  */
-import React from 'react';
 
-import {
-  AdvisorySeverity,
-  V1AdvisoryType,
-} from 'bazel-bin/apollo/proto/v1/client_typescript';
-import Chip from '@mui/material/Chip';
+import { Box, Tag, TagProps } from '@chakra-ui/react';
+import { AdvisorySeverity, V1AdvisoryType } from 'bazel-bin/apollo/proto/v1/client_typescript';
+import React from 'react';
 
 export const severityToText = (severity?: AdvisorySeverity): string => {
   switch (severity) {
@@ -54,26 +51,105 @@ export const severityToText = (severity?: AdvisorySeverity): string => {
 
 export const severityToBadge = (
   severity?: AdvisorySeverity,
-  size?: 'small',
+  size: number = 20
 ): React.ReactNode => {
-  let color: 'primary' | 'secondary' | 'success' | 'info' | 'error' | 'warning' = 'success';
-
-  switch (severity) {
-    case AdvisorySeverity.Critical:
-      color = 'error';
-      break;
-    case AdvisorySeverity.Important:
-      color = 'warning';
-      break;
-    case AdvisorySeverity.Moderate:
-      color = 'secondary';
-      break;
-    case AdvisorySeverity.Low:
-      color = 'primary';
-      break;
-  }
-
-  return <Chip label={severityToText(severity)} color={color} size={size} variant={size ? 'outlined' : undefined} />;
+  return {
+    [AdvisorySeverity.Critical]: (
+      <Box
+        as="svg"
+        version="1.1"
+        id="prefix__Layer_1"
+        xmlns="http://www.w3.org/2000/svg"
+        x="0"
+        y="0"
+        viewBox="0 0 24 24"
+        xmlSpace="preserve"
+        width={`${size}px`}
+        height={`${size}px`}
+        display="inline-block"
+      >
+        <g fill="#ED1C24">
+          <path d="M22.2 19.2l-8.8-16c-.2-.3-.5-.6-.8-.7-.3-.1-.7-.1-1.1 0-.3.1-.6.4-.8.7l-8.8 16c-.3.5-.2 1 0 1.5.3.5.8.7 1.3.8h17.7c.3 0 .5-.1.8-.2.2-.1.4-.3.5-.6.2-.4.2-1 0-1.5zm-18.8.6L12 4.3l8.6 15.5H3.4z" />
+          <path d="M12 15.7c-.2 0-.4.1-.6.2-.2.2-.2.4-.2.6v.8c0 .3.2.6.4.7.3.1.6.1.8 0s.4-.4.4-.7v-.8c0-.2-.1-.4-.2-.6-.2-.1-.4-.2-.6-.2zM11.2 9v5c0 .3.2.6.4.7.3.1.6.1.8 0 .3-.1.4-.4.4-.7V9c0-.3-.2-.6-.4-.7-.3-.1-.6-.1-.8 0s-.4.4-.4.7z" />
+        </g>
+      </Box>
+    ),
+    [AdvisorySeverity.Important]: (
+      <Box
+        as="svg"
+        width={`${size}px`}
+        height={`${size}px`}
+        display="inline-block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <g fill="#F7941D">
+          <path d="M22.2 19.2l-8.8-16c-.2-.3-.5-.6-.8-.7-.3-.1-.7-.1-1.1 0-.3.1-.6.4-.8.7l-8.8 16c-.3.5-.2 1 0 1.5.3.5.8.7 1.3.8h17.7c.3 0 .5-.1.8-.2.2-.1.4-.3.5-.6.2-.4.2-1 0-1.5zm-18.8.6L12 4.3l8.6 15.5H3.4z" />
+          <path d="M12 15.7c-.2 0-.4.1-.6.2-.2.2-.2.4-.2.6v.8c0 .3.2.6.4.7.3.1.6.1.8 0s.4-.4.4-.7v-.8c0-.2-.1-.4-.2-.6-.2-.1-.4-.2-.6-.2zM11.2 9v5c0 .3.2.6.4.7.3.1.6.1.8 0 .3-.1.4-.4.4-.7V9c0-.3-.2-.6-.4-.7-.3-.1-.6-.1-.8 0s-.4.4-.4.7z" />
+        </g>
+      </Box>
+    ),
+    [AdvisorySeverity.Moderate]: (
+      <Box
+        as="svg"
+        width={`${size}px`}
+        height={`${size}px`}
+        display="inline-block"
+        version="1.1"
+        id="prefix__Layer_1"
+        xmlns="http://www.w3.org/2000/svg"
+        x="0"
+        y="0"
+        viewBox="0 0 24 24"
+        xmlSpace="preserve"
+      >
+        <path
+          fill="#ffc31a"
+          d="M22.2 19.2l-8.8-16c-.2-.3-.5-.6-.8-.7-.3-.1-.7-.1-1.1 0-.3.1-.6.4-.8.7l-8.8 16c-.3.5-.2 1 0 1.5.3.5.8.7 1.3.8h17.7c.3 0 .5-.1.8-.2.2-.1.4-.3.5-.6.2-.4.2-1 0-1.5zm-18.8.6L12 4.3l8.6 15.5H3.4z"
+        />
+        <path
+          fill="#ffc31a"
+          d="M12 15.7c-.2 0-.4.1-.6.2-.2.2-.2.4-.2.6v.8c0 .3.2.6.4.7.3.1.6.1.8 0s.4-.4.4-.7v-.8c0-.2-.1-.4-.2-.6-.2-.1-.4-.2-.6-.2zM11.2 9v5c0 .3.2.6.4.7.3.1.6.1.8 0 .3-.1.4-.4.4-.7V9c0-.3-.2-.6-.4-.7-.3-.1-.6-.1-.8 0s-.4.4-.4.7z"
+        />
+      </Box>
+    ),
+    [AdvisorySeverity.Low]: (
+      <Box
+        as="svg"
+        width={`${size}px`}
+        height={`${size}px`}
+        display="inline-block"
+        version="1.1"
+        id="prefix__Layer_1"
+        xmlns="http://www.w3.org/2000/svg"
+        x="0"
+        y="0"
+        viewBox="0 0 24 24"
+        xmlSpace="preserve"
+      >
+        <g fill="#39B54A">
+          <path d="M22.2 19.2l-8.8-16c-.2-.3-.5-.6-.8-.7-.3-.1-.7-.1-1.1 0-.3.1-.6.4-.8.7l-8.8 16c-.3.5-.2 1 0 1.5.3.5.8.7 1.3.8h17.7c.3 0 .5-.1.8-.2.2-.1.4-.3.5-.6.2-.4.2-1 0-1.5zm-18.8.6L12 4.3l8.6 15.5H3.4z" />
+          <path d="M12 15.7c-.2 0-.4.1-.6.2-.2.2-.2.4-.2.6v.8c0 .3.2.6.4.7.3.1.6.1.8 0s.4-.4.4-.7v-.8c0-.2-.1-.4-.2-.6-.2-.1-.4-.2-.6-.2zM11.2 9v5c0 .3.2.6.4.7.3.1.6.1.8 0 .3-.1.4-.4.4-.7V9c0-.3-.2-.6-.4-.7-.3-.1-.6-.1-.8 0s-.4.4-.4.7z" />
+        </g>
+      </Box>
+    ),
+    [AdvisorySeverity.Unknown]: (
+      <Box
+        as="svg"
+        width={`${size}px`}
+        height={`${size}px`}
+        display="inline-block"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <g fill="#009444">
+          <path d="M22 5.6c0-.2 0-.3-.1-.4s-.2-.2-.4-.3L12.3 2h-.5L2.5 4.9c-.1 0-.3.1-.4.2-.1.2-.1.3-.1.5C2 6 1.6 15 6 19.5c.8.8 1.7 1.5 2.8 1.9 1 .4 2.2.6 3.3.6s2.2-.2 3.3-.6c1-.4 2-1.1 2.7-1.9C22.4 14.9 22 5.9 22 5.6zm-5 12.9c-1.3 1.4-3.1 2.1-5 2.1s-3.7-.7-5-2.1C3.6 15 3.4 8 3.4 6.1L12 3.4l8.6 2.7c0 1.9-.2 8.9-3.6 12.4z" />
+          <path d="M5.4 7c-.2 0-.3.1-.4.3-.1.1-.1.3-.1.4.1 2.1.6 7.2 3.1 9.8 1 1.1 2.4 1.7 3.9 1.6h.1c1.5 0 2.9-.6 3.9-1.6 2.5-2.6 3-7.7 3.2-9.8 0-.2 0-.3-.1-.4s-.2-.2-.4-.3l-6.4-2h-.4L5.4 7zm12.3 1.2c-.2 2.1-.7 6.3-2.7 8.3-.8.8-1.8 1.2-2.9 1.2H12c-1.1 0-2.1-.4-2.9-1.2-2-2.1-2.5-6.2-2.7-8.3L12 6.5l5.7 1.7z" />
+          <path d="M8.9 12.5l1.4 2.1c.1.2.3.3.6.3.2 0 .4-.1.5-.3l3.6-4.3c.2-.2.2-.5.1-.7-.1-.2-.3-.4-.5-.5-.3 0-.5.1-.7.2L11 13l-.9-1.3c-.1-.2-.3-.3-.5-.3s-.4 0-.6.1c-.2.1-.3.3-.3.5 0 .1.1.3.2.5z" />
+        </g>
+      </Box>
+    ),
+  }[severity || AdvisorySeverity.Unknown];
 };
 
 export const typeToText = (type?: V1AdvisoryType): string => {
@@ -91,14 +167,15 @@ export const typeToText = (type?: V1AdvisoryType): string => {
 
 export const typeToBadge = (
   type?: V1AdvisoryType,
-  size?: 'small',
+  size: TagProps['size'] = 'sm'
 ): React.ReactNode => {
-  let color: 'info' | 'warning' = 'info';
-
-  switch (type) {
-    case V1AdvisoryType.Security:
-      color = 'warning';
-  }
-
-  return <Chip label={typeToText(type)} color={color} size={size} variant={size ? 'outlined' : undefined} />;
+  return (
+    <Tag
+      variant="outline"
+      size={size}
+      colorScheme={type === V1AdvisoryType.Security ? 'orange' : 'gray'}
+    >
+      {typeToText(type)}
+    </Tag>
+  );
 };
diff --git a/apollo/ui/src/styles.ts b/apollo/ui/src/styles.ts
index 2ba908d7..2008bb76 100644
--- a/apollo/ui/src/styles.ts
+++ b/apollo/ui/src/styles.ts
@@ -30,85 +30,5 @@
  * POSSIBILITY OF SUCH DAMAGE.
  */
 
-import { makeStyles } from '@mui/styles';
-
-const drawerWidth = 240;
-
-export const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    width: '100%',
-  },
-  toolbar: {
-    paddingRight: 24, // keep right padding when drawer closed
-  },
-  toolbarIcon: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 8px',
-    ...theme.mixins.toolbar,
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-  },
-  appBarShift: {
-    marginLeft: drawerWidth,
-    width: `calc(100% - ${drawerWidth}px)`,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  menuButton: {
-    marginRight: 36,
-  },
-  menuButtonHidden: {
-    display: 'none',
-  },
-  title: {
-    flexGrow: 1,
-  },
-  drawerPaper: {
-    position: 'relative',
-    whiteSpace: 'nowrap',
-    width: drawerWidth,
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  },
-  drawerPaperClose: {
-    overflowX: 'hidden',
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    width: theme.spacing(7),
-    [theme.breakpoints.up('sm')]: {
-      width: theme.spacing(9),
-    },
-  },
-  appBarSpacer: theme.mixins.toolbar,
-  content: {
-    flexGrow: 1,
-    height: '100vh',
-    overflow: 'auto',
-  },
-  container: {
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(4),
-  },
-  paper: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    overflow: 'auto',
-    flexDirection: 'column',
-  },
-  fixedHeight: {
-    height: 240,
-  },
-}));
+export const COLOR_RESF_GREEN = '#10B981';
+export const COLOR_RESF_BLUE = '#1054B9';
diff --git a/obsidian/ui/BUILD b/obsidian/ui/BUILD
index 2032f7e2..b6ab9d0e 100644
--- a/obsidian/ui/BUILD
+++ b/obsidian/ui/BUILD
@@ -28,6 +28,7 @@ resf_frontend(
         "//dotui",
         "//obsidian/proto/v1:client_typescript",
         "//tailwind:css",
+        "@npm//@emotion/unitless",
         "@npm//@mui/icons-material",
         "@npm//@mui/material",
         "@npm//@mui/styles",
diff --git a/package.json b/package.json
index c9078572..3a1d87f9 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,9 @@
   "description": "",
   "author": "Mustafa Gezen <mustafa@ctrliq.com>",
   "main": "index.js",
+  "scripts": {
+    "dev:errata": "URL_API=https://apollo.build.resf.org ibazel run //apollo/ui:apollo.server"
+  },
   "devDependencies": {
     "@babel/cli": "^7.11.6",
     "@babel/core": "^7.11.6",
@@ -16,9 +19,13 @@
     "@babel/preset-typescript": "^7.10.4",
     "@bazel/buildifier": "^5.1.0",
     "@bazel/hide-bazel-files": "^1.7.0",
+    "@bazel/ibazel": "^0.16.2",
     "@bazel/typescript": "^3.7.0",
+    "@chakra-ui/icons": "^1",
+    "@chakra-ui/react": "^1.0.0",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
+    "@emotion/unitless": "^0.8.0",
     "@heroicons/react": "^1.0.1",
     "@loadable/component": "^5.15.2",
     "@mui/icons-material": "^5.2.4",
@@ -56,6 +63,8 @@
     "evil-dns": "^0.2.0",
     "express-openid-connect": "^2.7.2",
     "file-loader": "^6.2.0",
+    "framer-motion": "^6",
+    "framesync": "^6.1.2",
     "fs-extra": "^10.1.0",
     "glob": "^7.1.7",
     "hbs": "^4.1.1",
@@ -66,6 +75,7 @@
     "native-url": "^0.3.4",
     "optimize-css-assets-webpack-plugin": "^6.0.1",
     "path-to-regexp": "^2.4.0",
+    "popmotion": "^11.0.5",
     "popper.js": "^1.16.1",
     "postcss": "^8.3.0",
     "postcss-cli": "^8.3.1",
@@ -82,6 +92,7 @@
     "stackframe": "^1.2.0",
     "strip-ansi": "^6.0.0",
     "style-loader": "^2.0.0",
+    "style-value-types": "^5.1.2",
     "styled-components": "^5.3.3",
     "tailwindcss": "^3.1.8",
     "terser-webpack-plugin": "^5.1.2",
diff --git a/peridot/ui/BUILD b/peridot/ui/BUILD
index 2c6d60ba..3ca22435 100644
--- a/peridot/ui/BUILD
+++ b/peridot/ui/BUILD
@@ -29,6 +29,7 @@ resf_frontend(
         "//dotui",
         "//peridot/proto/v1:client_typescript",
         "//tailwind:css",
+        "@npm//@emotion/unitless",
         "@npm//@mui/icons-material",
         "@npm//@mui/lab",
         "@npm//@mui/x-data-grid",
diff --git a/yarn.lock b/yarn.lock
index 474b6f1d..44e39f9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -990,6 +990,13 @@
     pirates "^4.0.5"
     source-map-support "^0.5.16"
 
+"@babel/runtime@^7.0.0":
+  version "7.20.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.0.tgz#824a9ef325ffde6f78056059db3168c08785e24a"
+  integrity sha512-NDYdls71fTXoU8TZHfbBWg7DiZfNzClcKui/+kyi6ppD2L1qnWW3VV6CjtaBXSUGGhiTWJ6ereOIkUvenif66Q==
+  dependencies:
+    regenerator-runtime "^0.13.10"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
@@ -1047,6 +1054,11 @@
   resolved "https://registry.yarnpkg.com/@bazel/hide-bazel-files/-/hide-bazel-files-1.7.0.tgz#7cb140c23c4269d6464c24be0a2acf0241d2a31d"
   integrity sha512-pvdyRX/EsU8n+oElFb+OZ9i5M48HNFR+Z4D3vc0qDGiJ8oly9fZcUb2gbw4CzyeovJz0IzjSxjqMS6cp5gKoeg==
 
+"@bazel/ibazel@^0.16.2":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@bazel/ibazel/-/ibazel-0.16.2.tgz#05dd7f06659759fda30f87b15534f1e42f1201bb"
+  integrity sha512-KgqAWMH0emL6f3xH6nqyTryoBMqlJ627LBIe9PT1PRRQPz2FtHib3FIHJPukp1slzF3hJYZvdiVwgPnHbaSOOA==
+
 "@bazel/typescript@^3.7.0":
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/@bazel/typescript/-/typescript-3.8.0.tgz#725d51a1c25e314a1d8cddb8b880ac05ba97acd4"
@@ -1057,6 +1069,569 @@
     source-map-support "0.5.9"
     tsutils "2.27.2"
 
+"@chakra-ui/accordion@1.4.12":
+  version "1.4.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/accordion/-/accordion-1.4.12.tgz#c990b3327ac8ffef472d6e76d77f15a809d2aa56"
+  integrity sha512-Hq5Ie1SI4mmtgBmeuir+f7QKgopZEyQOojgufo/A20keMSy5Yk9WZjkXNQgvoIRl1AsoziIPUlubQOtkBZjjbA==
+  dependencies:
+    "@chakra-ui/descendant" "2.1.4"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/alert@1.3.7":
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/alert/-/alert-1.3.7.tgz#f36020ffc3b2c26be67025c56bccbf0639a81a67"
+  integrity sha512-fFpJYBpHOIK/BX4BVl/xafYiDBUW+Bq/gUYDOo4iAiO4vHgxo74oa+yOwSRNlNjAgIX7pi2ridsYQALKyWyxxQ==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/anatomy@1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/anatomy/-/anatomy-1.3.0.tgz#38a40dd6f2bb076fe8bebe8fb8e4769ea005e03d"
+  integrity sha512-vj/lcHkCuq/dtbl69DkNsftZTnrGEegB90ODs1B6rxw8iVMdDSYkthPPFAkqzNs4ppv1y2IBjELuVzpeta1OHA==
+  dependencies:
+    "@chakra-ui/theme-tools" "^1.3.6"
+
+"@chakra-ui/avatar@1.3.11":
+  version "1.3.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/avatar/-/avatar-1.3.11.tgz#abd8ffa9ad54756e549730f984fdae621ae51baa"
+  integrity sha512-/eRRK48Er92/QWAfWhxsJIN0gZBBvk+ew4Hglo+pxt3/NDnfTF2yPE7ZN29Dl6daPNbyTOpoksMwaU2mZIqLgA==
+  dependencies:
+    "@chakra-ui/image" "1.1.10"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/breadcrumb@1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/breadcrumb/-/breadcrumb-1.3.6.tgz#fe22e162c37add5830bd1292172bb11d859c6f35"
+  integrity sha512-iXxienBO6RUnJEcDvyDWyRt+mzPyl7/b6N8i0vrjGKGLpgtayJFvIdo33tFcvx6TCy7V9hiE3HTtZnNomWdR6A==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/button@1.5.10":
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/button/-/button-1.5.10.tgz#c339f78197b6bd63f109003177fd640ae6e6a632"
+  integrity sha512-IVEOrleI378CckAa3b3CTUHMPZRfpy6LPwn1Mx3sMpHEkDTKu8zJcjgEvCE8HYzNC1KbwBsa1PfTgk40ui6EtA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/spinner" "1.2.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/checkbox@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/checkbox/-/checkbox-1.7.1.tgz#cd733f177d88c477ae5ece228b81cddc67b70c0e"
+  integrity sha512-9Io97yn8OrdaIynCj+3Z/neJV7lTT1MtcdYh3BKMd7WnoJDkRY/GlBM8zsdgC5Wvm+ZQ1M83t0YvRPKLLzusyA==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/clickable@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/clickable/-/clickable-1.2.6.tgz#7f3deef71580acf47c2395cac2c1734f43418a3f"
+  integrity sha512-89SsrQwwwAadcl/bN8nZqqaaVhVNFdBXqQnxVy1t07DL5ezubmNb5SgFh9LDznkm9YYPQhaGr3W6HFro7iAHMg==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/close-button@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/close-button/-/close-button-1.2.7.tgz#6f3073618ae777d7e36a80fb17bc00aaa790e7a5"
+  integrity sha512-cYTxfgrIlPU4IZm1sehZXxx/TNQBk9c3LBPvTpywEM8GVRGINh4YLq8WiMaPtO+TDNBnKoWS/jS4IHnR+abADw==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/color-mode@1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/color-mode/-/color-mode-1.4.8.tgz#e5367b909f5b4c782b239f9d37d4cf1a44c28559"
+  integrity sha512-iD4126DVQi06c6ARr3uf3R2rtEu8aBVjW8rhZ+lOsV26Z15iCJA7OAut13Xu06fcZvgjSB/ChDy6Sx9sV9UjHA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/control-box@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/control-box/-/control-box-1.1.6.tgz#15a40a2cab525799988ae53948b61eed81a7f177"
+  integrity sha512-EUcq5f854puG6ZA6wAWl4107OPl8+bj4MMHJCa48BB0qec0U8HCEtxQGnFwJmaYLalIAjMfHuY3OwO2A3Hi9hA==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/counter@1.2.10":
+  version "1.2.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/counter/-/counter-1.2.10.tgz#544de1f53b783e8577cc74208ae1b0ca74385834"
+  integrity sha512-HQd09IuJ4z8M8vWajH+99jBWWSHDesQZmnN95jUg3HKOuNleLaipf2JFdrqbO1uWQyHobn2PM6u+B+JCAh2nig==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/css-reset@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/css-reset/-/css-reset-1.1.3.tgz#da65507ea1d69ed309bc34619881e23b5004ec7d"
+  integrity sha512-AgfrE7bRTJvNi/4zIfacI/kBHmHmHEIeQtHwCvk/0qM9V2gK1VM3ctYlnibf7BTh17F/UszweOGRb1lHSPfWjw==
+
+"@chakra-ui/descendant@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/descendant/-/descendant-2.1.4.tgz#b85c52b0b429da0a08d0950b4f8bef61b94f43f6"
+  integrity sha512-k1olHM6c0fcI5fQxO9rqg9rxripcfHMEm2LkORgH0CAzFn/U75CxCw5ec0IMedNWCdiv740enVfnfhBAoSg7gw==
+  dependencies:
+    "@chakra-ui/react-utils" "^1.2.3"
+
+"@chakra-ui/editable@1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/editable/-/editable-1.4.2.tgz#92d5266e737d52df1edc91c21a05c0a6048f881f"
+  integrity sha512-a5zKghA/IvG7yNkmFl7Z9c2KSsf0FgyijsNPTg/4S5jxyz13QJtoTg40tdpyaxHHCT25y25iUcV4FYCj6Jd01w==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/focus-lock@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/focus-lock/-/focus-lock-1.2.6.tgz#ecdc9688651c55c67f9059720f0885ea7c02b979"
+  integrity sha512-ZJNE1oNdUM1aGWuCJ+bxFa/d3EwxzfMWzTKzSvKDK50GWoUQQ10xFTT9nY/yFpkcwhBvx1KavxKf44mIhIbSog==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    react-focus-lock "2.5.2"
+
+"@chakra-ui/form-control@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/form-control/-/form-control-1.6.0.tgz#a2a7b82a385f75fababf3947d39e227b4d073929"
+  integrity sha512-MtUE98aocP2QTgvyyJ/ABuG33mhT3Ox56phKreG3HzbUKByMwrbQSm1QcAgyYdqSZ9eKB2tXx+qgGNh+avAfDA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/hooks@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/hooks/-/hooks-1.9.1.tgz#7a00659e6bb4d56cf56022071eca0b77a7df1ac1"
+  integrity sha512-SEeh1alDKzrP9gMLWMnXOUDBQDKF/URL6iTmkumTn6vhawWNla6sPrcMyoCzWdMzwUhZp3QNtCKbUm7dxBXvPw==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    compute-scroll-into-view "1.0.14"
+    copy-to-clipboard "3.3.1"
+
+"@chakra-ui/icon@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-2.0.5.tgz#d57f53e6a2c7ae1bae7292a1778fd466c02e2e29"
+  integrity sha512-ZrqRvCCIxGr4qFd/r1pmtd9tobRmv8KAxV7ygFoc/t4vOSKTcVIjhE12gsI3FzgvXM15ZFVwsxa1zodwgo5neQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/icons@^1":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.1.7.tgz#f8c0c44a969c8654b90026b7d375b550c4bfbc49"
+  integrity sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@types/react" "^17.0.15"
+
+"@chakra-ui/image@1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.1.10.tgz#65bae4086559937d25c728660ae743bce9360cb2"
+  integrity sha512-PJZmhQ/R1PgdMyCRjALfoyq1FNh/WzMAw70sliHLtLcb9hBXniwQZuckYfUshCkUoFBj/ow9d4byn9Culdpk7Q==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/input@1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/input/-/input-1.4.6.tgz#455f24e7a3f401ef10b50b68d9b0537676fbfec5"
+  integrity sha512-Ljy/NbOhh9cNQxKTWQRsT4aQiXs2vVya+Cj5NpMAz08NFFjPZovsTawhI7m6ejT5Vsh76QYjh2rOLLI3fWqQQw==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/layout@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/layout/-/layout-1.8.0.tgz#f95e78168644b45ac7327e4e0cfb1f0e6f7c3b4d"
+  integrity sha512-GJtEKez5AZu0XQTxI6a6jwA/hMDD36pP0HBxBOGuHP1hWCebDzMjraiMfWiP9w7hKERFE4j19kocHxIXyocfJA==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/live-region@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/live-region/-/live-region-1.1.6.tgz#135461a19ae2d479eefb012376ffa0f500b83b16"
+  integrity sha512-9gPQHXf7oW0jXyT5R/JzyDMfJ3hF70TqhN8bRH4fMyfNr2Se+SjztMBqCrv5FS5rPjcCeua+e0eArpoB3ROuWQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/media-query@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/media-query/-/media-query-2.0.4.tgz#25e8074a19613d4ccce880a1f92c8e733708b079"
+  integrity sha512-kn6g/L0IFFUHz2v4yiCsBnhg9jUeA7525Z+AWl+BPtvryi7i9J+AJ27y/QAge7vUGy4dwDeFyxOZTs2oZ9/BsA==
+  dependencies:
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/menu@1.8.12":
+  version "1.8.12"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/menu/-/menu-1.8.12.tgz#98f9cbccfc8fbaaea1f19dcea16ffb96a25eb01f"
+  integrity sha512-X/s74VpOReQW4fCRCa21f/VOe++cXhPz2Sh7pDjtaT3zmKjrJwgk1Kw75cXfNX1eke6hf/wZ0FGweu/m7+C3OA==
+  dependencies:
+    "@chakra-ui/clickable" "1.2.6"
+    "@chakra-ui/descendant" "2.1.4"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/modal@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/modal/-/modal-1.11.1.tgz#fedd757726cbc7ec3b614e1b0c7b46c7244f988e"
+  integrity sha512-B2BBDonHb04vbPLAWgko1JYBwgW8ZNSLyhTJK+rbrCsRSgazuLTcwq4hdyJqrYNWtaQEfSwpAXqJ7joMZdv59A==
+  dependencies:
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/focus-lock" "1.2.6"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.4.1"
+
+"@chakra-ui/number-input@1.4.7":
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/number-input/-/number-input-1.4.7.tgz#9d150c20a7d301e2ffe600251e68d9b6f70fcce0"
+  integrity sha512-LorGRZFMipom8vCUEbLi2s7bTHF2Fgiu766W0jTbzMje+8Z1ZoRQunH9OZWQnxnWQTUfUM2KBW8KwToYh1ojfQ==
+  dependencies:
+    "@chakra-ui/counter" "1.2.10"
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/pin-input@1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/pin-input/-/pin-input-1.7.11.tgz#d2bdfc29b10293efae35f6b35203d05b57ab29c3"
+  integrity sha512-KEVUHHmf22tI4F7gzT9+pHi4E5cCyte6M8rPEwRyuc0kUBo48D8OW0BJwGdESWOKMkQXazDF6Zg4o32t45tbpg==
+  dependencies:
+    "@chakra-ui/descendant" "2.1.4"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/popover@1.11.9":
+  version "1.11.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popover/-/popover-1.11.9.tgz#283a52c969f27ee7119774c255b786af6c9b2766"
+  integrity sha512-hJ1/Lwukox3ryTN7W1wnj+nE44utfLwQYvfUSdatt5dznnh8k0P6Wx7Hmjm1cYffRavBhqzwua/QZDWjJN9N0g==
+  dependencies:
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/popper@2.4.3":
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/popper/-/popper-2.4.3.tgz#fcdc917d13a56b9d44868c78a009e4dd692697a2"
+  integrity sha512-TGzFnYt3mtIVkIejtYIAu4Ka9DaYLzMR4NgcqI6EtaTvgK7Xep+6RTiY/Nq+ZT3l/eaNUwqHRFoNrDUg1XYasA==
+  dependencies:
+    "@chakra-ui/react-utils" "1.2.3"
+    "@popperjs/core" "^2.9.3"
+
+"@chakra-ui/portal@1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/portal/-/portal-1.3.10.tgz#d85b2cf1a8b3e2eca260d8e3ad485da0ee29856b"
+  integrity sha512-t2KQ6MXbyf1qFYxWw/bs//CnwD+Clq7mbsP1Y7g+THCz2FvlLlMj45BWocLB30NoNyA8WCS2zyMBszW2/qvDiA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/progress@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/progress/-/progress-1.2.6.tgz#4a3a40e826c8c72160d3c8ff411e86244e280ebc"
+  integrity sha512-thaHRIYTVktgV78vJMNwzfCX+ickhSpn2bun6FtGVUphFx4tjV+ggz+IGohm6AH2hapskoR1mQU2iNZb6BK0hQ==
+  dependencies:
+    "@chakra-ui/theme-tools" "1.3.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/provider@1.7.14":
+  version "1.7.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/provider/-/provider-1.7.14.tgz#74d19e3066ab02f2c14fa32d22dc12f8367b56f7"
+  integrity sha512-FCA33CZy/jFzExglKMioeri8sr9NtDTcNVPnx95ZJiA7WpfFo0xuZ6/fMC4DwIQPkJKbSIZBXYLZ3U10Ntylrw==
+  dependencies:
+    "@chakra-ui/css-reset" "1.1.3"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/system" "1.12.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/radio@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/radio/-/radio-1.5.1.tgz#d2b691fde944c20eb594873f72eb61dfb84b15da"
+  integrity sha512-zO5eShz+j68A7935jJ2q5u3brX/bjPEGh9Pj2+bnKbmC9Vva6jEzBSJsAx9n4WbkAzR3xDMGWsbpivFp8X1tJw==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/react-env@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-env/-/react-env-1.1.6.tgz#9915b02fd1f8ca62ccf578eaec793f1c4dea78b0"
+  integrity sha512-L90LNvCfe04FTkN9OPok/o2e60zLJNBH8Im/5dUHvqy7dXLXok8ZDad5vEL46XmGbhe7O8fbxhG6FmAYdcCHrQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/react-utils@1.2.3", "@chakra-ui/react-utils@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react-utils/-/react-utils-1.2.3.tgz#3356c9299bc8faada8fac6c5886ca65ec95bb5be"
+  integrity sha512-r8pUwCVVB7UPhb0AiRa9ZzSp4xkMz64yIeJ4O4aGy4WMw7TRH4j4QkbkE1YC9tQitrXrliOlvx4WWJR4VyiGpw==
+  dependencies:
+    "@chakra-ui/utils" "^1.10.4"
+
+"@chakra-ui/react@^1.0.0":
+  version "1.8.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/react/-/react-1.8.9.tgz#1d5a9ed2ce4958d1a006fb192f8a974440c89242"
+  integrity sha512-NfR5XKVqEWhchFLiWaTWkWeYZJK1SNF2O6sQxFVrX6M+nAgJ3Q9tfMk6/I3II+xc4hXJUcYmUvmw37vT92yMaQ==
+  dependencies:
+    "@chakra-ui/accordion" "1.4.12"
+    "@chakra-ui/alert" "1.3.7"
+    "@chakra-ui/avatar" "1.3.11"
+    "@chakra-ui/breadcrumb" "1.3.6"
+    "@chakra-ui/button" "1.5.10"
+    "@chakra-ui/checkbox" "1.7.1"
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/control-box" "1.1.6"
+    "@chakra-ui/counter" "1.2.10"
+    "@chakra-ui/css-reset" "1.1.3"
+    "@chakra-ui/editable" "1.4.2"
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/image" "1.1.10"
+    "@chakra-ui/input" "1.4.6"
+    "@chakra-ui/layout" "1.8.0"
+    "@chakra-ui/live-region" "1.1.6"
+    "@chakra-ui/media-query" "2.0.4"
+    "@chakra-ui/menu" "1.8.12"
+    "@chakra-ui/modal" "1.11.1"
+    "@chakra-ui/number-input" "1.4.7"
+    "@chakra-ui/pin-input" "1.7.11"
+    "@chakra-ui/popover" "1.11.9"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/progress" "1.2.6"
+    "@chakra-ui/provider" "1.7.14"
+    "@chakra-ui/radio" "1.5.1"
+    "@chakra-ui/react-env" "1.1.6"
+    "@chakra-ui/select" "1.2.11"
+    "@chakra-ui/skeleton" "1.2.14"
+    "@chakra-ui/slider" "1.5.11"
+    "@chakra-ui/spinner" "1.2.6"
+    "@chakra-ui/stat" "1.2.7"
+    "@chakra-ui/switch" "1.3.10"
+    "@chakra-ui/system" "1.12.1"
+    "@chakra-ui/table" "1.3.6"
+    "@chakra-ui/tabs" "1.6.11"
+    "@chakra-ui/tag" "1.2.7"
+    "@chakra-ui/textarea" "1.2.11"
+    "@chakra-ui/theme" "1.14.1"
+    "@chakra-ui/toast" "1.5.9"
+    "@chakra-ui/tooltip" "1.5.1"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/select@1.2.11":
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/select/-/select-1.2.11.tgz#7762f2b7974a4587b4eb9536eb93b2295381aa9f"
+  integrity sha512-6Tis1+ZrRjQeWhQfziQn3ZdPphV5ccafpZOhiPdTcM2J1XcXOlII+9rHxvaW+jx7zQ5ly5o8kd7iXzalDgl5wA==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/skeleton@1.2.14":
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-1.2.14.tgz#c2028b03a975c76b13aaecdbbe168872079177b8"
+  integrity sha512-R0v4DfQ2yjXCJf9SzhTmDb2PLx5//LxsRbjjgRa8qJCR4MZaGswPrekp4dP8YjY8aEYzuZbvHU12T3vqZBk2GA==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/media-query" "2.0.4"
+    "@chakra-ui/system" "1.12.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/slider@1.5.11":
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/slider/-/slider-1.5.11.tgz#e03585188547dad3dafdb4a4cbd64bfbf8a4025b"
+  integrity sha512-THkGU2BsA6XMosXcEVQkWVRftqUIAKCb+y4iEpR3C2ztqL7Fl/CbIGwyr5majhPhKc275rb8dfxwp8R0L0ZIiQ==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/spinner@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/spinner/-/spinner-1.2.6.tgz#d85fb3d763a69d40570b591507c5087dba38e6c4"
+  integrity sha512-GoUCccN120fGRVgUtfuwcEjeoaxffB+XsgpxX7jhWloXf8b6lkqm68bsxX4Ybb2vGN1fANI98/45JmrnddZO/A==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/stat@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/stat/-/stat-1.2.7.tgz#e173171d80f9e756966604e620987bbd7590d291"
+  integrity sha512-m76jumFW1N+mCG4ytrUz9Mh09nZtS4OQcADEvOslfdI5StwwuzasTA1tueaelPzdhBioMwFUWL05Fr1fXbPJ/Q==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/styled-system@1.19.0":
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/styled-system/-/styled-system-1.19.0.tgz#102fadaefc1a2dfd8e0c4837eafa660531a08419"
+  integrity sha512-z+bMfWs6jQGkpgarge1kmk78DuDhJIXRUMyRqZ3+CiIkze88bIIsww6mV2i8tEfUfTAvALeMnlYZ1DYsHsTTJw==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    csstype "3.0.9"
+
+"@chakra-ui/switch@1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/switch/-/switch-1.3.10.tgz#6b0a3f199e6e654dbab6e01ccc762e1b29611c62"
+  integrity sha512-V6qDLY6oECCbPyu7alWWOAhSBI4+SAuT6XW/zEQbelkwuUOiGO1ax67rTXOmZ59A2AaV1gqQFxDh8AcbvwO5XQ==
+  dependencies:
+    "@chakra-ui/checkbox" "1.7.1"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/system@1.12.1":
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/system/-/system-1.12.1.tgz#608655ef3f7cb82eedd8f20d2546458d90d77cce"
+  integrity sha512-Rp09/rMuPA3hF38OJxeQciGO9N0Ie1GxwHRAw1AFA/TY3fVyK9pNI5oN+J/1cAxq7v9yKdIr1YfnruJTI9xfEg==
+  dependencies:
+    "@chakra-ui/color-mode" "1.4.8"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/styled-system" "1.19.0"
+    "@chakra-ui/utils" "1.10.4"
+    react-fast-compare "3.2.0"
+
+"@chakra-ui/table@1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/table/-/table-1.3.6.tgz#e271676dc03cd4c684e4041df2cf394d86a28510"
+  integrity sha512-7agZAgAeDFKviqStvixqnLAH54+setzhx67EztioZTr5Xu+6hQ4rotfJbu8L4i587pcbNg98kCEXEkidjw0XRQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/tabs@1.6.11":
+  version "1.6.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tabs/-/tabs-1.6.11.tgz#9f3f04f764cec4033711719b1bba8545038ac386"
+  integrity sha512-hGs2REEVVWyfgs+qEkPiUsNnqwv3QwXfKYyXaMnGS7CCkGgUiEvIO7n9968/KGnGbM4GuEHX+BxG2suIUf24yg==
+  dependencies:
+    "@chakra-ui/clickable" "1.2.6"
+    "@chakra-ui/descendant" "2.1.4"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/tag@1.2.7":
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tag/-/tag-1.2.7.tgz#5861a92e83e63825f6fe563921d2704e921b585f"
+  integrity sha512-RKrKOol4i/CnpFfo3T9LMm1abaqM+5Bs0soQLbo1iJBbBACY09sWXrQYvveQ2GYzU/OrAUloHqqmKjyVGOlNtg==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/textarea@1.2.11":
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/textarea/-/textarea-1.2.11.tgz#24209862cf9227d79228222b7cff2c50f7ff0add"
+  integrity sha512-RDWbMyC87/AFRX98EnVum5eig/7hhcvS1BrqW5lvmTgrpr7KVr80Dfa8hUj58Iq37Z7AqZijDPkBn/zg7bPdIg==
+  dependencies:
+    "@chakra-ui/form-control" "1.6.0"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/theme-tools@1.3.6", "@chakra-ui/theme-tools@^1.3.6":
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme-tools/-/theme-tools-1.3.6.tgz#2e5b5c192efd685c158e940a5cedcb0eb51f8602"
+  integrity sha512-Wxz3XSJhPCU6OwCHEyH44EegEDQHwvlsx+KDkUDGevOjUU88YuNqOVkKtgTpgMLNQcsrYZ93oPWZUJqqCVNRew==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+    "@ctrl/tinycolor" "^3.4.0"
+
+"@chakra-ui/theme@1.14.1":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/theme/-/theme-1.14.1.tgz#84ce1643d4d7c89509e714ac989bcf8acd5578b8"
+  integrity sha512-VeNZi+zD3yDwzvZm234Cy3vnalCzQ+dhAgpHdIYzGO1CYO8DPa+ROcQ70rUueL7dSvUz15KOiGTw6DAl7LXlGA==
+  dependencies:
+    "@chakra-ui/anatomy" "1.3.0"
+    "@chakra-ui/theme-tools" "1.3.6"
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/toast@1.5.9":
+  version "1.5.9"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/toast/-/toast-1.5.9.tgz#45521dc521186ce88aad07a3796545d15a6f9697"
+  integrity sha512-rns04bGdMcG7Ijg45L+PfuEW4rCd0Ycraix4EJQhcl9RXI18G9sphmlp9feidhZAkI6Ukafq1YvyvkBfkKnIzQ==
+  dependencies:
+    "@chakra-ui/alert" "1.3.7"
+    "@chakra-ui/close-button" "1.2.7"
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/theme" "1.14.1"
+    "@chakra-ui/transition" "1.4.8"
+    "@chakra-ui/utils" "1.10.4"
+    "@reach/alert" "0.13.2"
+
+"@chakra-ui/tooltip@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/tooltip/-/tooltip-1.5.1.tgz#c338476aa0f00fc89f6357bc22725329f90d8d5d"
+  integrity sha512-EUAlDdlCBt63VpEVtj/RkFjHQVN/xA9gEAumngQdi1Sp+OXPYCBM9GwSY0NwrM1RfKBnhPSH9wz7FwredJWeaw==
+  dependencies:
+    "@chakra-ui/hooks" "1.9.1"
+    "@chakra-ui/popper" "2.4.3"
+    "@chakra-ui/portal" "1.3.10"
+    "@chakra-ui/react-utils" "1.2.3"
+    "@chakra-ui/utils" "1.10.4"
+    "@chakra-ui/visually-hidden" "1.1.6"
+
+"@chakra-ui/transition@1.4.8":
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/transition/-/transition-1.4.8.tgz#ac0f4675da929ae69fc9d6db6a1edf61e982772c"
+  integrity sha512-5uc8LEuCH7+0h++wqAav/EktTHOjbLDSTXQlU9fzPIlNNgyf2eXrHVN2AGMGKiMR9Z4gS7umQjZ54r0w/mZ/Fw==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@chakra-ui/utils@1.10.4", "@chakra-ui/utils@^1.10.4":
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.10.4.tgz#40a32d4efd8684b2e7432a40b285796383eacfd3"
+  integrity sha512-AM91VQQxw8F4F1WDA28mqKY6NFIOuzc2Ekkna88imy2OiqqmYH0xkq8J16L2qj4cLiLozpYqba3C79pWioy6FA==
+  dependencies:
+    "@types/lodash.mergewith" "4.6.6"
+    css-box-model "1.2.1"
+    framesync "5.3.0"
+    lodash.mergewith "4.6.2"
+
+"@chakra-ui/visually-hidden@1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/visually-hidden/-/visually-hidden-1.1.6.tgz#7a546a5aebe4779c8f18d65b1f0e56249720f28d"
+  integrity sha512-Xzy5bA0UA+IyMgwJizQYSEdgz8cC/tHdmFB3CniXzmpKTSK8mJddeEBl+cGbXHBzxEUhH7xF1eaS41O+0ezWEQ==
+  dependencies:
+    "@chakra-ui/utils" "1.10.4"
+
+"@ctrl/tinycolor@^3.4.0":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
+  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
@@ -1107,6 +1682,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a"
@@ -1114,6 +1696,11 @@
   dependencies:
     "@emotion/memoize" "^0.7.4"
 
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@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"
@@ -1179,6 +1766,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
+
 "@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
@@ -1314,6 +1906,59 @@
   dependencies:
     "@types/whatwg-streams" "^0.0.7"
 
+"@motionone/animation@^10.12.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.14.0.tgz#2f2a3517183bb58d82e389aac777fe0850079de6"
+  integrity sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==
+  dependencies:
+    "@motionone/easing" "^10.14.0"
+    "@motionone/types" "^10.14.0"
+    "@motionone/utils" "^10.14.0"
+    tslib "^2.3.1"
+
+"@motionone/dom@10.12.0":
+  version "10.12.0"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
+  integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
+  dependencies:
+    "@motionone/animation" "^10.12.0"
+    "@motionone/generators" "^10.12.0"
+    "@motionone/types" "^10.12.0"
+    "@motionone/utils" "^10.12.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.14.0.tgz#d8154b7f71491414f3cdee23bd3838d763fffd00"
+  integrity sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==
+  dependencies:
+    "@motionone/utils" "^10.14.0"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.12.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.14.0.tgz#e05d9dd56da78a4b92db99185848a0f3db62242d"
+  integrity sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==
+  dependencies:
+    "@motionone/types" "^10.14.0"
+    "@motionone/utils" "^10.14.0"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.12.0", "@motionone/types@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.14.0.tgz#148c34f3270b175397e49c3058b33fab405c21e3"
+  integrity sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ==
+
+"@motionone/utils@^10.12.0", "@motionone/utils@^10.14.0":
+  version "10.14.0"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.14.0.tgz#a19a3464ed35b08506747b062d035c7bc9bbe708"
+  integrity sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==
+  dependencies:
+    "@motionone/types" "^10.14.0"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
 "@mui/base@5.0.0-alpha.89":
   version "5.0.0-alpha.89"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.89.tgz#d72681fa20e05297b426e113c47a0912b59c8b44"
@@ -1576,6 +2221,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
 
+"@popperjs/core@^2.9.3":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@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"
@@ -1629,6 +2279,33 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@reach/alert@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/alert/-/alert-0.13.2.tgz#71c4a848d51341f1d6d9eaae060975391c224870"
+  integrity sha512-LDz83AXCrClyq/MWe+0vaZfHp1Ytqn+kgL5VxG7rirUvmluWaj/snxzfNPWn0Ma4K2YENmXXRC/iHt5X95SqIg==
+  dependencies:
+    "@reach/utils" "0.13.2"
+    "@reach/visually-hidden" "0.13.2"
+    prop-types "^15.7.2"
+    tslib "^2.1.0"
+
+"@reach/utils@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.13.2.tgz#87e8fef8ebfe583fa48250238a1a3ed03189fcc8"
+  integrity sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==
+  dependencies:
+    "@types/warning" "^3.0.0"
+    tslib "^2.1.0"
+    warning "^4.0.3"
+
+"@reach/visually-hidden@0.13.2":
+  version "0.13.2"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.13.2.tgz#ee21de376a7e57e60dc92d95a671073796caa17e"
+  integrity sha512-sPZwNS0/duOuG0mYwE5DmgEAzW9VhgU3aIt1+mrfT/xiT9Cdncqke+kRBQgU708q/Ttm9tWsoHni03nn/SuPTQ==
+  dependencies:
+    prop-types "^15.7.2"
+    tslib "^2.1.0"
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -1752,6 +2429,18 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash.mergewith@4.6.6":
+  version "4.6.6"
+  resolved "https://registry.yarnpkg.com/@types/lodash.mergewith/-/lodash.mergewith-4.6.6.tgz#c4698f5b214a433ff35cb2c75ee6ec7f99d79f10"
+  integrity sha512-RY/8IaVENjG19rxTZu9Nukqh0W2UrYgmBj5sdns4hWRZaV8PqR7wIKHFKzvOTjo4zVRV7sVI+yFhAJql12Kfqg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.186"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97"
+  integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw==
+
 "@types/long@^4.0.0":
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
@@ -1846,6 +2535,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.15":
+  version "17.0.52"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
+  integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/responselike@*", "@types/responselike@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29"
@@ -1858,6 +2556,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==
+
 "@types/webpack-env@^1.16.0":
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.17.0.tgz#f99ce359f1bfd87da90cc4a57cab0a18f34a48d0"
@@ -2150,6 +2853,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-hidden@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.1.tgz#ad8c1edbde360b454eb2bf717ea02da00bfee0f8"
+  integrity sha512-PN344VAf9j1EAi+jyVHOJ8XidQdPVssGco39eNcsGdM4wcsILtxrKLkbuiMfLWYROK1FjRQasMWCBttrhjnr6A==
+  dependencies:
+    tslib "^2.0.0"
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -2643,6 +3353,11 @@ compression-webpack-plugin@^6.1.1:
     serialize-javascript "^5.0.1"
     webpack-sources "^1.4.3"
 
+compute-scroll-into-view@1.0.14:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.14.tgz#80e3ebb25d6aa89f42e533956cb4b16a04cfe759"
+  integrity sha512-mKDjINe3tc6hGelUMNDzuhorIUZ7kS7BwyY0r2wQd2HOH2tRuJykiC06iSEX8y1TuhNzvz4GcJnK16mM2J1NMQ==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -2695,6 +3410,13 @@ cookie@0.5.0, cookie@^0.5.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+copy-to-clipboard@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.21.0, core-js-compat@^3.22.1:
   version "3.23.4"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.23.4.tgz#56ad4a352884317a15f6b04548ff7139d23b917f"
@@ -2744,6 +3466,13 @@ cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-box-model@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
+  integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
+  dependencies:
+    tiny-invariant "^1.0.6"
+
 css-color-keywords@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
@@ -2872,6 +3601,11 @@ csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
+csstype@3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
+  integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
+
 csstype@^3.0.2, csstype@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
@@ -2941,6 +3675,11 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detective@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
@@ -3498,6 +4237,13 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.6.tgz#022e9218c637f9f3fc9c35ab9c9193f05add60b2"
   integrity sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==
 
+focus-lock@^0.9.1:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.9.2.tgz#9d30918aaa99b1b97677731053d017f82a540d5b"
+  integrity sha512-YtHxjX7a0IC0ZACL5wsX8QdncXofWpGPNoVMuI/nZUrPGp6LmNI6+D5j0pPj+v8Kw5EpweA+T5yImK0rnWf7oQ==
+  dependencies:
+    tslib "^2.0.3"
+
 follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.14.4:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
@@ -3518,6 +4264,41 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
+framer-motion@^6:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
+  integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
+  dependencies:
+    "@motionone/dom" "10.12.0"
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.3.0.tgz#0ecfc955e8f5a6ddc8fdb0cc024070947e1a0d9b"
+  integrity sha512-oc5m68HDO/tuK2blj7ZcdEBRx3p1PjrgHazL8GYEpvULhrtGIFbQArN6cQS2QhW8mitffaB+VYzMjDqBxxQeoA==
+  dependencies:
+    tslib "^2.1.0"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
+framesync@6.1.2, framesync@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.2.tgz#755eff2fb5b8f3b4d2b266dd18121b300aefea27"
+  integrity sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==
+  dependencies:
+    tslib "2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -3618,6 +4399,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-stdin@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
@@ -3793,6 +4579,11 @@ helmet@^4.4.1:
   resolved "https://registry.yarnpkg.com/helmet/-/helmet-4.6.0.tgz#579971196ba93c5978eb019e4e8ec0e50076b4df"
   integrity sha512-HVqALKZlR95ROkrnesdhbbZJFi/rIVSoNq6f3jA/9u6MIbTsPh3xZwihjeI5+DO/2sOV6HMHooXcEOuwskHpTg==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -4008,6 +4799,13 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
+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"
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -4423,6 +5221,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.mergewith@4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -4443,7 +5246,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==
@@ -5067,6 +5870,26 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
+popmotion@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.5.tgz#8e3e014421a0ffa30ecd722564fd2558954e1f7d"
+  integrity sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==
+  dependencies:
+    framesync "6.1.2"
+    hey-listen "^1.0.8"
+    style-value-types "5.1.2"
+    tslib "2.4.0"
+
 popper.js@^1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -5530,6 +6353,13 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-clientside-effect@^1.2.5:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
+  integrity sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==
+  dependencies:
+    "@babel/runtime" "^7.12.13"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -5539,6 +6369,23 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-fast-compare@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-focus-lock@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.5.2.tgz#f1e4db5e25cd8789351f2bd5ebe91e9dcb9c2922"
+  integrity sha512-WzpdOnEqjf+/A3EH9opMZWauag7gV0BxFl+EY4ElA4qFqYsUsBLnmo2sELbN5OC30S16GAWMy16B9DLPpdJKAQ==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    focus-lock "^0.9.1"
+    prop-types "^15.6.2"
+    react-clientside-effect "^1.2.5"
+    use-callback-ref "^1.2.5"
+    use-sidecar "^1.0.5"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5574,6 +6421,25 @@ react-refresh@^0.10.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
   integrity sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==
 
+react-remove-scroll-bar@^2.1.0:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.1.tgz#e0af6126621083a5064591d367291a81b2d107f5"
+  integrity sha512-K7XZySEzOHMTq7dDwcHsZA6Y7/1uX5RsWhRXVYv8rdh+y9Qz2nMwl9RX/Mwnj/j7JstCGmxyfyC0zbVGXYh3mA==
+  dependencies:
+    react-remove-scroll-bar "^2.1.0"
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+    use-callback-ref "^1.2.3"
+    use-sidecar "^1.0.1"
+
 react-router-dom@^5.3.0:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.3.tgz#8779fc28e6691d07afcaf98406d3812fe6f11199"
@@ -5615,6 +6481,15 @@ react-string-replace@^0.4.1:
   dependencies:
     lodash "^4.17.4"
 
+react-style-singleton@^2.1.0, react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-transition-group@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
@@ -5678,6 +6553,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.13.10:
+  version "0.13.10"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
+  integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -6123,6 +7003,22 @@ style-loader@^2.0.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
+style-value-types@5.1.2, style-value-types@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.1.2.tgz#6be66b237bd546048a764883528072ed95713b62"
+  integrity sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "2.4.0"
+
 styled-components@^5.3.3:
   version "5.3.5"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
@@ -6288,6 +7184,11 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
   integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
 
+tiny-invariant@^1.0.6:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
+  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
+
 tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
@@ -6305,6 +7206,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
@@ -6315,16 +7221,16 @@ totalist@^1.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
   integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
 
-tslib@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
-tslib@^2.0.3, tslib@^2.1.0:
+tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
   integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
+tslib@^1.0.0, tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
 tsutils@2.27.2:
   version "2.27.2"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.27.2.tgz#60ba88a23d6f785ec4b89c6e8179cac9b431f1c7"
@@ -6439,6 +7345,21 @@ url-join@^4.0.1:
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
   integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
 
+use-callback-ref@^1.2.3, use-callback-ref@^1.2.5:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
+use-sidecar@^1.0.1, use-sidecar@^1.0.5:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -6483,6 +7404,13 @@ walk@2.3.15:
   dependencies:
     foreachasync "^3.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@^2.3.1:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"